Bootstrapping with Twitter

     So it's been a while since the last post where we were continuing with rapid design development for our site here. Progress has continued with some rather pleasing results from the team, and it seems that we are finally able to take a big leap in development and head toward creating a responsive user interface. While we have considered using frameworks before, we never really got deep into one before and therefore we never found one that would work well for us. But taking a look at the hottest websites out there today, Twitter is definitely among these ranks, and so certainly they must be utilizing carefully crafted pages, scripts, and style sheets in order to keep up with growing trends. As a toolkit from this trending site, the Twitter Bootstrap is a friendly set of files that is designed to help web developers just like us to get started with creating beautiful websites. And it is based off of Twitter, so it is bound to look and feel good.

     Browsing through the Twitter Bootstrap project page, I quickly saw the hundreds (if not more) of features that this toolkit has to offer, and was greatly impressed at how nice everything looked as well. But the thing that really, truly impressed me was how incredibly easy they made it to implement the features that we want. I've used libraries such as JSTL (JSP Standard Tag Library) and YUI (Yahoo User Interface) before, but none of them have had documentation that is as clear as the Twitter Bootstrap one. When implementing external resources, the most important thing (in my opinion) is the usability of it; reading other peoples' code and understanding their intentions is one of the most time consuming parts of web development, so having clear documentation is something that can save an enormous amount of time. The Twitter Bootstrap documentation includes not only visual examples, but also the code that we need in order to use them; all we have to do is copy and paste it into our page, and customize it for our specific needs. They also provide, suggestions, best practices, and additional options, and all of it is concise, so we don't get scared or deterred by long, confusing explanations. Things are looking very promising so far!

     So, following these excellent tutorials, I quickly set up my environment to get ready to begin using Twitter Bootstrap. With the arrival of version 2.0, a fully responsive layout is accommodated, which is just what we need for our project. I played around with the features for a bit, and found that as expected, it was very simple to implement the different features available. Some of the features are slightly complex and as a result require a little more effort into getting them to work nicely, but overall, I am very pleased with it.

     The major issue that I forsee in our project is porting everything over to this new framework. We could just add the features to our existing code base (since it's mostly adding classes and rearranging tags), but it might be quite confusing and messy as we merge the two together. My approach would be to start with a "blank canvas" and add components one at a time, making sure that they are correctly implemented before adding the next. There is a flaw with this approach too, however; namely the fact that many components are not separate; rather they are largely and continuously nested, so it might be difficult or even impossible to add a sizable component to our "blank canvas". I suppose that we will just have to try it out and see if there are any infeasible parts that we come across, and assess the options.