Ever had a Web project in mind, but got stalled at the prospect of having to worry about the site design? If code, and not design, is your strong point you’ll want to take a look at Twitter’s Bootstrap. This weekend, you can prettify an existing Web site or start a Web project you’ve been putting off with a full design toolkit.
Like many folks in the Linux community, I’ve been creating Web sites since the 90s. My first site was hosted in the generous 10MB of space granted by my ISP in Kirksville, Missouri. It consisted of a tribute to Charles Bukowski, and was as homely a site as you’ve ever seen. Well, it was better than pages on MySpace, but it wasn’t terribly pretty.
Fast forward to 2011, and while my HTML skills have improved a bit, my Web design skills still leave something to be desired. But if I’m working on a project that demands a quick Web page (and not a full-blown CMS), I can turn to Bootstrap.
What is Bootstrap?
Bootstrap is a project released by Twitter in mid-August of this year. It’s hosted on GitHub and is available as a 6K gzipped resource if you choose to use the release hosted on GitHub. (More on that in a moment.)
It includes the CSS and HTML for typography, buttons, tables, grids, navigation bars, and a lot more. It’s designed to be suitable for basic sites or for Web applications.
Bootstrap is “built” with LESS, a dynamic stylesheet language. Basically, it allows you to speed up CSS development, and makes it easier to customize Bootstrap. We’ll talk a bit more about that shortly as well.
Getting Bootstrap
You can use Bootstrap a couple of ways. The first and easiest way is to link to the compiled CSS from GitHub using the link element at the top of your page (under the title element, for instance, but before the body element).
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.1.1.min.css">
That’s all it takes. You immediately inherit all the styles from Bootstrap — so if you have elements that are defined by the styles in Bootstrap, you’ll see an immediate change in your page. And you should have elements that are defined by Bootstrap.
What You Get
Let’s take a look at what Bootstrap gets you. Naturally it has styles for the normal page elements we use all the time. So the paragraph, header, list, emphasis, strong, and other standard tags all get styled.
Bootstrap also has two layouts to choose from, so you have the option of a fixed 940-pixel wide layout, or a fluid layout with a sidebar.
One thing that can be a pain to create from scratch is a navigation bar. Thankfully, Bootstrap provides a Navigation class that makes it painless to create a pleasant-looking sidebar.
If you hate coding tables (who doesn’t?) Bootstrap makes it slightly nicer by providing several styles of table. You get the “zebra-striped” class which has the alternating rows, and they also demonstrate combining the zebra-striped style with Tablesorter to create a sortable table.
You also have default styles for forms that spiff up any forms that you need to create with nifty-looking checkboxes, prepended text, and so forth.
If you’re doing an application, you’ll probably want to look into tooltips, alerts, and popovers as well as the standard page elements. Twitter has you covered here with alerts and all that are easy on the eyes and easy to drop in.
Beyond Bootstrap
But what if you want to tweak the style a bit? While Twitter’s basic look works for me, it may not be quite what you’re looking for. No worries, that’s easy to fix.
The Bootstrap code is broken up into seven .less files that cover different parts of the design and layout. For example, there’s forms.less that handles (you guessed it) forms, tables.less for tables, type.less for typographic elements, and so on.
The nice thing about using LESS is that you can do things like change colors or styles throughout with variables instead of changing each and every instance. See the LESS site for more. You make modifications to those files, and then use the makefile included with Bootstrap to compile into one CSS file for distribution.
By the way, if you’re curious about the license, Twitter distributes Bootstrap under the Apache License 2.0 — which should be compatible with just about any personal or business project.
If there’s a project you’ve been itching to start, or if there’s a homely Web page you need to pretty up, try Bootstrap. I know a lot of FOSS projects out there that could benefit from it. This weekend, go make the Web look a little nicer!
