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 module, this value is experimental and has just been added recently. This value specifies the box dimensions.

In each of the projects in this module, 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 module, 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 module, 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 module; 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?

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 module, this value is experimental and has just been added recently. This value specifies the box dimensions.

In each of the projects in this module, 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 module, 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 module, 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 module; 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?

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 module, 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 module; 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?

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 module, 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 module; 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?

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 module, 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 module; 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?

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 module; 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?

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?

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?

We just installed Package Control to search, install, list, and remove extensions in Sublime Text easily. You can access Package Control through Command Palette…, which can be accessed by navigating to the Tools | Command Palette… menu. Alternatively, you can press a key shortcut to access it faster. Windows and Linux users can press Ctrl + Shift + P, while OS X users can press Command + Shift + P. Then, search for Command Palette… to list all available commands for Package Control.

As mentioned in the first chapter, we are going to use these CSS preprocessors to compose styles in two of the projects in this module. Having installed Sublime Text and the Package Control already, you can now easily install the Sublime Text packages that enable color highlighting for LESS and Sass/SCSS syntax. Go ahead and follow the instructions that we have just shown to install LESS and Sass/SCSS packages, their syntax can be found at the following locations:

Having a local server set up and running on our computer is necessary while developing a website. When we use a local server to store our website, we will be able to access it through http://localhost/ in the browsers, and we will also be able to access it on mobile phone browsers and tablets, which will not be possible when we run the website under file:/// protocol. Besides, some scripts may only be functioning under the HTTP protocol (http://).

There are many applications that make setting up a local server a breeze with only a few clicks, and XAMPP (https://www.apachefriends.org/) is the application that we will be using in this module.

As mentioned in the first chapter, we are going to use these CSS preprocessors to compose styles in two of the projects in this module. Having installed Sublime Text and the Package Control already, you can now easily install the Sublime Text packages that enable color highlighting for LESS and Sass/SCSS syntax. Go ahead and follow the instructions that we have just shown to install LESS and Sass/SCSS packages, their syntax can be found at the following locations:

Having a local server set up and running on our computer is necessary while developing a website. When we use a local server to store our website, we will be able to access it through http://localhost/ in the browsers, and we will also be able to access it on mobile phone browsers and tablets, which will not be possible when we run the website under file:/// protocol. Besides, some scripts may only be functioning under the HTTP protocol (http://).

There are many applications that make setting up a local server a breeze with only a few clicks, and XAMPP (https://www.apachefriends.org/) is the application that we will be using in this module.

of the projects in this module. Having installed Sublime Text and the Package Control already, you can now easily install the Sublime Text packages that enable color highlighting for LESS and Sass/SCSS syntax. Go ahead and follow the instructions that we have just shown to install LESS and Sass/SCSS packages, their syntax can be found at the following locations:

Having a local server set up and running on our computer is necessary while developing a website. When we use a local server to store our website, we will be able to access it through http://localhost/ in the browsers, and we will also be able to access it on mobile phone browsers and tablets, which will not be possible when we run the website under file:/// protocol. Besides, some scripts may only be functioning under the HTTP protocol (http://).

There are many applications that make setting up a local server a breeze with only a few clicks, and XAMPP (https://www.apachefriends.org/) is the application that we will be using in this module.

server to store our website, we will be able to access it through http://localhost/ in the browsers, and we will also be able to access it on mobile phone browsers and tablets, which will not be possible when we run the website under file:/// protocol. Besides, some scripts may only be functioning under the HTTP protocol (http://).

There are many applications that make setting up a local server a breeze with only a few clicks, and XAMPP (https://www.apachefriends.org/) is the application that we will be using in this module.

We have just set up a local server in our computer with MAMP. You can now access the local server with the http://localhost/ address through the browsers. For OS X users, however, the address is your computer username followed by .local. Say that your username is john the local server is accessible through john.local. The local server directory path is different for each platform:

The ln -s /opt/lamp/htdocs folder is where we will have to put our project folders and files. From now on, we will refer to this folder simply as htdocs. XAMPP is also equipped with a graphical application where you can turn the server on and off, as shown in the following screenshot:

As we will be using LESS and Sass to generate the style sheets of our responsive website, we will need a tool that will compile or change them into normal CSS format.

Back when CSS preprocessors were just gaining momentum, the only way to compile them was through command lines, which may have been the stumbling block for many people to even try CSS preprocessors at that time. Fortunately, we now have plenty of applications with a nice graphical interface to compile CSS preprocessors; the following is the list for your reference:

I will try to cover as many platforms as possible. Regardless of which platform you are using, you will be able to follow all the projects in this module. So, here we will be using Koala. It's free and available on three major platforms, namely, Windows, OSX, and Linux.

Installing Koala in each platform is pretty straightforward.

Ideally, we have to test our responsive websites in as many browsers as possible, including beta browsers such as Firefox Nightly (http://nightly.mozilla.org/) and Chrome Canary (http://www.google.com/intl/en/chrome/browser/canary.html). This is to ensure that our website is functioning well in different environments. However, during the development, we may pick one primary browser for development and as the point of reference of how the website should be put on display.

In this module, we will be using Chrome (https://www.google.com/intl/en/chrome/browser/). It is my humble opinion that Chrome, besides running fast, is also a very powerful web development tool. Chrome comes with a set of tools that are ahead of the other browsers. The following are two of my favorite tools in Chrome when it comes to developing responsive websites.

Source maps

One of the pitfalls of using CSS preprocessors is when debugging the style sheet. As the style sheet is generated and the browser refers to the CSS style sheet, we will find it hard to discover where exactly the code is declared within the CSS preprocessor's style sheet.

We may tell the compiler to generate comments containing the line numbers of where the code is actually written, but source maps solve this snag more elegantly. Rather than generating a bunch of comments that eventually pollute the style sheet, we can generate a .map file on compiling CSS preprocessors. Through this .map file, browsers such as Chrome, with source maps enabled, will be able to point directly to the source when we inspect an element, as shown in the following screenshot:

As you can see from the preceding screenshot, the Chrome DevTools shown on the left with source maps enabled refer directly to the .less files that allow us to debug the website with ease. Whereas, the source maps of the one shown on the right is disabled, so it refers to .css, and debugging the website would require a bit of struggle.

The source maps feature is, by default, enabled in the latest version of Chrome. So, make sure that your Chrome is up-to-date.

Mobile emulator

There isn't any substitution for testing a responsive website in a real device, a phone, or a tablet. Each device has its own merits; some factors, such as the screen dimension, the screen resolution, and the version of mobile browser, will affect your website displayed on the device. Yet, if that is not possible, we can use a mobile emulator as an alternative.

Chrome is also shipped with a mobile emulator that works out-of-the-box. This feature contains a number of presets for many mobile devices including iPhone, Nexus, and Blackberry. This feature not only emulates the device's user agent, it also turns on a number of device specifications, including the screen resolution, pixel ratio, viewport size, and touch screen. This feature can be extremely useful for debugging our responsive website early during development, without requiring an actual mobile device.

The mobile emulator is accessible through the Emulation tab of the Chrome DevTool Console drawer, as shown in the following screenshot:

With the mobile emulator built into Chrome, we do not need to set up yet another emulator from a third-party application or Chrome extensions. Here, we will use it to test our responsive websites.

Tip

Firefox has a similar feature to Chrome's mobile emulator, though it comparably only has very few features. You can enable this feature by navigating to the Tools | Web Developer | Responsive Design View menu.

different for each platform:

The ln -s /opt/lamp/htdocs folder is where we will have to put our project folders and files. From now on, we will refer to this folder simply as htdocs. XAMPP is also equipped with a graphical application where you can turn the server on and off, as shown in the following screenshot:

As we will be using LESS and Sass to generate the style sheets of our responsive website, we will need a tool that will compile or change them into normal CSS format.

Back when CSS preprocessors were just gaining momentum, the only way to compile them was through command lines, which may have been the stumbling block for many people to even try CSS preprocessors at that time. Fortunately, we now have plenty of applications with a nice graphical interface to compile CSS preprocessors; the following is the list for your reference:

I will try to cover as many platforms as possible. Regardless of which platform you are using, you will be able to follow all the projects in this module. So, here we will be using Koala. It's free and available on three major platforms, namely, Windows, OSX, and Linux.

Installing Koala in each platform is pretty straightforward.

Ideally, we have to test our responsive websites in as many browsers as possible, including beta browsers such as Firefox Nightly (http://nightly.mozilla.org/) and Chrome Canary (http://www.google.com/intl/en/chrome/browser/canary.html). This is to ensure that our website is functioning well in different environments. However, during the development, we may pick one primary browser for development and as the point of reference of how the website should be put on display.

In this module, we will be using Chrome (https://www.google.com/intl/en/chrome/browser/). It is my humble opinion that Chrome, besides running fast, is also a very powerful web development tool. Chrome comes with a set of tools that are ahead of the other browsers. The following are two of my favorite tools in Chrome when it comes to developing responsive websites.

Source maps

One of the pitfalls of using CSS preprocessors is when debugging the style sheet. As the style sheet is generated and the browser refers to the CSS style sheet, we will find it hard to discover where exactly the code is declared within the CSS preprocessor's style sheet.

We may tell the compiler to generate comments containing the line numbers of where the code is actually written, but source maps solve this snag more elegantly. Rather than generating a bunch of comments that eventually pollute the style sheet, we can generate a .map file on compiling CSS preprocessors. Through this .map file, browsers such as Chrome, with source maps enabled, will be able to point directly to the source when we inspect an element, as shown in the following screenshot:

As you can see from the preceding screenshot, the Chrome DevTools shown on the left with source maps enabled refer directly to the .less files that allow us to debug the website with ease. Whereas, the source maps of the one shown on the right is disabled, so it refers to .css, and debugging the website would require a bit of struggle.

The source maps feature is, by default, enabled in the latest version of Chrome. So, make sure that your Chrome is up-to-date.

Mobile emulator

There isn't any substitution for testing a responsive website in a real device, a phone, or a tablet. Each device has its own merits; some factors, such as the screen dimension, the screen resolution, and the version of mobile browser, will affect your website displayed on the device. Yet, if that is not possible, we can use a mobile emulator as an alternative.

Chrome is also shipped with a mobile emulator that works out-of-the-box. This feature contains a number of presets for many mobile devices including iPhone, Nexus, and Blackberry. This feature not only emulates the device's user agent, it also turns on a number of device specifications, including the screen resolution, pixel ratio, viewport size, and touch screen. This feature can be extremely useful for debugging our responsive website early during development, without requiring an actual mobile device.

The mobile emulator is accessible through the Emulation tab of the Chrome DevTool Console drawer, as shown in the following screenshot:

With the mobile emulator built into Chrome, we do not need to set up yet another emulator from a third-party application or Chrome extensions. Here, we will use it to test our responsive websites.

Tip

Firefox has a similar feature to Chrome's mobile emulator, though it comparably only has very few features. You can enable this feature by navigating to the Tools | Web Developer | Responsive Design View menu.

compile or change them into normal CSS format.

Back when CSS preprocessors were just gaining momentum, the only way to compile them was through command lines, which may have been the stumbling block for many people to even try CSS preprocessors at that time. Fortunately, we now have plenty of applications with a nice graphical interface to compile CSS preprocessors; the following is the list for your reference:

I will try to cover as many platforms as possible. Regardless of which platform you are using, you will be able to follow all the projects in this module. So, here we will be using Koala. It's free and available on three major platforms, namely, Windows, OSX, and Linux.

Installing Koala in each platform is pretty straightforward.

Ideally, we have to test our responsive websites in as many browsers as possible, including beta browsers such as Firefox Nightly (http://nightly.mozilla.org/) and Chrome Canary (http://www.google.com/intl/en/chrome/browser/canary.html). This is to ensure that our website is functioning well in different environments. However, during the development, we may pick one primary browser for development and as the point of reference of how the website should be put on display.

In this module, we will be using Chrome (https://www.google.com/intl/en/chrome/browser/). It is my humble opinion that Chrome, besides running fast, is also a very powerful web development tool. Chrome comes with a set of tools that are ahead of the other browsers. The following are two of my favorite tools in Chrome when it comes to developing responsive websites.

Source maps

One of the pitfalls of using CSS preprocessors is when debugging the style sheet. As the style sheet is generated and the browser refers to the CSS style sheet, we will find it hard to discover where exactly the code is declared within the CSS preprocessor's style sheet.

We may tell the compiler to generate comments containing the line numbers of where the code is actually written, but source maps solve this snag more elegantly. Rather than generating a bunch of comments that eventually pollute the style sheet, we can generate a .map file on compiling CSS preprocessors. Through this .map file, browsers such as Chrome, with source maps enabled, will be able to point directly to the source when we inspect an element, as shown in the following screenshot:

As you can see from the preceding screenshot, the Chrome DevTools shown on the left with source maps enabled refer directly to the .less files that allow us to debug the website with ease. Whereas, the source maps of the one shown on the right is disabled, so it refers to .css, and debugging the website would require a bit of struggle.

The source maps feature is, by default, enabled in the latest version of Chrome. So, make sure that your Chrome is up-to-date.

Mobile emulator

There isn't any substitution for testing a responsive website in a real device, a phone, or a tablet. Each device has its own merits; some factors, such as the screen dimension, the screen resolution, and the version of mobile browser, will affect your website displayed on the device. Yet, if that is not possible, we can use a mobile emulator as an alternative.

Chrome is also shipped with a mobile emulator that works out-of-the-box. This feature contains a number of presets for many mobile devices including iPhone, Nexus, and Blackberry. This feature not only emulates the device's user agent, it also turns on a number of device specifications, including the screen resolution, pixel ratio, viewport size, and touch screen. This feature can be extremely useful for debugging our responsive website early during development, without requiring an actual mobile device.

The mobile emulator is accessible through the Emulation tab of the Chrome DevTool Console drawer, as shown in the following screenshot:

With the mobile emulator built into Chrome, we do not need to set up yet another emulator from a third-party application or Chrome extensions. Here, we will use it to test our responsive websites.

Tip

Firefox has a similar feature to Chrome's mobile emulator, though it comparably only has very few features. You can enable this feature by navigating to the Tools | Web Developer | Responsive Design View menu.

browsers such as Firefox Nightly (http://nightly.mozilla.org/) and Chrome Canary (http://www.google.com/intl/en/chrome/browser/canary.html). This is to ensure that our website is functioning well in different environments. However, during the development, we may pick one primary browser for development and as the point of reference of how the website should be put on display.

In this module, we will be using Chrome (https://www.google.com/intl/en/chrome/browser/). It is my humble opinion that Chrome, besides running fast, is also a very powerful web development tool. Chrome comes with a set of tools that are ahead of the other browsers. The following are two of my favorite tools in Chrome when it comes to developing responsive websites.

Source maps

One of the pitfalls of using CSS preprocessors is when debugging the style sheet. As the style sheet is generated and the browser refers to the CSS style sheet, we will find it hard to discover where exactly the code is declared within the CSS preprocessor's style sheet.

We may tell the compiler to generate comments containing the line numbers of where the code is actually written, but source maps solve this snag more elegantly. Rather than generating a bunch of comments that eventually pollute the style sheet, we can generate a .map file on compiling CSS preprocessors. Through this .map file, browsers such as Chrome, with source maps enabled, will be able to point directly to the source when we inspect an element, as shown in the following screenshot:

As you can see from the preceding screenshot, the Chrome DevTools shown on the left with source maps enabled refer directly to the .less files that allow us to debug the website with ease. Whereas, the source maps of the one shown on the right is disabled, so it refers to .css, and debugging the website would require a bit of struggle.

The source maps feature is, by default, enabled in the latest version of Chrome. So, make sure that your Chrome is up-to-date.

Mobile emulator

There isn't any substitution for testing a responsive website in a real device, a phone, or a tablet. Each device has its own merits; some factors, such as the screen dimension, the screen resolution, and the version of mobile browser, will affect your website displayed on the device. Yet, if that is not possible, we can use a mobile emulator as an alternative.

Chrome is also shipped with a mobile emulator that works out-of-the-box. This feature contains a number of presets for many mobile devices including iPhone, Nexus, and Blackberry. This feature not only emulates the device's user agent, it also turns on a number of device specifications, including the screen resolution, pixel ratio, viewport size, and touch screen. This feature can be extremely useful for debugging our responsive website early during development, without requiring an actual mobile device.

The mobile emulator is accessible through the Emulation tab of the Chrome DevTool Console drawer, as shown in the following screenshot:

With the mobile emulator built into Chrome, we do not need to set up yet another emulator from a third-party application or Chrome extensions. Here, we will use it to test our responsive websites.

Tip

Firefox has a similar feature to Chrome's mobile emulator, though it comparably only has very few features. You can enable this feature by navigating to the Tools | Web Developer | Responsive Design View menu.

We have just installed Node.js and npm command, which enable us to use Bower later on through the Node.js Package Manager (NPM). The npm command line should now be accessible through the Windows command prompt or the OS X and Ubuntu terminals. Run the following command to test if the npm command works:

npm -v

This command returns the NPM version installed in the computer, as shown in the following screenshot:

Additionally, for Windows users, you may see a message at the top of the command prompt window saying Your environment has been set up for using Node.js and npm, as shown in the following screenshot:

This shows that you can perform the node and npm command within the command prompt. As we have set Node.js and npm is up and running, we are now going to install Bower.

Throughout this module, we will be dealing with a number of command lines to install Bower, as well as Bower packages. Yet, if you are from a graphic design background like I was, where we mostly work on a graphical application, operating a command line for the first time could be really awkward and intimidating. Hence, I would suggest you take time and get yourself familiar with the basic command lines. The following are a few references worth checking out:

should now be accessible through the Windows command prompt or the OS X and Ubuntu terminals. Run the following command to test if the npm command works:

npm -v

This command returns the NPM version installed in the computer, as shown in the following screenshot:

Additionally, for Windows users, you may see a message at the top of the command prompt window saying Your environment has been set up for using Node.js and npm, as shown in the following screenshot:

This shows that you can perform the node and npm command within the command prompt. As we have set Node.js and npm is up and running, we are now going to install Bower.

Throughout this module, we will be dealing with a number of command lines to install Bower, as well as Bower packages. Yet, if you are from a graphic design background like I was, where we mostly work on a graphical application, operating a command line for the first time could be really awkward and intimidating. Hence, I would suggest you take time and get yourself familiar with the basic command lines. The following are a few references worth checking out:

from a graphic design background like I was, where we mostly work on a graphical application, operating a command line for the first time could be really awkward and intimidating. Hence, I would suggest you take time and get yourself familiar with the basic command lines. The following are a few references worth checking out:

We have just installed Bower on the computer, which enables the bower command. The -g parameter that we included in the preceding command installs Bower globally, so that we are able to execute the bower command in any directory in the computer.

After installing Bower, we have access to a set of command lines to operate Bower functionalities. We will run these commands in the terminal, or in the command prompts if you are using Windows, just like we installed Bower with the npm command. All commands start with bower and are followed by the command keyword. The following is the list of commands that we may use frequently:

Q1. We have just installed Sublime Text along with Package Control. What is the Package Control used for?

Q2. We have also installed XAMPP. Why did we need to install XAMPP?

After installing Bower, we have access to a set of command lines to operate Bower functionalities. We will run these commands in the terminal, or in the command prompts if you are using Windows, just like we installed Bower with the npm command. All commands start with bower and are followed by the command keyword. The following is the list of commands that we may use frequently:

Q1. We have just installed Sublime Text along with Package Control. What is the Package Control used for?

Q2. We have also installed XAMPP. Why did we need to install XAMPP?

run these commands in the terminal, or in the command prompts if you are using Windows, just like we installed Bower with the npm command. All commands start with bower and are followed by the command keyword. The following is the list of commands that we may use frequently:

Q1. We have just installed Sublime Text along with Package Control. What is the Package Control used for?

Q2. We have also installed XAMPP. Why did we need to install XAMPP?

Besides the new elements, we will also add one particular new type of input on the blog, search. As the name implies, the search input type is used to specify a search input. In the desktop browsers, you may not see a significant difference. You may also not immediately see how the search input type give advantages to the website and the users.

The search input type will boost the experience of mobile users. Mobile platforms such as iOS, Android, and the Windows Phone have been equipped with contextual screen keyboards. The keyboard will change according to the input type. You can see in the following screenshot that the keyboard displays the Search button, which allows users to perform a search more conveniently:

HTML5 placeholder attribute

HTML5 introduced a new attribute named placeholder. The specs described this attribute as a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value, as shown in the following example:

<input type="search" name="search_form " placeholder="Search here…"> 

You will see that Search here… in the placeholder attribute is shown in the input field, as shown in the following screenshot:

In the past, we relied on JavaScript to achieve a similar effect. Today, with the placeholder attribute, the application gets much simpler.

These new HTML elements make our document markup more descriptive and meaningful. Unfortunately, Internet Explorer 6, 7, and 8 will not recognize them. Thus, the selectors and style rules that address these elements are inapplicable; it is as if these new elements are not included in the Internet Explorer dictionary.

This is where a polyfill named HTML5Shiv comes into play. We will include HTML5Shiv (https://github.com/aFarkas/html5shiv) to make Internet Explorer 8 and its lower versions acknowledge these new elements. Read the following post (http://paulirish.com/2011/the-history-of-the-html5-shiv/) by Paul Irish for the history behind HTML5Shiv; how it was invented and developed.

Furthermore, older Internet Explorer versions won't be able to render the content in the HTML5 placeholder attribute. Fortunately, we can patch mimic the placeholder attribute functionality in the old Internet Explorer with a polyfill (https://github.com/UmbraEngineering/Placeholder). We will use it later on the blog as well.

Responsive.gs is also shipped with two polyfills to enable certain features that are not supported in Internet Explorer 6, 7, and 8. From now on, let's refer to these browser versions as "old Internet Explorer", shall we?

* { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url(/scripts/boxsizing.htc); 
}

<!--[if lt IE 9]>
<script src="respond.js"></script>
<![endif]-->

name implies, the search input type is used to specify a search input. In the desktop browsers, you may not see a significant difference. You may also not immediately see how the search input type give advantages to the website and the users.

The search input type will boost the experience of mobile users. Mobile platforms such as iOS, Android, and the Windows Phone have been equipped with contextual screen keyboards. The keyboard will change according to the input type. You can see in the following screenshot that the keyboard displays the Search button, which allows users to perform a search more conveniently:

HTML5 placeholder attribute

HTML5 introduced a new attribute named placeholder. The specs described this attribute as a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value, as shown in the following example:

<input type="search" name="search_form " placeholder="Search here…"> 

You will see that Search here… in the placeholder attribute is shown in the input field, as shown in the following screenshot:

In the past, we relied on JavaScript to achieve a similar effect. Today, with the placeholder attribute, the application gets much simpler.

These new HTML elements make our document markup more descriptive and meaningful. Unfortunately, Internet Explorer 6, 7, and 8 will not recognize them. Thus, the selectors and style rules that address these elements are inapplicable; it is as if these new elements are not included in the Internet Explorer dictionary.

This is where a polyfill named HTML5Shiv comes into play. We will include HTML5Shiv (https://github.com/aFarkas/html5shiv) to make Internet Explorer 8 and its lower versions acknowledge these new elements. Read the following post (http://paulirish.com/2011/the-history-of-the-html5-shiv/) by Paul Irish for the history behind HTML5Shiv; how it was invented and developed.

Furthermore, older Internet Explorer versions won't be able to render the content in the HTML5 placeholder attribute. Fortunately, we can patch mimic the placeholder attribute functionality in the old Internet Explorer with a polyfill (https://github.com/UmbraEngineering/Placeholder). We will use it later on the blog as well.

Responsive.gs is also shipped with two polyfills to enable certain features that are not supported in Internet Explorer 6, 7, and 8. From now on, let's refer to these browser versions as "old Internet Explorer", shall we?

* { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url(/scripts/boxsizing.htc); 
}

<!--[if lt IE 9]>
<script src="respond.js"></script>
<![endif]-->

These new HTML elements make our document markup more descriptive and meaningful. Unfortunately, Internet Explorer 6, 7, and 8 will not recognize them. Thus, the selectors and style rules that address these elements are inapplicable; it is as if these new elements are not included in the Internet Explorer dictionary.

This is where a polyfill named HTML5Shiv comes into play. We will include HTML5Shiv (https://github.com/aFarkas/html5shiv) to make Internet Explorer 8 and its lower versions acknowledge these new elements. Read the following post (http://paulirish.com/2011/the-history-of-the-html5-shiv/) by Paul Irish for the history behind HTML5Shiv; how it was invented and developed.

Furthermore, older Internet Explorer versions won't be able to render the content in the HTML5 placeholder attribute. Fortunately, we can patch mimic the placeholder attribute functionality in the old Internet Explorer with a polyfill (https://github.com/UmbraEngineering/Placeholder). We will use it later on the blog as well.

Responsive.gs is also shipped with two polyfills to enable certain features that are not supported in Internet Explorer 6, 7, and 8. From now on, let's refer to these browser versions as "old Internet Explorer", shall we?

* { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url(/scripts/boxsizing.htc); 
}

<!--[if lt IE 9]>
<script src="respond.js"></script>
<![endif]-->

style rules that address these elements are inapplicable; it is as if these new elements are not included in the Internet Explorer dictionary.

This is where a polyfill named HTML5Shiv comes into play. We will include HTML5Shiv (https://github.com/aFarkas/html5shiv) to make Internet Explorer 8 and its lower versions acknowledge these new elements. Read the following post (http://paulirish.com/2011/the-history-of-the-html5-shiv/) by Paul Irish for the history behind HTML5Shiv; how it was invented and developed.

Furthermore, older Internet Explorer versions won't be able to render the content in the HTML5 placeholder attribute. Fortunately, we can patch mimic the placeholder attribute functionality in the old Internet Explorer with a polyfill (https://github.com/UmbraEngineering/Placeholder). We will use it later on the blog as well.

Responsive.gs is also shipped with two polyfills to enable certain features that are not supported in Internet Explorer 6, 7, and 8. From now on, let's refer to these browser versions as "old Internet Explorer", shall we?

* { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url(/scripts/boxsizing.htc); 
}

<!--[if lt IE 9]>
<script src="respond.js"></script>
<![endif]-->

shipped with two polyfills to enable certain features that are not supported in Internet Explorer 6, 7, and 8. From now on, let's refer to these browser versions as "old Internet Explorer", shall we?

* { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url(/scripts/boxsizing.htc); 
}

<!--[if lt IE 9]>
<script src="respond.js"></script>
<![endif]-->

We have just created a directory for this project and put a couple of files in the directory. These files include the Responsive.gs style sheets and JavaScript files, images and icons, and a number of polyfills. We have also created an index.html file that will be the home page for the blog. At this point, the project directory should contain files as shown in the following screenshot:

The current files and folders in the working directory

Many people have their own preferences for how to organize their project's directory structure. The one shown in the previous section was just an example, of how I personally manage the directory for this project.

Try going further to make the directory more organized and meet your own preference for organization. A few common ideas are as follows:

Earlier In this module, we discussed polyfill and also mentioned a few polyfill scripts that we are going to implement in the blog.

Q1. When do you think would be an appropriate time to use the polyfill?

for this project and put a couple of files in the directory. These files include the Responsive.gs style sheets and JavaScript files, images and icons, and a number of polyfills. We have also created an index.html file that will be the home page for the blog. At this point, the project directory should contain files as shown in the following screenshot:

The current files and folders in the working directory

Many people have their own preferences for how to organize their project's directory structure. The one shown in the previous section was just an example, of how I personally manage the directory for this project.

Try going further to make the directory more organized and meet your own preference for organization. A few common ideas are as follows:

Earlier In this module, we discussed polyfill and also mentioned a few polyfill scripts that we are going to implement in the blog.

Q1. When do you think would be an appropriate time to use the polyfill?

in the previous section was just an example, of how I personally manage the directory for this project.

Try going further to make the directory more organized and meet your own preference for organization. A few common ideas are as follows:

Earlier In this module, we discussed polyfill and also mentioned a few polyfill scripts that we are going to implement in the blog.

Q1. When do you think would be an appropriate time to use the polyfill?

think would be an appropriate time to use the polyfill?

We have just finished constructing the blog's HTML structure—the header, the navigation, the content, and the footer. Assuming that you have been following our instructions closely, you can access the blog at http://localhost/blog/ or http://{coputer-username}.local/blog/ in OS X.

However, as we haven't applied any styles, you will find that the blog is looking plain and the layout is yet to be organized:

The blog appearance at the current stage

We will style the blog in the next chapter.

In this module, we only build the blog's home page. However, you are free to extend the blog by creating more pages, such as adding an about page, a single post content page, and a page with a contact form. You may reuse the HTML structure that we have built in this chapter. Remove anything within the <main> element and replace it with content as per your requirement.

Let's end this chapter with simple questions regarding HTML5:

Q1. What is the <header> element used for?

Q2. What is the <footer> element used for?

Q3. Is it allowed to use the <header> and <footer> elements multiple times within a single page?

content, and the footer. Assuming that you have been following our instructions closely, you can access the blog at http://localhost/blog/ or http://{coputer-username}.local/blog/ in OS X.

However, as we haven't applied any styles, you will find that the blog is looking plain and the layout is yet to be organized:

The blog appearance at the current stage

We will style the blog in the next chapter.

In this module, we only build the blog's home page. However, you are free to extend the blog by creating more pages, such as adding an about page, a single post content page, and a page with a contact form. You may reuse the HTML structure that we have built in this chapter. Remove anything within the <main> element and replace it with content as per your requirement.

Let's end this chapter with simple questions regarding HTML5:

Q1. What is the <header> element used for?

Q2. What is the <footer> element used for?

Q3. Is it allowed to use the <header> and <footer> elements multiple times within a single page?

contact form. You may reuse the HTML structure that we have built in this chapter. Remove anything within the <main> element and replace it with content as per your requirement.

Let's end this chapter with simple questions regarding HTML5:

Q1. What is the <header> element used for?

Q2. What is the <footer> element used for?

Q3. Is it allowed to use the <header> and <footer> elements multiple times within a single page?

We have just integrated the project directory within Koala. We have also created two new style sheets, namely, main.css and style.css. We have also put together five style sheets, including main.css, in the style.css file using the @import rule. We combined these files and generated a new style sheet named style.min.css, which can be found inline with style.css, as shown in the following screenshot:

Finally, we link the minified style sheet, style.min.css, in index.html.

The style.min.css name is the default name set by Koala; it inserts the suffix, min, to every minified output. Though it is the most popular naming convention for minified web source files, style sheets, and JavaScript, Koala allows you to rename the output to match your personal liking. To do so, click on the edit icon that is highlighted with a circle in the following screenshot:

The following are a few alternative naming ideas you can try:

However, don't forget to change the name specified in the <link> element that refers to the style sheet as well if you decided to rename the output other than style.min.css as we managed in the preceding steps.

Q1. Which of the following rules is not the one to improve website performance?

The style.min.css name is the default name set by Koala; it inserts the suffix, min, to every minified output. Though it is the most popular naming convention for minified web source files, style sheets, and JavaScript, Koala allows you to rename the output to match your personal liking. To do so, click on the edit icon that is highlighted with a circle in the following screenshot:

The following are a few alternative naming ideas you can try:

However, don't forget to change the name specified in the <link> element that refers to the style sheet as well if you decided to rename the output other than style.min.css as we managed in the preceding steps.

Q1. Which of the following rules is not the one to improve website performance?

it is the most popular naming convention for minified web source files, style sheets, and JavaScript, Koala allows you to rename the output to match your personal liking. To do so, click on the edit icon that is highlighted with a circle in the following screenshot:

The following are a few alternative naming ideas you can try:

However, don't forget to change the name specified in the <link> element that refers to the style sheet as well if you decided to rename the output other than style.min.css as we managed in the preceding steps.

Q1. Which of the following rules is not the one to improve website performance?

We have just added style rules that address some elements in the blog, namely, the headings, the link, and the image. At this stage, there isn't a significant difference yet that appears in the blog, except the font family change in the content and the headings, as well as the link color. Have a look at the following screenshot:

Please note that the link color, #2a84bf, is my personal selection. There are a number of considerations when choosing a color, such as the brand, the audience, and the content. The link doesn't have to be #2a84bf. The link color in the Starbucks website (http://www.starbucks.co.id/about-us/pressroom), for example, is green, which refers to its brand identity.

So, don't be afraid to explore and try new colors. The following are a few color ideas:

Next, we will compose the blog header and navigation style rules. The style rules will mostly be applied through the element's classes. So, before proceeding, please refer to Chapter 2, Web Development Tools, to see the class names and ID that we added in the elements.

Please note that the link color, #2a84bf, is my personal selection. There are a number of considerations when choosing a color, such as the brand, the audience, and the content. The link doesn't have to be #2a84bf. The link color in the Starbucks website (http://www.starbucks.co.id/about-us/pressroom), for example, is green, which refers to its brand identity.

So, don't be afraid to explore and try new colors. The following are a few color ideas:

Next, we will compose the blog header and navigation style rules. The style rules will mostly be applied through the element's classes. So, before proceeding, please refer to Chapter 2, Web Development Tools, to see the class names and ID that we added in the elements.

when choosing a color, such as the brand, the audience, and the content. The link doesn't have to be #2a84bf. The link color in the Starbucks website (http://www.starbucks.co.id/about-us/pressroom), for example, is green, which refers to its brand identity.

So, don't be afraid to explore and try new colors. The following are a few color ideas:

Next, we will compose the blog header and navigation style rules. The style rules will mostly be applied through the element's classes. So, before proceeding, please refer to Chapter 2, Web Development Tools, to see the class names and ID that we added in the elements.

We have just decorated the header and the navigation. Corresponding to the mobile-first way of thinking, which we discussed earlier in this section, we first aim the styles to optimize the blog presentation in mobile.

Activate the Chrome mobile emulator, and you will see that the blog is optimized for a smaller screen size already; the logo and the menu, as shown in the following screenshot, are aligned to the center rather than aligned to the left:

The blog header is given a dark color, #333. I truly understand that this color may look boring to some of you. Hence, freely customize the color as well as the style of the logo and the search input field. Some ideas are as follows:

Having managed the blog header as well as the navigation, we proceed to the blog content section. The content section includes the blog post items, and the blog pagination.

decorated the header and the navigation. Corresponding to the mobile-first way of thinking, which we discussed earlier in this section, we first aim the styles to optimize the blog presentation in mobile.

Activate the Chrome mobile emulator, and you will see that the blog is optimized for a smaller screen size already; the logo and the menu, as shown in the following screenshot, are aligned to the center rather than aligned to the left:

The blog header is given a dark color, #333. I truly understand that this color may look boring to some of you. Hence, freely customize the color as well as the style of the logo and the search input field. Some ideas are as follows:

Having managed the blog header as well as the navigation, we proceed to the blog content section. The content section includes the blog post items, and the blog pagination.

ideas are as follows:

Having managed the blog header as well as the navigation, we proceed to the blog content section. The content section includes the blog post items, and the blog pagination.

We just styled the blog content section—including the page navigation (pagination), and the following screenshot shows how the content section looks:

Most of the style rules we applied in the content section are decorative. It's something that you don't have to follow forcefully. Feel free to improve the styles to follow your personal taste.

You can perform the following modifications:

Next, we will style the footer, the last section of the blog.

content section—including the page navigation (pagination), and the following screenshot shows how the content section looks:

Most of the style rules we applied in the content section are decorative. It's something that you don't have to follow forcefully. Feel free to improve the styles to follow your personal taste.

You can perform the following modifications:

Next, we will style the footer, the last section of the blog.

forcefully. Feel free to improve the styles to follow your personal taste.

You can perform the following modifications:

Next, we will style the footer, the last section of the blog.

We have just styled the footer section, and the following screenshot shows how the blog footer will look:

styled the footer section, and the following screenshot shows how the blog footer will look: