The template includes a complete CSS grid set, with 12 fluid columns and a simple syntax:
<div class="columns"> <!-- First row --> <div class="three-columns">3 cols</div> <div class="nine-columns">9 cols</div> <!-- Second row --> <div class="new-row twelve-columns">12 cols</div> </div>
The available size classes are:
There is one extra class: new-row. This class is usefull to clear floats on a new grid line and avoid a higher block from pushing the following columns out of place.
Using fluid columns on a responsive design can lead to really, really tiny columns on mobile screens, thus making them useless. The good news is there is also a set of classes to define columns size for each responsive width, so you can finely craft how your columns and content will look for each size.
To use columns sizes specific to a responsive size, add the following suffixes to the above class names:
Note that each responsive size class defines the column size for its related screen size and the lower ones (unless there is a defined size for these). Here are some examples to help you understand how it works:
Classes applied to a column | Wide screen | Tablet | Mobile - landscape | Mobile - portrait |
---|---|---|---|---|
four-columns / six-columns-tablet / twelve-columns-mobile | 4 columns | 6 columns | 12 columns | |
two-columns / four-columns-mobile-landscape / six-columns-mobile-portrait | 2 columns | 4 columns | 6 columns | |
six-columns / twelve-columns-mobile | 6 columns | 12 columns |
For instance, look at these columns below on a wide screen, then resize your browser window to see how they break into multiple rows and resize to always fit the available space while preserving the aspect ratio:
<div class="columns"> <div class="one-column two-columns-tablet three-columns-mobile-landscape six-columns-mobile-portrait">1 col</div> <div class="one-column two-columns-tablet three-columns-mobile-landscape six-columns-mobile-portrait">1 col</div> <div class="new-row-mobile-portrait two-columns three-columns-tablet six-columns-mobile-landscape twelve-columns-mobile-portrait">2 cols</div> <div class="new-row-mobile three-columns five-columns-tablet twelve-columns-mobile">3 cols</div> <div class="new-row-tablet new-row-mobile five-columns twelve-columns-tablet">5 cols</div> </div>
Two fixed-size columns styles are available, and are responsive too: on smaller screens, the fixed-size column is stacked on top of the fluid one - try resizing your browser to see it in action!
<div class="left-column-200px margin-bottom"> <div class="left-column"> Fixed-size column </div> <div class="right-column"> Fluid column </div> </div>
<div class="right-column-200px"> <div class="right-column"> Fixed-size column </div> <div class="left-column"> Fluid column </div> </div>