Gridlock

A responsive CSS grid system.

Gridlock is a simple responsive grid system that will kickstart your next site build.

Percentage based responsive grid systems have issues with smaller columns on smaller screens, requiring developers to manually override column widths at specific breakpoints. Gridlock is here to fix that. By utilizing screen size specific class names and column counts, Gridlock gives designers and developers the foundation for crafting an experience that better matches the target device.

Usage

Syntax

Gridlock features three distinct grid sizes that correspond to specific screen sizes: desktop, tablet and mobile. Desktop features a full 12 or 16 column grid, tablet snaps down to 6 or 8, and mobile contains only 3.

The syntax is simple and easily read: [target device]-[column count]. Using this method, a cell can be easily adjusted to fit the target device's screen size by applying the appropriate class names: desktop-8 tablet-4 mobile-3. Gridlock also includes some fraction helper classes, -full, -half and -third.

Mobile First

Gridlock also features a mobile first variant in both 12 and 16 columns. These use the exact same syntax as the standard "desktop" variants, it's simply a reversal of the media query logic. In the mobile first versions, desktop styles aren't applied and therfore do not need to be over writen, speeding up parse and render time on mobile browsers.

Bookmarklet

The Gridlock Bookmarklet adds a simple overlay to help debug alignment issues. Simply drag this following button into your bookmarks bar:

Gridlock Overlay

Auto Load

You can also trigger the bookmarklet load automatically on each page of a site:

(function(){if(typeof%20GridlockBookmarklet=='undefined'){document.body.appendChild(document.createElement('script')).src='http://www.benplum.com/js/gridlock.bookmarklet.js';}else{GridlockBookmarklet();}})();

Options

Option	Default	Description
`onLoad`	`false`	Display overlay on page load
`position`	`"top-right"`	Menu position, relative to window; "top-left", "top-right", "bottom-left", "bottom-right"
`useCookies`	`false`	Remember overlay state from page to page

If you plan to use the 16 column or mobile first grids, best practice is to flag the specific grid version in the body tag. This ensures the bookmarklet properly renders the overlay:

Class Flags

Class	Description
`gridlock`	Always required for grid rendering
`gridlock-16`	16 column grid
`gridlock-mf`	Mobile first grid

Demo

<body class="gridlock gridlock-16 gridlock-mf">

Examples

View examples in the demo:

Launch Demo

Compatibility

Tested in Firefox, Chrome*, Safari*, IE7+

*There is a well documented web-kit bug concerning percentage based margins that primarily effects rows with many thinner cells. It appears Google went ahead and fixed this in Chrome 21 - it still exists in Safari 6.0.

License

Released under the MIT License. Feel free to use it in personal and commercial projects.