Review: Free mobile-friendly Web design frameworks

Twitter Bootstrap
If you want to start with both a Web framework and a design -- a clean, appealing design at that -- Bootstrap is one of the best places to begin.

Originally developed by Twitter as a framework for its own GUI, Bootstrap has been released as an open source project under the Apache License 2.0. Its success, and value, is reflected in the sheer number of sites that have made use of it (the developers maintain a gallery of "Bootstrapped" sites), as well as the galaxy of third-party themes and templates built with and on top of it.

Bootstrap's basic page layout is a 12-column grid, 940 pixels wide by default; all widths are adjustable properties. Elements can be defined by how many columns they take up by default, but can also respond dynamically as the browser is resized. Narrow the browser window or launch a Bootstrapped site on your phone, and everything reformats itself to fit.

The default top bar, for instance, normally contains space for menu elements. Narrow the viewport and those elements are hidden from sight, but can be revealed with a click. For further tweaking, Bootstrap provides CSS classes such as .hidden-phone or .visible-desktop to allow elements to hide or be revealed when your site is opened on different devices and at different screen resolutions. Bootstrap can take advantage of the @media attribute in CSS for further formatting hints as well.

A big part of Bootstrap's appeal is the number of commonly used UI elements that are already defined in the framework: buttons and toolbars, alerts, progress bars, typography controls, and so on. It's a great timesaver. You don't have to build them from scratch or even expend the effort to make them look consistent.

Most of those UI elements are easy to implement since they're just variants of existing HTML elements. Drop-down navigations, for instance, are nothing more than items in an unordered list (the <UL> tag) with class markup and one or two custom attributes. This means you can use many stock HTML editing environments (such as Dreamweaver) to produce Bootstrap templates without too much trouble.

Bootstrap is built around a few open source third-party components you might already be using. Most prominent is LESS, a stylesheet-extension system for CSS that allows the use of variables, rule nesting, and a number of other powerful features not available in vanilla CSS. Also noteworthy is a slew of plug-ins that use the ever-popular jQuery to add functionality like content carousels, advanced button behaviors, type-to-search functions, and many more.

There are a number of ways to get started with Bootstrap. You can download a full package that contains all the components and some demonstration pages, which can be customized by hand as needed. You can also download a custom Bootstrap package that contains only the pieces you need, if you're trying to keep things slender. And if you're a programmer looking to extend Bootstrap under the hood, you can fork a copy of the project from GitHub and work on it that way.