Introduction to inuitcss: A Different Kind of CSS Framework

Share this article

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 DawsonReggie Dawson
View Author

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.

css frameworkscss librariescss modulesLouisL
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form