Responsive.gs (http://responsive.gs/) is a lightweight, responsive framework, which is merely 1 KB in size when compressed. Responsive.gs is based on a width of 940 px, and made in three variants of grids, that is, 12, 16, and 24 columns. What's more, Responsive.gs is shipped with box-sizing polyfill, which enables CSS3 box-sizing in Internet Explorer 6, 7, and 8, and makes it decently presentable in those browsers.

A word on CSS box model

HTML elements, which are categorized as block-level elements, are essentially boxes drawn with the content width, height, margin, padding, and border through CSS. Prior to CSS3, we were facing constraints when specifying a box. For instance, when we specify a <div> tag with a width and height of 100px, as follows:

div { 
  width: 100px;
  height: 100px;
}

The browser will render div as a 100px square box, as shown in the next diagram:

However, this will only be true if the padding and border have not been added in. As a box has four sides, a padding of 10px (padding: 10px;) will actually add 20px to the width and height—10px for each side, as shown in the following diagram:

While it takes up space on the page, the element's margin space is reserved outside the element rather than as part of the element itself; thus, if we give an element a background color, the margin area will not take that color.

CSS3 box sizing

CSS3 introduced a new property called box-sizing, which lets us specify how the browser should calculate the CSS box model. There are a couple of values that we can apply within the box-sizing property.

Value	Description
content-box	This is the default value of the box model. This value specifies the padding and the border-box's thickness outside the specified width and height of the content, as we have demonstrated in the preceding section.
border-box	This value will do the opposite of what the content-box does; it includes the padding and the border box as the width and height of the box.
padding-box	At the time of writing this book, this value is experimental and has just been added recently. This value specifies the box dimensions.

In each of the projects in this book, we will be using the border-box value so that we can determine the box dimensions with ease for the websites. Let's take our preceding example to understand this, but this time we will set the box-sizing model to border-box. As mentioned in the preceding table, the border-box value will retain the box's width and the height as 100px, regardless of the padding and border addition. The following illustration shows a comparison between the outputs of the two different values, content-box (the default value) and border-box:

In this book, we will use Responsive.gs and explore more of it in the next two chapters to build a simple responsive blog.

Bootstrap (http://getbootstrap.com/) was originally built by Mark Otto (http://markdotto.com/) and initially intended only for internal use on Twitter. In short, Bootstrap was then launched for free for public consumption.

If you refer to the initial development, the responsive feature was not yet added. It was then added in Version 2 due to the increasing demand for creating responsive websites.

Bootstrap also comes with many more added features as compared to Responsive.gs. It is packed with preset user interface styles, which comprise common user interfaces used on websites such as buttons, navigation bars, pagination, and forms, so you don't have to create them from scratch again when starting a new project. On top of that, Bootstrap is also powered with some custom jQuery plugins such as image slider, carousel, popover, and modal box.

You can use and customize Bootstrap in many ways. You can directly customize the Bootstrap theme and its components directly through the CSS style sheets, the Bootstrap customize and download page (http://getbootstrap.com/customize/), or the Bootstrap LESS variables and mixins, which are used to generate the style sheets.

In this book, we will go into Bootstrap in Chapter 5, Developing a Portfolio Website with Bootstrap, and Chapter 6, Polishing the Responsive Portfolio Website with LESS, to build a responsive portfolio website.

Foundation (http://foundation.zurb.com/) is a framework created by ZURB, a design agency based in California. Similar to Bootstrap, Foundation is not just a responsive CSS framework; it is shipped with a preset grid, components, and a number of jQuery plugins to present interactive features.

Some high-profile brands, such as McAfee (http://www.mcafee.com/common/privacy/english/slide.html), which is one of the most respectable brands for computer antivirus, have built their websites using Foundation.

The Foundation style sheet is powered by Sass, a Ruby-based CSS preprocessor. We will be discussing more about Sass, along with the Foundation features in the last two chapters of this book; therein, we will be developing a responsive website for a startup company.

Both Bootstrap and Foundation use CSS preprocessors to generate their style sheets. Bootstrap uses LESS (http://lesscss.org/)—though the official support for Sass has just been released recently. Foundation, on the contrary, uses Sass as the only way to generate its style sheets (http://sass-lang.com/).

CSS preprocessor is not an entirely new language. If you have known CSS, you should be accustomed to the CSS preprocessor immediately. The CSS preprocessor simply extends CSS by allowing the use of programming features such as variables, functions, and operations.

The following is an example of how we write CSS with the LESS syntax:

@color: #f3f3f3;

body {
  background-color: @color;
}
p {
  color: darken(@color, 50%);
}

When the preceding code is compiled, it takes the @color variable that we have defined and places the value in the output, as follows:

body {
  background-color: #f3f3f3;
}
p {
  color: #737373;
}

The variable is reusable throughout the style sheet and this enables us to retain style consistency and make the style sheet more maintainable.

We are going to use and explore CSS preprocessors, LESS, and Sass further during the course of building responsive websites with Bootstrap (Chapter 5, Developing a Portfolio Website with Bootstrap and Chapter 6, Polishing the Portfolio Website with LESS) and Foundation (Chapter 7, A Responsive Website for Business with Foundation, and Chapter 8, Extending Foundation).

Our discussion on responsive web design here, though essential, is merely the tip of the iceberg. There is so much more about responsive web design than what we have recently covered in the preceding sections. I would suggest that you take your time to get yourself more insight and remove any apprehension on responsive web design, including the concept, the technicalities, and some constraints.

The following are some of the best recommendations for references:

Q1. In his article, which we have referred to about two times in this chapter, Ethan Marcotte mentioned the main technical ingredients that formulate a responsive website. What are those main components?

Q2. What is a viewport?

Q3. Which one of these is the correct way to declare CSS3 Media Queries?