Introduction to inuitcss: A Different Kind of CSS Framework

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.