Objects

.o-button--unstyled

To unstyled the default style of a button, just add a .o-button--unstyled class.

jade
button Button Default
html

<button>Button Default</button>
jade
button.o-button--unstyled Button Unstyled
html

<button class="o-button--unstyled">Button Unstyled</button>

.o-center

To vertically or horizontally center content inside a container, use the .o-center in combination with .o-center--v .o-center--h .o-center--both classes.

I will be centered vertically
jade
.o-center.o-center--v
  span I will be centered vertically
html

<div class="o-center o-center--v"><span>I will be centered vertically</span></div>
I will be centered horizontally
jade
.o-center.o-center--h
  span I will be centered horizontally
html

<div class="o-center o-center--h"><span>I will be centered horizontally</span></div>
I will be centered both vertical and horizontally.
jade
.o-center.o-center--both
  span I will be centered both vertical and horizontally.
html

<div class="o-center o-center--both"><span>I will be centered both vertical and horizontally.</span></div>

.o-container

To have consistent content containers, use the .o-container object. It sets a max-width and center aligns everything inside of it (while adding spacing around it).

It's usually used with a .o-grid inside.

default container

jade
.o-container
  div
    p default container
html

<div class="o-container">
  <div>
    <p>default container</p>
  </div>
</div>

spaceless container

jade
.o-container.o-container--spaceless
  div
    p spaceless container
html

<div class="o-container o-container--spaceless">
  <div>
    <p>spaceless container</p>
  </div>
</div>

big container

jade
.o-container.o-container--big
  div
    p big container
html

<div class="o-container o-container--big">
  <div>
    <p>big container</p>
  </div>
</div>

.o-grid

Grids are based on sensible grids. To use the grid, just wrap your code in a .o-grid object. It expects .o-grid__item children.

Columns can be achieved using relative units by adding width modifiers to .o-grid__item such .u-one-whole,.o-one-half, .o-one-third .o-two-thirds, etc.

one-whole

one-half

one-half

one-third

two-thirds

one-quarter

three-quarters

one-fifth

four-fifths

two-fifths

three-fifths

jade
.o-grid
  .o-grid__cell.o-grid__cell--one-whole
    p one-whole
  .o-grid__cell.o-grid__cell--one-half
    p one-half
  .o-grid__cell.o-grid__cell--one-half
    p one-half
  .o-grid__cell.o-grid__cell--one-third
    p one-third
  .o-grid__cell.o-grid__cell--two-thirds
    p two-thirds
  .o-grid__cell.o-grid__cell--one-quarter
    p one-quarter
  .o-grid__cell.o-grid__cell--three-quarters
    p three-quarters
  .o-grid__cell.o-grid__cell--one-fifth
    p one-fifth
  .o-grid__cell.o-grid__cell--four-fifths
    p four-fifths
  .o-grid__cell.o-grid__cell--two-fifths
    p two-fifths
  .o-grid__cell.o-grid__cell--three-fifths
    p three-fifths
html

<div class="o-grid">
  <div class="o-grid__cell o-grid__cell--one-whole">
    <p>one-whole</p>
  </div>
  <div class="o-grid__cell o-grid__cell--one-half">
    <p>one-half</p>
  </div>
  <div class="o-grid__cell o-grid__cell--one-half">
    <p>one-half</p>
  </div>
  <div class="o-grid__cell o-grid__cell--one-third">
    <p>one-third</p>
  </div>
  <div class="o-grid__cell o-grid__cell--two-thirds">
    <p>two-thirds</p>
  </div>
  <div class="o-grid__cell o-grid__cell--one-quarter">
    <p>one-quarter</p>
  </div>
  <div class="o-grid__cell o-grid__cell--three-quarters">
    <p>three-quarters</p>
  </div>
  <div class="o-grid__cell o-grid__cell--one-fifth">
    <p>one-fifth</p>
  </div>
  <div class="o-grid__cell o-grid__cell--four-fifths">
    <p>four-fifths</p>
  </div>
  <div class="o-grid__cell o-grid__cell--two-fifths">
    <p>two-fifths</p>
  </div>
  <div class="o-grid__cell o-grid__cell--three-fifths">
    <p>three-fifths</p>
  </div>
</div>

.o-layout

TO BE DONE

.o-link--unstyled

To unstyled the default style of an anchor, just add a .o-link--unstyled class.

Anchor Default
jade
a(href="#") Anchor Default
html
<a href="#">Anchor Default</a>
Anchor Unstyled
jade
a(href="#").o-link--unstyled Anchor Unstyled
html
<a href="#" class="o-link--unstyled">Anchor Unstyled</a>

.o-list

There are several objects for both ol and ul.

  • default item 1
  • default item 2
jade
ul
  li default item 1
  li default item 2
html

<ul>
  <li>default item 1</li>
  <li>default item 2</li>
</ul>
  • unstyled item 1
  • unstyled item 2
jade
ul.o-list--unstyled
  li unstyled item 1
  li unstyled item 2
html

<ul class="o-list--unstyled">
  <li>unstyled item 1</li>
  <li>unstyled item 2</li>
</ul>
  • inline item 1
  • inline item 2
jade
ul.o-list--inline
  li inline item 1
  li inline item 2
html

<ul class="o-list--inline">
  <li>inline item 1</li>
  <li>inline item 2</li>
</ul>
  • samewidth item 1
  • samewidth item 2
  • samewidth item 3
jade
ul.o-list--samewidth
  li samewidth item 1
  li samewidth item 2
  li samewidth item 3
html

<ul class="o-list--samewidth">
  <li>samewidth item 1</li>
  <li>samewidth item 2</li>
  <li>samewidth item 3</li>
</ul>
  • equidistant item 1
  • equidistant item 2
  • equidistant item 3
jade
ul.o-list--equidistant
  li equidistant item 1
  li equidistant item 2
  li equidistant item 3
html

<ul class="o-list--equidistant">
  <li>equidistant item 1</li>
  <li>equidistant item 2</li>
  <li>equidistant item 3</li>
</ul>