The foundational layer. Build everything with these and you'll never fight the grid again.
layout__item
s 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.
Apply `width` to your `layout__item` classes.
Apply
height
to content within `layout__item`.
.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>
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>
.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>
.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>
.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>
.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>
.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>
.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>
.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>
.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>
.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>
We have a lightweight flex implementation for your more advanced / experimental positioning needs.
.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>
.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>
.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>
.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>
.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>
.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>
.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>
.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>