Extra Strength Responsive Grids

We now recommend the Bedrock influenced Extra Strength Responsive Grids. Check out the awesomeness.

Bedrock

A responsive, mobile first 18 column grid. A theoretical grid for today's layout challenges. Pull it apart, modify it, or extend your favorite grid framework with the mobile classes.

Checkout the demo to see Bedrock in action and find documentation in css/bedrock.css.

---

Created by Tim Svensen (follow @tsvensen)

---

Quick Start

1. Grab bedrock.css
2. Include the file before your stylesheet or prepend to your CSS
3. Update the media query in bedrock.css to respond correctly for your project
4. See the examples in index.html for a basic grid setup
5. Build your project

• Optionally add gutters by adding .gutters to .grid-container
• Mobile classes: .whole, .half and .third

The Grid

                   18
             9            9
      6            6             6
  3      3      3      3      3     3
1 1 1  1 1 1  1 1 1  1 1 1  1 1 1  1 1 1

Closing Thoughts

This project exists to explore a mobile first grid solution in a responsive web. Our goal is not to "muddy the waters" with more grid frameworks. As stated above, it's really to demonstrate the mobile approach and a utility best.

Help improve Bedrock:

• pull requests accepted
• comment in an issue

Bedrock was created with GruntStart.

Legal

Author & copyright (c) 2013: Tim Svensen, Dual MIT & GPL license