Responsibly responsive

Many CSS Media Queries boilerplates start with a desktop-specific stylesheet, then add queries and styles for progressively smaller viewports. This means that even the small browsers load desktop layout styles and potentially large assets, even when these are set to display:none;.

‘320 and Up’ starts with a tiny screen stylesheet that contains only reset, colour and typography styles. Media Queries then load assets and layout styles progressively and only as they’re needed. Think of this as responsible responsive design.

One web

Inspired by Using Media Queries in the Real World by Peter Gasston, ‘320 and Up’ is a device agnostic, one web boilerplate. Try this page at any window sizes and on any device to see it in action. Then, download the files.

‘320 and Up’ contains:

  • Four CSS3 Media Query increments: 480, 768, 992 and 1382px
  • Two versions to choose from: multiple linked stylesheets, or a single stylesheet with multiple Media Queries
  • Typography preset styles
  • Combined HTML5 Boilerplate and Mobile Boilerplate components