In the past week, I took a stab at trying out the Twitter Bootstrap that I marveled at last week. I was excited to try out the tons of great features and components that it promised, but I was also prepared to struggle a little due to the fact that I was going to be transform an entire page (not to mention an entire site!). Nevertheless, I was happy to try it out, and as it turns out, I did in fact meet both satisfying success and disappointing difficulties.
First off, as expected, it was extremely easy to implement some of the basic layout components by using the handy classes; I just tacked on a few classes, and like magic, the site transformed itself instantly with no trouble at all. Of course this was just for the basic classes like "container" and "fluid-row", and there are more advanced tools to use, what with the fluid grid system that will take some thought and trial-and-error to perfect, but that will be one of the steps from here on. At least for the simple pages, I don't foresee much more complex implementation being used than just these basic containers. However, responsiveness is a key part to our site, and getting this to work was what gave me some grief this past week. According to the Twitter Bootstrap documentation, adding responsiveness can be as easy as adding classes to the containers that are desired to be made responsive. These classes are: "visible-phone", "visible-tablet", "visible-desktop", "hidden-phone", "hidden-tablet", and "hidden-desktop", which as one can probably guess, makes the container visible or hidden according to the size of the browser. I eagerly added these classes to my page, but to my dismay I saw no change in the responsiveness of the page. Thinking that I must've missed something, I searched around and tried to get it to work, but to no avail. The closest that I got so far was getting "hidden-desktop" to work by importing a "responsive.less" file that I had to obtain through GitHub (it wasn't contained in the zip file available for downloading). So I got a phone feature to hide when the browser was large, but strangely enough, it wouldn't pop up like I thought it would when it got to a smaller size. At this point, I didn't have much time to fiddle with it very much, so as it stands, responsiveness is very limited. Either I must figure out how to get this to work, or I will have to end up implementing it the old-fashioned way-- by hand using media queries, but that would ruin the spirit of using a framework. Sigh.
As for LESS, I was met with less stubborn parts, but as anticipated, it did take some time to get used to coding in the style of a programming language. As a result, I did not get to finish restructuring the theme CSS file to fit the LESS style, but nonetheless I was able to cross several basic components into LESS, such as the use of variables and nesting rules. There is not much that is difficult with this, except for making sure that the changes don't mess up the styles. This means that changes need to be done carefully, especially where we have previously used chained rules (using the comma to specify multiple containers). Therefore, it might be better to take out all unnecessary components and slowly add them in according to each page, because we want to write less CSS. I will probably end up following this approach, and hopefully I will come up with a working, simple, and concise page very soon.
Friday, March 23, 2012
Thursday, March 15, 2012
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.
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.
Subscribe to:
Comments (Atom)