Forbes - The Joy of Bootstrap: A smarter way to learn the worlds most popular web framework

The Joy of Bootstrap

A smarter way to learn the most popular front-end framework for developing responsive, mobile first projects on the web.

by

Alan Forbes

http://www.joyofbootstrap.com

The Joy of Bootstrap

Copyright 2014 by Alan Forbes. All rights reserved, including the right to reproduce this book, or portions thereof, in any form. The scanning, hosting, downloading, or otherwise sharing this book over the Internet without the permission of the author is illegal and punishable by lawand not very nice. Please encourage me to write another book by buying your own copy.

What is Bootstrap?

Introduction

Bootstrap is a free collection of tools for creating awesome websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components such as menus, headers, and image carousels.

Bootstrap started off as an internal project at Twitter but the guys who built it (Mark Otto and Jacob Thornton) got management approval to open source it. For this reason, Bootstrap is sometimes also referred to as 'Twitter Bootstrap'.

One of the great things about Bootstrap is that it is designed to be mobile first. This means that the things you build with Bootstrap to look great on a regular browser will also (generally) look great on a mobile device too without any extra work. By 'mobile device' I mean a gadget with a small screen factor, such as smart phone. Bootstrap is responsive.

Responsive means that your page will respond to different sized screens by automatically adjusting its layout to look good.

Even better, working with Bootstrap is just plain fun too. That's what inspired me to write this book-- so you could have fun with Bootstrap too.

Let's get started.

Where to get Bootstrap

There are two ways to start using Bootstrap on your web site. You can:

1. Download the Bootstrap library from getBootstrap.com or,

2. Include Bootstrap from a CDN

Downloading Bootstrap

There are three versions of Bootstrap available for downloading: 1) the compiled and minified version which contains the CSS, JavaScript, and fonts, but not documentation or source files, 2) The source code version which contains the source Less, JavaScript, font files, and documentation, and 3) and the SAAS version which is Bootstrap ported from Less to Sass for inclusion in Rails, Compass, or Sass-only projects.

Unless you are looking to tinker with the underlying structure of Bootstrap, you should probably go for option one-- the compiled and minified version.

But then again, you don't even need to download Bootstrap to use it. You could just use the hosted version.

Hosted Bootstrap

A company called MaxCDN is hosting Bootstrap. It is a good idea to check the MaxCDN website to get the latest links, which you can do at http://www.bootstrapcdn.com/ . As of the writing of this book, to use Bootstrap MaxCDN just include the the following code on your page:

Max CDN:

< head >

< link rel = "stylesheet" href = "//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" >

< link rel = "stylesheet" href = "//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" >

< script src = "//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" ></</span> script >

</</span> script >

</</span> head >

Using a hosted version of Bootstrap has some advantages over hosting it yourself. Many users will have already downloaded Bootstrap when visiting a different site. As a result, they won't need to download it again because their browser will already have it stored locally. This leads to faster loading time of your site. Also, most CDN's will make sure that when a user requests a file it will be served from the server closest to them, which may well be closer (and more importantly faster) than your server.

Unless you have a compelling reason to host Bootstrap yourself, you should use a CDN (Content Delivery Network).

Potential Gotcha!

Note that if you use the style shown above to refer to the hosted Bootstrap, such as href="//netdna.bootstrapcdn.com... then the URL used to retrieve the CSS will use the same protocol as the page in which it is hosted. In other words, if your page is on http://www.joyofbootstrap which uses the http protocol, then it will connect to netdna.bootstrapcdn.com using http as well.

If your page is on a secure server using https, then Bootstrap will come using https. Likewise if it is on a regular (non-secure) http server, then Bootstrap will use http when it evaluates how to get to //netdna.boostrapcdn.com.

This means that if you copy some of the source code from the book to your local machine and then just open it in a browser it will use the file protocol to try to get the Bootstrap files, which won't work.

It doesn't work because it tries to get the Bootstrap css from your local file system, using the path specified.

The solution, if you need to view files locally, is to either 1) write out the entire url including the protocol, such as

or, 2) copy Bootstrap to your file system and then modify the href path to the location where the file actually exists. Note that if you move this to a server at some point, you'll need to duplicate the path on the server to match that of your local machine.

Here's the exact same file, with no change at all, running on a server. In this case, the hosted Bootstrap is retrieved using http, which is implied protocol.

The file works because the Bootstrap CDN can be retrieved using HTTP.

Annoyingly for us, but in an attempt to make browsers simpler for the masses, most browsers now hide the protocol (such as http://) when displaying URLs in the address bar.

LESS

Bootstrap is modular and consists essentially of a series of LESS stylesheets that implement the various components of the toolkit. A stylesheet called bootstrap.less includes the components stylesheets. You probably have never heard of LESS; at least I hadn't heard of it until I discovered Bootstrap.

LESS (Leaner CSS) is a dynamic stylesheet language which outputs standard CSS files.

LESS is a language that makes the maintenance of complex stylesheets easier. You do not have to understand LESS to make use of Bootstrap. You do have to understand it if you want to seriously customize Bootstrap though.

Here's a very short introduction to LESS. LESS allows variables to be defined which are substituted for CSS when the file is translated. LESS variables are defined with an at sign(@). Variable assignment is done with a colon (:).

During translation, the values of the variables are inserted into the output CSS document.

@color: #4D926F;

#header {

color: @color;

}

h2 {

color: @color;

}

The code above in LESS would compile to the following CSS code.

#header {

color: #4D926F;

}

h2 {

color: #4D926F;

}

As you can imagine, creating stylesheets this way has some advantages because when you want to change a color, for instance, you don't have to change it in a million places-- you only have to change the value of the variable. There is much more to LESS than this. You can even write functions that evaluate into CSS, but this is beyond the scope of this book.