Introduction to inuitcss: A Different Kind of CSS Framework

Originally published at:

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 we are forced to download huge stylesheets and we often aren’t even using the majority of the features of the framework. But wouldn’t it be great if we could pick and choose what modules we wanted to use?

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.

Continue reading this article on SitePoint

“wouldn’t it be great if we could pick and choose what modules we wanted to use?”

Yes, and the frameworks you mentioned allow that.

I’ve been using Inuitcss for almost a year now and that is not what I like in it.
What I prefer is that it does not provide real styles: I mean it does not puts color, sizes, borders, etc. All it provides is meaning or general meaning: a “nav” is a list of elements on the same line. A “breadcrumb” is a list of elements with links seperated by something you decide yourself. etc.
With Bootstrap, if you have your own design you have to override the bootstraps’ styles. With inuit you only add your own styles.
It also provides a convenient grid system (proportionnal) and some handy shortcuts you can use if you need them. It is very light-weight and easy to understand.
It seems that a new version, quite different is in the oven. You can see what it exactly can do in the kitchen

In retrospect, you’re right, so I’m thinking I’ll change the wording of that. But that being said, I don’t think those other frameworks really encourage that kind of modularity. Most people just download Bootstrap and drop it in, whereas something like inuitcss leans much more in the modular direction.

I’m going to edit the wording on that though, thanks for pointing that out. The other comment by McBenny is probably more along the lines of what Reggie was getting at, but I think he was also trying to point out that these other frameworks are kind “drop in and use” with everything already in there. For example, I can see a customizer for Bootstrap but I don’t see anything resembling that for Foundation…? But I haven’t used Foundation so I really don’t know.

Ah, ok, thanks! I had a feeling it was there. Maybe that needs to be made more prominent? Or else I’m just stupid. :smile:
“Download Foundation 5” (blue button popping out)
“Custom Download”

:slight_smile: .

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.