Bootstrap

Reference website: http://twitter.github.com/bootstrap/index.html

Documentation: http://twitter.github.com/bootstrap/getting-started.html

Usage: This is a framework based on HTML5. It provides a number of features to quickly style a webpage and include a number of special effects with minimal modification to the HTML. Download the zipped files (use the supplied minified versions for production sites). Bootstrap can also be customized before downloading. I recommend not doing that as new versions will need to be customized before downloading as well.

Example pages: http://learning-html5.info/examples/bootstrap/index.html – view the source code. These examples were generated as I learned about Bootstrap in a lynda.com course. [Up and running with Bootstrap]. In these example pages, I chose to employ responsive design techniques throughout. Therefore, the images will gradually re-size as the width of the browser is reduced. The page will also display differently when viewed on a tablet or smartphone.

Result: The navigation will change when one has more limited screen real estate. Examine the image below to see the effects. In this case, the typical navigation you see on the desktop is replaced by a series of glyphs (which will expand to reveal options) when there is less screen real estate. The arrow points to the glyphs. You can click on the image to see a larger version.

Details regarding the use of Bootstrap are provided in a separate weblog post.