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.