Twitter Bootstrap – Out There To Accelerate Your Projects

Twitter Bootstrap is a widely used set of free tools containing HTML and CSS-based templates for buttons, charts, forms, typography, along many others, and even optional JavaScript extensions. GitHub continuously develops the project and it is most likely their most impressive toolkit until now – as a matter of fact, it is even used by MSNBC, CodeSprint and NASA. If you check all their websites, you will notice clean grids with a professional interface and will note a lot of variety in details. Bootstrap was released as open-source in August 2011; its latest version at the publishing time of this article is 2.0.4 and is dated June 3st 2012.

Bootstrap started as an internal Twitter project that was intended for developing internal analysis and management tools. Because various libraries were used for the interface development, this led to inconsistency and high maintenance costs. Many people started using the framework after one of the leader developers showed how useful it is to accelerate projects with it.

SEE ALSO: Using Nesting Styles in Preprocessors

Twitter Bootstrap

Although the support for HTML5 and CSS is relatively incomplete, the Bootstrap framework is compatible with all major browsers on the market. However, although support for gradients, rounded corners and shadows are not featured by older browsers, Bootstrap uses them – this way it extends its use, although the usage of the above-mentioned techniques is not required.

Bootstrap 2.0 also features support for responsive designs, which means that a page created with the framework can adjust dynamically to screen size. If you’ve been in the branch for more than 3 minutes, you already know how important responsiveness is to a website or an application. Bootstrap gets another praise from me for this.

Are you looking for responsive website templates and online website builder?

Get Startup Design Framework now!

Use coupon code START50 for 50% off!

Functions and structure

The framework is modular and consists of several LESS stylesheets that implement various components of it. Obviously the stylesheets can be adapted by developers with a limited amount of effort, so that the framework fits the project and its needs.

If you’ve seen LESS stylesheets before, you probably know it allows the usage of variables, functions, operators and nested selectors.

Another advantage of Bootstrap is that since the 2.0 version, the framework allows developers to configure it for his own needs. For example, if needed, the values of different options can be modified. The developer can also choose the desired components and adjusts them, so that the generated package already comes with the pre-built CSS stylesheet for the wished configuration.

Functions and structure

Responsiveness

As mentioned earlier, the framework is responsive. It comes with a 940-pixel wide, grid layout, but there are some more to choose form if the default one doesn’t fit. In all cases the toolkit comes with four variations in order for the design to adapt to the screen – so you have support for mobile phones (portrait and landscape), tablets and PCs both with low and high-resolution (widescreen).

The stylesheet

With so many stylesheets provided by default, developers need to have a clear understanding of them. All stylesheets provide style definitions for key HTML components. Thanks to those the toolkit features a system-wide uniform, modern interface for formatting text, form elements and tables.

Re-usable components

There are lots of regular HTML elements included in the toolkit, but there are also some other commonly user interface elements such as buttons with different features (grouping with drop-down, creating navigation lists, vertical and horizontal tabs, breadcrumbs for navigation, pagination and many other popular ones), labels, thumbnails, creation of warning messages and progress bars and even advanced typography capabilities.

JavaScript plugins

As mentioned earlier, the toolkit also provides some JavaScript elements – all of them are based on the jQuery framework. With the JavaScript plugins available developers can make use of user-interface elements, including tooltips, carousels and dialog; the auto-complete function for input fields is available as well.

Some more plugins were added with the 2.0 version, including Modal, Dropdown, Scrollspy, Tab, Popover, Collapse, Tooltip, Typeahead, Carousel, Alert and Button.

How to use it

Bootstrap is in principle quite easy to use. Even a rookie designer or developer would be able to follow the simple steps that are required for setting it up. The developer must first compile one CSS file from the LESS stylesheets included in the toolkit. Special tools can do this. The generated CSS file needs to be integrated in the HTML file afterwards. And if JavaScript elements are to be used, then a reference along with the jQuery library has to be included in the document.

The concept behind

The project started in August 2011 at the hands of Mark Otto and Jacob Thornton. Some of their internal tools at Twitter lacked, according to Otto, a refined and approachable design. The answer they came up with was quite ingenious: bringing designers and developers together is the solution.

The constant interaction with developers is assured by their continuous efforts to develop the toolkit even one year after its release. The project was so successful because it allowed individuals to collaborate across different disciplines – each brought their most important values and technical skills to the project. The fact that the project was for internal use at Twitter tells a lot about its success rate. It’s Twitter we’re talking about here…

Bootstrap was created as a style guide. It gave developers a single point of reference and this way they shared guidance from designers and created a set of documentation for each of the living components. Their approach helped form the beginning, assuring Bootstrap will not only be a tool for internal use at Twitter, but also a toolkit for any designer or developer.

Another asset of Bootstrap is the documentation behind it. Some time ago I’ve been to an exam where I had to defend a project I worked on. It was a WordPress theme development project. During question time, the censor made it clear that he doesn’t like WordPress because it lacks documentation – and where it doesn’t, the documentation is a bit vague and difficult to follow for beginners. I agreed. You won’t meet with this issue when handling Bootstrap.

The toolkit provides interactive documentation to anyone who wants to use it – regardless of their skill level. It allows anyone to clone or download the source code or debug the code with Firebug. This is their main philosophy it seems. The fact that the project was open-source helped its development even more, with more and more people wishing to be directly involved.

“No matter the skill level or workflow, we needed folks to be able to open this living document and be able to use Bootstrap to quickly and easily build something they love.” Mark Otto, founder.

Conclusion

In my opinion the clear success behind Bootstrap is due to the mentality and way of thinking of the co-founders and leader developers behind it. I always thought an open-source project has more chances of being successful than if a company develops it for money. Should I give again WordPress as example to this?

Regardless of your skill level, I think you should at least go and check the toolkit. Your time will be worth it. If you want a comparison, using Bootstrap is only a bit more difficult than using a grid system downloaded from the internet. And when I say difficult, I do not mean it is difficult to code – as it’s the same HTML/CSS you would always use. When I say more difficult I think of the compiling which needs to be done in order to be able to use Bootstrap.

However, with such a large documentation behind it, it is impossible not to be able to find your way to the point where you already are confortable – coding and designing. And when you will reach that confortable stage, you will most likely realize how useful the tool is.

Creating a website or an application should be much easier if powered by Bootstrap, as it helps you skip some steps – usually the annoying ones. I always believed starting a project is the most difficult part of a development process. Once you’re rolling down the hill, you will unlikely stop again. Bootstrap is the perfect tool to push you from the top of a hill and allow you to start on the fun part of a development process right away.

We would love to hear your opinion

Have you ever used Bootstrap? What is your opinion of it? In case you used it, which were the up and down sides of it? Can you recommend something to the ones who didn’t get a grip of it yet?

Christian Vasile is an enthusiastic Romanian web designer currently living in Denmark. You can follow him on Twitter at @christianvasile or visit his web portfolio at christianvasile.com.

Newsletter

5 Comments
  1. Valeriu Jul 3, 2:56 pm

    Great framework, I’m using it on my lat project. The only down side is a bug in chrome with the navbar. http://www.screenr.com/kF78

    Reply
    +1
    • Rahul Roy Jul 4, 2:25 pm

      I’m interested in this framework, can you tell me more about the bug?

      Reply
      -2
  2. Simon Jul 4, 12:33 am

    I’ve used Bootstrap on several projects and found it simple and intuitive to use. The responsive CSS is big plus. The CCS is well organized, and the example HTML will get you started very quickly. I’d like to see some add-on components like menus, tables and form elements in alternate styles. There seems no limit to what you could do with Bootstrap. I recommend it.

    Reply
    0
  3. Rob Abby Jul 20, 12:12 am

    I love Bootstrap. I tried using Foundation by Zurb for a bit on a recent Ruby on Rails Demo I was using, and wound up switching back to bootstrap. Great framework. Really helps rapid prototyping, and easy customization.

    Reply
    0
  4. Muhammed Athimannil Nov 9, 2:03 am

    I love bootstrap, at the same time i don’t like its responsive. some time annoying

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters