Ask anyone who’s been working with HTML and CSS since the late nineties about vertically aligning content with CSS. And they’ll tell you it has always been quite a challenge on one browser. Getting consistent results on many different browsers was nearly impossible. That’s why I was so excited to try out Twitter Bootstrap.
This framework is a god send.
Having to have the ability to center-align things is fantastic. The ability to programmatically create buttons is also fantastic. I used to spend hours and hours tracking down an implementation that I liked. Then I would have to research it and find out how it was made by either looking at the code or by finding a tutorial online. Now I can just import the framework and use the CSS classes right out of the box to create a three columned layout that automatically scales to different screen resolutions.
I’m also happy to start adopting this framework because it is open source. There is no possibility of it going out of date as browsers change over time. There is a huge community of developers working on updating Twitter Bootstrap.
I like that I don’t have to worry about browser specific implementations. Twitter Bootstrap is really easy to use. And I’m going to start using it professionally with my installation of WordPress. I used it to easily mock up a quick survey intro page for work. I am looking forward to using this technology to create a carousel that shows not only pictures but videos too.
Summary of WOD experiences
Bootstrap browser history – This exercise was my first experience using Bootstrap. We created a simple website on the history of surfing. A simple website with four floating divs that held the images and names of four famous surfers. Then we applied Bootstrap and suddenly all the old CSS was not necessary. It still pays to know CSS, but with Bootstrap setting up responsive columns is ridiculously easy.
- I completed this WOD in 25 minutes and 56 seconds.
Responsive Kamanu – During this exercise I recreated the Kamanu Composites website with Bootstrap. The navigation was easy to update with Bootstrap. And I was also able to style the site with an easy starter design from Bootswatch. I laid out the basic elements of the site I and it looked like something from 1999. Then I added Bootstrap and Bootswatch and the navigation came to life.
- I completed this WOD in 40 minutes and 22 seconds.
Responsive Castle High School – I updated the Castle High School website to take advantage of the responsive design that comes with Bootstrap. This was the first time I’ve seen a class applied to a div to make it hide itself when the page is resized. Now that I have finished these three experiences with Bootstrap that is simply no going back. Bootstrap gives me confidence to build a site and not worry about how it looks on specific browsers at specific sizes. I can code up a site and be content that it will look beautiful and consistent on any device running any browser.
- I completed this WOD in 33 minutes and 55 seconds.
Most helpful tool for debugging CSS
The most helpful tool in finding out why certain CSS rules were not being applied was Firebug for Firefox. I got stuck for a good 10 minutes trying to update the color of the navigation bar in CSS. Once I inspected the navigation element with Firebug I was able to determine that the color was being set but the gradiated image was being applied over the background color. Once I removed the gradient the background color shone through.