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 — one year ago.

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.)

So 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. Content first frameworks have since become the norm and HTML5 Boilerplate and its mobile cousin both now structure their stylesheets for small screens up. Twitter’s Bootstrap and countless other frameworks include fluid grids, so I wondered if ‘320 and Up’ was still relevant?

‘320 and Up’ is my personal toolkit. It’s grown to include the files and styles I use from Twitter’s Bootstrap as well as responsive design libraries and polyfills too. ‘320 and Up’ doesn’t try to do too much. It isn’t a development framework and it doesn’t include grids. It’s simply the files and styles I need when I’m starting a responsive web design.

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

The new ‘320 and Up’ is about what I’ve taken out, rather than what I put in. I’ve tried to make things simpler.

One version: Whereas the previous version had two variants — one with a single stylesheet, the other with a stylesheet for each breakpoint — I’ve replaced them both with a single version.

Bootstrap: Earlier versions of ‘320 and Up’ were written as extensions to HTML5 Boilerplate. While still compatible with Boilerplate, the new ‘320 and Up’ works better with Twitter’s Bootstrap.

LESS: ‘320 and Up’ is built on LESS and includes the mixins and variables I rely on most. If you’re not ready for LESS, don’t worry. You can still use CSS.

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

If you’d prefer to skip my technical run through and get straight to the files, I don’t mind. Honestly.

Technical run through

Built on LESS

LESS has changed the way that I write CSS completely over the last six months. I’m not just a convert, I’ve become a zealot. The new ‘320 and Up’ has been built on LESS but if you want to work with CSS, youI’ll find your way around the stylesheet easily.

Reset

I know many frameworks, including HTML5 Boilerplate and Boilerplate, have switched from reset to normalise.css. Maybe I’m old a set in my ways (I do need bifocals) but I’m not ready to make the switch yet. If you prefer Normalise, don’t let me stop you.

Variables

I write every colour as a LESS variable and this has two main benefits. It’s faster to find and write colours and easier to set the colours of backgrounds, borders and other styles as tints of a colour variable. This helps my designs to feel more ‘together.’ For example:

To demonstrate how to apply these styles and show how they’ll look when applied, I’ve added a reference page. You can use this page to get the design of elements right without the distraction of layout.

Media Queries

Importing styles from one LESS file to another is better than the way plain CSS handles imports. That’s the main reason why there’s now only a single stylesheet version of ‘320 and Up.’ There are still five CSS3 Media Query increments (480, 600, 768, 992 and 1382px) although you can, of course, add more.

Upstarts

I never wanted ‘320 and Up’ to become a development framework like Twitter’s Bootstrap or Zurb’s Foundation. They’re both great, but they include files and styles that I’d use only once in a blue moon.

That, and my widely known aversion to grid frameworks going back to Blueprint and 960 Grid System, meant there was no way I was adding grids (responsive or otherwise) to ‘320 and Up.’ That said, writing the same code again and again is (I heard) a sign of insanity, so for the last few months I’ve been writing ‘Upstarts.’ They’re responsive design patterns and HTML and CSS for the things I build every day.

As Upstarts contain their own CSS3 Media Queries, make sure you import them outside of any other media query declarations

Upstarts are built using non-specific HTML and CSS and consist of an HTML example page and an upstart.less file. I’ve included two, three and four column responsive modules and some panels. I’ll add new Upstarts to the repository as I write them and I really I hope you’ll do the same by contributing on Github.