Your content container (or any container that will contain elements in the grid) gets a class of .grid. Each element that you want to adhere to the grid system gets a class of .grid__item, which sets up, among other things, those elements as inline.
Inuit's grid system is not really a traditional grid; it's based on proportions rather than columns. (See more at csswizardry-grids and CSS Wizardry.) For example, if you want an element to take up half of its container, give that element the class .one-half. This way, you don't have to remember the number of columns in your grid!
You can also combine these proportion classes with device contexts to define at which breakpoint you’d like an element to be a certain size:
<div class="grid__item one-quarter lap-one-half palm-one-whole"> ... </div>
Inuit's grid system relies on the inline setting to avoid the usual "float" hack. This means you can use text-level attributes for easier positioning. One caveat: there's a bug in the whitespace attribute, which means you need to comment out the space in the code between .grid__item elements. Kind of a pain? sure, but less hacky. And we at NYPL do not play hackysacks.
<div class="grid">
<div class="grid__item one-third">
<p>One third grid</p>
</div><!--
--><div class="grid__item two-thirds">
<p>Two thirds grid</p>
</div><!--
--><div class="grid__item one-half">
<p>One half grid</p>
</div><!--
--><div class="grid__item one-quarter">
<p>One quarter grid</p>
</div><!--
--><div class="grid__item one-quarter">
<p>One quarter grid</p>
</div>
</div>
It's possible to nest grid items; d11n on this is coming pending some testing of how nesting .grid__item items is affected by the left margin setting.
The following page of design chunks represents NYPLBase's current pattern library. This collection will be continually refined as patterns emerge and solidify.
The following demos are prototypes, built with Base, in various states of polish. They are all linked from my internal "sandbox" development server (i.e. you must be behind the NYPL firewall to view them.). For the time being, they'll stay that way, linked here for reference; in the future a finished version of each demo will get migrated to the same server that houses the style guide.
The idea is each of these demos represents a certain kind of layout pattern: some layouts serve singular content (like a blog post), some present a variety of content chunks (like a landing page), some present an action to take (like a form). In the future, I'll offer the finished versions here as "templates," from which you can grab and use the markup appropriate for your content type.