+1 (858) 609-9932

Why you should know about Twitter’s Bootstrap

May 21st, 2012

I’ve just discovered something amazing by the developers at twitter called bootstrap! You can go to the site in the link I just gave, but basically what it is is a solution to a large portion of the monotony of web development.

For those who design websites, you’re probably used to rewriting some standard elements in CSS to make the website look more standard and far less awful. You’re probably also used to adding many of the same javascripts to your websites as well.

What the bootstrap developers have done, is create  a standard  foundation from which you can start all of your web development projects. All you need to do is reference the bootstrap stylesheets and the javascripts in header of your new project, and you’re already off to a great start. It possibly may only save you somewhere between 5 and 30 minutes, but when you work on lots of web projects day in and day out, this can add up to a lot of time.

Another really thing bootstrap has done is adding a scaffolding and responsive layout standard. By using premade CSS elements, they have divided the width of each page into 12 segments, which you can use in order to make all of the elements of a page fit perfectly with each other in addition to perfect symmetry when you need it. If you have any type of design OCD like I do, you have to keep fixing the CSS until every pixel on the page is lined up, so with the scaffolding, this no longer takes a lot of your time. The responsive design simply makes all of the page elements relative and elastic, using percentages instead of fixed widths. This allows you to easily create a beautiful website design that will work on tablets and mobile phones.

These are just a few of the many problems that bootstrap fixes for web developers. To get started, I recommend downloading the full bootstrap package and finding one of the example sites to modify. That way you don’t get too overwhelmed with all of the new classes you have to work with. Once you reference all the stylesheets and javascripts in the header, the next best course of action will be to create a new stylesheet for your changes beyond the bootstrap foundation. That way, if the website breaks, you won’t have to search the vast bootstrap stylesheets to find out what went wrong, but will simply have to check the custom stylesheet(s) you created. This also makes it easier to create templates that transition into other website projects as well.

Also, if you haven’t figured this out by now, the site you’re looking at was designed with bootstrap. :D


Pass it on!

    Post a Comment

    Your email is never published nor shared. Required fields are marked *