/inuit.css

Powerful, scalable, Sass-based, BEM, OOCSS framework.

Primary LanguageShell

inuit.css

inuit.css is a powerful little framework designed for serious developers.

It is a Sass based, Object Oriented framework that is full of objects and abstractions. inuit.css provides little-to-no design which means no undoing things, no deleting CSS and no adhering to other peoples’ design decisions.

inuit.css is built on a BEM-style naming convention and honed based on work done by Nicolas Gallagher.

inuit.css is ideally suited to designers who want to focus on the creative and not code, and developers who understand the need for abstraction and an OO approach.

inuit.css gives you design patterns, not design decisions. It features nestable, fluid grids; a double-stranded heading hierarchy; sprites; buttons and a lot, lot more.

Use inuit.css if:

  • You need a powerful library of objects and abstractions.
  • You understand/appreciate the value of OO code and the need for scalability and reuse.
  • You are a confident/competent developer comfortable with OOCSS and Sass, as well as familiarity with OO principles in general.

Do not use inuit.css if:

  • You need a framework that supplies design (I’d recommend Bootstrap for that).

Browser support

inuit.css is a modern framework for modern browsers. It takes advantage of normalize.css and global box-sizing:border-box; (optional). As such, inuit.css is intended for IE8 and above only. The last release to support IE7 was v4.1.5.

The developer

There are a million-and-one different CSS frameworks out there so this rather cringeworthy section is an attempt to validate inuit.css and give it some credibility…

I am Harry Roberts, I am a 22 year old developer and front-end architect from the UK. I work as a Senior UI Developer for BSkyB where it is my job to build scalable front-ends, write internally used CSS frameworks and libraries, and to architect CSS and front-end builds.

I write, tweet and speak about OOCSS, scalable CSS, maintainability, working in large teams, CSS performance, CSS architecture and a whole lot more.

inuit.css is the result of years of my specialism in CSS (as CSS is all I do). It is a collection of design patterns, objects, and abstractions that have been refined and bulletproofed over hours of development across an array of projects of varying sizes. inuit.css is the result of hundreds of hours of work all condensed into one powerful little framework.

Installation

Requires Sass 3.2

Watch An introduction to inuit.css screencast

inuit.css is incredibly easy to get up and running (provided you’re all set for Sass). Simply download the latest version of inuit.css from right here on GitHub, unpack the zip file, rename your-project.scss to whatever your project is called and then watch that file.

You can watch the file by cding into the directory that houses the .scss and running the following:

sass --watch [your-project].scss:[your-project].min.css --style compressed

…where [your-project] is the name you have chosen for your build.

Alternatively you can modify watch.sh to reflect the name of your project and simply run:

sh watch.sh

…from the command line.

That’s it, your project is now set up on inuit.css.

To begin adding your styles on top of inuit.css just begin including things in [your-project].scss after you’ve called in your variables and the inuit.css framework.

If there are any objects and abstractions you don’t use in your project, it is advisable that you comment out their inclusion in inuit.scss. For example, if your project doesn’t require any pagination, text columns or flyouts, you’d have:

   @import "partials/objects/grids";
   @import "partials/objects/flexbox";
// @import "partials/objects/columns";
   @import "partials/objects/nav";
// @import "partials/objects/pagination";
   @import "partials/objects/media";
   @import "partials/objects/island";
   @import "partials/objects/block-list";
   @import "partials/objects/matrix";
   @import "partials/objects/split";
   @import "partials/objects/this-or-this";
   @import "partials/objects/complex-link";
// @import "partials/objects/flyout";
   @import "partials/objects/sprite";
   @import "partials/objects/icon-text";
   @import "partials/objects/buttons";
   @import "partials/objects/lozenges";
   @import "partials/objects/greybox";

This ensures that you aren’t packaging more than you need to.

Footprint

inuit.css is tiny. The full framework – including debug mode – once minified and gzipped weighs less than 4.8kB

It is essential to compile to a minified file because inuit.css is packed full of comments and whitespace; so much so that it would be detrimental to your website’s performance to serve the unminified version.

Documentation

There are no official docs for inuit.css because the code is the documentation. Everything is heavily commented with example HTML. If you struggle with anything please tweet at @inuitcss and/or open an issue and I’ll try help out and use your feedback to improve the documentation.

Demos

Although there are no docs as such, there is a dedicated inuit.css jsFiddle account which houses plenty of demos of various aspects of the framework.

Development

You can keep up-to-date with upcoming features, suggestions and fixes by looking at the inuit.css Trello board.

Looking for a little LESS?

Peter Wilson is maintaining a LESS port of inuit.css: check the GitHub repo.

Test-drive

If you would like to try inuit.css out before you download anything there is a compiled version on jsFiddle that you are encouraged to fork and play with. Refer back to the source here on GitHub for documentation.

As used by

Using inuit.css?

If you use inuit.css on a live project then tweet at me and I’ll send you some inuit.css stickers!

Support inuit.css

If you use and/or like inuit.css, perhaps you might consider supporting it through Gumroad.

Credits

inuit.css, although produced and maintained by one developer, could not have been possible without inspiration and work from an array of other people.

And probably more…


inuit.css is the most powerful little framework out there, and it’s ready to go!