There are dozens of HTML5 and CSS 3 boilerplate code samples floating around the web — HTML5 Boilerplate is one popular example. But most of those projects start with a desktop-specific stylesheet, then add @media queries and styles for progressively smaller screens.
That’s backwards in our opinion. After all, the smaller the screen is, typically the simpler the stylesheet is, so why not start with the smallest screen and work your way up? That’s the thinking behind the new 320 and Up CSS 3 boilerplate from developer Andy Clarke.
Technically, 320 and Up is an extension of the HTML5 Boilerplate project, but it works just fine on its own as well.
No boilerplate is ever going to cover every use case, but 320 and Up does a nice job of hitting the sweet spot between too much and too little. Thanks to neatly divided CSS files it’s easy to take what you want from 320 and Up and leave the rest behind (though there is also an option for a single stylesheet if you prefer).
To handle CSS 3 in older web browsers 320 and Up uses the Respond JavaScript library, which we mentioned earlier this week. 320 and Up also relies on imgsizer.js to improve IE’s rendering of resizable images, and a fix for iOS Safari’s viewport scaling bug, as well as some other key JavaScript components. In other words, if you expect a high percentage of your visitors to have legacy browsers with JavaScript turned off, then 320 and Up isn’t for your website (nor, at this point, is CSS 3 in general).
Fortunately for most websites that isn’t likely to be the case and 320 and Up makes a great starting point from which to build a site that looks good on any screen. 320 and Up is licensed under the Creative Commons MIT license. Grab a copy today.
