Grrrrd
Resolution-Responsive
CSS Framework
Reference + Demo
▼ Download Grrrrd.css
Grrrrd provides a 12-column grid on desktop resolutions, 6 columns on tablet layout and a full-width vertical layout for mobile devices. Margins always stay at 20px, while cols are 64 (Desktop) and 108 (Tablet) pixels wide.
Resize your
Browser Window
to see how content is re-organized on smaller resolutions.Let Grrrrd organize your layout automatically
set widths, indents, clearings and visibility of elements for all resolutions separately.
This is the Desktop Layout
This is the Tablet Layout
This is the Mobile Layout
How it works
All the magic is done by CSS3 media queries.
No scripting or additional programming
is needed.
Reference
Grrrrd offers a bunch of smart classes to set widths, indents, visibility and clearings of your layout.
Widths
- .grid-1
.grid-2
.grid-3
...
.grid-12
- Give elements a specific grid-based width
Although theses widths are automatically converted to fit the tablet layout, you may want to define exceptions. These classes only affect the table layout:
- .grid-1-t
.grid-2-t
...
.grid-6-t
- Give elements a specific grid-based width on tablet layout.
Indents
- .indent-1
.indent-2
.indent-3
...
.indent-11
- Give elements a left margin based on the grid.
Although theses margins are automatically converted to fit the tablet layout, you may want to define exceptions. These classes only affect the tablet layout:
- .indent-1-t
.indent-2-t
...
.indent-6-t
- Give elements a specific grid-based left margin on tablet layout.
Misc.
- .grid-container
- This class represents the wrapper element. Put all grid-based elements in there.
- .grid-start
.grid-start-d
.grid-start-t
- starts a new row, second only on desktop layout, third on tablet layout.
- .hide-d
.hide-t
.hide-m
- Hide elements only on Desktop(d), Tablet(t) and/or Mobile(m) layout.