|

You Should Use Twitter Bootstrap!

If you are a design savvy person, you may have noticed that Vegibit uses the Twitter Bootstrap Framework. I freaking love this framework, and you should too, or rather if you’re unfamiliar, you will love it by the time you finish reading this article. Twitter Bootstrap was created by some cool kids named @fat and @mdo and licensed under the Apache License v2.0. Read the full license for all the legal speak, but I take it to mean that you get to use the framework for free, as in free beer. Awesome, let’s get started.

Web developing and designing is a tedious and time consuming activity. Yes it’s fun as all hell, but it takes *a lot* of time, especially to get things right. Much of this is due to working with the DOM or document object model, which is just awful and one of the bad things in life according to Douglas Crockford. Side note, if you’re unfamiliar with Douglas, read up on him and watch his lectures on JavaScript, he is a visionary of programming and a humorist of the driest proportions. Throw in the various browser engines like Gecko, Webkit, Trident and more, that all render things a little bit differently and you will need to be held back from the ledge dealing with all the little edge cases that pop up. As many of you know, John Resig fixed this issue in the JavaScript world by creating jQuery (Yay!) The creators of Twitter Bootstrap built on this idea and made our lives easier in dealing with not only the JavaScript side of it, but CSS, Layouts, Grid Systems, Components, HTML rendering and more. It is a literal playground for Designers and Developers.

Let’s talk about some of the reasons to use Twitter Bootstrap now.

Page Layouts made Easy with the Grid.

Have you ever endlessly nested HTML tables or DIVs trying in vain to get your web page to look right in your browser? I’m sure you have and once you got it right you were pumped. Then you opened up your site in Chrome after developing it in Firefox and found your beautiful layout has now turned into a trainwreck. WTF?!?!? Yes, all these Browser engines do things differently, and will cause you pain, suffering, and grief in your efforts to develop. Twitter Bootstrap takes care of this for you! It uses a Grid System that is infinitely flexible. Without going into all the details here, the basics are as follows:

Layout Nirvana

As you can see it uses a twelve column system and can be set up for responsive features and fluid design. The best part is, once you get your layout right, it will work across all supported browsers. AMEN!

Consistency Across Browsers and Platforms.

As mentioned briefly above, you want your web page or web application to be able to render properly across many different browsers and platforms. In addition, if you enable the responsive design elements of bootstrap, your applications will work across desktops, tablets, and mobile devices with ease. In the old days, you only had to worry about people running Internet Explorer 6, today you have to worry about a much wider audience. Let Bootstrap make this easy for you.

Modular Components and Architecture.

The awesome thing about this framework is it takes away the hassle of having to make sure all of your design elements fit in correctly with and blend seamlessly with the rest of the site. Fonts scale properly. Colors complement each other nicely. JavaScript behaviors fire consistently. All of this is possible because of the massive amount of testing that gets done before major releases of the framework. This saves you from all of that tedious labor. Generate Dropdowns, button groups, button dropdowns, Navs, Navbars, Breadcrumbs, Pagination, Labels and Badges, Typography, Thumbnails, Alerts, Progress Bars, and Web Forms with confidence and ease. The documentation is fantastic and will have you cooking with gas quickly. Want to get animated? Add in any of the thirteen JavaScript components such as Transitions, Modals, Dropdowns, Scroll spy, Tabs, Tooltips, Popovers, Alerts, Buttons, Carousel, Typeaheads, and more. Yes, this is awesome stuff.

Customize To Your Hearts Content.

I can hear the naysayers. “I don’t want my website to look like all the other websites out there. I’m unique! I’m super cool and a hipster! I need to be an original!” Don’t worry my MacBook air carrying Wi-Fi café friends, Bootstrap has you covered.
The framework is fully customizable. You can even specify all of the fonts, colors, and styles *before* you even download the code. If that is not enough or too time consuming for you, sites like http://bootswatch.com/ will provide you with pre made themes for your site. What is incredible as well is that if you get bored with your current design, you can simply swap out the core bootstrap files with those created from another design, and as long as you followed the proper usage of the framework and didn’t hack the core files yourself, your entire site will update to this fresh new design without having to make hundreds of changes across the board. Magical.

The Bottom Line is to Save Yourself Time.

I could go on and on about the virtues of using Bootstrap but friends, this is not a sales pitch, I’m just trying to lead horses to water. The points mentioned above only scratch the literal surface of what Twitter Bootstrap can do, not to mention with Version 3.0 soon coming, you would be best served to just go download a copy yourself, dive in, and be amazed at the things you can create in a short amount of time.