A Look at CSS Frameworks: Bootstrap

Bootstrap logoWith the rise of web standards, the introduction of HTML5, and the advances in CSS in the past decade, CSS frameworks have become an easy way to build websites. No longer do you have to re-invent the wheel each time, instead you can use one of many pre-built frameworks that are feature-packed to quickly produce the results you want, including responsive web pages.

One of the default templates.

There are several default templates available from the Bootstrap website.

There are several different open source CSS frameworks available for free, including ZURB Foundation, Responsive BP, Baseguide, BlueprintMaterialize, Pure CSS, YAML, and Ink. But in this article I’m going to focus on my favorite framework, Bootstrap, that I’ve been using for a while now.

Bootstrap was originally conceived by a designer and a developer at Twitter, and was used during a redesign of Twitter’s UI. Both have since left Twitter, and Bootstrap was turned into an open source project.

The advantage of using a framework like Bootstrap is ease of implementation. It’s both powerful and flexible, letting you design your site on a grid, and easily implementing a responsive web design for mobile users, which is more important than ever as more and more people access the web via a mobile device like iPhone and iPad, as well as Android phones and tablets, where a full-sized desktop site just wouldn’t be practical.

Bootstrap is extremely flexible, letting you implement many different page styles while keeping your design elements consistent between them. You can view some examples of pages designed with Bootstrap here and here.

Commercial template

There are many different sites offering Bootstrap themes both for free and for a fee.

I first found Bootstrap about a year-and-a-half ago, and have been using it ever since when building static websites. I had previously used a much older framework dating back to 2006 or so called YAML (Yet Another Multicolumn Layout, not to be confused with Yet Another Markup Language, which is a whole different beast). It was great for its time, but it lacked responsiveness (which, to my understanding, has since been built into newer versions). I was looking for something fresh and new, and Bootstrap fit the bill.

There is a little bit of a learning curve to Bootstrap, but once you get used to how things work, it becomes quick and easy to design great sites. Bootstrap also supports the use of SASS, which is a powerful tool for writing CSS using things like variables. There’s much more to SASS that I won’t get into here, but the authors of it describe it as ”CSS with Super Powers”. If you don’t already know about SASS, check it out here.

Kyle Wilson Memorial

The Kyle Wilson Memorial website, designed by me, is a memorial for a fallen firefighter in Virginia that happened to be the brother-in-law of a good friend of mine. The site was built using Bootstrap.

I’ve built a few sites with Bootstrap, though not all of them are active anymore. One of the sites that is still active that I built using Bootstrap is the Kyle Wilson Memorial, and I will be using it for my main static website when it is complete.

Bootstrap is also available as a barebones WordPress theme that you can customize to your hearts content. I use the theme DevDmBootstrap3 with a custom child theme that I developed on my main blog site.

Bootstrap is available as a free download, and has great documentation online. Give it a try!

Leave a Reply