Grid

Basic usage:

Cell 1
Cell 2
Cell 3

      <div class="grid">
  <div class="grid-cell"><div class="example-grid-content">Cell 1</div></div>
  <div class="grid-cell"><div class="example-grid-content">Cell 2</div></div>
  <div class="grid-cell"><div class="example-grid-content">Cell 3</div></div>
</div>
    

The grid--no-gutters modifier removes the spaces around each grid cell:

Cell 1
Cell 2
Cell 3

      <div class="grid grid--no-gutters">
  <div class="grid-cell"><div class="example-grid-content">Cell 1</div></div>
  <div class="grid-cell"><div class="example-grid-content">Cell 2</div></div>
  <div class="grid-cell"><div class="example-grid-content">Cell 3</div></div>
</div>
    

To display the grid as a column or row (default), use the grid--col or grid--row modifier:

Cell 1
Cell 2
Cell 3

      <div class="grid grid--col">
  <div class="grid-cell"><div class="example-grid-content">Cell 1</div></div>
  <div class="grid-cell"><div class="example-grid-content">Cell 2</div></div>
  <div class="grid-cell"><div class="example-grid-content">Cell 3</div></div>
</div>
    

Using the grid--row-reverse or grid--col-reverse modifier, the order of the cells can be reversed:

Cell 1
Cell 2
Cell 3

      <div class="grid grid--row-reverse">
  <div class="grid-cell"><div class="example-grid-content">Cell 1</div></div>
  <div class="grid-cell"><div class="example-grid-content">Cell 2</div></div>
  <div class="grid-cell"><div class="example-grid-content">Cell 3</div></div>
</div>
    

Specifying grid cell sizes on the container:

Cell 1
Cell 2
Cell 3

      <div class="grid grid--4of12">
  <div class="grid-cell"><div class="example-grid-content">Cell 1</div></div>
  <div class="grid-cell"><div class="example-grid-content">Cell 2</div></div>
  <div class="grid-cell"><div class="example-grid-content">Cell 3</div></div>
</div>
    

Specifying grid cell sizes on each cell:

Cell 1
Cell 2
Cell 3

      <div class="grid">
  <div class="grid-cell grid-cell--3of12"><div class="example-grid-content">Cell 1</div></div>
  <div class="grid-cell grid-cell--2of12"><div class="example-grid-content">Cell 2</div></div>
  <div class="grid-cell grid-cell--6of12"><div class="example-grid-content">Cell 3</div></div>
</div>
    

Responsive grid:

Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6

      <div class="grid grid--12of12 grid-xs--6of12 grid-md--3of12 grid-lg--2of12">
  <div class="grid-cell"><div class="example-grid-content">Cell 1</div></div>
  <div class="grid-cell"><div class="example-grid-content">Cell 2</div></div>
  <div class="grid-cell"><div class="example-grid-content">Cell 3</div></div>
  <div class="grid-cell"><div class="example-grid-content">Cell 4</div></div>
  <div class="grid-cell"><div class="example-grid-content">Cell 5</div></div>
  <div class="grid-cell"><div class="example-grid-content">Cell 6</div></div>
</div>
    

Responsive grid-cells:

Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6

      <div class="grid">
  <div class="grid-cell grid-cell--12of12"><div class="example-grid-content">Cell 1</div></div>
  <div class="grid-cell grid-cell-xs--1of12"><div class="example-grid-content">Cell 2</div></div>
  <div class="grid-cell grid-cell-md--6of12 grid-cell-lg--3of12"><div class="example-grid-content">Cell 3</div></div>
  <div class="grid-cell grid-cell-md--6of12 grid-cell-lg--3of12"><div class="example-grid-content">Cell 4</div></div>
  <div class="grid-cell grid-cell-lg--3of12"><div class="example-grid-content">Cell 5</div></div>
  <div class="grid-cell grid-cell-lg--3of12"><div class="example-grid-content">Cell 6</div></div>
</div>
    

Aligning grid-cell content using the following modifier:

grid--align-start vertical align cells on 'top'
grid--align-center vertical align cells on 'center'
grid--align-start vertical align cells on 'bottom'
grid--justify-center centering cells horizontally
grid-cell--align-start vertical align single cell on 'top'
grid-cell--align-center vertical align single cell on 'center'
grid-cell--align-end vertical align single cell on 'bottom'

Responsive cell-order modifier:

grid-xs--row
grid-xs--col
grid-xs--row-reverse
grid-xs--col-reverse

Disable cell wrapping:

grid--nowrap

Page

The top level of a application / website is the page, it behaves like a much simpler grid:

Page header

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

      <!-- the .page element is usually the `body` -->
<div class="page">
  <!-- .page-viewport wraps the whole content (for ember applications, this would be the root element -->
  <div class="page-viewport">
    <!-- .page-content contains all the page specific content -->
    <main class="page-main" style="background: #bbb">
      <section class="page-content">
        <header class="page-content-header">
          <h1>Page header</h1>
        </header>
        <section class="page-content-main">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </section>
        <footer class="page-content-footer">
          <small>&copy; Page footer</small>
        </footer>
      </section>
    </main>
  </div>
</div>
    

Modifiers:

page-content--scroll Makes page-content scrollable
page-main--scroll Makes page-main scrollable