Gridlock

A responsive CSS grid system.

Current Version: 3.1.7


Installation

Include the following resources on your page before initializing:

<link href="fs.gridlock.css" rel="stylesheet">

Bower

You can deploy and update via the command line with Bower:

bower install Gridlock

Usage

Gridlock works by nesting 'cells' within 'rows'. Cells are defined by classes that set widths at specific breakpoints. The breakpoints correspond to general screen sizes. By default, Gridlock renders 3 columns on mobile, 6 columns on tablet and 12 columns on mobile.

Markup

A basic example may look something like:

<body class="gridlock">
    <div class="row">
        <div class="mobile-3 tablet-2 desktop-4">...</div>
        <div class="mobile-3 tablet-2 desktop-4">...</div>
        <div class="mobile-3 tablet-2 desktop-4">...</div>
    </div>
</body>

This will create 3 cells that span 3 columns on mobile, 2 columns on tablet and 4 columns on desktop. You can think of the nested structure like a directory tree:

gridlock
├─ row
|  ├─ cell
|  |─ cell
|  |  └─ row
|  |     ├─ cell
|  |     └─ cell
|  └─ cell
└─ row
   ├─ cell
   └─ cell

Box-Sizing

Gridlock relies on border-box and includes a global box-sizing reset:

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

This will effect every element on the page. It can have unexpected results but will help speed development by modifying how padding and borders effect.

Row Widths and Columns Counts

Name Screen Size Row Width Column Count
min smaller than 500px 300px 3
mobile smaller than 740px 480px 3
tablet 740px to 960px 720px 6
desktop 960px to 1220px 960px 12
max larger than 1220px 1200px 12

Defining Cells

Class Description
min-X only min size
mobile-X both mobile and min sizes
tablet-X tablet size
desktop-X both desktop and max sizes
max-X only max size
all-X all sizes

Cells are defined by the target screen size and column count, relative to it's screen size. For example mobile-2 will produce a cell spanning 2 of the 3 total columns in the mobile screen size. Cell classes should be stacked to specify column spans across all screen sizes:

<div class="mobile-3 tablet-6 desktop-12">...</div>

The max-X and min-X classes give you an added level of control when targeting the desktop and mobile sizes. For example, you may need a cell to span 2 columns at the larger mobile size, but span the full width at the smallest mobile size:

<div class="min-3 mobile-2 ...">...</div>

The all-X class gives you the ability to create a cell that spans all available columns on all screen sizes:

<div class="all-full ...">...</div>

Fraction Cells

You can also use the fraction classes in place of specific column counts:

Class Description
X-full entire row width
X-half 1/2 row width
X-third 1/3 row width
X-fourth 1/4 row width

Helper Classes

Helper classes can be added to cells to modify their default behavior in predictable ways.

Class Description
padded Swaps cell margin for padding. Allows backgrounds to touch while maintaining gutters.
contained Removes cell margin. Allows backgrounds to touch by removing gutters.
centered Centers cell. Useful for centering odd column counts cells.

LESS Configuration

Gridlock can also be configured and rebuilt using Grunt. Simply edit the variables found in /src/fs.gridlock-config.less before running the default grunt process.

Variable Default Description
Structure
@class-container gridlock Container class
@class-row row Row class
@class-contained contained Contained helper class
@class-padded padded Padded helper class
@class-centered centered Centered helper class
Cells
@class-all all All cell class
@class-min min Min cell class
@class-mobile mobile Mobile cell class
@class-tablet tablet Tablet cell class
@class-desktop desktop Desktop cell class
@class-max max Max cell class
Columns
@columns-mobile 3 Mobile column count
@columns-tablet 6 Tablet column count
@columns-desktop 12 Desktop column count
Widths
@width-min 300px Min row width
@width-mobile 480px Mobile row width
@width-tablet 720px Tablet row width
@width-desktop 960px Desktop row width
@width-max 1200px Max row width
Breakpoints
@width-break-min 320px Min break width
@width-break-mobile 500px Mobile break width
@width-break-tablet 740px Tablet break width
@width-break-desktop 980px Desktop break width
@width-break-max 1220px Max break width
Gutters
@gutter 1.0416666666666667%; Gutter width