Review: Free mobile-friendly Web design frameworks

Twitter Bootstrap, HTML5 Boilerplate, 52Framework, and 320 and Up take the sting out of building websites for both large and small screens

Senior Writer, InfoWorld |

1 2 3 4 5 6 7 Page 4
Page 4 of 7

320 and Up
Most design frameworks begin at the desktop level, then degrade gracefully for a smaller browser. 320 and Up works the other way around. It starts with a design meant for small screens (320 pixels, hence the name), then scales upward to a maximum of 1,382 pixels. To that end, 320 and Up is a useful starting point for designs where mobile devices come first -- and it's free under the Apache 2.0 license.

320 and Up owes a few details to Bootstrap, as it uses the latter's styles for buttons, forms, and tables. In fact, the raw design resembles an unstyled version of Bootstrap, but there are enough new features here to set 320 apart. For example, 320 includes CSS3 media queries for five basic increments of device screen size, so you can build hints into your design to work with those sizes. The framework also bundles LESS and SASS for programmable control over CSS and Modernizr and Selectivizr for backward compatibility with the dreaded IE6 through IE8. The creator also packed in a responsive typeface test suite and design test page to make the job of checking your work a little easier.

My favorite feature is Font Awesome, a font-based icon set that can scale to any size, originally developed for Bootstrap. Granted, you can add it to most any framework on your own, but having it bundled is a nice bonus.

320 and Up uses Bootstrap for many of its object styles. The difference? 320 has been built for designing mobile-first sites that scale up, instead of desktop sites that scale down.
320 and Up uses Bootstrap for many of its object styles. The difference? 320 has been built for designing mobile-first sites that scale up, instead of desktop sites that scale down.
1 2 3 4 5 6 7 Page 4
Page 4 of 7