Grid systems. Every framework today has one, but they are frequently over-specified, overly complex and totally inflexible. Joomla's default grid, from Bootstrap, is no exception so we've created something better.
Imagine using a grid system that requires no prior knowledge, is completely flexible and doesn't require you to litter your markup with .clearfix. What about a grid system that let you use a ten-column grid or a twelve-column grid, or both! What about a grid system that let you just switch off gutters? Wouldn't that be great.
We think this is what a robust grid system should look like, so that's what we built.
Simple syntax
Want to create a grid layout? All you need to get started is to define the container with a css class of .grid. The container doesn't make any assumptions of it's content so there is no concept of ‘rows’. Each grid column, defined with the class .col simply position itself according to its natural source-order (so your grid works LTR or RTL, without any changes) inside the containing .grid element.
That's it, you have a simple grid with any number of columns, no clearfixing required.
And human widths
Each grid columns will, by default, take the width of its parent container, so you'll also want to assign some width classes to your columns to determine your layout.
One problem with a grid syntax like Bootstrap's is that you need to know, in advance, how many columns the grid has been constructed with in order to make sense of it. Without knowing how many columns the grid contains .span-6 makes no sense at all.
With our grid syntax you can assign a width to any element using regular fractional values;
- .one-third
- .two-sixths
- .four-twelfths
All produce the same result, as do:
- .ten-twelfths
- .five-sixths
Or:
- .one-half
- .three-sixths
- .five-tenths
- .six-twelfths
…and you can mix and match these any way you please.
For every viewport
Of course, you can also prefix any such value with a viewport specific class. There are several available for the generic viewport widths, sm, md, lg, xl, so you can easily assign viewport-specific widths to your grid columns, e.g.:
class="col sm-one-half md-one-third lg-one-fifth xl-two-twelfths"
Breakpoints widths are defined, and easily changed, in the template variables file.
