inuit.css is a Sass based, Object Oriented framework that provides objects and abstractions for frontend development projects. inuit.css provides little-to-no design, and is built on a BEM-style naming convention.

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

Browser support

inuit.css is a modern framework for modern browsers. It takes advantage of normalize.css and global box-sizing:border-box;. As such, inuit.css is intended for IE8 and above only.

Kitchen sink

You can find a visual guide to all what inuitcss provides for example here, but the source is well documented and contains links to maintained example jsfiddles so it's worth checking out as well.

How inuit.css works

inuit.css works in ‘layers’, not dissimilar to SMACSS. The principle of inuit.css’ architecture is levels of extension; each layer of code extends the layer below.

We start in inuit.css/generic/, with our most generic, low-level styling, things like a clearfix, normalize.css, our reset and any shared styling like margins (for vertical rythmn).

On top of that we lay our base styles, found in inuit.css/base/; these are things like unclassed headings, what our basic forms look like, how simple tables appear. These are all design-free HTML elements that you can extend with your own styles later on.

Next up, in inuit.css/objects/, we have our objects and abstractions; these are all scaffolding type constructs that hold no styling, but do heavy lifting. In here we have things like the media object, the nav abstraction and other unstyled objects that you can use to construct design patterns without design (that bit is left up to you).

Finally we have our helper classes (though these live back in the inuit.css/generic/ directory); these are things like margin helper classes, width classes and other ‘style trumps’ which need to take precedence over any things that have gone before them. These classes are used to modify your objects and abstractions on a case-by-case basis.

Further Reading

inuit.css on Github

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