CSS Components and Styleguide

Intro

A grid is 3 HTML elements...

<grid>
    <row>
        <column>

Grid and row divs just need grid and grid__row classes...

<div="grid">
    <div class="grid__row">

A column has screen sizes and widths.

$screen-sizes: xs, sm, md, lg

A row can hold 12 columns. A column can be 1 - 12 columns wide.

A column class looks like: grid__col--$screenSize-$width

The below example has 3 column classes per column, so the columns will have different widths at different screen sizes. Resize the window to see the columns respond. Open the markup drop down to see the code.

Example

Markup: grid/basic-usage.html

                    <div class="grid">
  <div class="grid__row">
      <div class="grid__col--xs-12 grid__col--sm-3 grid__col--md-2 grid__col--lg-2">
          <div class="styleguide__box"></div>
      </div>
      <div class="grid__col--xs-6 grid__col--sm-6 grid__col--md-8 grid__col--lg-8">
          <div class="styleguide__box"></div>
      </div>
      <div class="grid__col--xs-6 grid__col--sm-3 grid__col--md-2 grid__col--lg-2">
          <div class="styleguide__box"></div>
      </div>
  </div>
  <div class="grid__row">
      <div class="grid__col--xs-12 grid__col--sm-3 grid__col--md-2 grid__col--lg-2">
          <div class="styleguide__box"></div>
      </div>
      <div class="grid__col--xs-12 grid__col--sm-9 grid__col--md-10 grid__col--lg-10">
          <div class="styleguide__box"></div>
      </div>
  </div>
  <div class="grid__row">
      <div class="grid__col--xs-10 grid__col--sm-6 grid__col--md-8 grid__col--lg-10">
          <div class="styleguide__box"></div>
      </div>
      <div class="grid__col--xs-2 grid__col--sm-6 grid__col--md-4 grid__col--lg-2">
          <div class="styleguide__box"></div>
      </div>
  </div>
</div>

Source: grid/_grid-examples.scss, line 1

Easy Columns

Don't wana do fractions everytime you need some columns? Easy column classes only have screen sizes; grid__col--$screenSize.

Throw in up to 12 and the grid will do the work for you.

Example

grid__col--xs

Markup: grid/easy-columns.html

                    <div class="grid">
    <div class="grid__row">
        <div class="grid__col--xs">
            <div class="styleguide__box">grid__col--xs</div>
        </div>
        <div class="grid__col--xs">
            <div class="styleguide__box">grid__col--xs</div>
        </div>
    </div>
    <div class="grid__row">
        <div class="grid__col--xs">
            <div class="styleguide__box">grid__col--xs</div>
        </div>
        <div class="grid__col--xs">
            <div class="styleguide__box">grid__col--xs</div>
        </div>
        <div class="grid__col--xs">
            <div class="styleguide__box">grid__col--xs</div>
        </div>
    </div>
</div>

Source: grid/_grid-examples.scss, line 33

Offsets

An offset is another column class, it has a screen size and a width. Instead of setting the column width it pushes the column, a number of column sizes, to the left at the desired screen size.

A column class looks like: grid__col--$screenSize-offset-$width

NOTE: can't be used with easy columns.

Example

Offset 11

Offset 10

Offset 9

Offset 8

Offset 7

Offset 6

Offset 5

Offset 4

Offset 3

Offset 2

Offset 1

Markup: grid/offsets.html

                    <div class="grid">
    <div class="grid__row">
        <div class="grid__col--xs-1 grid__col--xs-offset-11">
            <div class="styleguide__box">Offset 11</div>
        </div>
    </div>
    <div class="grid__row">
        <div class="grid__col--xs-1 grid__col--xs-offset-10">
            <div class="styleguide__box">Offset 10</div>
        </div>
    </div>
    <div class="grid__row">
        <div class="grid__col--xs-1 grid__col--xs-offset-9">
            <div class="styleguide__box">Offset 9</div>
        </div>
    </div>
    <div class="grid__row">
        <div class="grid__col--xs-1 grid__col--xs-offset-8">
            <div class="styleguide__box">Offset 8</div>
        </div>
    </div>
    <div class="grid__row">
        <div class="grid__col--xs-1 grid__col--xs-offset-7">
            <div class="styleguide__box">Offset 7</div>
        </div>
    </div>
    <div class="grid__row">
        <div class="grid__col--xs-1 grid__col--xs-offset-6">
            <div class="styleguide__box">Offset 6</div>
        </div>
    </div>
    <div class="grid__row">
        <div class="grid__col--xs-1 grid__col--xs-offset-5">
            <div class="styleguide__box">Offset 5</div>
        </div>
    </div>
    <div class="grid__row">
        <div class="grid__col--xs-1 grid__col--xs-offset-4">
            <div class="styleguide__box">Offset 4</div>
        </div>
    </div>
    <div class="grid__row">
        <div class="grid__col--xs-1 grid__col--xs-offset-3">
            <div class="styleguide__box">Offset 3</div>
        </div>
    </div>
    <div class="grid__row">
        <div class="grid__col--xs-1 grid__col--xs-offset-2">
            <div class="styleguide__box">Offset 2</div>
        </div>
    </div>
    <div class="grid__row">
        <div class="grid__col--xs-1 grid__col--xs-offset-1">
            <div class="styleguide__box">Offset 1</div>
        </div>
    </div>
</div>

Source: grid/_grid-examples.scss, line 44

Nested

You can nest grids in grids, go crazy!

Example

Markup: grid/nested-grid.html

                    <div class="grid">
    <div class="grid__row">
        <div class="grid__col--xs-7">
            <div class="styleguide__box">
                <div class="grid__row">
                    <div class="grid__col--xs-9">
                        <div class="styleguide__box styleguide__box--dark">
                            <div class="grid__row">
                                <div class="grid__col--xs-4">
                                    <div class="styleguide__box styleguide__box--dark"></div>
                                </div>
                                <div class="grid__col--xs-8">
                                    <div class="styleguide__box styleguide__box--dark"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="grid__col--xs-3">
                        <div class="styleguide__box styleguide__box--dark">
                            <div class="grid__row">
                                <div class="grid__col--xs">
                                    <div class="styleguide__box styleguide__box--dark"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="grid__col--xs-5">
            <div class="styleguide__box">
                <div class="grid__row">
                    <div class="grid__col--xs-12">
                        <div class="styleguide__box styleguide__box--dark">
                            <div class="grid__row">
                                <div class="grid__col--xs-6">
                                    <div class="styleguide__box styleguide__box--dark"></div>
                                </div>
                                <div class="grid__col--xs-6">
                                    <div class="styleguide__box styleguide__box--dark"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Source: grid/_grid-examples.scss, line 58

Horizontal

Row Content Horizontal Alignment

Sometimes columns need to lean to the left, right or live in the center of a row.

We've got you covered...

grid__row--$screenSize-left
grid__row--$screenSize-right
grid__row--$screenSize-center

Example

Left

Right

Center

The example below uses 3 row content horiziontal alignment classes. They have different screen sizes. I dare you to resize the screen.

Markup: grid/row-horizontal-alignment.html

                    <div class="grid">
    <h3><strong>Left</strong></h3>
    <div class="grid__row">
        <div class="grid__col--xs-12">
            <div class="styleguide__box">
                <div class="grid__row grid__row--xs-left">
                    <div class="grid__col--xs-6">
                        <div class="styleguide__box styleguide__box--dark"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <h3><strong>Right</strong></h3>
    <div class="grid__row">
        <div class="grid__col--xs-12">
            <div class="styleguide__box">
                <div class="grid__row grid__row--xs-right">
                    <div class="grid__col--xs-6">
                        <div class="styleguide__box styleguide__box--dark"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <h3><strong>Center</strong></h3>
    <div class="grid__row">
        <div class="grid__col--xs-12">
            <div class="styleguide__box">
                <div class="grid__row grid__row--xs-center">
                    <div class="grid__col--xs-6">
                        <div class="styleguide__box styleguide__box--dark"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br />
    <p>
        The example below uses 3 row content horiziontal alignment classes.
        They have different screen sizes. I dare you to resize the screen.
    </h3>
    <div class="grid__row">
        <div class="grid__col--xs-12">
            <div class="styleguide__box">
                <div class="grid__row grid__row--lg-left grid__row--xs-center grid__row--sm-right">
                    <div class="grid__col--xs-6">
                        <div class="styleguide__box styleguide__box--dark"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Source: grid/_grid-examples.scss, line 66

Vertical

Row Content Vertical Alignment

Sometimes columns need to live at the top, bottom or middle of a row.

There's classes for that too...

grid__row--$screenSize-top
grid__row--$screenSize-middle
grid__row--$screenSize-bottom

Example

Resize the screen to make the right column dance!

Markup: grid/row-vertical-alignment.html

                    <p>Resize the screen to make the right column dance!</p>
<div class="grid__row grid__row--xs-top grid__row--sm-middle grid__row--md-bottom">
    <div class="grid__col--xs-6">
        <div class="styleguide__box styleguide__box--lg"></div>
    </div>
    <div class="grid__col--xs-6">
        <div class="styleguide__box"></div>
    </div>
</div>

Source: grid/_grid-examples.scss, line 81

Distribution

Row Content Space Distribution

Sometimes... Sometimes audience, columns just need a little space in their row.

grid__row--$screenSize-around
grid__row--$screenSize-between

NOTE: can't be used with easy columns.

Example

This row needs a little space around it's columns: grid__row--xs-around

This row needs a little space between it's columns: grid__row--xs-between

Markup: grid/row-space-distribution.html

                    <div class="grid ">
    <p>
        This row needs a little space <strong>around</strong> it's columns:
        <strong>grid__row--xs-around</strong>
    </p>
    <div class="grid__row grid__row--xs-around">
        <div class="grid__col--xs-2">
            <div class="styleguide__box"></div>
        </div>
        <div class="grid__col--xs-2">
            <div class="styleguide__box"></div>
        </div>
        <div class="grid__col--xs-2">
            <div class="styleguide__box"></div>
        </div>
    </div>

    <p>
        This row needs a little space <strong>between</strong> it's columns:
        <strong>grid__row--xs-between</strong>
    </p>
    <div class="grid__row grid__row--xs-between">
        <div class="grid__col--xs-2">
            <div class="styleguide__box"></div>
        </div>
        <div class="grid__col--xs-2">
            <div class="styleguide__box"></div>
        </div>
        <div class="grid__col--xs-2">
            <div class="styleguide__box"></div>
        </div>
    </div>
</div>

Source: grid/_grid-examples.scss, line 96