Speeding up with Bootstrap

Let’s start by introducing those who don’t know Twitter Bootstrap to what this great framework is, and for that, a little help of our friend Wikipedia:

Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.
It is the most popular project on GitHub and has been used by NASA and MSNBC among others.

What is it like working with a front-end Framework?

I was never a close friend of frameworks or CMS like Joomla or WordPress. My preferences always pointed me to “code from scratch”. Maybe because I liked making something special and individual for each of my clients.

Now you see me today making a WordPress blog right here and right now, but also I have made Joomla templates and I have given a try to the great Twitter Bootstrap.

Twitter Bootstrap really saves you time, and in a way you keep working from scratch as you can work with the original blank theme provided by Bootstrap 3.0, or you can always buy or download some free theme somewhere in the Internet.

At SUSE, we are implementing Bootstrap in almost all our products (or at least the most important ones). We can easily have a similar look-and-feel even when they have been developed by different teams and each have made their own theme, which is prior as every product has been developed following different specifications and needs for a better User Experience (different customers, different “personas” while testing the usability).

 

The advantages of using Bootstrap 3.

The advantages are more than the weaknesses, that is a fact and that’s why I will only speak about them.

Advantages are:

  • It saves you time, loads, when it comes to styling: tables, grids, buttons, system messages, forms, tabs, etc.
  • HTML5 ready: It follows the standard syntax of HTML 5 with the new tags <header> <nav>  <section> <article> <aside> <footer>. They will not have an style and its up to you to give them width, height, margins, paddings, etc etc to make the structure look like:
  • Responsive and Fluid layout. It is incredible how quickly you can have a web application customized for Desktops, Tablets and Mobile phones with Bootstrap. There are many changes you will have to do to customize the look and feel and of course, to improve the UX as a Tablet, a Mobile and a Desktop user will all demand different features. (im showing you in the next post how SUSE Manager looks like after implementing Bootstrap).
  • FontAwesome is made for Bootstrap: The times when we had to create each of our icons and invest weeks of work in Inkscape, Illustrator or CorelDraw are over with this fabulous Free tool called FontAwesome (they picked the right name).
  • Glyphicons: by default Bootstrap 3 comes with this icon-typography. Not bad. The style of icons and variety is different compared to FontAwesome so you might actually need both of them in some cases. However, in my opinion I pretty much prefer FontAwesome.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>