Hour 1. What Is Bootstrap, and Why You Should Use It
What You’ll Learn in This Hour:
What a web framework is
How web frameworks are used
Some common web frameworks
What Bootstrap is
Pros and cons for using Bootstrap
Bootstrap is a web framework developed by Twitter to help make web pages and applications quicker to design. Because you’ve picked up this book, chances are you are interested in using Bootstrap for your web pages, but it is a huge tool with a lot of features, and it can be daunting to get started.
In this hour you will learn more about what a web framework is and how they help web developers build faster and more cost-effective websites. You will also learn how Bootstrap differs from some of the other web frameworks available for use. Finally, you will discover some of the reasons frameworks are a good idea for many websites and why Bootstrap might be the perfect solution.
What Is a Web Framework?
To understand Bootstrap, you first have to understand web frameworks. A web framework is a tool that programmers and web developers can use to simplify a complex system, such as a website or web application. A web framework is a development framework for websites, and several are available for designers and developers to use, including
Foundation (http://foundation.zurb.com/)
Pure CSS (http://purecss.io/)
HTML5 Boilerplate (http://html5boilerplate.com/)
Responsive Grid System (http://www.responsivegridsystem.com/)
And, of course, Bootstrap. All these frameworks provide HTML, CSS, and sometimes JavaScript tools to the developer to provide the underlying structure and functions of a website.
Most web design frameworks include a layout or grid system that makes it easy to create multicolumn sites quickly. The best frameworks also include CSS to style tables, manage forms, create buttons, style typography, and they are responsive.
Bootstrap is a web framework that offers all these features and more.
A Framework Is More Than Just a Template
A framework for web pages is more than just a template or even a series of templates. Instead, it is a group of tools you can use to create your web pages.
Many people use frameworks as if they were templates, and that is a great way to get started using them. But you aren’t getting the most out of your framework if all you do is create standardized pages based on the sample templates you can find.
A framework helps you manage your web pages by taking care of the tedious, repetitive tasks ahead of time so that you can focus on the actual design.
One of the most difficult things to create is a cohesive layout that stays consistent throughout your designs. Creating an effective grid layout means doing a lot of math. Every time you add another column to your grid, you have to calculate the gutters between margins, the change in column widths, and how they flow together across the entire page. This is especially difficult when building a responsive website because then you have to do all that math two to three times—once for each layout. Most designers create their grid layout page by page. And this means that you end up with almost random collections of columns and rows throughout the site.
A framework has all this figured out for you. You’ll learn more about Bootstrap grids in Hour 5, “Grids and How to Use Them,” but Figure 1.1 shows an example of how Bootstrap handles layout grids.
As you can see in Figure 1.1, Bootstrap uses a 12-column default grid, and you can divide it into many different sets of columns just by using some HTML classes on your elements. Without the framework, you would have to build all those classes and their relationships to each other by hand. You can see the HTML that generates that grid in Listing 1.1.
LISTING 1.1 Creating a Grid System in Bootstrap
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic Grid System</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.show-grid [class^=col-] {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
background-color: rgba(86,61,124,.15);
border: 1px solid #ddd;
border: 1px solid rgba(86,61,124,.2);
}
</style>
</head>
<body>
<div class="container">
<h1>Basic Grid System</h1>
<div class="row show-grid">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row show-grid">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
</div>
<div class="row show-grid">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
</div>
<div class="row show-grid">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row show-grid">
<div class="col-md-5">.col-md-5</div>
<div class="col-md-5">.col-md-5</div>
</div>
<div class="row show-grid">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
<div class="row show-grid">
<div class="col-md-7">.col-md-7</div>
</div>
<div class="row show-grid">
<div class="col-md-8">.col-md-8</div>
</div>
<div class="row show-grid">
<div class="col-md-9">.col-md-9</div>
</div>
<div class="row show-grid">
<div class="col-md-10">.col-md-10</div>
</div>
<div class="row show-grid">
<div class="col-md-11">.col-md-11</div>
</div>
<div class="row show-grid">
<div class="col-md-12">.col-md-12</div>
</div>
</div>
</body>
</html>
In Figure 1.2, you see the same HTML displayed on an iPhone. It’s much narrower than the web browser view, but Bootstrap gives a nice display without any change to the code.
You will learn more about creating grids with Bootstrap in Hour 5, but this gives you a quick taste for how Bootstrap works.
Pros and Cons of Frameworks
A web framework is a tool like any other, and there are definite benefits to using them, but there are also drawbacks. Some of the best reasons for using a framework include
Speed and efficiency—As I mentioned previously, frameworks do a lot of the more common tasks for you so you can focus on the more important parts of your design. For example, if you’re going to create a three-column section of your site in Bootstrap, you just need to know a few classes to create it.
Ease of use—Most web frameworks offer features like typography that novice designers might ignore because they can be difficult. But with a framework, you can create a site that has top-notch typography without having to worry about the difference between ems and rems or how tall the line-height should be.
Maintainability—When you use a framework for a website, you make it more maintainable in the future because the styles and scripts are, for the most part, predefined. If you build the site and someone else needs to maintain it, he doesn’t have to learn as much about how you write CSS because most of that is handled by the framework.
Stability and security—All the web frameworks I’ve mentioned are used by thousands of people around the world. They are well tested and maintained, and problems are found and fixed regularly. You don’t have to worry as much about browser support or whether the designs will break because many people are testing them in more scenarios than most web designers can afford to test with on their own.
But, of course, there are also drawbacks to using a web framework:
Code bloat—Although web frameworks are built to be as small and streamlined as possible, there is always going to be more there than you really need. In Hour 23, “Using Less and Sass with Bootstrap,” I give you some suggestions for how to customize your Bootstrap installation to make it suit your needs.
Repetition—It can sometimes be challenging to create a website using a framework that doesn’t look like every other website using that framework. Throughout this book, I provide ideas for how to customize your site designs beyond the Bootstrap defaults.
Steep learning curve—Frameworks are big and have a lot of things to learn to use well, and this can take time. But luckily you’ve purchased this book, so you’re well on the way to solving this problem.
Less control—Ultimately, when you use a framework you are giving up some control over how your website is built. If the framework designers use pixels for font sizes and you hate that, you have to either let your emotion go or manually go through and adjust it as you build your pages.
Every website is different, and it’s important that you evaluate the needs of the site before trying to shoehorn it into a framework. But frameworks do add a lot of value, so it’s always a good idea to consider them.
What Is Bootstrap?
Bootstrap is a web framework to help web designers and developers create websites and web applications. It is sometimes called “Twitter Bootstrap” because it was developed by Mark Otto and Jacob Thornton at Twitter to encourage more consistency in their internal tools and web applications.
It uses HTML and CSS for templates, typography, forms, navigation, buttons, tables, and more. And Bootstrap includes a JavaScript library for building dynamic page elements that are found on many modern websites. Bootstrap also includes a license to use a font library called Glyphicons to add graphical elements to your web pages quickly and easily.
How Is Bootstrap Different from Other Frameworks?
In general, most web development frameworks are the same. They offer CSS and sometimes JavaScript. They usually provide a grid system or some other way of laying out web pages. So, how do you choose between Bootstrap and some of the other options out there?
Some things you should consider include
Do you need software under a specific license?
The license the framework is released under can affect how it may be used. Bootstrap is released under the MIT open source license.
Do you need specific technology like Less, Sass, or jQuery?
Not all frameworks use these technologies, but Bootstrap offers all three.
Do you need a grid structure for your layouts, and do you need a responsive website?
Most web frameworks start with a basic grid system, but some do not. And while responsive web design (RWD) is more common now, not all frameworks offer it. Bootstrap offers both RWD and a robust grid system.
Do you need to support legacy systems like Internet Explorer 8 and lower?
Internet Explorer 8 handles HTML5 and CSS3 differently than more standards-compliant browsers, but not all frameworks take this into account. Bootstrap does.
Do you need typography included?
You can always do the typography yourself, but many web frameworks come with a prebuilt typography so you don’t have to worry about line spacing and font sizes. Bootstrap comes with basic typography.
Do you need icons or buttons?
Buttons make your site more interactive, and icons keep the site consistent looking. Bootstrap supports several types of buttons and is the only web framework to offer Glyphicons included in the license (with attribution).
Do you need support for tables or forms?
If you’re going to use more advanced HTML features like tables and forms, it’s nice to have a framework that can support them. Bootstrap supports both tables and forms.
Do you need your site to be extremely small to minimize bandwidth use (such as for mobile-only sites)?
One problem with many web frameworks is that they are huge and require a lot of bandwidth to download. Although Bootstrap is large at 150KB for the full (minified) installation, you can customize it to include only the features you need and reduce the size significantly.
The previous information is useful for knowing about Bootstrap, but it’s also nice to know a little more about other web frameworks you can use. Table 1.1 shows you the features I listed here and how the different frameworks compare.
All sizes are based on downloading the minified version of the CSS and JavaScript for the complete package—except for Pure CSS, which lists the size they claim after gzipping.
Why You Should Use Bootstrap
The choice of which web framework to use is an important one to make. But here are some of the reasons that I choose to use Bootstrap over other web frameworks:
Bootstrap is widely available—There are many different ways you can use Bootstrap on your website. You can use either Sass or Less or neither; you can get a package for .Net (http://www.nuget.org/packages/twitter.bootstrap.mvc4); and you can even get a WordPress Theme that uses Bootstrap (here are 18 free ones: http://wptavern.com/18-free-wordpress-themes-built-with-bootstrap).
Bootstrap is highly configurable—You can build your version of Bootstrap to have only the components your website needs. This keeps it smaller. You will learn more about how to configure Bootstrap to your website in Hour 21, “Customizing Bootstrap and Your Bootstrap Website.”
Bootstrap includes Glyphicons—There are 200 icons you can use that normally would not be available for free. But if you use Bootstrap, you can use the Halflings Glyphicons for free. Bootstrap is the only web framework that offers Glyphicons.
Bootstrap encourages mobile first design—You can design a Bootstrap page for your mobile customers and know that it will respond to the larger screens of desktop customers without doing anything. But if you want to dress it up more for larger screens, Bootstrap makes that easy, too.
Bootstrap is a powerful web framework that offers a lot of features and functions. It makes it easy to quickly create a new site that looks great and works well.
Summary
In this hour you learned the basics of what a web framework is and how they are used. You learned some of the reasons people don’t like web frameworks as well as reasons they are popular.
You got an overview of four popular web frameworks and learned how Bootstrap compares to each of them. And finally, you learned why you might consider using Bootstrap for your next web development project.
Workshop
The workshop contains quiz questions to help you process what you’ve learned in this hour. Try to answer all the questions before you read the answers.
Q&A
Q. What is the difference between a web framework and a template?
A. Web frameworks typically have more than just a template file for you to copy. They include things like JavaScript and CSS files as well as HTML. Web templates are usually ready to go right out of the box. You don’t do anything but add your own content. Web frameworks are more of a set of building blocks. You decide how your pages should look and then use the framework to create them.
Q. What about design patterns, aren’t they the same as a framework?
A. Design patterns are solutions to single problems, such as how to create a dropdown menu. A web framework uses design patterns to solve problems found on web pages.
Q. What about web application frameworks, how do they differ from web frameworks?
A. Web application frameworks are software programming frameworks to help web developers create dynamic websites. They include things like ASP.Net, ColdFusion, and PHP. They are used to help develop the back end or server-side of a website or web application. Web frameworks, or web development frameworks, are designed to help the web developer build the front-end or customer-facing part of a website.
Quiz
1. True or False: Web frameworks are simple tools.
2. Which of these is not a benefit of web frameworks?
a. Speed up development time
b. Reduce costs for web development
c. Grid systems for layout
d. Make web designs more consistent
3. True or False: Web frameworks are the same as web templates.
4. Should you use a web framework like a template?
5. Why are grids difficult in RWD designs without a framework?
6. Which of the following is not a benefit to using a web framework?
a. Speed and efficiency
b. Easy to learn
c. Maintainability
d. Security and stability
7. Which of the following is a reason designers don’t like web frameworks?
a. They are too easy to use.
b. They provide many design options.
c. They make designers’ jobs obsolete.
d. They can create sites that look very similar or identical.
8. Which of the following is a feature that is offered only by Bootstrap of the web frameworks discussed in this hour?
a. Responsive web design
b. Glyphicons
c. Sass
d. Internet Explorer 8 support
9. True or False: Sites created with Bootstrap all look the same.
10. Is ASP.Net a web framework?
Quiz Answers
1. False. Even though web frameworks are used to simplify web development, they are anything but simple themselves.
2. c. Grid systems for layout. Most web frameworks include a grid system, but not all of them do.
3. False. Web frameworks are more robust than templates and give the developer more tools.
4. You can use frameworks like templates, but they work better when you branch out and build your own designs.
5. Grids are difficult in RWD because you have to create multiple versions of your layouts and compute the different dimensions for each version.
6. b. Easy to learn. Although most web frameworks are not as difficult to learn as the average programming language, they still take time and can be frustrating.
7. d. They can create sites that look very similar or identical. The most common reason cited for not wanting to use a framework is the fear that the site will look like everyone else’s site.
8. b. Glyphicons Other frameworks have support for web fonts and icons, but only Bootstrap comes with Glyphicons included free.
9. False. Bootstrap can create all kinds of different and interesting-looking websites.
10. Yes. ASP.Net is a web framework, but to be more specific, it is a web application framework.
Exercise
Take a look at the different web frameworks you have available to you. Every month more are created, and there might be one out there that suits you even more than Bootstrap.