inuit.css utilises a fluid and nestable grid system. It uses proportions instead of columns for its grid elements, and is fully luid with fixed-width gutters.

Using inuit.css’ grid system is super simple stuff! Each set of grids comprises of a wrapper to place the grid items in, and then the grid items themselves. The syntax looks like this:

1

2

3

4

Responsiveness and Breakpoints

Our device breakpoints are defined in _vars.scss and inuit.css gives us media queries which allow us to have our grids behave in certain ways at our custom widths.

The widths are loosely based on devices, and are tied to the following breakpoints:

  • palm for handheld devices.
  • lap for tablets and netbooks and the like.
  • lap-and-up for anything larger than a handheld device.
  • portable for both of the above.
  • desk for anything big enough to be deemed stationary.

These states give us more human-formatted classes such as .palm-one-half or .lap-two-fifths and so on. This means that, if we take the following:

Then this grid item will have three different states. Its normal (in this case ‘mobile first’) state it will be full width. When it is on a ‘lap’ device it will occupy half of the available width and on a stationary ‘desk’ device it will take up a quarter. These classes can be combined to make all manner of custom layouts!

Rules

With grid systems there are a few rules you need to stick to. The main one is do not add any other styling to a grid item ever.

You should never apply any styling whatsoever to a grid item; they are for structural purposes only. Furthermore, you should never, ever, ever apply new box-model rules to a grid item under any circumstances, be it inuitCSS or something else.

Notes & Pointers

As above, inuitCSS’ grid system doesn’t work on the concept of columns, but on the concept of proportions. In this age of responsive design, fluidity and device uncertainty, it makes little sense to build grid systems to finite and absolute numbers like ‘twelve columns’. It is much friendlier and more sensible to think of fluid grids in terms of fractions; one half, two thirds, five eighths and so on.

As such, inuitCSS’ _widths.scss is full of classes like these, making it really nice and easy to rapidly build grid systems by thinking in human-format terms. It also allows for nesting; .span-6 might be width:50% in a twelve column grid system, but if you were to put that .span-6 in a .span-10 you wouldn’t get quite what you expect. inuitCSS’ grids are friendly and nestable!