Objects

o- Object : Generic styles that can be reused in multiple, unrelated contexts.

Grid

Sass

// Basic
@include o-grid();
@include o-grid__item();

// Responsive
@include o-grid('md');

Markup

Basic

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<div class="o-grid">
  <p class="o-grid__item  /  u-width-1/2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  <p class="o-grid__item  /  u-width-1/2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

Responsive

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<div class="o-grid@md">
  <p class="o-grid__item  /  u-width-1/1  u-width-1/2@md">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  <p class="o-grid__item  /  u-width-1/1  u-width-1/2@md">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

Grid Gutters

TODO: Allow directional gutters (e.g., all, horizontal, or vertical).

Sass

// Basic
@include o-grid--gutters('sm', $gutter-sm);

// Responsive
@include o-grid--gutters('sm', $gutter-sm, 'md');

Markup

Basic

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<div class="o-grid  o-grid--gutters-sm">
  <p class="o-grid__item  /  u-width-1/2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  <p class="o-grid__item  /  u-width-1/2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

Responsive

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<div class="o-grid  o-grid--gutters-sm@md">
  <p class="o-grid__item  /  u-width-1/2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  <p class="o-grid__item  /  u-width-1/2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

Icon

IMPORTANT: When preparing SVGs:

Remove every fill and stroke attribute that should inherit its color from CSS.
Set fill="none" or stroke="none" anywhere a color should not be applied.

Sass

// Basic
@include o-icon();
@include o-icon--size(70, 70);

// Responsive
@include o-icon('md');
@include o-icon--size(120, 120, 'md');

Markup

Basic

<span class="o-icon  o-icon--mode-logo  o-icon--70x70">
  <svg><use xlink:href="./img/svg/sprites/global.svg#mode-logo"></use></svg>
</span>

Responsive

<span class="o-icon  o-icon--mode-logo  o-icon--70x70  o-icon--120x120@md">
  <svg><use xlink:href="./img/svg/sprites/global.svg#mode-logo"></use></svg>
</span>

List

Sass

// Basic
@include o-list();
@include o-list__item();

// Responsive
@include o-list('md');

Markup

Basic

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<ul class="o-list">
  <li class="o-list__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li class="o-list__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li class="o-list__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>

Responsive

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<ul class="o-list@md">
  <li class="o-list__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li class="o-list__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li class="o-list__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>

List Border

TODO: Allow directional gutters (e.g., all, horizontal, or vertical).

Sass

// Basic
@include o-list--border('', 1px solid $color-gray-3);

// Responsive
@include o-list--border('', 1px solid $color-gray-3, 'md');

Markup

Basic

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<ul class="o-list  o-list--border">
  <li class="o-list__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li class="o-list__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li class="o-list__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>

Responsive

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<ul class="o-list  o-list--border@md">
  <li class="o-list__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li class="o-list__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li class="o-list__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>

List Bullet

Sass

// Basic
@include o-list--bullet('', 1rem);

// Responsive
@include o-list--bullet('', 1rem, 'md');

Markup

Basic

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<ul class="o-list  o-list--bullet">
  <li class="o-list__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li class="o-list__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li class="o-list__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>

Responsive

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<ul class="o-list  o-list--bullet@md">
  <li class="o-list__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li class="o-list__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li class="o-list__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>

List Comma

Sass

// Basic
@include o-list--comma();

// Responsive
@include o-list--comma('md');

Markup

Basic

Lorem
Ipsum
Dolor

<ul class="o-list  o-list--comma">
  <li class="o-list__item">Lorem</li>
  <li class="o-list__item">Ipsum</li>
  <li class="o-list__item">Dolor</li>
</ul>

Responsive

Lorem
Ipsum
Dolor

<ul class="o-list  o-list--comma@md">
  <li class="o-list__item">Lorem</li>
  <li class="o-list__item">Ipsum</li>
  <li class="o-list__item">Dolor</li>
</ul>

List Disc

Sass

// Basic
@include o-list--disc('', 1.125em);

// Responsive
@include o-list--disc('', 1.125em, 'md');

Markup

Basic

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<ul class="o-list  o-list--disc">
  <li class="o-list__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li class="o-list__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li class="o-list__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>

Responsive

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<ul class="o-list  o-list--disc@md">
  <li class="o-list__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li class="o-list__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li class="o-list__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>

List Inline

Sass

// Basic
@include o-list--inline();

// Responsive
@include o-list--inline('md');

Markup

Basic

Lorem
Ipsum
Dolor

<ul class="o-list  o-list--inline">
  <li class="o-list__item">Lorem</li>
  <li class="o-list__item">Ipsum</li>
  <li class="o-list__item">Dolor</li>
</ul>

Responsive

Lorem
Ipsum
Dolor

<ul class="o-list  o-list--inline@md">
  <li class="o-list__item">Lorem</li>
  <li class="o-list__item">Ipsum</li>
  <li class="o-list__item">Dolor</li>
</ul>

List Leading Zero

Sass

// Basic
@include o-list--leading-zero();

// Responsive
@include o-list--leading-zero('md');

Markup

Basic

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<ol class="o-list  o-list--leading-zero">
  <li class="o-list__item"><span class="o-list__counter"></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li class="o-list__item"><span class="o-list__counter"></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li class="o-list__item"><span class="o-list__counter"></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ol>

Responsive

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<ol class="o-list  o-list--leading-zero@md">
  <li class="o-list__item"><span class="o-list__counter"></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li class="o-list__item"><span class="o-list__counter"></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li class="o-list__item"><span class="o-list__counter"></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ol>

List Number

Sass

// Basic
@include o-list--number();

// Responsive
@include o-list--number('md');

Markup

Basic

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<ol class="o-list  o-list--number">
  <li class="o-list__item"><span class="o-list__counter"></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li class="o-list__item"><span class="o-list__counter"></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li class="o-list__item"><span class="o-list__counter"></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ol>

Responsive

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<ol class="o-list  o-list--number@md">
  <li class="o-list__item"><span class="o-list__counter"></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li class="o-list__item"><span class="o-list__counter"></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li class="o-list__item"><span class="o-list__counter"></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ol>

List Roman

Sass

// Basic
@include o-list--roman();

// Responsive
@include o-list--roman('md');

Markup

Basic

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<ol class="o-list  o-list--roman">
  <li class="o-list__item"><span class="o-list__counter"></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li class="o-list__item"><span class="o-list__counter"></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li class="o-list__item"><span class="o-list__counter"></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ol>

Responsive

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<ol class="o-list  o-list--roman@md">
  <li class="o-list__item"><span class="o-list__counter"></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li class="o-list__item"><span class="o-list__counter"></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li class="o-list__item"><span class="o-list__counter"></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ol>

List Slash

Sass

// Basic
@include o-list--slash();

// Responsive
@include o-list--slash('md');

Markup

Basic

Lorem
Ipsum
Dolor

<ul class="o-list  o-list--slash">
  <li class="o-list__item">Lorem</li>
  <li class="o-list__item">Ipsum</li>
  <li class="o-list__item">Dolor</li>
</ul>

Responsive

Lorem
Ipsum
Dolor

<ul class="o-list  o-list--slash@md">
  <li class="o-list__item">Lorem</li>
  <li class="o-list__item">Ipsum</li>
  <li class="o-list__item">Dolor</li>
</ul>

Media

Sass

// Basic
@include o-media();
@include o-media__figure();
@include o-media__body();

// Responsive
@include o-media('md');

Markup

Basic

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<div class="o-media  /  u-align-items-center">
  <figure class="o-media__figure  /  u-padding-right-sm">
    <img src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">
  </figure>
  <p class="o-media__body">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>

Responsive

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<div class="o-media@md  /  u-align-items-center">
  <figure class="o-media__figure  /  u-padding-right-sm@md">
    <img src="http://placehold.it/100/ff0000/ffffff?text=1" width="100" height="100" alt="Item 1">
  </figure>
  <p class="o-media__body">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>

Section

Sass

// Basic
@include o-section();

// Responsive
@include o-section('md');

Markup

Basic

Lorem ipsum

Dolor sit amet, consectetur adipisicing elit.

<section class="o-section">
  <h4>Lorem ipsum</h4>
  <p>Dolor sit amet, consectetur adipisicing elit.</p>
</section>

Responsive

Lorem ipsum

Dolor sit amet, consectetur adipisicing elit.

<section class="o-section@md">
  <h4>Lorem ipsum</h4>
  <p>Dolor sit amet, consectetur adipisicing elit.</p>
</section>

Table

Sass

// Basic
@include o-table();
@include o-table__item();

// Responsive
@include o-table('md');

Markup

Basic

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<div class="o-table">
  <p class="o-table__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  <p class="o-table__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

Responsive

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<div class="o-table@md">
  <p class="o-table__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  <p class="o-table__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

Video

Sass

// Basic
@include o-video();
@include o-video__close();
@include o-video__element();
@include o-video--overlay();

// Responsive
@include o-video('md');

Markup

Basic

<figure class="o-video">
  <div class="u-aspect-ratio-16x9"></div>
  <iframe class="o-video__element" src="https://www.youtube.com/embed/0qo78R_yYFA?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</figure>