InuitCSS uses the BEM method of naming its classes. BEM stands for Block Element Modifier, and it works like this:
".block__element--modifier"
in which "block" is the name of the chunk you're working on, "element" is the name of the smaller piece of the chunk, and "modifier" is a descriptor. For example, the class name .nav__item would refer to an item contained in the nav chunk (or "block"). .nav__item--last would refer to the last nav item in the list. You can use just the item and descriptor parts of the convention too, as in .form--horiz.
The exception to this naming convention in Base is the color classes, which use intercaps (as in .blueLight).
First, give the body a class of .grid--center (this will work with some other classes to center its contained elements):
<body class="grid--center">
Then start with sections (which have a set max-width so that the content doesn't stretch unreasonably).
<section>
</section>
Each section is given a class of .primary, .secondary, or .tertiary, to designate what priority of content they contain. (Sections contain .grid__items, so those section class names also extend the class .grid.)
<section class="primary">
</section>
To build a chunk of content, start with a div and the class name .chunk (.chunk extends the class .grid__item):
<section class="primary">
<div class="chunk">
</div>
</section>
You can then add grid classes to tell the chunk how to behave in different device contexts:
<section class="primary">
<div class="chunk one-whole lap-and-up-one-half desk-one-third">
</div>
</section>
Your section doesn't have to contain divs; maybe the more appropriate containers are article and sidebar, in which case your code might start like this:
<section class="primary">
<article class="grid__item one-whole desk-two-thirds"></article>
<sidebar class="grid__item one-whole desk-one-third"></sidebar>
</section>
Elements within the chunk can respond to the context too (don't forget to comment out the code whitespace between elements you want to align in the grid system):
<section class="primary">
<div class="chunk one-whole lap-and-up-one-half desk-one-third">
<img class="one-whole">
<h2 class="grid__item one-whole desk-one-half"></h2><!--
--><p class="grid__item one-whole desk-one-half"></p>
</div>
</section>
Keep building the structure of the page in this way.
<section class="primary">
<div class="chunk one-whole lap-and-up-one-half desk-one-third">
<img class="one-whole">
<h2 class="grid__item one-whole desk-one-half"></h2><!--
--><p class="grid__item one-whole desk-one-half"></p>
</div><!--
--><div class="chunk one-whole lap-and-up-one-half desk-one-third">
<img class="one-whole">
<h2 class="grid__item one-whole desk-one-half"></h2><!--
--><p class="grid__item one-whole desk-one-half"></p>
</div><!--
--><div class="chunk one-whole lap-and-up-one-half desk-one-third">
<img class="one-whole">
<h2 class="grid__item one-whole desk-one-half"></h2><!--
--><p class="grid__item one-whole desk-one-half"></p>
</div>
</section>
Inuit recommends to only use a helper class if an element/component doesn’t already have a class to which you could apply this styling, e.g. if you need to float .main-nav left then add float:left; to that ruleset as opposed to adding the .float--left class to the markup. Also note that many of these classes are declared !important because they are intended to override other selectors.
.img--right
.img--left
.img--center
.cf
You can use this class in the markup, but Inuit recommends extending it with Sass to avoid over-usage.
.accessibility
.visuallyhidden
Both these classes do the same thing, which is to hide the element from view but not from screen readers.
.float--right
.float--left
.float--none
.text--left
.text--center
.text--right
.weight--light
.weight--normal
.weight--semibold
.push
.push--top
.push--right
.push--bottom
.push--left
.push--ends
.push--sides
.push-half
.push-half--top
.push-half--right
.push-half--bottom
.push-half--left
.push-half--ends
.push-half--sides
.flush
.flush--top
.flush--right
.flush--bottom
.flush--left
.flush--ends
.flush--sides
.soft
.soft--top
.soft--right
.soft--bottom
.soft--left
.soft--ends
.soft--sides
.soft-half
.soft-half--top
.soft-half--right
.soft-half--bottom
.soft-half--left
.soft-half--ends
.soft-half--sides
.hard
.hard--top
.hard--right
.hard--bottom
.hard--left
.hard--ends
.hard--sides
Prepending the width classes with either pull-- or push-- will move the element with that class to the left (pull) or right(push).
<div class="pull--one-third">This element is moved over</div>
You can use the following breakpoints:
palm
tablet
tablet-and-up
lap
lap-and-up
portable
desk
desk-wide
and the following @include in your Sass to take advantage of Inuit's media query mixin:
@include media-query(palm){ [styles here] }
If you're working with the Sass, you can take advantage of variables, media queries, and some handy mixins.
Create a fully formed type style (sizing and vertical rhythm) by passing in a single value, e.g.:
@include font-size(10px);
Create vendor-prefixed CSS in one go:
@include vendor(border-radius, 4px);
Create CSS keyframe animations for all vendors in one go:
.foo{
@include vendor(animation, shrink 3s);
}
@include keyframe(shrink){
from{
font-size:5em;
}
}