Quick-Start Guide

Installation

Simply include Flex in the <head> like any other CSS file.


                <link rel="stylesheet" type="text/css" href="flex.css">

How To Use

Apply the .grid class to a div and nest your .row and .column(s) elements inside.

Examples

Standard Grids

Notice the use of the .alpha and .omega classes on the first and last elements.


                <div class="grid">
                    <div class="four columns alpha">Element 1</div>
                    <div class="four columns">Element 2</div>
                    <div class="four columns omega">Element 3</div>
                </div>

Renders

Element 1

Element 2

Element 3


                <div class="grid">
                    <div class="three columns alpha">Element 1</div>
                    <div class="three columns">Element 2</div>
                    <div class="three columns offset-by-three omega">Element 3</div>
                </div>

Renders

Element 1

Element 2

Element 3

Standard Grids with No Gutter


                <div class="grid no-gutter">
                    <div class="four columns alpha">Element 1</div>
                    <div class="four columns">Element 2</div>
                    <div class="four columns omega">Element 3</div>
                </div>

Renders

Element 1

Element 2

Element 3

Responsive Grids

Be sure to define your smallest size with "sm-"! Failing to do so will break your grids on smaller devices.


                <div class="grid">
                    <div class="sm-six columns">Element 1</div>
                    <div class="sm-six columns">Element 2</div>
                </div>

Renders

Element 1

Element 2


                <div class="grid">
                    <div class="sm-twelve md-three columns">Element 1</div>
                    <div class="sm-twelve md-three md-offset-by-three columns">Element 2</div>
                    <div class="sm-twelve md-three columns">Element 3</div>
                </div>

Renders

Element 1

Element 2

Element 3

Parent-Based Sizing


                <div class="grid sm-six lg-three xlg-four">
                    <div class="parent">Element 1</div>
                    <div class="parent">Element 2</div>
                    <div class="parent">Element 3</div>
                </div>

Renders

Element 1

Element 2

Element 3


                <div class="grid three">
                    <div class="parent alpha">Element 1</div>
                    <div class="parent">Element 2</div>
                    <div class="parent">Element 3</div>
                    <div class="parent omega">Element 4</div>
                </div>

Renders

Element 1

Element 2

Element 3

Element 4

Nesting


                <div class="grid">
                    <div class="three columns alpha">
                        3 Cols <br>
                        <div class="six columns alpha">6 Cols</div>
                        <div class="six columns omega">6 Cols</div>
                    </div>
                    <div class="three columns">3 Cols</div>
                    <div class="three columns offset-by-three omega">3 Cols - Offset 3 Cols</div>
                </div>

and it renders

3 Cols

6 Cols

3 Cols

3 Cols - Offset 3 Cols