0

First impressions with Twitter Bootstrap

This post describes my first impressions with Twitter Bootstrap which is something I’ve started looking into fairly recently.

Twitter Bootstrap is a free front-end frame work consisting of CSS, HTML and JavaScript components for creating websites and web applications. It is used by a hell of a lot of companies. The intention behind it is to allow you to create websites quickly and easily by focusing more on the functionality/logic required instead of getting bogged down by design. This enables you to develop sites quickly and is used to prototype designs i.e. throw up a website quickly and allow people to interact with it.

I came across Twitter Bootstrap in passing quite a while ago and really didn’t give it much credence. At that time I was more interesting in developing my skills as a web developer and I wanted to have more control over the code I wrote. The idea of sticking a load of third party code into my site to provide styles and features I might not use didn’t interest me.

Recently, I had been getting more and more frustrated with the amount of time I was spending worrying about theme in the sites I build and developing CSS and JavaScript features by hand instead of focusing on the functionality I wanted to develop. There’s no use worrying about the design of something if it doesn’t have the functionality that is supposed to sell it but this didn’t stop me from doing it. The other day I came across Twitter Bootstrap again whilst browsing /r/Programming and decided to try to incorporate it into an equipment booking system I’m in the process of building. My plan was to use bootstrap to improve the web apps front end with as little work on my part as possible, so I could focus more on the functionality the web app is supposed to be providing.

I downloaded it and started working through the documentation to get to grips with it. First attempt was not so lucky as I screwed up my web application. This afternoon I decided to create a bootstrap branch in my git repository in order to experiment with bootstrap in a way that would be less destructive to my project. I’ve been pretty impressed with what it can do. I managed to get to grips with it quite easily after I read the documentation properly. To use bootstrap’s CSS features you enclose your code in divs (which you should be doing anyway) and use the bootstrap CSS classes to provide style to your pages. I haven’t got as far as using their JavaScript features but I expect them to be as easy to use as the CSS. I’ve already merged my changes in the bootstrap branch into my master branch and released my changes into the live application. I’ll update you on the JavaScript features when I come around to using them. For now I highly recommend you take a look at it and create something with it.

This post was a small piece on my first impressions with Twitter Bootstrap. Similar articles are below. If you have any questions please feel free to contact me using the details located on my About Page.

Jason Edwards