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('sm');
  

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@sm">
  <p class="o-grid__item  /  u-width-1/1  u-width-1/2@sm">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  <p class="o-grid__item  /  u-width-1/1  u-width-1/2@sm">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, 'sm');
  

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@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>
    

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('sm');
@include o-icon--size(120, 120, 'sm');
  

Markup

Basic

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

Responsive

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

List

Sass

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

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

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@sm">
  <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, 'sm');
  

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@sm">
  <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, 'sm');
  

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@sm">
  <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('sm');
  

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@sm">
  <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, 'sm');
  

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@sm">
  <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('sm');
  

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@sm">
  <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('sm');
  

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@sm">
  <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('sm');
  

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@sm">
  <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('sm');
  

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@sm">
  <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('sm');
  

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@sm">
  <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('sm');
  

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="https://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@sm  /  u-align-items-center">
  <figure class="o-media__figure  /  u-padding-right-sm@sm">
    <img src="https://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('sm');
  

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@sm">
  <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('sm');
  

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@sm">
  <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('sm');
  

Markup

Basic

    
      <figure class="o-video  /  js-video-wrapper">
  <div class="u-aspect-ratio-16x9"></div>
  <div id="video" class="o-video__element  /  js-video" data-video='{
    "url": "https://www.youtube.com/watch?v=0qo78R_yYFA"
  }'></div>
</figure>

Overlay

  
  
  


      <div class="o-video  o-video--overlay  /  js-video-wrapper">
  <img src="./img/spacex-interplanetary-transport-system.jpg" width="1920" height="1080" alt="SpaceX Interplanetary Transport System">
  <button class="o-video__play  /  u-position-center  /  js-video-open" type="button" data-video="#video-overlay">Play Video</button>
  <figure class="o-video__wrapper">
    <button class="o-video__close  /  js-video-close" type="button">Close</button>
    <div id="video-overlay" class="o-video__element  /  js-video" data-video='{
      "url": "https://www.youtube.com/watch?v=0qo78R_yYFA"
    }'></div>
  </figure>
</div>
    