Styleguide

Breakpoints

Colors

 
purple
 
dark-purple
 
pink
 
green
 
orange

Icons

administrative
assistance
at
blog
building
calendar-checked
call
carpenter-ruler
cart
checkmark
circle
clock
cog
cup
dish
Created by Icon Fairfrom the Noun Project
drag
emergency-call
encounter
external-link
facebook-f
facebook
file
france
hear
home-sensor
home
home2
house-hands
letter-i
lock
mailman
man-child
menu
moon
motion-sensor
next
old-mobile-phone
phone
piggy-bank
pin
previous
remove
rubber-ring
shower
signal-bars
sleep
smartphone
sms
speech-bubbles
star--empty
star--full
star--half
sweeper
twitter
two-people
visual
vitalliance-logo
youtube
1
<%= render partial: "icon", locals: { name: "<name>" } %>

Images

Bare

Cat
1
<img>

With caption

Cat
Caption
1
2
3
4
<figure>
  <img>
  <figcaption></figcaption>
</figure>

Typography

Fonts

Roboto font by Google

Vestibulum posuere ornare mollis. Nullam varius porta fringilla. Mauris consectetur tempor mi, a porttitor est rutrum sit amet. Morbi pulvinar ligula quis felis sollicitudin vehicula. Vivamus feugiat a neque et imperdiet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Nullam vitae erat mollis, ultricies lectus in, sodales dui. Donec efficitur malesuada ante eget varius. Nam congue facilisis erat ut fringilla. Nullam at semper sapien. Morbi nec mollis lacus.

Maecenas ut enim ultricies, euismod lacus a, lacinia nunc

Sed tristique elit nulla, eget sagittis velit posuere at. Nullam venenatis quam eu arcu hendrerit, vel rutrum sapien interdum.

Quisque elementum odio et commodo tristique

Maecenas interdum libero quis arcu mattis, sit amet faucibus metus consectetur. Donec scelerisque consectetur tortor, quis cursus justo imperdiet sed. Nulla quis hendrerit nunc. Aliquam at neque vel metus viverra fermentum.

Headers

Level 1

Level 2

Level 3

Level 4

Level 5
Level 6
1
2
3
4
5
6
<h1>Level 1</h1>
<h2>Level 2</h2>
<h3>Level 3</h3>
<h4>Level 4</h4>
<h5>Level 5</h5>
<h6>Level 6</h6>

Sizes

Alpha

Beta

Gamma

Delta

Epsilon

Zeta

1
2
3
4
5
6
<p class="u-h1">Alpha</p>
<p class="u-h2">Beta</p>
<p class="u-h3">Gamma</p>
<p class="u-h4">Delta</p>
<p class="u-h5">Epsilon</p>
<p class="u-h6">Zeta</p>

Variants

Shouting in the dark

1
<h2 class="u-uppercase">Shouting in the dark</h2>

Links

Link
Bare link

1
2
<a>Link</a>
<a class="u-link-bare">Bare link</a>

Billboards

Billboard component is a big background image with content over it. On smaller breakpoints the content lies below the full width image.

Use image in different widths for background to reduce page weight.

Content title

Lorem ipsum

Call to action
1
2
3
4
5
6
7
8
<section class="c-billboard c-billboard--tinted">
  <div class="c-billboard__image c-billboard__image--styleguide o-ratio o-ratio--21:9"></div>
  <div class="c-billboard__wrapper">
    <div class="c-billboard__content o-box">
      ...
    </div>
  </div>
</section>

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at fermentum magna, ut lobortis leo. Morbi viverra faucibus interdum. Etiam at dapibus ipsum. Donec efficitur dolor malesuada nunc luctus pulvinar. Author name
1
2
3
4
<blockquote>
  Content
  <cite>Author</cite>
</blockquote>
  1. Home
  2. Category name
  3. Current page
1
2
3
4
5
6
7
<%= render partial: 'application/breadcrumbs', locals: {
  breadcrumbs: [
    { url: root_path, label: "Home" },
    ...
    { label: "Current page" },
  ]
} %>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ol class="o-list-inline c-breadcrumbs">
  <li class="o-list-inline__item c-breadcrumbs__item">
    <a class="c-breadcrumbs__link">
      <span class="c-breadcrumbs__label">Home</span>
    </a>
  </li>
  <li class="o-list-inline__item c-breadcrumbs__item">
    <a class="c-breadcrumbs__link">
      <span class="c-breadcrumbs__label">Category name</span>
    </a>
  </li>
  <li class="o-list-inline__item c-breadcrumbs__item">
    <span class="c-breadcrumbs__label">Current page</span>
  </li>
</ol>

Buttons

Default

1
2
<button class="c-button c-button--primary">Primary</button>
<button class="c-button c-button--secondary">Secondary</button>
1
2
<button class="c-button c-button--primary c-button--small">Small</button>
<button class="c-button c-button--secondary c-button--small">Small</button>
1
2
<button class="c-button c-button--primary c-button--large">Large</button>
<button class="c-button c-button--secondary c-button--large">Large</button>
1
<button class="c-button c-button--primary c-button--stretch">Stretch</button>

Ghost

1
2
<button class="c-button c-button--ghost c-button--primary">Primary</button>
<button class="c-button c-button--ghost c-button--secondary">Secondary</button>

With icon

1
2
3
4
5
6
7
8
9
10
11
12
<button class="c-button c-button--primary c-button--has-icon c-button--large">
  <%= render partial: "icon", locals: { name: "call" } %>
  <span class="c-button__label">Large</span>
</button>
<button class="c-button c-button--primary c-button--has-icon">
  <%= render partial: "icon", locals: { name: "call" } %>
  <span class="c-button__label">Default</span>
</button>
<button class="c-button c-button--secondary c-button--has-icon c-button--small">
  <%= render partial: "icon", locals: { name: "call" } %>
  <span class="c-button__label">Small</span>
</button>

Definitions

Lorem
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at fermentum magna, ut lobortis leo. Morbi viverra faucibus interdum.
Ipsum
Etiam at dapibus ipsum. Donec efficitur dolor malesuada nunc luctus pulvinar.
1
2
3
4
5
6
<dl>
  <dt>First term</dt>
  <dd>Term definition</dd>
  <dt>Second term</dt>
  <dd>Term definition</dd>
</dl>

Flash messages

Flash messages display status information after submitting forms.

Success message.

Notice message.

1
<%= render partial: 'flash_messages' %>
1
2
3
4
5
6
<div class="o-box c-flash-message c-flash-message--success">
  <p>Success message.</p>
</div>
<div class="o-box c-flash-message c-flash-message--notice">
  <p>Notice message.</p>
</div>

Forms

Fieldset legend
Hint to help user
Helpful message error
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<form class="c-form">
  <fieldset class="c-form__fieldset">
    <legend class="c-form__legend u-h4">Fieldset legend</legend>
    <div class="c-form__field u-margin-bottom-small">
      <label class="c-form__label">Field label <span>(optional)</span></label>
      <input type="text" class="string c-form__input c-form__input--stretch">
      <div class="c-form__hint">Hint to help user</div>
    </div>
    <div class="c-form__field u-margin-bottom-small">
      <label class="c-form__label">Field not as wide <span>(optional)</span></label>
      <input type="text" class="string c-form__input">
    </div>
    <div class="c-form__field field_with_errors u-margin-bottom-small">
      <label class="c-form__label">Field with an error</label>
      <input type="text" class="string c-form__input c-form__input--stretch">
      <div class="c-form__error">Helpful message error</div>
    </div>
    <div class="c-form__field u-margin-bottom-small">
      <input type="checkbox" class="c-form__checkbox" id="checkbox_field">
      <label class="c-form__label" for="checkbox_field">Checkbox</label>
    </div>
    <div class="c-form__field u-margin-bottom-small">
      <label class="c-form__label">Textarea</label>
      <textarea class="text c-form__input c-form__input--stretch" rows="5"></textarea>
    </div>
  </fieldset>
  <div class="c-form__actions u-align-center">
    <input type="submit" class="c-button c-button--primary" value="Send form">
  </div>
</form>

Ticked list

  • Included
  • Not included
1
2
3
4
<ul class="c-list-ticks">
  <li class="c-list-ticks__item c-list-ticks__item--tick">
  <li class="c-list-ticks__item c-list-ticks__item--cross">
</ul>

Rounded images

1
2
3
4
5
6
<div class="c-rounded-image c-rounded-image--primary">
<div class="c-rounded-image c-rounded-image--secondary">
<div class="c-rounded-image c-rounded-image--pink">
<div class="c-rounded-image c-rounded-image--turquoise">
<div class="c-rounded-image c-rounded-image--violet">
<div class="c-rounded-image c-rounded-image--green">

Blocks

Block object simply stacks an image on top of some text content.

  • .o-block--flush: remove the space between the stacked image- and text-content.
  • .o-block--[tiny|small|large|huge]: alter the spacing between the stacked image- and text-content.
  • .o-block--[left|right]: align both the image- and text-content, defaults to center.
Cat 200x150

Text-like content goes here.

1
2
3
4
5
6
<div class="o-block">
  <img class="o-block__img" />
  <div class="o-block__body">
    ...
  </div>
</div>

Boxes

The box object simply boxes off content.

  • .o-box--flush: remove all padding from boxes.
  • .o-box--[tiny|small|large|huge]: alter the padding on boxes.
Content
1
2
3
<div class="o-box">
  Content
</div>

Crop

Provide a cropping container in order to display media (usually images) cropped to certain ratios.

  • .o-crop--[null|right|bottom|center]: position the media in different locations within the cropping area.
  • .o-crop--[28:9|21:9|2:1|4:3|16:9|3:2]: create rectangle with chosen ratio.
Content inside a 16:9 rectangle
1
2
3
4
5
<div class="o-crop o-crop--16:9">
  <div class="o-crop__content">
    Content inside a 16:9 rectangle
  </div>
</div>

Flag Object

The flag object is a design pattern similar to the media object, however it utilises `display: table[-cell];` to give us control over the vertical alignments of the text and image.

  • .o-flag--flush: remove the space between the image- and text-content.
  • .o-flag--[tiny|small|large|huge]: alter the spacing between the image- and text-content.
  • .o-flag--reverse: reverse the horizontal rendered order of the image- and text-content.
  • .o-flag--[top|bottom]: vertically align the image- and body-content differently. Defaults to middle.
Cat 100x100

Text-like content goes here.

1
2
3
4
5
6
<div class="o-flag">
  <img class="o-flag__img" />
  <div class="o-flag__body">
    ...
  </div>
</div>

Layout

Don't forget <!-- --> between the layout items.

Available sizes

Foo
Bar
1
2
3
4
<div class="o-layout o-layout--flush">
  <div class="o-layout__item u-1/2">Foo</div><!--
  --><div class="o-layout__item u-1/2">Bar</div>
</div>

Lists

Bare list

  • Item 1
  • Item 2
1
2
3
4
<ul class="o-list-bare">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Inline list

The List-inline object simply displays a list as one horizontal row.

Use <!-- --> between the list items to remove default whitespace.

  • .o-list-inline--delimited: add a character to delimit list items.
  • Item 1
  • Item 2
1
2
3
4
<ul class="o-list-inline o-list-inline--delimited">
  <li class="o-list-inline__item">Item 1</li>
  <li class="o-list-inline__item">Item 2</li>
</ul>

Media Object

The Media object module is inuitcss’ implementation of Nicole Sullivan’s media object—the poster child of OOCSS.

  • .o-media--flush: remove the space between the image- and text-content.
  • .o-media--[tiny|small|large|huge]: alter the spacing between the image- and text-content.
  • .o-media--reverse: reverse the horizontal rendered order of the image- and text-content.
Cat 100x100

Text-like content goes here.

1
2
3
4
5
6
<div class="o-media">
  <img class="o-media__img" />
  <div class="o-media__body">
    ...
  </div>
</div>

Pack

inuitcss’ Pack object simply causes any number of elements pack up horizontally to automatically fill an equal, fluid width of their parent.

  • .o-pack--auto: cause packed items to have an automatically determined, non-equal width.
  • .o-pack--[tiny|small|large|huge]: alter the gutter between pack items.
  • .o-pack--rev: reverse the rendered horizontal order of packed items.
  • .o-pack--[middle|bottom]: align packed items to the middles or bottoms of each other.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1
2
3
4
5
6
7
8
9
10
11
<div class="o-pack">
  <div class="o-pack__item">
    1
  </div>
  <div class="o-pack__item">
    2
  </div>
  <div class="o-pack__item">
    ...
  </div>
</div>

Ratio

Create ratio-bound content blocks, to keep media (e.g. images, videos) in their correct aspect ratios.

  • .o-ratio--[null28:9|21:9|2:1|4:3|16:9|3:2]: create rectangle with chosen ratio, defaults to 1:1 square.
Content inside a 2:1 rectangle
1
2
3
4
5
<div class="o-ratio o-ratio--2:1">
  <div class="o-ratio__content">
    Content inside a 2:1 rectangle
  </div>
</div>

Tables

  • .o-table--fixed: forces all cells within a table to occupy the same width as each other
  • .o-table--[tiny|small|large|huge]: less to more padding inside table cells
Key Value
14 Calvados
50 Manche
61 Orne
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table class="o-table o-table--tiny">
  <thead>
    <tr>
      <th>Key</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>14</td>
      <td>Calvados</td>
    </tr>
    <tr>
      <td>50</td>
      <td>Manche</td>
    </tr>
    <tr>
      <td>61</td>
      <td>Orne</td>
    </tr>
  </tbody>
</table>

Wrappers

Page-level constraining and wrapping elements.

  • .o-wrapper--[tiny|small|large|huge] : control horizontal padding inside wrapper.
default
small
medium
large
1
2
3
4
5
6
7
8
9
10
11
12
<div class="o-wrapper">
    default
  </div>
  <div class="o-wrapper o-wrapper--small">
    small
  </div>
  <div class="o-wrapper o-wrapper--large">
    medium
  </div>
  <div class="o-wrapper o-wrapper--huge">
    large
  </div>

Alignment

  • .u-align-[left|center|right]: align content at the desired position.
  • .u-align-[left|center|right]@breakpoint: align content at the desired position, starting at breakpoint.

Available breakpoints

Left-aligned content
Centered content
Centered content, only after desk breakpoint
Right-aligned content
1
2
3
4
5
6
7
8
9
10
11
12
<div class="u-align-left">
  Left-aligned content
</div>
<div class="u-align-center">
  Centered content
</div>
<div class="u-align-center@desk">
  Centered content, only after <em>desk</em> breakpoint
</div>
<div class="u-align-right">
  Right-aligned content
</div>

Coloring

  • .u-color__primary--[light|dark]: primary color and variants.
  • .u-color__gray--[light|dark]: gray color and variants.
  • .u-color__white: pure white.
  • .u-background-color__primary: primary background color
  • .u-background-color__secondary: secondary background color
  • .u-background-color__[beige|pink|violet|turquoise|green]: background color variants

Primary color, Primary color light, Primary color dark.

Gray color, Gray color light, Gray color dark.

 
 
 
1
2
3
4
5
6
7
8
9
<span class="u-color__primary">Primary color</span>,
<span class="u-color__primary--light">Primary color light</span>,
<span class="u-color__primary--dark">Primary color dark</span>.
<span class="u-color__gray">Gray color</span>,
<span class="u-color__gray--light">Gray color light</span>,
<span class="u-color__gray--dark">Gray color dark</span>.
<div class="u-background-color__primary">
<div class="u-background-color__secondary">
<div class="u-background-color__beige">

Spacing

Margin and padding helper classes.

  • .u-(margin|padding)(empty|top|right|bottom|left)(empty|tiny|small|large|huge|none): margin or padding, applied to all|top|right|bottom|left side, with size variant default|tiny|small|large|huge|none
Content
1
2
3
<div class="u-margin-left u-margin-bottom-small u-padding-large">
  Content
</div>

Positioning

  • .u-fixed: fixed position.
  • .u-fixed@breakpoint: relative position, then fixed position starting at breakpoint.
  • .u-absolute: absolute position.
  • .u-absolute@breakpoint: relative position, then absolute position starting at breakpoint.

Available breakpoints

Visibility

  • .u-hidden-visually: hide only visually, but have it available for screen readers.
  • .u-hidden: don't display.

Widths

  • .u-(1-8)/(1-8): fractional width of the element.
  • .u-x/y@breakpoint: full width, then width applied at breakpoint.

Available breakpoints

.u-1/2@desk
.u-1/2@desk
.u-1/3
.u-1/3
.u-1/3
1
2
3
4
5
6
7
8
9
10
<div class="o-layout o-layout--flush">
  <div class="o-layout__item u-1/2@desk">...</div><!--
  --><div class="o-layout__item u-1/2@desk">...</div>
</div>

<div class="o-layout o-layout--flush">
  <div class="o-layout__item u-1/3">...</div><!--
  --><div class="o-layout__item u-1/3">...</div><!--
  --><div class="o-layout__item u-1/3">...</div>
</div>