Yup, ’fraid so, but this one’s different… It combines years of my best dev tips, tricks and practices in one handy file.
Version 3.1 is an alpha update. Please report any bugs as soon as you discover them so I can fix them as quickly as possible.
inuit.css now has a custom grid system builder for creating fixed or fluid grid system igloos. Give it a try
inuit.css is built to work on smaller screens (such as tablets) and tiny screens (such as phones) straight out of the box with minimal effort.
inuit.css is a very stripped back framework designed to be built upon by you… no undoing things, and the minimum predefined styles.
.end…Most frameworks require that you apply class="end" to the last grid in a row in order to remove its margin-right and stop things breaking, thus:
<div class="grids">
<div class="grid-4">
</div>
<div class="grid-8">
</div>
<div class="grid-4 end">
</div>
</div>Not with inuit.css. I’ve put a little system in place where, instead of margin-right:20px;, the grid items have a margin-left:20px; applied. This pushes them all a little too far across but doesn’t break if you put them in a container that is 20px too wide. Then, once all that’s happened you pull the container back by 20px. If none of that makes sense, just look at the code. No more .end.
inuit.css has some little typographical niceties built into it from the outset. It also has a typographical scale and a (loose) baseline to get you well on your way.
inuit.css has basic support for new HTML5 elements. If you wish to use them you’ll need to add the shim yourself; inuit.css doesn’t make those decisions for you…
You may have noticed I said inuit.css is set to a loose baseline. That’s because you need to know when enough is enough. Too many developers waste time and money trying to wrestle code into doing things it just isn’t meant to. inuit.css sets sensible boundaries whilst staying useful and robust…
inuit.css’ main features are fully supported even in IE6. It does however utilise a lot of progressive stuff that IEx users won’t see, but that’s okay!
My main gripe with most CSS frameworks is their lack of flexibility. inuit.css makes very few decisions for you, leaving you with total control.
An igloo is simply a plugin for inuit.css which extends the core framework to add more specific functionality.
Include an igloo in the page using a <link /> element. This <link /> appears after the <link /> which includes inuit.css, eg:
<link rel="stylesheet" href="/css/inuit.css" />
<link rel="stylesheet" href="/css/annotate.inuit.css" />An igloo to quickly create a breadcrumb trail navigation from one <ol>.
Make the grid system work fully in IE6 by simply including this igloo.
Create a simple, pure CSS dropdown menu out of a set of nested lists.
Run a twelve column layout with inuit.css instead of the default 16 column system.
Easily annotate the HTML5 <figure> element using this simple plugin.
Transform a simple list into a series of comma delimited keywords with one class.
Centre a navigation menu in a simliar fashion to text-align:center;.
Special thanks to Bryan James, Dan Bentley and Suzanna Haworth. Suze accidentally gave me the idea for the name, Bryan provided the super-awesome, cute-as-hell character and logo and Dan just put up with me wittering on about it all, as he tends to.
inuit.css was a fairly large undertaking which I am giving away for free. I’ll provide support where I can but if you do have any questions or require support please tweet at me before you try mailing. This means I can normally respond faster and it doesn’t make my inbox look scary. Thanks!
