Styleguide

Grid

The foundational layer. Build everything with these and you'll never fight the grid again.

Respect the Gators
You'll notice that our layout__items are followed by ><. In HAML, this removes the whitespace when rendering the final HTML. Because we're using 100% of the layout, it's important to remember what these do.

These docs don't show the gators because our code rendering library strips them out... It's toward the top of the TODO list.

Columns

Apply `width` to your `layout__item` classes.
Apply height to content within `layout__item`.

Helpers

1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
8 of 12
4 of 12
4 of 12
4 of 12
4 of 12
6 of 12
6 of 12
.layout
  .layout__item.md-1of12
  .layout__item.md-1of12
  .layout__item.md-1of12
  .layout__item.md-1of12
  .layout__item.md-1of12
  .layout__item.md-1of12
  .layout__item.md-1of12
  .layout__item.md-1of12
  .layout__item.md-1of12
  .layout__item.md-1of12
  .layout__item.md-1of12
  .layout__item.md-1of12
.layout
  .layout__item.md-8of12
  .layout__item.md-4of12
.layout
  .layout__item.md-4of12
  .layout__item.md-4of12
  .layout__item.md-4of12
.layout
  .layout__item.md-6of12
  .layout__item.md-6of12
<div class='layout'>
  <div class='layout__item md-1of12'></div>
  <div class='layout__item md-1of12'></div>
  <div class='layout__item md-1of12'></div>
  <div class='layout__item md-1of12'></div>
  <div class='layout__item md-1of12'></div>
  <div class='layout__item md-1of12'></div>
  <div class='layout__item md-1of12'></div>
  <div class='layout__item md-1of12'></div>
  <div class='layout__item md-1of12'></div>
  <div class='layout__item md-1of12'></div>
  <div class='layout__item md-1of12'></div>
  <div class='layout__item md-1of12'></div>
</div>
<div class='layout'>
  <div class='layout__item md-8of12'></div>
  <div class='layout__item md-4of12'></div>
</div>
<div class='layout'>
  <div class='layout__item md-4of12'></div>
  <div class='layout__item md-4of12'></div>
  <div class='layout__item md-4of12'></div>
</div>
<div class='layout'>
  <div class='layout__item md-6of12'></div>
  <div class='layout__item md-6of12'></div>
</div>

Auto Width

Hello World

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

.layout
  .layout__item.sm-width-auto
    .library-tile.library-tile--grow-on-hover Hello World
  .layout__item.sm-8of12
    .library-tile
      %p.xs-mb1
        Lorem ipsum dolor sit amet,
        consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      %p.xs-mb1
        Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      %p.xs-mb1
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      %p
        Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class='layout'>
  <div class='layout__item sm-width-auto'>
    <div class='library-tile library-tile--grow-on-hover'>Hello World</div>
  </div>
  <div class='layout__item sm-8of12'>
    <div class='library-tile'>
      <p class='xs-mb1'>
        Lorem ipsum dolor sit amet,
        consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
      <p class='xs-mb1'>
        Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p>
      <p class='xs-mb1'>
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </p>
      <p>
        Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </div>
</div>

Responsive

sm-8of12 md-6of12 lg-4of12
sm-4of12 md-6of12 lg-8of12
.layout
  .layout__item.sm-8of12.md-6of12.lg-4of12
  .layout__item.sm-4of12.md-6of12.lg-8of12
<div class='layout'>
  <div class='layout__item sm-8of12 md-6of12 lg-4of12'></div>
  <div class='layout__item sm-4of12 md-6of12 lg-8of12'></div>
</div>

Positioning

Center

Dead-simple horizontal centering.
xs-4of12
xs-4of12
xs-6of12
xs-2of12
.layout.layout--center
  .layout__item.xs-4of12
  .layout__item.xs-4of12
.layout.layout--center
  .layout__item.xs-6of12
  .layout__item.xs-2of12
<div class='layout layout--center'>
  <div class='layout__item xs-4of12'></div>
  <div class='layout__item xs-4of12'></div>
</div>
<div class='layout layout--center'>
  <div class='layout__item xs-6of12'></div>
  <div class='layout__item xs-2of12'></div>
</div>

Middle

xs-6of12
xs-6of12 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In molestie cursus nisi, id ultrices enim molestie et. Nunc venenatis erat nec consectetur efficitur. In vel est sodales, ultrices mauris non, mattis turpis. Maecenas mi nisl, fringilla a euismod id, suscipit sed risus. Maecenas malesuada ex risus, id commodo est congue a.
.layout.layout--middle
  .layout__item.xs-6of12
  .layout__item.xs-6of12
<div class='layout layout--middle'>
  <div class='layout__item xs-6of12'></div>
  <div class='layout__item xs-6of12'></div>
</div>

Bottom

No matter how tall this gets
This will still be at the bottom
.layout.layout--bottom
  .layout__item.md-8of12
    .library-tile.library-tile--tall No matter how tall this gets
  .layout__item.md-4of12
    .library-tile This will still be at the bottom
<div class='layout layout--bottom'>
  <div class='layout__item md-8of12'>
    <div class='library-tile library-tile--tall'>No matter how tall this gets</div>
  </div>
  <div class='layout__item md-4of12'>
    <div class='library-tile'>This will still be at the bottom</div>
  </div>
</div>

Small

Check out
These tiny gutters
.layout.layout--small
  .layout__item.md-8of12
    .library-tile.library-tile--tall Check out
  .layout__item.md-4of12
    .library-tile These tiny gutters
<div class='layout layout--small'>
  <div class='layout__item md-8of12'>
    <div class='library-tile library-tile--tall'>Check out</div>
  </div>
  <div class='layout__item md-4of12'>
    <div class='library-tile'>These tiny gutters</div>
  </div>
</div>

Large

xs-6of12
xs-6of12 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In molestie cursus nisi, id ultrices enim molestie et. Nunc venenatis erat nec consectetur efficitur. In vel est sodales, ultrices mauris non, mattis turpis. Maecenas mi nisl, fringilla a euismod id, suscipit sed risus. Maecenas malesuada ex risus, id commodo est congue a.
.layout.layout--middle
  .layout__item.xs-6of12
  .layout__item.xs-6of12
<div class='layout layout--middle'>
  <div class='layout__item xs-6of12'></div>
  <div class='layout__item xs-6of12'></div>
</div>

Flush

no
gutters
.layout.layout--flush
  .layout__item.md-8of12
    .library-tile no
  .layout__item.md-4of12
    .library-tile gutters
<div class='layout layout--flush'>
  <div class='layout__item md-8of12'>
    <div class='library-tile'>no</div>
  </div>
  <div class='layout__item md-4of12'>
    <div class='library-tile'>gutters</div>
  </div>
</div>

Offset

xs-4of12 lg-4of12
xs-4of12 lg-4of12 lg-offset2of12
.layout
  .layout__item.xs-4of12.lg-4of12
  .layout__item.xs-4of12.lg-4of12.lg-offset2of12
<div class='layout'>
  <div class='layout__item xs-4of12 lg-4of12'></div>
  <div class='layout__item xs-4of12 lg-4of12 lg-offset2of12'></div>
</div>

Push/Pull

A lg-6of12 lg-push6of12
B lg-6of12 lg-pull6of12
.layout
  .layout__item.xs-6of12.lg-push6of12
  .layout__item.xs-6of12.lg-pull6of12
<div class='layout'>
  <div class='layout__item xs-6of12 lg-push6of12'></div>
  <div class='layout__item xs-6of12 lg-pull6of12'></div>
</div>

Flex

We have a lightweight flex implementation for your more advanced / experimental positioning needs.

Basic

A
B
.flex
  .box.box--yellow.xs-12of12 A
  .box.box--green-light.xs-12of12 B
<div class='flex'>
  <div class='box box--yellow xs-12of12'>A</div>
  <div class='box box--green-light xs-12of12'>B</div>
</div>

Alignment

I'm centered horizontally and vertically

I'm going to the end of this column
I'm at the the start of this column on large
.flex.flex--center.box.box--blue-light.xs-3
  I'm centered horizontally and vertically
%br/
.flex.flex--column
  .flex__item.flex__item--end.box.box--blue-light.xs-3
    I'm going to the end of this column
  .flex__item.xs-flex__item--end.lg-flex__item--start.box.box--red-light.xs-3
    I'm at the the start of this column on large
<div class='flex flex--center box box--blue-light xs-3'>
  I'm centered horizontally and vertically
</div>
<br>
<div class='flex flex--column'>
  <div class='flex__item flex__item--end box box--blue-light xs-3'>
    I'm going to the end of this column
  </div>
  <div class='flex__item xs-flex__item--end lg-flex__item--start box box--red-light xs-3'>
    I'm at the the start of this column on large
  </div>
</div>

Direction

These elements
Will stack on md+
.flex.xs-flex--row.md-flex--column
  .box.box--yellow.xs-9of12 These elements
  .box.box--green-light.xs-8of12 Will stack on md+
<div class='flex xs-flex--row md-flex--column'>
  <div class='box box--yellow xs-9of12'>These elements</div>
  <div class='box box--green-light xs-8of12'>Will stack on md+</div>
</div>

Grow

A
B
C
D
Notice how I'm big because there's content here
F
G
.flex
  .flex__item.flex__item--grow3.box.box--yellow A
  .flex__item.box.box--red-light B
  .flex__item.box.box--green-light C
  .flex__item.box.box--red-light D
  .flex__item.box.box--blue-light Notice how I'm big because there's content here
  .flex__item.flex__item--grow10.box.box--black-light F
  .flex__item.box.box--yellow-light G
<div class='flex'>
  <div class='flex__item flex__item--grow3 box box--yellow'>A</div>
  <div class='flex__item box box--red-light'>B</div>
  <div class='flex__item box box--green-light'>C</div>
  <div class='flex__item box box--red-light'>D</div>
  <div class='flex__item box box--blue-light'>Notice how I'm big because there's content here</div>
  <div class='flex__item flex__item--grow10 box box--black-light'>F</div>
  <div class='flex__item box box--yellow-light'>G</div>
</div>

Item

A
B
C
D
E
F
G
.flex
  .flex__item.box.box--yellow A
  .flex__item.box.box--red-light B
  .flex__item.box.box--green-light C
  .flex__item.box.box--red-light D
  .flex__item.box.box--blue-light E
  .flex__item.box.box--black-light F
  .flex__item.box.box--yellow-light G
<div class='flex'>
  <div class='flex__item box box--yellow'>A</div>
  <div class='flex__item box box--red-light'>B</div>
  <div class='flex__item box box--green-light'>C</div>
  <div class='flex__item box box--red-light'>D</div>
  <div class='flex__item box box--blue-light'>E</div>
  <div class='flex__item box box--black-light'>F</div>
  <div class='flex__item box box--yellow-light'>G</div>
</div>

Order

A
B
C

A
B
C
.flex
  .flex__item.flex__item--order-last.box.box--yellow A
  .flex__item.box.box--red-light B
  .flex__item.flex__item--order-first.box.box--green-light C
%br/
.flex
  .flex__item.md-flex__item--order2.box.box--yellow A
  .flex__item.box.box--red-light B
  .flex__item.box.box--green-light C
<div class='flex'>
  <div class='flex__item flex__item--order-last box box--yellow'>A</div>
  <div class='flex__item box box--red-light'>B</div>
  <div class='flex__item flex__item--order-first box box--green-light'>C</div>
</div>
<br>
<div class='flex'>
  <div class='flex__item md-flex__item--order2 box box--yellow'>A</div>
  <div class='flex__item box box--red-light'>B</div>
  <div class='flex__item box box--green-light'>C</div>
</div>

Wrap

A
B

A
B
.flex
  .box.box--yellow.xs-9of12 A
  .box.box--green-light.xs-8of12 B
%br/
.flex.flex--wrap
  .box.box--yellow.xs-9of12 A
  .box.box--green-light.xs-8of12 B
<div class='flex'>
  <div class='box box--yellow xs-9of12'>A</div>
  <div class='box box--green-light xs-8of12'>B</div>
</div>
<br>
<div class='flex flex--wrap'>
  <div class='box box--yellow xs-9of12'>A</div>
  <div class='box box--green-light xs-8of12'>B</div>
</div>

Newspaper

Automatically splits the content into specified number of columns - just like in a newspaper. Might come in handy for the dynamic content when it's hard to assign the specific items to the specific columns.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
.layout
  .layout__item.xs-mb1
    .box.box--gray.xs-p1.xs-newspaper-3columns
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
  .layout__item.xs-mb1
    .box.box--gray.xs-p1.xs-newspaper-2columns.sm-newspaper-4columns
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
<div class='layout'>
  <div class='layout__item xs-mb1'>
    <div class='box box--gray xs-p1 xs-newspaper-3columns'>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
    </div>
  </div>
  <div class='layout__item xs-mb1'>
    <div class='box box--gray xs-p1 xs-newspaper-2columns sm-newspaper-4columns'>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
    </div>
  </div>
</div>