This is the new 320 and Up

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.

Font Awesome: I’ve removed files and styles that I don’t use (like Respond) and added Font Awesome icon fonts.

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.

• ‘320 and Up’
• ‘320 and Up’ on Github
• Download ‘320 and Up’ (ZIP)

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.

320andup.less is where it starts. This LESS file imports others:

Reset

@import "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

// Variables and mixins
@import "variables";
@import "mixins";

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:

// variables.less
@basecolor : rgb(45,53,62);

// buttons.less
.btn-extlarge {
background-color : @basecolor;
border : 1px solid darken(@basecolor, 10%);
border-bottom-color : darken(@basecolor, 15%); }

Mixins

My everyday mixins make writing CSS3 styles — particularly those with vendor specific prefixes — faster and more accurate. For example, this is a mixin for the CSS3 box-sizing property:

// mixins.less

.box-sizing(@boxsize: border-box) {
-webkit-box-sizing : @boxsize;
-moz-box-sizing : @boxsize;
-ms-box-sizing : @boxsize;
box-sizing : @boxsize; }

I’ve written the default value of border-box into the mixin, so anytime I want to bind that property and value to an element I simply write:

.box {
.box-sizing(); }

That compiles to:

.box {
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
-ms-box-sizing : border-box;
box-sizing : border-box; }

To give a box another box-sizing value, I add that value inside parentheses:

.box {
.box-sizing(content-box); }

This compiles to:

.box {
-webkit-box-sizing : content-box;
-moz-box-sizing : content-box;
-ms-box-sizing : content-box;
box-sizing : content-box; }

Perhaps my most useful mixin converts a single value into pixel and rem font size units:

// mixins.less

.font-size(@font-size: 16){
@rem: (@font-size / 10);
font-size : @font-size * 1px;
font-size : ~"@{rem}rem"; }

I write:

h1 {
.font-size(32); }

LESS compiles to:

h1 {
font-size: 32px;
font-size: 3.2rem;

The primary LESS file then imports several other files:

// Site wide styles (html, body)
@import "site";

// Block level and text-level type
@import "typography";

// Colour interaction semantics
@import "colour";

// Alerts, badges, boxes and gradients
@import "texture";

// Figures, images and other elements
@import "elements";

// Standard form controls
@import "forms";

// Button styles (optional)
@import "buttons";

// Tables
@import "tables";

(The forms, button and table styles are largely based on Bootstrap.)

// Page level layout styles
@import "page";

// Modernizr
@import "modernizr";

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.

@media print {
@import "print"; }

@media only screen and (min-width: 480px) {
@import "480"; }

@media only screen and (min-width: 600px) {
@import "600"; }

@media only screen and (min-width: 768px) {
@import "768"; }

@media only screen and (min-width: 992px) {
@import "992"; }

@media only screen and (min-width: 1382px) {
@import "1382"; }

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {}

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.

To use an Upstart, import it at the bottom of the 320andup.less file:

@import "upstarts/320andup-modules/upstart";
@import "upstarts/320andup-panels/upstart";

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.

The new ‘320 and Up&or download the files (ZIP).

Please let me know what you think.