3 of 11

Building your own responsive grid (Part 1)

Understanding popular frameworks like Bootstrap and Foundation, and adapting them to your own needs.

WORKING DRAFT: 9/20/2014

Every web project is different, and there is no “one size fits all” solution for organizing content. That said, responsive grids are a great place to start for many web projects that have a more-or-less “traditional” layout. 

You might want to even start your project with a pre-built CSS grid framework, like the popular Bootstrap or Foundation. Both of those are great choices, but I think it’s worth exploring how to build your own grid, both so you understand why those systems were built like they were, and so you don’t feel constrained by pre-exisiting options. You’ll find that the code presented here closely resembles both of those other frameworks. 

So we’re going to begin by creating our own grid testing page within the HTML5 Boilerplate-based site we set up in the last demo. 

First, lets try to understand the grid we’ll be using. 


One thought on “Building your own responsive grid (Part 1)

  1. Hello. Congrats for the tutorial, By far the best I have tried.
    I wanted to ask you if “Building your own responsive grid (Part 1) & (Part 2)” are complete? Thank you.

Thoughts, questions or qualms?