Beating the Bootstrap Blues!

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:

“Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.”

“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:

1. Easy to use
2. Easy Responsive Design
3. 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.

So I put my dream of using Bootstrap on the back burner and continued to learn other things.  I sharpened my skills with HTML/CSS and added basic JavaScript to my growing list of skills.

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.

Round 2.

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:

The redesigned Cat Nation Home Page.

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:

Example of Bootstrap’s grid system in action! I need pictures of my other 6 cats!

From winter to spring, from clueless to novice.  It just goes to show there truly is a season for everything.