|

What Is Twitter Bootstrap?

twitter bootstrap

We’ve covered a little bit about the Twitter Bootstrap Framework here at Vegibit already, but now we’re ready for a deep dive. It’s time to really dig in by way of a series. In this first post of the series, we’ll get right into what bootstrap is, who uses it, what’s new, and the pros and cons of UI frameworks. Let’s Jump In!


What is Bootstrap?

Bootstrap is a few things, let’s look at the main points here:

  • A responsive design framework Designed to help you quickly and easily build your various types of websites.
  • Great for static websites or dynamic web applications Bootstrap is great for simple designs using just HTML in a static page. You can also combine Bootstrap with some back end PHP or development framework for dynamic sites and applications
  • Most popular project on Github, more stars than any other project! Just because you’re popular, doesn’t mean you’re awesome 🙂 In the case of Twitter Bootstrap, not only is it awesome but it just happens to be the most starred project on Github which speaks to it’s ability to resonate with developers.
  • Backend developers love it, since they can create the front end quickly and easily, while allowing time to focus on the backend logic

Who Uses Bootstrap?

There are some really big organizations that use Twitter Bootstrap, it’s not just for the small time web developer. Some of the big names you may recognize include NASA, The State of Kentucky, Medicare, and many more! Be sure to visit these sites to browse many more:


What’s new in Bootstrap 3?

  • Mobile First Approach Built from the ground up for mobile. This encourages you to think of displaying your site on smaller screens first, and then scale up to larger screens.
  • Single Responsive Grid System There is only one grid system whereas prior, there was a fully responsive grid system and an adaptive grid system.
  • 4 different sized grids This time around there is just one with four different size grids, extra small, small, medium, and large sized grids.
  • IE7 and FF3.6 support is dropped Most times this won’t be a problem, since the types of people that visit your Bootstrap site will often keep their browsers up to date, but if not, Time to upgrade people!
  • Supports IE8 and higher with a small tweak
  • Font icons instead of PNG image sprites, get the benefits of vector graphics The vector based font icons are much more flexible and user friendly.

Should I use a responsive design Framework?

That’s a good question! In my opinion, the answer is an emphatic Yes, however in trying to be objective, there are certainly pros and cons. When we look at using UI frameworks, there are a couple of approaches people will often take for their web projects. Let’s take a look at them now.

  • The Pre Built Theme: At one end of the spectrum we have the pre built theme, much like a theme for wordpress. You simply download, install, and go. A very much plug and play solution where customization is not a priority.
  • Fully Customized Solution: At the other end of the spectrum we have the fully designed and customized solution by hiring a designer. The designer may create several mocks from scratch, you will makes changes and request updates, the designer will work more, etc. Basically a time consuming and expensive approach, that will likely get you exactly what you want.

The goal of the framework is to fall somewhere in between these two extremes. Twitter Bootstrap fits this bill very nicely.

Pros of a Responsive Design Framework

  • A good middle ground It’s like they told you, everything in moderation! The strongly opinionated would likely favor one of the more extreme approaches, but frameworks help to give us a good middle ground.
  • Some work is done for you Look, we know you’re more than capable of hand coding every minute detail of your web site with meticulous precision. When the rubber hits the road though and you need to ship quickly, the framework can handle some of that legwork for you.
  • Can still customize the styles A major benefit is that you can still tweak the source of Twitter Bootstrap to customize your style.
  • Does not have to look like generic bootstrap There has been a small backlash against the use of frameworks like Twitter Bootstrap due to everything looking the same. Fear not, there are many custom built themes using Twitter Bootstrap that will make your design uniquely your own.

Cons of a Responsive Design Framework

  • Can be Bloated Frameworks by definition are more bloated than native code. It’s much like the idea of procedural programming vs object oriented programming. Would you like to quickly whip up a workable solution, or have a more user friendly and reusable solution that will fit a broader range of use cases? I’ll go for the latter.
  • The learning curve of the framework In a sense, learning the ins and outs of a framework is almost like learning another language. Us web developers are tasked with knowing A LOT of different languages, so learning yet another approach to design can sometimes be a challenge.

Summary

This give us a good jumping off point to get our journey with The Twitter Bootstrap Framework started. We have an idea of what it is, who uses it, the pros and cons, and an idea of how to approach our own learning. In the next episode we will Configure Your Website for Twitter Bootstrap!