Search This Blog

Monday 2 December 2013

HTML5 frameworks an overview (part III): Twitter Bootstrap

An html5 framework is a pre-built set of pages in html5 with a highly structured css/css3 and some enhances and features added by javascript, so it's not only html5 but concerns a set of technologies always more strictly integrated.


The third framework we're going to deepen is:
Twitter Bootstrap
http://getbootstrap.com/
"Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development."
Developed by twitter  under Apache License v2.0, Bootstrap, now at version 3, is a great suite of prototypes totally front end oriented.
This is what you'll find downloading a precompiled package:

As you can see it strictly contains the css, the javascript (both normal and minified) and the glyphicons sprites.



The file bootstrap.css embeds normalize.css for cross-browser rendering and takes care of mobile with a
"fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases"
There aren't html files, so you have to provide for an index.html page by yourself, luckily the Bootstrap home page contains a good number of full working samples, from a basic template to structured pages, where you can easily try and see the default tipography settings or the styles for clear tables, forms, buttons and images manipulation.
Moreover, Bootstrap has a useful and graceful set of pre-built page elements, something like a mix of working prototypes and best practices, for example: glyphicons, navigation elements, breadcrumbs, pagination, alerts or jumbotron.

TIP: A Jumbotron is a large-screen television using technology developed by Sony, typically used in sports stadiums and concert venues to show close up shots of the event. (source http://en.wikipedia.org/wiki/Jumbotron )
For a better user experience the framework contains some javascript plugins, out of the box: transitions, modal pop-ups, drop down menus, tooltips, tabs, alert, buttons, accordion, carousel and other effects.
The Bootstrap javascript depends on jQuery, and:
You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using a plugin.
This is great and uses the wild card HTML5 attribute data-*; it means that you can call any javascript effect just using  data-*, both for the function itself and for the configuration options.
For instance, to render a tooltip you have to call the function with:
  • data-toggle="tooltip"
and set some options like animation or trigger in this way:
  • data-animation="false" data-trigger="hover focus"
in the element with the tooltip:
Sample
It should be noted that the data-* attribute to call the function is in most cases data-toggle, but not always, for example the code for modal windows is: data-dismiss="modal" or for the carousel is: data-ride="carousel".  This is not very intuitive, and you can just learn.

Last but not the least, the website offers a good customization interface where you can choose the css instructions, the components and the javascript plugins you need to make your own build.

Bootstrap is really popular, it's easy to find tutorials and extensions, here a long list of resources:
Here some huge showcases:
And here free collections of themes:

Also on youtube is full of videoguides about Bootstrap:
Furthermore is common to find integrations with the most used CMS (WordPress, Drupal, Joomla) and frameworks (Symphony, CodeIgniter, Django, Rails).


To draw a first conclusion

Despite some improvements could be made in the semantic of its instructions, Bootstrap is simple, powerful and the large amount of examples, tutorials, and tools on the net fosters a fast learning curve. Bootstrap provides a pleasant front-end but does not take care of the back-end, but that is a job well done by HTML5Boilerplate, so why not combine the two experiences?
 To be continued...


No comments:

Post a Comment