Styleguide

Breakpoints

Colors

Primary color
#9B3C6F
Primary dark
#4C0E2E
Secondary color
#E6C2D5
Beige
#F1ECE5
Gray light
#F0F0F0
Gray lighter
#F3F3F3
Green
#75A950
Green dark
#296300
Green light
#C4F3A2
Turquoise
#009690
Turquoise dark
#004C49
Turquoise light
#ABF3F0
Violet
#5C627D
Violet dark
#2B2E3E
Violet light
#C7D1FD

Icons

administrative
aide-a-domicile
aide-menagere
assistance
assistante-de-vie
at
auxiliaire-de-vie
blog
building
calendar-checked
call
carpenter-ruler
cart
checkmark
circle
clock
cog
cup
dame-de-compagnie
dish
Created by Icon Fairfrom the Noun Project
drag
emergency-call
encounter
external-link
facebook-f
facebook
file
france
garde-de-nuit
hear
home-sensor
home
home2
house-hands
letter-i
lock
mailman
man-child
menu
moon
motion-sensor
mountain-climber
next
old-mobile-phone
partners
personne
phone
piggy-bank
pin
previous
remove
respect
rubber-ring
satisfaction
shower
signal-bars
sleep
smartphone
sms
speech-bubbles
star--empty
star--full
star--half
sweeper
tools
twitter
two-people
va
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

System fonts for fast loading

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

Primary, secondary

144
test

Color variations

Size: small

72

Size: tiny

36
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="c-rounded-image c-rounded-image--primary">
  <span class="c-rounded-image__label">...</span>
<div class="c-rounded-image c-rounded-image--secondary">
  <span class="c-rounded-image__label">...</span>

<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">
<div class="c-rounded-image c-rounded-image--beige">
<div class="c-rounded-image c-rounded-image--white">

<div class="c-rounded-image c-rounded-image--small">

<div class="c-rounded-image c-rounded-image--tiny">

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--[narrow|wide] : control max width.
default
narrow
default
wide
1
2
3
4
5
6
7
8
9
10
11
12
<div class="o-wrapper">
    default
  </div>
  <div class="o-wrapper o-wrapper--narrow">
    small
  </div>
  <div class="o-wrapper">
    default
  </div>
  <div class="o-wrapper o-wrapper--wide">
    wide
  </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>

Border Radius

Round all corners of an element.

  • .u-border-radius: add a round corner, with a globally defined radius.
Content
1
2
3
<div class="u-border-radius">
  Content
</div>

Box Shadow

Drop a shadow below an element.

  • .u-box-shadow--[null|large]: drop a shadow.
Regular shadow
Large shadow
1
2
3
4
5
6
<div class="u-box-shadow">
  Regular shadow
</div>
<div class="u-box-shadow--large">
  Large shadow
</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>