Flexi

Responsive

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

Child columns class examples:

col-[#]:   omit the size namespace for extra small and up*

col-sm-[#]:   append the -sm namespace for small and up*

col-md-[#]:   append the -md namespace for medium and up*

col-lg-[#]:   append the -lg namespace for large and up*

<div class="row">
    <div class="col-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.

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

Simple Syntax

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

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

Wrappers

.container wrapper

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="box">1200px maximum width centered</div>
        </div>
    </div>
</div>

Offsets

Offset a column

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

Grow and shrink

Add any number of .grow or .shrink columns/rows. It's grow first, let the grid figure it out.

<div class="row">
    <div class="col shrink-md">
        <div class="box">shrink-md</div>
    </div>
</div>

Nested Grids

Nest grids inside grids inside grids.

<div class="row">
    <div class="col">
        <div class="box">
            <div class="row">
                <div class="col">
                    <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 or .start-[sm|md|lg]

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

.center or .center-[sm|md|lg]

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

.end or .end-[sm|md|lg]

<div class="row end">
    <div class="col-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.

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

.top or .top-[sm|md|lg]

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

.middle or .middle-[sm|md|lg]

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

.bottom or .bottom-[sm|md|lg]

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

.col* or .stretch-[sm|md|lg] (default - align-items: stretch)

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

Distribution

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

.around or .around-[sm|md|lg]

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

.between or .between-[sm|md|lg]

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

Reordering

Add classes to reorder columns.

.first or .first-[sm|md|lg]

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

.last or .last-[sm|md|lg]

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

.reset or .reset-[sm|md|lg]

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

.order-[#] or .order-[#]-[sm|md|lg]

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

Reversing

.reverse

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