This is the styleguide.

Break it, fix it, ship it!

Basic

This template is rather basic, but has all you need. There's no need to worry about sass or less, it's just plain css, split up into different files: main, header, project, footer, buttons, flexboxgrid and typography. If you need more, you'll have to build more.

Headers

This is what the headers look like.

This is what the headers look like.

This is what the headers look like.

This is what the headers look like.

This is what the headers look like.
This is what the headers look like.

The regular <> elements are styled automatically, but you can style elements with classes .h1, .h2, .h3, .h4, .h5 and .h6 as well.

Buttons

We have a regular button, an alt button and a less wide or a full-width one. Change the "buttons.css" to change more things...

Grid

Our grid based on flexbox. Find the original code we borrowed from flexboxgrid.com/

Responsive (try it!)

Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths.

col-xs-12
col-sm-3
col-md-2
col-lg-2
col-xs-6
col-sm-6
col-md-8
col-lg-8
col-xs-6
col-sm-3
col-md-2
col-lg-2
col-xs-12
col-sm-3
col-md-2
col-lg-2
col-xs-12
col-sm-9
col-md-10
col-lg-10
col-xs-10
col-sm-6
col-md-8
col-lg-10
col-xs-2
col-sm-6
col-md-4
col-lg-2

          <div class="row">
            <div class="col-xs-12
                        col-sm-8
                        col-md-6
                        col-lg-4">
              <div class="box">Responsive</div>
            </div>
          </div>

Fluid

Percent based widths allow fluid resizing of columns and rows.

col-xs-12
col-xs-1
col-xs-11
col-xs-2
col-xs-10
col-xs-3
col-xs-9
col-xs-4
col-xs-8
col-xs-5
col-xs-7
col-xs-6
col-xs-6

          .col-xs-6 {
            flex-basis: 50%;
          }

Simple Syntax

All you need to remember is row, column, content.


          <div class="row">
            <div class="col-xs-12">
                <div class="box">12</div>
            </div>
          </div>

Offsets

Offset a column

col-xs-offset-11
col-xs-offset-10
col-xs-offset-9
col-xs-offset-8
col-xs-offset-7
col-xs-offset-6
col-xs-offset-5
col-xs-offset-4
col-xs-offset-3
col-xs-offset-2
col-xs-offset-1

          <div class="row">
            <div class="col-xs-offset-3 col-xs-9">
                <div class="box">offset</div>
            </div>
          </div>

Auto Width

Add any number of auto sizing columns to a row. Let the grid figure it out.

col-xs
col-xs
col-xs
col-xs
col-xs

          <div class="row">
            <div class="col-xs">
                <div class="box">auto</div>
            </div>
          </div>

Nested Grids

Nest grids inside grids inside grids.


          <div class="row">
            <div class="col-xs">
                <div class="box">
                    <div class="row">
                        <div class="col-xs">
                            <div class="box">auto</div>
                        </div>
                    </div>
                </div>
            </div>
          </div>

Alignment

Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column

.start-


          <div class="row start-xs">
            <div class="col-xs-6">
                <div class="box">
                    start
                </div>
            </div>
          </div>

.center-


          <div class="row center-xs">
            <div class="col-xs-6">
                <div class="box">
                    start
                </div>
            </div>
          </div>

.end-


          <div class="row end-xs">
            <div class="col-xs-6">
                <div class="box">
                    end
                </div>
            </div>
          </div>

Here is an example of using the modifiers in conjunction to acheive different alignment at different viewport sizes.

Example 

          <div class="row center-xs end-sm start-lg">
            <div class="col-xs-6">
                <div class="box">
                    All together now
                </div>
            </div>
          </div>

.top-


          <div class="row top-xs">
            <div class="col-xs-6">
                <div class="box">
                    top
                </div>
            </div>
          </div>

.middle-


          <div class="row middle-xs">
            <div class="col-xs-6">
                <div class="box">
                    center
                </div>
            </div>
          </div>

.bottom-


          <div class="row bottom-xs">
            <div class="col-xs-6">
                <div class="box">
                    bottom
                </div>
            </div>
          </div>

Distribution

Add classes to distribute the contents of a row or column.

.around-


          <div class="row around-xs">
            <div class="col-xs-2">
                <div class="box">
                    around
                </div>
            </div>
            <div class="col-xs-2">
                <div class="box">
                    around
                </div>
            </div>
            <div class="col-xs-2">
                <div class="box">
                    around
                </div>
            </div>
          </div>

.between-


          <div class="row between-xs">
            <div class="col-xs-2">
                <div class="box">
                    between
                </div>
            </div>
            <div class="col-xs-2">
                <div class="box">
                    between
                </div>
            </div>
            <div class="col-xs-2">
                <div class="box">
                    between
                </div>
            </div>
          </div>

Reordering

Add classes to reorder columns.

.first-

1
2
3
4
5
6

          <div class="row">
            <div class="col-xs-2">
                <div class="box">
                    1
                </div>
            </div>
            <div class="col-xs-2">
                <div class="box">
                    2
                </div>
            </div>
            <div class="col-xs-2 first-xs">
                <div class="box">
                    3
                </div>
            </div>
          </div>

.last-

1
2
3
4
5
6

          <div class="row">
            <div class="col-xs-2 last-xs">
                <div class="box">
                    1
                </div>
            </div>
            <div class="col-xs-2">
                <div class="box">
                    2
                </div>
            </div>
            <div class="col-xs-2">
                <div class="box">
                    3
                </div>
            </div>
          </div>

Reversing

.reverse

1
2
3
4
5
6

          <div class="row reverse">
            <div class="col-xs-2">
                <div class="box">
                    1
                </div>
            </div>
            <div class="col-xs-2">
                <div class="box">
                    2
                </div>
            </div>
            <div class="col-xs-2">
                <div class="box">
                    3
                </div>
            </div>
          </div>