The Grid System

Columns Divide up the Rows

For building your website's overall framework, you can use columns. Columns break up each .frow into fractions. For example, a .col-md-1-3 creates a column that is one third of the row.

<div class="frow">
    <div class="col-md-1-3"></div>
    <div class="col-md-1-3"></div>
    <div class="col-md-1-3"></div>
</div>

.col-md-1-3

.col-md-1-3

.col-md-1-3

Important Note: When using any of the .col-*'s, they MUST be direct children of a .frow element.

With the default Frow settings, you can use any fraction from halves to twelfths.

.col-md-1-1

.col-md-1-2

.col-md-1-2

.col-md-1-3

.col-md-1-3

.col-md-1-3

.col-md-1-4

.col-md-1-4

.col-md-1-4

.col-md-1-4

.col-md-1-5

.col-md-1-5

.col-md-1-5

.col-md-1-5

.col-md-1-5

.col-md-1-6

.col-md-1-6

.col-md-1-6

.col-md-1-6

.col-md-1-6

.col-md-1-6

.col-md-1-12

.col-md-1-12

.col-md-1-12

.col-md-1-12

.col-md-1-12

.col-md-1-12

.col-md-1-12

.col-md-1-12

.col-md-1-12

.col-md-1-12

.col-md-1-12

.col-md-1-12

Mix and Match Columns

You are able to mix and match the fractions!

.col-md-1-8

.col-md-1-8

.col-md-1-4

.col-md-1-2

.col-md-1-5

.col-md-6-10

.col-md-1-5

Flex Is Love, Flex Is Life

So after that basic grid work, let's see where Frow stands out.

If the fractions add up to less than a whole, Frow centers them. Don't like it? A quick class switches the behavior. See all of the available classes in Frow Shortcuts.

class="frow" // Centers columns horizontally by default

.col-md-3-5

class="frow row-start" // Switches to the typical left align

.col-md-3-5

class="frow row-end" // Switches to right align

.col-md-3-5

CSS Flex even allows for elements to be centered horizontally AND vertically! With Frow, one class and you're done.

class="frow centered" // See all shortcuts: Frow Shortcuts

.col-md-1-3

Gutters

For your website's main grid system, make everything have uniform distance between them via gutters. Just add the .gutters class to the .frow and you're done. With default settings, the gutters are 30 pixels wide.

class="frow gutters"

.col-md-1-4

.col-md-2-4

.col-md-1-4

Another Best Practices Reminder

Just like the .frow elements, don't combine your own personal classes with .col-* classes.

// WRONG
<div class="frow">
    <div class="col-md-1-1 red-background">
    </div>
</div>

// RIGHT
<div class="frow">
    <div class="col-md-1-1">
        <div class="red-background">
        </div>
    </div>
</div>

Again, it seems redundant to have another div wrapper, but it's worth just getting into the habit to avoid the headache of accidentally adding a conflicting class.

Responsive Design

Frow is from Cody Sherman via Beg.in