May 5, 2014

1078 Views

An Experience with Bootstrap

Bootstrap is in great demand these days and is quite popular in Web development. I recently started working on it and completed few of my projects. In course of my familiarity with it, I experienced its diversified scope, various predefined components and an easy to use framework. It is a very powerful tool, which makes your life easier by saving a lot of your development time. Its reusable components are quite handy in nature, so that you can grope through the framework and keep whatever you need and discard what you don’t require from bootstrap. It is really interesting to understand its various aspects which making it so popular in the developer community.

What is BOOTSTRAP?

Bootstrap is a free collection of tools for creation Websites and web applications. It has HTML and CSS based design templates for various HTML components, such as form elements, navigation, validations, tables, alert messages, and icons. It has predefined .CSS classes and various JavaScript components, which can be easily associated and customized.

Currently, we use Bootstrap 3, which is based on Mobile first technology. In the older version (Bootstrap 2), we used additional classes and components to make the mobile devices compatible. But now, everything is responsive in bootstrap. You just need to use the proper class at the right place and your job is done. Doesn’t it sound great?

Now, let us have a closer look at the various aspects of  Bootstrap, which makes it popular in the current IT era.

WHY BOOTSTRAP?

  1. THE GRID SYSTEM: Grid layout is the base of bootstrap template. It is not mandatory that use grid layout always, but it gives you a consistent look and feel and your UI development becomes easy.  We use 12 grid system and the column can be divided in such a way that it sums up to  exactly 12. Say, we need to create 3 column layout, then we use col-md-4 class thrice. If we require 4 column layout, then we can use col-md-3 class 4 times. Hence, it sums up to 12 grid layout. Bootstrap itself takes cares about the padding, nesting, and essential styling. So, it is all about placing your contents into the right place in a grid.
  2. LESS CSS: It is well known that ‘Less is More’. It is a dynamic stylesheet, which extends CSS with dynamic behavior like variables, mixins, operation and functions. Bootstrap uses Less CSS for styling and it is fairly easy to manipulate it. CSS plays a pivotal role in Bootstrap as there are various predefined classes, which you must use for creating your application. It saves a lot of your time and gives a consistent look and feel. It is worth mentioning that all the classes created in Bootstrap are meaningful. These are very semantic and one can easily understand what they are meant for.
  3. RESPONSIVENESS: As I mentioned above, Bootstrap 3 has been developed with a vision of ‘Mobile first’. So, responsiveness is a great feature present in Bootstrap. CSS has been defined with media queries, so you need not worry about the device compatibilities. It caters your requirements very well and you can make your image responsive by just adding a class ‘img-responsive’ with it.
    As a result, it becomes accustomed to the change in platforms with greater efficiency.
  4. CUSTOMIZATION: Bootstrap is highly customizable. When you are clear about your requirements, you can go through bootstrap and you can keep whatever you think is required in your development and you can leave the rest. Hence, you customize it as per your needs and use it in your development activities.
  5. ICONS: It is an amazing utility given in Bootstrap. Icons are created with the use of fonts (glyphicons). So, you need to keep the font folder of Bootstrap dist file. It takes the reference and creates several icons with fonts. So, it is highly customizable too. You can change the color and sizes accordingly. It has approx 200 glyphs in font format.

  6. JAVASCRIPT: Bootstrap provides a lot of JavaScript plug-in based on custom JQuery. You can easily include them to make interactive components for your Website. You can easily manipulate model window, alerts, tooltips, alerts, buttons, dropdown, togglable tabs, and scrollspy. 
    Let us see an example of popover

    There are many more plug-ins, which you can easily inject in your Website and customize it as per your requirements.
  7. CONSISTENT WITH THE BROWSER: one of the great reasons why bootstrap sways ahead of other technologies and much in demand because of its usage consistency in several browsers, such as Internet Explorer, Firefox, Safari, and Google Chrome.
  8. EASY TO LEARN AND GREAT DOCUMENTATION: Bootstrap is fairly simple to learn and understand. Its documentation is quite handy when you start using it in your Website. All major CSS predefined styles and JS plugins have been described in its dedicated Website (http://getbootstrap.com). So, it is recommended to take it as a reference for your development. You can get the documentation related to any topic you require in bootstrap. So, it reduces your brainstorming time and effort.
  9. TIME SAVER: Bootstrap has great architecture and a lot of predefined classes/ plug-ins so you do not require much effort to make the basic architecture for your application and you can create a qualitative robust application immediately. It is completely customizable so you do not need much effort to make it as per your requirements. Due to its diversified behavior and great components, it is a real time saver.

Why not BOOTSTRAP?

Few developers advocate for not using bootstrap too. As per my understanding and experience with bootstrap, I too feel up to some extent that they are right in their own way. Firstly, the usage of Bootstrap gives you messy code and a lot of classes being used to perform tasks. If you miss any of the class then you will not get the desired result.

Secondly, using !important rule in CSS many times, is not good as per CSS specificity.

The benefit we get from bootstrap is far ahead from these logics. We should use it carefully and we can experience a great efficient application with minimal effort.

 

Bootstrap 3

Foundation V5

Skeleton

Grids:

Fluid

Fluid. Best in class grids across all viewports.

Fixed

UI tools

 Lots of widgets; good for rapid prototyping

Powerful and modular set of tools. More style agnostic than Bootstrap.

Limited

History:

Mobile-first update to the style guide for internal tools developed by Twitter

Performance and efficiency improvements to v4

Style agnostic and intentionally lightweight

More details can be found at http://responsive.vermilion.com/compare.php?framework=current

CONCLUSION

With these great features, bootstrap is really  efficient and effective in Web development. You need to have working knowledge of HTML, CSS and Javascript to get the bootstrap benefits in your application. It has a great documentation archive, which enables you to take it as a reference and you are on your way to develop a robust application.

The more you use it, the more you will fall in love with it.HCL's ecommerce web development unit helps retailers deliver a seamless shopping experience across all customer touch-points. To know more, please visit.

References:
http://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)
http://getbootstrap.com/
http://responsive.vermilion.com/compare.php?framework=current