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>