Stuff & Nonsense. Website designers in North Wales

This is the new ‘320 and Up’

A lot’s changed since I wrote the original ‘320 and Up’, my ‘tiny screen first’ responsive web design boilerplate. Back then we were just getting started with responsive web design and many sites, including mine, and frameworks and boilerplates like HTML5 Boilerplate, structured their CSS3 Media Queries from the desktop down, rather than for small screens up.

(Oh how we laughed when we realised our mistake.)

To put things right, I wrote ‘320 and Up’. It worked as an extension to HTML5 Boilerplate or a set of standalone files. ‘320 and Up’ has been used by designers and developers all over the web and I’ve used versions of it on every website I’ve worked on since I wrote it.

What’s in the new ‘320 and Up’?

1, 2, 320 and Up

1 A working toolkit

Frameworks and boilerplates like HTML5 Boilerplate and Bootstrap are great, but they include some files and styles you’ll use once in a blue moon. ‘320 and Up’ includes only things I use when I start a project.

2 LESS and Sass

LESS and Sass have transformed the way we write CSS. ‘320 and Up’ is built with LESS and CSS includes our trusted mixins and variables. If you’re not ready for LESS, don’t worry, use the plain ol’ CSS version.

3 Upstarts

‘Upstarts’ are responsive design patterns for the things we build every day. Get started faster with easily customisable HTML and LESS CSS imports or write your Upstarts and contribute them on Github.

I’ve written the new ‘320 and Up’ from scratch so it isn’t compatible with previous versions. You can download the previous, now unsupported version (zip), if you prefer.


Contribute to 320 and Up on Github or share on Twitter.


320 and Up, a Fashionably Flexible © responsive web design boilerplate by Andy Clarke and Jina Bolton. ‘320 and Up’ wouldn’t be possible without HTML5 Boilerplate, Frameless grid and Bootstrap. Licensed under the Apache License, Version 2.0. The Font Awesome webfont, CSS, LESS and Sass files are licensed under CC BY 3.0.