Introduction to inuitcss: A Different Kind of CSS Framework
Key Takeaways
- inuitcss is a Sass-based framework that encourages a more modular architecture, allowing developers to piece together their own architecture, rather than having to download large stylesheets with features that won’t be used.
- Unlike other frameworks, inuitcss does not provide many UI elements, instead encouraging developers to make their own design choices. It’s easy to install using package managers like Bower or NPM, and its components must be imported in a specific order due to its modular nature.
- While fully customizable, inuitcss should not have its underlying code directly edited; instead, developers should create an override file or pass in variables before the file is imported. The framework is still a work in progress, but its concept is ideal for those who need a module or two without the bloated rulesets that other frameworks offer.
In the last few years there has been a rise in the use of front-end frameworks. These tools, such as Bootstrap and Foundation, allow developers create web sites and apps quickly. Instead of needing to style up your own buttons and nav bars these frameworks do all of the heavy lifting for you.
The problem with these frameworks is that it’s pretty common for developers to download their huge stylesheets, even though the majority of the features of the framework aren’t going to be used. But wouldn’t it be great if we used a framework that assumes very little about our design and encouraged a more modular architecture?
Introducing inuitcss
inuitcss is a Sass-based framework created by Harry Roberts . The beauty of inuitcss is that it’s what you make of it. Instead of a central code base inuitcss consists of a set of independent modules. Instead of including a bunch of modules that we will never use, inuitCSS lets us piece together our own architecture.
Unlike other frameworks, inuitcss does not provide you with many UI elements. Often when using a framework we are taking existing components and tweaking them to our liking. Inuitcss rejects this approach in favor of allowing you to make your own design choices.
Installing inuitcss
We can download and import the modules that make up inuitcss manually, but the simpler option is to use Bower or NPM. Bower and npm are package managers that manage dependencies and scaffold projects for you. Since both are based on Node.js you’ll need to install Node.js first.
We can use Bower to create a new project with all intuitcss dependencies installed. We can also use it to initialize an existing project.
Installing and Using Bower
After you install Node.js, open up a command prompt and type:
npm install -g bower
That simple and you have installed Bower. If you have an existing project you can now use Bower to add inuitcss. Navigate to your project folder and run:
bower init
This creates a bower_components
directory. To manually import individual modules, use the following command:
bower install --save inuit-(module-name)
For example, to import the inuitcss layout module we would use:
bower install --save inuit-layout
This installs the module in the bower_components
directory. As an alternative, we can use the inuitcss starter kit to scaffold a new project or add to our existing project.
bower install --save inuit-starter-kit
This will install the basic dependencies for an inuitcss project instead of manually having to install them one by one.
Setup and Import order
After setting up the starter kit, we will need to import the components. The import order is crucial and needs to be followed. As you know, if we import components that require variables that have not yet been imported, our Sass will give us errors. Import the following files from the starter kit in this order (or install the following modules manually).
@import "bower_components/inuit-defaults/settings.defaults";
@import "bower_components/inuit-functions/tools.functions";
@import "bower_components/inuit-mixins/tools.mixins";
@import "bower_components/inuit-normalize/generic.normalize";
@import "bower_components/inuit-box-sizing/generic.box-sizing";
@import "bower_components/inuit-page/base.page";
Due to the modular nature of inuitcss it is important you piece things together in the right order.
Settings: Global variables, site-wide settings, config
Tools: Site-wide mixins and functions
Generic: Far reaching rulesets
Base: Unclassed HTML elements
Objects: Objects, abstractions, and design patterns
Components: UI
Trumps: Helper classes and overrides
Core Functionality
Even though inuitcss is modular in design, there are still some required modules.
The first module that is required is the settings.defaults
. This includes settings for such things as font-size
and line-height
that will be used across the rest of the modules.
The tools.functions
module contains math helper functions. These functions are used to create size variants of objects.
The last required module is tools.mixins
. This has a font-sizing mixin that is used in certain type-based modules.
Beyond that, inuitcss doesn’t have many other dependencies. If any modules do have dependencies they will be managed by Bower (which is why we used Bower).
Modifying inuitcss
Even though inuitcss is fully customizable, we should never directly edit the underlying code of the framework. Normally we would create an override file of our own and manipulate the settings and variables of the framework. Although this is acceptable, Harry suggests the alternate approach of passing in variables right before the file is imported.
Remember I mentioned the settings-defaults
file with its font-size
and line-height
variables. If we wanted to change them from the default we would pass these variables in before the import.
$inuit-base-font-size: 12px;
$inuit-base-line-height: 18px;
@import "bower_components/inuit-defaults/settings.defaults";
We are able to pass in variables for all modules like this. We can also create an override file, but if you do this, make sure to import it first.
Modules and Components
Any variants of inuitcss modules are turned off by default. For example the inuitcss button object has different variants based on size. These are turned off by default. Enabling them is as simple as turning them on before the import statement for the module.
$inuit-enable-btn--large: true;
@import "bower_components/inuit-buttons/objects.buttons";
One of the main things to understand about inuitcss is that it provides nothing beyond some buttons in the way of UI components. Harry has left the individual components up to you. If you are looking for a framework with ready-made UI components, then inuitcss is not for you.
Conclusion
inuitcss is a different kind of framework that leaves the design choices up to you. As opposed to a large framework with many rules that you will never use, inuitcss truly lets you pick and choose what you want to use. The framework is useful in that it gets out of your way and lets you get to work.
inuitcss is not for everyone. As a library, it’s still a work in progress, but the overall concept is quite promising and is perfect when you need a module or two but don’t need the bloated rulesets that other frameworks offer.
Frequently Asked Questions about InuitCSS
What makes InuitCSS different from other CSS frameworks?
InuitCSS is a unique CSS framework because it is an “ITCSS” (Inverted Triangle CSS) based framework. This means it is designed to be scalable and maintainable, making it ideal for large and complex projects. Unlike other CSS frameworks, InuitCSS does not provide a UI layer. Instead, it provides a solid architectural baseline upon which to build your project’s UI. It’s also highly customizable, allowing developers to include only the modules they need, which can significantly reduce the size of the final CSS file.
How can I start using InuitCSS in my project?
To start using InuitCSS, you need to install it via npm. Once installed, you can import the InuitCSS modules you need into your main stylesheet. Remember, one of the key benefits of InuitCSS is that you only need to include the modules you’re going to use, which helps keep your CSS lightweight and efficient.
Can I use InuitCSS with other CSS methodologies like BEM or SMACSS?
Yes, InuitCSS is designed to work well with other CSS methodologies. It uses a version of the BEM (Block, Element, Modifier) naming convention, making it compatible with BEM or SMACSS projects. This flexibility allows developers to use the best parts of each methodology in their projects.
Is InuitCSS suitable for beginners?
InuitCSS might be a bit challenging for beginners because it doesn’t provide a ready-to-use UI like some other CSS frameworks. However, it’s an excellent tool for learning more about CSS architecture and how to write scalable and maintainable CSS. It’s well-documented and has a supportive community, which can be very helpful for beginners.
How does InuitCSS help with CSS specificity issues?
InuitCSS uses the ITCSS architecture, which helps manage CSS specificity by layering CSS rules from generic to explicit. This approach helps prevent specificity wars and makes the CSS easier to manage and understand.
Can I use InuitCSS for small projects or is it only for large projects?
While InuitCSS is designed with scalability in mind, it’s also suitable for smaller projects. Its modular nature means you can include only the parts you need, making it as lightweight as necessary for your project.
How can I contribute to the InuitCSS project?
InuitCSS is an open-source project hosted on GitHub. If you want to contribute, you can fork the repository, make your changes, and then submit a pull request. Before contributing, it’s a good idea to read the project’s contribution guidelines.
Does InuitCSS support responsive design?
Yes, InuitCSS supports responsive design. It includes several utilities for responsive design, including a responsive grid system and responsive spacing utilities.
What browsers does InuitCSS support?
InuitCSS aims to support all modern browsers. However, as with any CSS framework, some features may not be fully supported in older or less common browsers. It’s always a good idea to test your project in the browsers your audience uses.
Is there a community or forum for InuitCSS where I can ask questions or seek help?
Yes, there is a community of developers who use InuitCSS. You can ask questions or seek help on the project’s GitHub page. Additionally, you can follow the project on Twitter for updates and news.
Reggie is a longtime Network Admin who has finally seen the error of his ways and has come over to the darkside: development. He likes to hack together web projects in his spare time using Angular, Compass, Sass, Bootstrap, or Foundation.