Created by Typecast . Better web type with less hassle.

The Goldilocks Approach To Responsive Web Design

A good starting point for design that takes device resolution out of the equation

Download our boilerplate CSS and HTML files based on current best practices that will give you more time to focus on what is unique to each project.

Download Zip (35k)Or get it on Github

You might also like, a tool for to demoing RWD.

How does it work?

The Goldilocks Approach uses a combination of Ems, Max-Width, Media Queries and Pattern Translations to consider just three states that allow your designs to be resolution independent.

It Contains

  • 2 well commented CSS files that consider 3 CSS Media Query increments; multi column, narrow column and single column.
  • Good typographic defaults out of the box (including print contexts.

Why are you giving this away?

We saw a problem with the current approach to responsive design in that it binds the design to the device.

We wanted to create a truly universal design that was device independent. This is our starting point.

By sharing our thinking with the wider community and seeing how people use it, we're hoping to make it even better.

Get Involved

Responsive design requires a new way of thinking, and there’s still lots to work out before we can settle on what is ‘best practice’.

We’ve found this as a good starting point, but would love to know how it works for you.

Download it, use it for a project and let us know what you think.

Sites using Goldilocks


Visit this site

NI Archive

Visit this site

Get Involved View Comments

We want to hear your feedback.

blog comments powered by Disqus