Components

Navigational elements

Pagination

Adding the class .pagination to a list container with the <.nav> class also applied creates the pagination layout. Also use the following classes:


						pagination__first
						pagination__last
						pagination__prev
						pagination__next

on the appropriate elements in your list.

(Note: in the example below, the class .active is being applied to the page 5 list item to demonstrate that state, which displays a blue border.)

					<ol class="nav pagination">

					  <li class="pagination__first">First</li>

					  <li class="pagination__prev">Previous</li>

					  <li><a href=/page/1>1</a></li>

					  <li><a href=/page/2>2</a></li>

					  <li><a href=/page/3>3</a></li>

					  <li><a href=/page/4>4</a></li>

					  <li class="active"><a href=/page/5>5</a></li>

					  <li class="pagination__next"><a href=/page/next>Next</a></li>

					  <li class="pagination__last"><a href=/page/last>Last</a></li>

					</ol>

First
Previous
1
2
3
4
5
Next
Last

Content dividers

feature boxes, shaded boxes, rules

Modals

ex. hijack light box

Forms

Below are examples of different configurations of form elements. Text-based inputs are 100% wide by default, so they can grow or shrink automatically with the available space.

The markup for these forms is very simple and straightforward; I'm not doing anything wacky with element order or nesting that the styling would depend on. <label> elements come before <input> elements, unless that doesn't make sense (for example, checkbox labels come after their inputs in the markup).

Adding the class .callout--form to the <form> element gives it that nice warm gray background and border, plus a little padding.

Form elements: examples

Inline form example

Adding the class .form--inline to the <form> element lays out all contained elements inline, with some comfy padding.

Horizontal form example

Adding the class .form--horiz to the <form> element creates this right-aligned label layout.

Input states (focus, disabled, validate/error)

You can use the classes .error, .success, and .disabled to style the corresponding input elements. (Submit inputs get styled as disabled by adding the class .btn--inactive.)

					<input id="errorText" type="text" class="error">

Images

In InuitCSS, images are set to be fluid (i.e. width: 100%;) by default. To set an image to be non-fluid, specify width and height attributes in the markup.

This is a simple image element, with the class .img--outline applied to give it a soft outline.

The image-specific helper classes .img--left and .img--right exist in order to float an image left or right within a body of text:

					<p><img class="img--outline img--left" src="../img/demo/photo_Computers.png" alt="computers in the library" width="200px">Call me Ishmael....


					<p><img class="img--outline img--right" src="../img/demo/photo_Computers.png" alt="computers in the library" width="200px">Call me Ishmael....

computers in the library Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.

computers in the library It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off—then, I account it high time to get to sea as soon as I can.

Here is a lovely NYPL employee, showing both her work pride and her guns.

Here's an example of <figure> and <figcaption>.

(Note: <figure> and <figcaption> are only used for true captions, not just any old picture with text next to it.)

Thumbnails

Adding the class .thumbnails to a container of <img> elements lays out 100x100px images.

Icons

We use a custom export of Icomoon's proprietary icons, which are available for use under the GNU General Public License. Included as part of the icon set are two icons of the "lion mark" (just the lion part) logo. (More on how to use those further on in the guide!)

This is the current set, which is handy reference for choosing icons.

How to use the icons

Class name

					<p class="icon-cog">This is some text</p>

This is some text

Data-icon attribute

					<p aria-hidden="true" data-icon="&#xf013;">This is also some text</p>

Sizes

If you simply apply either an icon class or a data-icon attribute to an element, the icon that is attached will render at the same font size as its containing element. You can add font size classes to any element to affect the size of the text.

					<ul class="nav grid__item four-fifths">

					  <li class="zeta icon-cog">List item here</li>

					  <li class="episilon icon-bookmark">Another item here</li>

					  <li class="gamma icon-book">Last one</li>

					</ul>

List item here
Another item here
Last one

You can combine 2 elements (such as a span and a paragraph), one containing the icon and one containing some content, and give each a different font size class. You can also give them different color classes (see color section for class names).

					<span class="giga blueText" aria-hidden="true" data-icon="&#xe61d;"></span>
					<p class="grid__item four-eighths gamma">This large icon illustrates this chunk of content.</p>

The large icon illustrates this chunk of content.

The logo icon

This is the logo (without the "New York Public Library" text, it's referred to as the "lion mark"), conveniently available as part of our icon font! Because it's an icon font, changing the color of the lion mark is as easy as applying a text color.

See? All I did was change the color of the text of the element with the icon. Now it's blue!

We also have a version of the lion mark in reverse. Here it is, no styling applied.

But remember, what you see here is totally wrong. Bad, wrong, no-no. Never use the lion mark with black/dark fills. The thing to remember is: the fill is always lighter than the background!

The trick is to apply a color to the reverse version of the lion mark that is lighter than the background it sits on. See?