Introduction to inuitcss: A Different Kind of CSS FrameworkBy Reggie Dawson
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?
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.
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:
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
Trumps: Helper classes and overrides
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
line-height that will be used across the rest of the modules.
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).
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
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.
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.