Even if you're not a designer, Bootstrap is a great way to make your sites look nice.
In a previous article, I described the relatively new phenomenon of design frameworks. Just as Web application frameworks make it easier to create server-side applications, design frameworks make it easier to create client-side designs. They do this by providing predefined CSS classes, each of which indicates the width of the column you want to create, the type of element you're using, or the color and style you want to use.
It's true that CSS masters will find a design framework unnecessary. After all, such people already can tweak the layouts, adjust the colors or create beautiful buttons, all on their own, without having to use the assistance of predefined classes. But speaking as someone who is design-challenged, the introduction of design frameworks has made it possible, even for someone like me, to make a Web application that doesn't cause people to go screaming into the night.
The secret behind such frameworks is that by buying into their predefined CSS classes, you give up some of the freedom you had with pure CSS. You agree to use their classes and to use their HTML structure in some cases. This is generally a worthwhile trade-off, in that your code and CSS end up being much shorter and more legible. You can concentrate on your domain of expertise, namely software development, rather than tweaking the CSS to look just right. And, because these frameworks constantly are evolving to support designers and developers, each upgrade supports more browsers, more optimizations and more CSS classes that you can use to integrate into your work.
One framework in particular has taken the world of Web development by storm during the past year: Twitter Bootstrap. Bootstrap first was released in summer 2011, and it was written by Mark Otto and Jacob Thornton, both of whom work at Twitter. Bootstrap, which was released under an open-source license on GitHub, has become an almost-overnight sensation. Indeed, it is currently the most-watched open-source project on GitHub, surpassing even Ruby on Rails.
There have been grumblings on such sites as Y Combinator's "Hacker News" about the proliferation of sites using Twitter Bootstrap. I see this as positive, raising the minimum acceptable level for Web design, while also making it straightforward and easy for designers to extend those designs.
Bootstrap is based on LESS, a language that compiles into CSS, and which is similar in many ways to SCSS. This means if you want to work with Bootstrap, you either need to compile the LESS stylesheets into CSS manually, take care of this in your deployment system or use a precompiled version of Bootstrap. Although using a precompiled version of Bootstrap is clearly the easiest way to go, it also gives you the least flexibility, because you won't be able to modify the LESS source to your own designs.
In this article, I discuss Bootstrap, including how you can integrate it into your own Web applications.
There are several ways to install Twitter Bootstrap. The easiest and most straightforward is to clone the Git repository from GitHub:
git clone https://github.com/twitter/bootstrap.git
This creates a new subdirectory named bootstrap, containing a number of files and directories. The docs directory contains the current documentation, the same as you can see on the Bootstrap site itself on GitHub. And, because it is written using Bootstrap, it provides a nice set of examples for using Bootstrap on your own sites.
I discuss the img directory below, so for now, you largely can ignore it. The js directory contains jQuery plugins that integrate with Bootstrap. The less directory contains, as you might expect, a number of files in LESS format, which then can be compiled into CSS files. It is these resulting CSS files that you will use on your site, not the LESS source files.
./configure && make && make check && make install
Once this was done, I had not only the "node" binary, but also the "npm" binary, which allows me to install packages for node.js. You can install LESS with the following:
npm install less
Once that's done, you should be able to go into the less directory and issue the command:
lessc bootstrap.less > bootstrap.css
This compiles bootstrap.less into CSS, which you capture into the file bootstrap.css.
Some Web application frameworks can perform this compilation for you behind the scenes, on a regular basis or as you deploy. It's worth searching through the documentation for your favorite application framework. Bootstrap has become so popular that nearly every major one supports it somehow.
Reuven M. Lerner, Linux Journal Senior Columnist, a longtime Web developer, consultant and trainer, is completing his PhD in learning sciences at Northwestern University.
Free DevOps eBooks, Videos, and more!
Regardless of where you are in your DevOps process, Linux Journal can help!
We offer here the DEFINITIVE DevOps for Dummies, a mobile Application Development Primer, and advice & help from the expert sources like:
- Linux Journal