Documentation
API documentation for all of Frag's classes, and how to use the grid.
Grid
The grid class is used to wrap columns and provide a
maximum width for the grid.
<div class="grid"> <!-- columns --> </div>Columns
The 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.
<div class="grid">
<div class="col"> <!-- content --> </div>
</div>Column Widths
The col class is not particularly useful by itself. We also
want to give our columns widths. This is done with dsk-<n>
classes. Depending on how many columns your grid has (default is 12),
there will be a dsk- prefixed class for each width:
<div class="grid">
<div class="col dsk-1"> <!-- content --> </div>
<div class="col dsk-2"> <!-- content --> </div>
<div class="col dsk-3"> <!-- content --> </div>
<!-- etc. -->
<div class="col dsk-12"> <!-- content --> </div>
</div>
Note: dsk stands for "desktop". We'll find out about
columns for tablet and mobile later.
Each 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:
<!-- Two-Column Grid -->
<div class="grid">
<div class="col dsk-6"> <!-- content --> </div>
<div class="col dsk-6"> <!-- content --> </div>
</div>
<!-- Four-Column Grid -->
<div class="grid">
<div class="col dsk-3"> <!-- content --> </div>
<div class="col dsk-3"> <!-- content --> </div>
<div class="col dsk-3"> <!-- content --> </div>
<div class="col dsk-3"> <!-- content --> </div>
</div>Clearing Columns
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.
<div class="grid">
<div class="col dsk-6"> <!-- content --> </div>
<div class="col dsk-6"> <!-- content --> </div>
<div class="col dsk-6 dsk-clear"> <!-- content --> </div>
<div class="col dsk-6"> <!-- content --> </div>
</div>
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
kinda gross.
<div class="grid">
<div class="col dsk-6"> <!-- content --> </div>
<div class="col dsk-6"> <!-- content --> </div>
<br class="oldie-clear"/>
<div class="col dsk-6 dsk-clear"> <!-- content --> </div>
<div class="col dsk-6"> <!-- content --> </div>
</div>
Note: If you know your columns have equal heights (e.g. they
contain fixed height images only) then you can omit the
dsk-clear class.
Going Responsive
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 tab-<n> and
mob-<n> classes. The example below will make all
columns display at half width on desktop and full width on mobile.
<div class="grid">
<div class="col dsk-6 mob-12"> <!-- content --> </div>
<div class="col dsk-6 mob-12"> <!-- content --> </div>
<div class="col dsk-6 mob-12"> <!-- content --> </div>
<div class="col dsk-6 mob-12"> <!-- content --> </div>
</div>
The tablet and mobile break-points have their own clear classes too:
tab-clear and 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
example, dsk-clear will continue to be active in both
tablet and mobile contexts. To explicity remove a previous clear,
you can use the dsk-unclear, tab-unclear and
mob-unclear classes. This comes in handy for complex
layouts where columns switch between odd and even spans:
<div class="grid">
<div class="col dsk-6 tab-4"></div>
<div class="col dsk-6 tab-4"></div>
<div class="col dsk-6 dsk-clear tab-4 tab-unclear"></div>
<div class="col dsk-6 tab-4 tab-clear"></div>
<div class="col dsk-6 dsk-clear tab-4 tab-unclear"></div>
<div class="col dsk-6 tab-4"></div>
</div>Nested Grids
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:
<div class="grid">
<div class="col dsk-6">
<div class="grid">
<div class="col dsk-6"> <!-- content --> </div>
<div class="col dsk-6"> <!-- content --> </div>
</div>
</div>
<div class="col dsk-6">
<!-- content -->
</div>
</div>
You can also remove gutters from columns to prevent doubling up when
you're nesting grids. This is done with the col-degutter
class.
Hiding Columns
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.
The classes dsk-hide, tab-hide and
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 dsk-show,
tab-show and mob-show
<div class="grid">
<div>
Visible at all screen sizes
</div>
<div class="dsk-hide tab-hide mob-show">
Visible at mobile size only
</div>
<div class="dsk-hide tab-show mob-hide">
Visible at tablet size only
</div>
<div class="dsk-show tab-hide mob-hide">
Visible at desktop size only
</div>
<div class="dsk-hide tab-show mob-show">
Visible at mobile and tablet sizes only
</div>
<div class="dsk-show tab-show mob-hide">
Visible at tablet and desktop sizes only
</div>
</div>