API documentation for all of Frag's classes, and how to use the grid.
grid class is used to wrap columns and provide a
maximum width for the grid.
col class is used to add base column styling to an
element. This doesn't provide any width values, but is required for any
of the width classes to work.
col class is not particularly useful by itself. We also
want to give our columns widths. This is done with
classes. Depending on how many columns your grid has (default is 12),
there will be a
dsk- prefixed class for each width:
dsk stands for "desktop". We'll find out about
columns for tablet and mobile later.
dsk- class width represents the number of column
widths it will span. For example,
dsk-1 spans one column
width so you will be able to fit twelve of these per row.
dsk-6 spans six columns so you will only be able to fit two
of these per row:
When a grid spans multiple rows, you'll need to clear columns in order
to prevent strange display issues if columns have different heights. You
can add a class of
dsk-clear to the first element in each
row (ignoring the first row as it has nothing to clear). This means that
mixed-height columns display nicely.
Clearing doesn't work particularly well in older versions of Internet
Explorer. Sometimes this looks acceptable, sometimes it doesn't. If
you're desperate to fix this, then you may use the
oldie-clear class. The caveat here is that it must be
applied to a new element rather than one of your existing columns. It's
Note: If you know your columns have equal heights (e.g. they
contain fixed height images only) then you can omit the
Frag supports multiple break-points, and you are able to specify column
widths for tablet and mobile. To do this, supplement your regular
dsk-<n> class with
mob-<n> classes. The example below will make all
columns display at half width on desktop and full width on mobile.
The tablet and mobile break-points have their own clear classes too:
mob-clear. These can be used
to provide clearing only at the specified breakpoints, catering for
layouts where the column height is not known.
Clear classes, by default, impact on subsequent break-points. For
dsk-clear will continue to be active in both
tablet and mobile contexts. To explicity remove a previous clear,
you can use the
mob-unclear classes. This comes in handy for complex
layouts where columns switch between odd and even spans:
If you need to nest grids (you probably will) then that's fine, it works exactly as you'd expect it to. The only caveat here is that nested grids work differently in IE 6–7: all nested grid columns become full-width columns.
The markup for grid nesting is as you'd expect:
You can also remove gutters from columns to prevent doubling up when
you're nesting grids. This is done with the
Frag allows you to hide certain columns based on the break-point. This can be useful if a particular column is not valuable or gets in the way for mobile or tablet users, e.g. Advertisements.
mob-hide hide columns. However, like clearing, these impact
on subsequent break-points. So if a column is hidden at tablet size, it
will also be hidden at mobile size. You can explicitly show a
column again with the classes