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
Customizable: Need more or less columns? Set your preference via Sass variables. You can also turn off the Grid System entirely to reduce Frow's file size.
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
Flexbox Is Love, Flexbox 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 Flexbox 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.
class="frow gutters"
.col-md-1-4
.col-md-2-4
.col-md-1-4
Customizable: The gutters are 30 pixels wide by default, but you can change that with Sass variables.
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-2 red-background"> </div> </div> // RIGHT <div class="frow"> <div class="col-md-1-2"> <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.