Originally published at: http://www.sitepoint.com/introduction-inuitcss-different-kind-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 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.
.