The trees were naked. The grass brown as beached, dried seaweed. The air held a bone chill and blew ice cold. Back in late February/early March when I first encountered Twitter Bootstrap, these were the conditions outside my bedroom window. I turned from the wintry, oppressed scene outside. I faced my computer, fired up google and typed “What is Twitter Bootstrap?”
As always, google obliged with a response form Wiki:
“Cool!”, I thought.
“Free tools for building websites that contain ready made bits of HTML and CSS so I don’t have to do everything from scratch! This sounds great!”
As I read on, Bootstrap was described as having the following advantages:
- Easy to use
- Easy Responsive Design
- Saves Time
I couldn’t wait to start using this “easy” new framework. After all, who doesn’t like easy? This sounded like a panacea to someone who had just finished struggling through HTML and CSS.
Wrong. Wrong. Wrong.
Let me just say there is nothing easy about Bootstrap if you are completely new to web development. Just getting the files is a little bit confusing at first. Do you download them or use the CDN. What even is a CDN? Get the idea of the initial confusion?
Back in February, I went to the Bootstrap site and downloaded the files. They might as well have been written in greek! I didn’t understand what I was looking at or how to use them. I tried reading about Bootstrap only to be thwarted by concepts such as “media-viewpoint” and “grid layout”.
My panacea quickly turned to pandemonium as I tried to build a website with Bootstrap. Total fail. I couldn’t even link to the files correctly.
Today the trees are verdant and sway in ever-green glory. The grass is lush, if full of weeds, and the air brings bird song and warm breezes. Spring has arrived around me as I worked almost oblivious to the change in season.
It is now late April and I recently encountered a brief tutorial for Bootstrap (my old foe) on codecademy. Suddenly, the explanations given in the tutorial actually made sense. I could picture the 12 column grid system used by Bootstrap in my mind. Even better, I could grasp how to divide this grid up to create simple layouts for a webpage.
I had to try it out. I had to build something (See If You Build It) to see if I truly understood. It was a rematch between me and Bootstrap and this time I was going to win!
So I decided to redesign my Cat Nation webpage. (See A Website’s Journey) I used Bootstrap for the layout and Google Fonts to find some interesting fonts for the page. Here is a screenshot of the results:
I am also taking advantage of Bootstrap’s grid layout to include images of all my cats! I have 9 cats, but right now I only have suitable images of 3 of them. So I just repeated the same 3 images to test out Bootstraps grid system. It looks so clean! Here is a screen shot of my cat grid system with the three cats repeated:
From winter to spring, from clueless to novice. It just goes to show there truly is a season for everything.