A good starting point for responsive web design that takes device resolution out of the equation
Pull request Compare This branch is 3 commits ahead of designbyfront:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
images/example
js/libs
README.md
example.html
index.html

README.md

Goldilocks Approach

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

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. Check out the example.html page included to see how it works.

Features

  • 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)
  • A boilerplate HTML file to get you started (index.html)
  • Conditional CSS for loading JavaScript based on the currently active media query