Bootstrap the front-end responsive design framework

Bootstrap was created at Twitter in mid-2010. Prior to being an open-sourced framework, Bootstrap was known as Twitter Blueprint. A few months into development, Twitter held its first Hack Week and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.

It is designed to help front end developers and designers quickly and easily build static websites and web applications. So while you can work with the static HTML as it comes with Bootstrap, or it can be combined with something like PHP or a content management system. So Bootstrap essentially controls the front end design of your website.

Bootstrap is currently the most popular project on GitHub. GitHub is a repository of a bunch of different open source projects and the popularity of these projects is measured in stars. And Bootstrap has the most stars than any other project on GitHub. It’s also extremely popular with back end developers in particular because Bootstrap is a great way to build a very simple front end design for a website without having to know a ton of HTML and CSS.

Some high profile users of Bootstrap framework are:

• NASA
• The state of Kentucky
• Medicare
• Discus

And of course tons other sites.

The current version of bootstrap is v3.3.5. Since version 3.0, Bootstrap has been rebuilt from the ground up, to have a mobile-first approach. This means that the way the grid system in particular is designed is, for you to think about how you’re going to layout your designs first on small screens, such a mobile phone. And then you can scale up the size of those designs to larger and larger environments. There’s only one grid system that is shipping with Bootstrap this time around. Previously in Bootstrap version two, we had a fully responsive grid system and an adaptive grid system. But in version 3, it’s just the responsive grid system. However a lot of functionality has been added to it. There’s four different sized grids:

• extra small,
• small,
• medium, and
• large sized grids. And

Bootstrap is dropping support officially for IE7 and for Firefox 3.6. There is some special requirement for IE8 support which we will talk about in a later tutorial. So for now Bootstrap will be supporting Internet Explorer 9 and higher.

One of the good thing that’s shipping with Bootstrap 3, are some fonts that can be used as icons in your designs. Previously, Bootstrap shipped with a series of image sprites. Those are just the little icons, maybe a hundred or so of those on a single PNG file and the pieces of the PNG file will display depending on CSS that ship with Bootstrap, which was nice but it meant that you couldn’t scale up the size of that particular icon or change its colour easily, because, those were rastrographics.

Fonts, however, are vector graphics, which we can recolor and resize very easily.

Anyway, coming to front end design, there are two ways to tackle it.

1. We can purchase a theme or a template that’s used for a CMS and do a simple install. Maybe we change a colour or two or drop in a logo. And we’re done.
2. Or, maybe we want a fully-customized solution where we go and hire a graphic designer and we create our own custom HTML.

In both the cases, it’s an expensive process in time and money, and we may not necessarily reuse code from one project to another. So these responsive design frameworks work as a middle ground. Some of the work is done for you, while there is still a lot of space for customization. For example, the Bootstrap grid system is a great way for laying out WebPages. You don’t need to write your own grid system for every website that you’re going to be building. And it’s still very, very customizable.

Bootstrap includes the LESS CSS. LESS being a CSS pre-processor system that you can use to centralize your styles. This allows developers to make Bootstrap look exactly as they wish. But best of all, Bootstrap never has to look like Bootstrap. One of the common criticisms, especially among graphic designers, is that all Bootstrap sites look the same. That doesn’t necessarily have to be true. It’s only true if you want your website to look like a Bootstrap site.

But some people would just like to build a quick prototype and be done with it. Maybe they just use Bootstrap off the shelf, and change a colour or two, here and there, and call it done. But for those who wish to customize, the sky is the limit with Bootstrap.

Lastly we come to the disadvantages of using the Bootstrap Framework:

1. Of course there are disadvantages to working with any frame work. First there is the ‘code bloat’ that people talk about in regards to frameworks. I believe however that it is a trade off required to increase the flexibility of the framework to address different styling situations. Of course you may not need all of the flexibility provided but again it is built with a lot of users and possible requirements in mind.
2. To use a framework you have to learn to use it. So using a framework requires learning someone else’s code and working with it.

However I believe these responsive design frameworks as a way to get a lot of work done relatively quickly, that you can deliver more customized solutions to you clients.