A new shape shifting approach to the 12
column
responsive
grid
system

Easily control column widths on various viewports using one class.
Download Werewolf.css

Easy Syntax
One You Can Remember

How It Works »

Three Column Widths
Just One Class

Demos »

Rapid Prototyping
For All Device Widths

Demos »

Create Advanced
Responsive Layouts

Download

How It Works

Just like any other 12 column CSS grid, Werewolf utilizes the idea of rows, columns and subcolumns. How it differs is that the grid class names include two new numeric values, one representing the tablet col span, one the mobile col span. When the window is resized, media queries determine which value to apply as the new col span.

Like the other grids, an omega class is used to remove the right column margin from the last element in a row. Any number 1-12 can be used for any of the three values, as long as total column count for each view equals 12.

The Syntax

Werewolf Responsive Grid Syntax

Special Classes

.omega
Removes the right margin from an element on all viewports. Necessary on the last element in a row.
.mobile-margin
Like the standard omega class, it removes the columns right margin, but on the mobile view only.
.tablet-margin
Like the standard omega class, it removes the columns right margin, but on the tablet view only.
.median-margin
Like the standard omega class, it removes the columns right margin, but only on tablet and mobile views.
.desktop-margin
Like the standard omega class, it removes the columns right margin, but on the desktop view only.
.mobile-hide
Hide the element on the mobile view only.
.tablet-hide
Hide the element on the tablet view only.
.desktop-hide
Hide the element on the desktop view only.
.floatright
Float the element right instead of the default left.