This is not a 1.0 release. Things are moving at a fast pace, please note you might have some refactoring to do using this code.

Container

A container wraps your site's contents and houses the grid system. The default container is full-width on screens in the xs breakpoint, and a responsive fixed width on larger screens. The container sets margin, padding and more for the whole screen, so do not nest it within another container.

Class Description
.container A responsive fixed width container
Fixed-width container on larger screens. Don't put this inside another container.
<div class="container">
  Fixed-width container on larger screens. Don't put this inside another container.
</div>

Fluid Container

A fluid container wraps your site contents and houses the grid system. Like the regular container, this sets margin, padding, and more for the whole screen, so do not nest it within another container.

Class Description
.fluid-container A full width container, spanning the entire width of the viewport
A fluid container
<div class="fluid-container">
  A fluid container
</div>

Flag

The flag object mostly the same thing as a media object except it can align the description to the top or bottom of itself.

Only use a flag object when a media object can't do the job.

Class Description
.flag Default gutters and renders content to the middle
.flag--top Default gutters and renders content to the top
.flag--bottom Default gutters and renders content to the bottom
.flag--reverse Render children in reverse order
.xs-flag Collapsed at all screen sizes
.sm-flag Collapsed at small screens and up
.md-flag Collapsed at medium screens and up
.lg-flag Collapsed at large screens

Default

placeholder

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste magnam facilis quas, eos unde illum rem dicta. Atque repudiandae, numquam laudantium quas voluptas, facilis? Illo excepturi nihil quidem a esse!

<div class="flag">
  <div class="flag__object">
    <img src="//placehold.it/150" alt="placeholder" />
  </div>
  <div class="flag__body">
    <p class="xs-pl1">
      Lorem ipsum dolor sit amet,
      consectetur adipisicing elit.
      Iste magnam facilis quas,
      eos unde illum rem dicta.
      Atque repudiandae,
      numquam laudantium quas voluptas,
      facilis? Illo excepturi nihil quidem a esse!
    </p>
  </div>
</div>

Top

placeholder

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste magnam facilis quas, eos unde illum rem dicta. Atque repudiandae, numquam laudantium quas voluptas, facilis? Illo excepturi nihil quidem a esse!

<div class="flag flag--top">
  <div class="flag__object">
    <img src="//placehold.it/150" alt="placeholder" />
  </div>
  <div class="flag__body">
    <p class="xs-pl1">
      Lorem ipsum dolor sit amet,
      consectetur adipisicing elit.
      Iste magnam facilis quas,
      eos unde illum rem dicta.
      Atque repudiandae,
      numquam laudantium quas voluptas,
      facilis? Illo excepturi nihil quidem a esse!
    </p>
  </div>
</div>

Bottom

placeholder

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste magnam facilis quas, eos unde illum rem dicta. Atque repudiandae, numquam laudantium quas voluptas, facilis? Illo excepturi nihil quidem a esse!

<div class="flag flag--bottom">
  <div class="flag__object">
    <img src="//placehold.it/150" alt="placeholder" />
  </div>
  <div class="flag__body">
    <p class="xs-pl1">
      Lorem ipsum dolor sit amet,
      consectetur adipisicing elit.
      Iste magnam facilis quas,
      eos unde illum rem dicta.
      Atque repudiandae,
      numquam laudantium quas voluptas,
      facilis? Illo excepturi nihil quidem a esse!
    </p>
  </div>
</div>

Reverse

placeholder
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste magnam facilis quas, eos unde illum rem dicta. Atque repudiandae, numquam laudantium quas voluptas, facilis? Illo excepturi nihil quidem a esse!
<div class="flag flag--reverse">
  <div class="flag__object">
    <img src="//placehold.it/150" alt="placeholder" />
  </div>
  <div class="flag__body">
    Lorem ipsum dolor sit amet,
    consectetur adipisicing elit.
    Iste magnam facilis quas,
    eos unde illum rem dicta.
    Atque repudiandae,
    numquam laudantium quas voluptas,
    facilis? Illo excepturi nihil quidem a esse!
  </div>
</div>

Responsive Flags

Collapse at xs

placeholder

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste magnam facilis quas, eos unde illum rem dicta. Atque repudiandae, numquam laudantium quas voluptas, facilis? Illo excepturi nihil quidem a esse!

<div class="flag xs-flag">
  <div class="flag__object">
    <img src="//placehold.it/150" alt="placeholder" />
  </div>
  <div class="flag__body">
    <p class="xs-pt1">
      Lorem ipsum dolor sit amet,
      consectetur adipisicing elit.
      Iste magnam facilis quas,
      eos unde illum rem dicta.
      Atque repudiandae,
      numquam laudantium quas voluptas,
      facilis? Illo excepturi nihil quidem a esse!
    </p>
  </div>
</div>

Collapse at sm

placeholder

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste magnam facilis quas, eos unde illum rem dicta. Atque repudiandae, numquam laudantium quas voluptas, facilis? Illo excepturi nihil quidem a esse!

<div class="flag sm-flag">
  <div class="flag__object">
    <img src="//placehold.it/150" alt="placeholder" />
  </div>
  <div class="flag__body">
    <p class="xs-pl1 sm-pl0 sm-pt1">
      Lorem ipsum dolor sit amet,
      consectetur adipisicing elit.
      Iste magnam facilis quas,
      eos unde illum rem dicta.
      Atque repudiandae,
      numquam laudantium quas voluptas,
      facilis? Illo excepturi nihil quidem a esse!
    </p>
  </div>
</div>

Collapse at md

placeholder

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste magnam facilis quas, eos unde illum rem dicta. Atque repudiandae, numquam laudantium quas voluptas, facilis? Illo excepturi nihil quidem a esse!

<div class="flag md-flag">
  <div class="flag__object">
    <img src="//placehold.it/150" alt="placeholder" />
  </div>
  <div class="flag__body">
    <p class="xs-pl1 md-pl0 md-pt1">
      Lorem ipsum dolor sit amet,
      consectetur adipisicing elit.
      Iste magnam facilis quas,
      eos unde illum rem dicta.
      Atque repudiandae,
      numquam laudantium quas voluptas,
      facilis? Illo excepturi nihil quidem a esse!
    </p>
  </div>
</div>

Collapse at lg

placeholder

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste magnam facilis quas, eos unde illum rem dicta. Atque repudiandae, numquam laudantium quas voluptas, facilis? Illo excepturi nihil quidem a esse!

<div class="flag lg-flag">
  <div class="flag__object">
    <img src="//placehold.it/150" alt="placeholder" />
  </div>
  <div class="flag__body">
    <p class="xs-pl1 lg-pl0 lg-pt1">
      Lorem ipsum dolor sit amet,
      consectetur adipisicing elit.
      Iste magnam facilis quas,
      eos unde illum rem dicta.
      Atque repudiandae,
      numquam laudantium quas voluptas,
      facilis? Illo excepturi nihil quidem a esse!
    </p>
  </div>
</div>

Layout

Used to create a responsive horizontal grid system with gutter areas between columns. The default gutter width is 2rem or 20px.

When using .layout make sure that the direct child is a .layout__item

Class Description
.layout .layout__item is aligned to the vertical top
.layout--middle .layout__item is aligned to the vertical middle
.layout--bottom .layout__item is aligned to the vertical bottom
.layout--small .layout__item has small gutters
.layout--large .layout__item has large gutters
.layout--flush .layout__item has no gutters
.layout--reverse .layout__item is rendered in reverse order
.layout--center .layout__item is rendered from the center outward
.layout--right .layout__item is rendered from the right outward

12 Columns

This fortitude theme uses a 12-column grid, and rows and columns can be represented with the .layout and .layout__item classes respectively.

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
<div class="layout xs-mb1">
  <div class="layout__item md-1of12">
    <div class="box box--styleguide">1 of 12</div>
  </div><div class="layout__item md-1of12">
    <div class="box box--styleguide">1 of 12</div>
  </div><div class="layout__item md-1of12">
    <div class="box box--styleguide">1 of 12</div>
  </div><div class="layout__item md-1of12">
    <div class="box box--styleguide">1 of 12</div>
  </div><div class="layout__item md-1of12">
    <div class="box box--styleguide">1 of 12</div>
  </div><div class="layout__item md-1of12">
    <div class="box box--styleguide">1 of 12</div>
  </div><div class="layout__item md-1of12">
    <div class="box box--styleguide">1 of 12</div>
  </div><div class="layout__item md-1of12">
    <div class="box box--styleguide">1 of 12</div>
  </div><div class="layout__item md-1of12">
    <div class="box box--styleguide">1 of 12</div>
  </div><div class="layout__item md-1of12">
    <div class="box box--styleguide">1 of 12</div>
  </div><div class="layout__item md-1of12">
    <div class="box box--styleguide">1 of 12</div>
  </div><div class="layout__item md-1of12">
    <div class="box box--styleguide">1 of 12</div>
  </div>
</div>

<div class="layout xs-mb1">
  <div class="layout__item md-8of12">
    <div class="box box--styleguide">8 of 12</div>
  </div><div class="layout__item md-4of12">
    <div class="box box--styleguide">4 of 12</div>
  </div>
</div>

<div class="layout xs-mb1">
  <div class="layout__item md-4of12">
    <div class="box box--styleguide">4 of 12</div>
  </div><div class="layout__item md-4of12">
    <div class="box box--styleguide">4 of 12</div>
  </div><div class="layout__item md-4of12">
    <div class="box box--styleguide">4 of 12</div>
  </div>
</div>

<div class="layout">
  <div class="layout__item md-6of12">
    <div class="box box--styleguide">6 of 12</div>
  </div><div class="layout__item md-6of12">
    <div class="box box--styleguide">6 of 12</div>
  </div>
</div>

Responsive Grid

You can re-arrange content for different screen sizes using responsive width helpers. Resize your window and watch the columns in this example go from full-width at the xs size to 8 columns at sm, 6 columns at md, and 4 columns at lg.

sm-8of12 md-6of12 lg-4of12
sm-4of12 md-6of12 lg-8of12
<div class="layout">
  <div class="layout__item sm-8of12 md-6of12 lg-4of12">
    <div class="box box--styleguide">sm-8of12 md-6of12 lg-4of12</div>
  </div><div class="layout__item sm-4of12 md-6of12 lg-8of12">
    <div class="box box--styleguide">sm-4of12 md-6of12 lg-8of12</div>
  </div>
</div>

Gutter Size

.layout comes with some extensions to customize the gutter size.

Default

The default size
nothing special
<div class="layout">
  <div class="layout__item md-6of12">
    <div class="box box--styleguide box--styleguide--tall">The default size</div>
  </div><div class="layout__item md-6of12">
    <div class="box box--styleguide">nothing special</div>
  </div>
</div>

Small

Check out
these tiny gutters
<div class="layout layout--small">
  <div class="layout__item md-6of12">
    <div class="box box--styleguide box--styleguide--tall">Check out</div>
  </div><div class="layout__item md-6of12">
    <div class="box box--styleguide">these tiny gutters</div>
  </div>
</div>

Large

Check out
these huge gutters
<div class="layout layout--large">
  <div class="layout__item md-6of12">
    <div class="box box--styleguide box--styleguide--tall">Check out</div>
  </div><div class="layout__item md-6of12">
    <div class="box box--styleguide">these huge gutters</div>
  </div>
</div>

Flush

No
gutters
<div class="layout layout--flush">
  <div class="layout__item md-6of12">
    <div class="box box--styleguide box--styleguide--tall">No</div>
  </div><div class="layout__item md-6of12">
    <div class="box box--styleguide">gutters</div>
  </div>
</div>

Vertical Alignment

You can draw columns with different vertical alignments by using .layout extensions.

Default

No matter how tall this gets
This will still be at the top
<div class="layout">
  <div class="layout__item md-6of12">
    <div class="box box--styleguide box--styleguide--tall">No matter how tall this gets</div>
  </div><div class="layout__item md-6of12">
    <div class="box box--styleguide">This will still be at the top</div>
  </div>
</div>

Middle

No matter how tall this gets
This will still be in the middle
<div class="layout layout--middle">
  <div class="layout__item md-6of12">
    <div class="box box--styleguide box--styleguide--tall">No matter how tall this gets</div>
  </div><div class="layout__item md-6of12">
    <div class="box box--styleguide">This will still be in the middle</div>
  </div>
</div>

Bottom

No matter how tall this gets
This will still be at the bottom
<div class="layout layout--bottom">
  <div class="layout__item md-6of12">
    <div class="box box--styleguide box--styleguide--tall">No matter how tall this gets</div>
  </div><div class="layout__item md-6of12">
    <div class="box box--styleguide">This will still be at the bottom</div>
  </div>
</div>

Render Style

You can choose which direction columns are drawn from using these .layout extensions.

Reverse

Check out
These elements rendering in reverse order
<div class="layout layout--reverse">
  <div class="layout__item md-4of12">
    <div class="box box--styleguide box--styleguide--tall">Check out</div>
  </div><div class="layout__item md-4of12">
    <div class="box box--styleguide">These elements rendering in reverse order</div>
  </div>
</div>

Center

Check out
These elements rendering from the center
<div class="layout layout--center">
  <div class="layout__item md-4of12">
    <div class="box box--styleguide box--styleguide--tall">Check out</div>
  </div><div class="layout__item md-4of12">
    <div class="box box--styleguide">These elements rendering from the center</div>
  </div>
</div>

Right

Check out
These elements rendering from the right
<div class="layout layout--right">
  <div class="layout__item md-4of12">
    <div class="box box--styleguide box--styleguide--tall">Check out</div>
  </div><div class="layout__item md-4of12">
    <div class="box box--styleguide">These elements rendering from the right</div>
  </div>
</div>

Media

The media object is an image or video on one side, with descriptive content on another side. The content area can contain any other objects. In most cases, it contains text, but we could put lists, grids, or even other media objects inside.

.media sets a default gutter between .media__object and .media__body. The default size for this gutter is 2rem or 20px.

If you need to align your content in the middle or the bottom of itself then consider using a flag object.

Class Description
.media Default gutters
.media--reverse Children are rendered in reverse order
.xs-media Collapsed on all screen sizes
.sm-media Collapsed on small screens and up
.md-media Collapsed on medium screens and up
.lg-media Collapsed only on large screens

Default

placeholder

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste magnam facilis quas, eos unde illum rem dicta. Atque repudiandae, numquam laudantium quas voluptas, facilis? Illo excepturi nihil quidem a esse!

<div class="media">
  <div class="media__object">
    <img src="//placehold.it/150" alt="placeholder" />
  </div>
  <div class="media__body">
    <p class="xs-pl1">
      Lorem ipsum dolor sit amet,
      consectetur adipisicing elit.
      Iste magnam facilis quas,
      eos unde illum rem dicta.
      Atque repudiandae,
      numquam laudantium quas voluptas,
      facilis? Illo excepturi nihil quidem a esse!
    </p>
  </div>
</div>

Reverse

placeholder
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste magnam facilis quas, eos unde illum rem dicta. Atque repudiandae, numquam laudantium quas voluptas, facilis? Illo excepturi nihil quidem a esse!
<div class="media media--reverse">
  <div class="media__object">
    <img src="//placehold.it/150" alt="placeholder" />
  </div>
  <div class="media__body">
    Lorem ipsum dolor sit amet,
    consectetur adipisicing elit.
    Iste magnam facilis quas,
    eos unde illum rem dicta.
    Atque repudiandae,
    numquam laudantium quas voluptas,
    facilis? Illo excepturi nihil quidem a esse!
  </div>
</div>

Responsive Media Objects

Collapse at xs

placeholder

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste magnam facilis quas, eos unde illum rem dicta. Atque repudiandae, numquam laudantium quas voluptas, facilis? Illo excepturi nihil quidem a esse!

<div class="media xs-media">
  <div class="media__object">
    <img src="//placehold.it/150" alt="placeholder" />
  </div>
  <div class="media__body">
    <p class="xs-pt1">
      Lorem ipsum dolor sit amet,
      consectetur adipisicing elit.
      Iste magnam facilis quas,
      eos unde illum rem dicta.
      Atque repudiandae,
      numquam laudantium quas voluptas,
      facilis? Illo excepturi nihil quidem a esse!
    </p>
  </div>
</div>

Collapse at sm

placeholder

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste magnam facilis quas, eos unde illum rem dicta. Atque repudiandae, numquam laudantium quas voluptas, facilis? Illo excepturi nihil quidem a esse!

<div class="media sm-media">
  <div class="media__object">
    <img src="//placehold.it/150" alt="placeholder" />
  </div>
  <div class="media__body">
    <p class="xs-pl1 sm-pl0 sm-pt1">
      Lorem ipsum dolor sit amet,
      consectetur adipisicing elit.
      Iste magnam facilis quas,
      eos unde illum rem dicta.
      Atque repudiandae,
      numquam laudantium quas voluptas,
      facilis? Illo excepturi nihil quidem a esse!
    </p>
  </div>
</div>

Collapse at md

placeholder

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste magnam facilis quas, eos unde illum rem dicta. Atque repudiandae, numquam laudantium quas voluptas, facilis? Illo excepturi nihil quidem a esse!

<div class="media md-media">
  <div class="media__object">
    <img src="//placehold.it/150" alt="placeholder" />
  </div>
  <div class="media__body">
    <p class="xs-pl1 md-pl0 md-pt1">
      Lorem ipsum dolor sit amet,
      consectetur adipisicing elit.
      Iste magnam facilis quas,
      eos unde illum rem dicta.
      Atque repudiandae,
      numquam laudantium quas voluptas,
      facilis? Illo excepturi nihil quidem a esse!
    </p>
  </div>
</div>

Collapse at lg

placeholder

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste magnam facilis quas, eos unde illum rem dicta. Atque repudiandae, numquam laudantium quas voluptas, facilis? Illo excepturi nihil quidem a esse!

<div class="media lg-media">
  <div class="media__object">
    <img src="//placehold.it/150" alt="placeholder" />
  </div>
  <div class="media__body">
    <p class="xs-pl1 lg-pl0 lg-pt1">
      Lorem ipsum dolor sit amet,
      consectetur adipisicing elit.
      Iste magnam facilis quas,
      eos unde illum rem dicta.
      Atque repudiandae,
      numquam laudantium quas voluptas,
      facilis? Illo excepturi nihil quidem a esse!
    </p>
  </div>
</div>