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

Bedrock is 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.

It’s not another framework, nor “boilerplate”, but more like a utility. Like Foldy by Dave Rupert.

Created by Tim Svensen

Examples

Resize the browser to see the example layouts change. Note the example copy and headings will change color indicating the current layout styling. Also, there is currently only one breakpoint.

The examples below show a few options available with the mobile first classes .whole, .half and .thirds. Checkout bedrock.css to learn more.

Half : 12+6

12 .half
6 .half

Thirds : 6+6+6

6 .third
6 .third
6 .third

Whole+Half : 6+6+6

6 .whole
6 .half
6 .half

Mobile complex : Desktop complex

12 .whole
3 .half
3 .half
6 .third
12 .third
6 .third
9 .whole
9 .whole

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 above in index.html for a basic grid setup
  5. Build your project

The Grid

The following grids are provided to demonstrate the grid across breakpoints as the browser is resized.

Note that no mobile classes have been used so each grid element spans the full width in the mobile breakpoint.

The Grid With .gutters

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

The Grid Without .gutters

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 here to demonstrate a mobile first approach and serve as a utility.

Help improve Bedrock:

Bedrock was created with GruntStart.