You're reading from HTML5 and CSS3: Building Responsive Websites One-stop guide for Responsive Web Design

Product type Course

Published in Oct 2016

Publisher Packt

ISBN-13 9781787124813

Length 709 pages

Edition 1st Edition

Languages

HTML

Tools

Bootstrap

Concepts

Responsive Web Development

Authors (3):

Ben Frain

Benjamin LaGrone

Thoriq Firdaus

View More author details

Table of Contents (6) Chapters

Preface

1. Module 1

2. Module 2 FREE CHAPTER

3. Module 3

B. Bibliography

Index

Chapter 4. Enhancing the Blog Appearance

In the previous chapter, we constructed the blog markup from the header section to the footer section using HTML5 elements. The blog, however, is currently faceless. If you opened the blog in a browser, you will just see it bare; we have not yet written the styles that add up to its appearance.

Throughout the course of this chapter, we will focus on decorating the blog with CSS and JavaScript. We will be using CSS3 to add the blog styles. CSS3 brings a number of new CSS properties, such as border-radius, box-shadow, and box-sizing, that allow us to decorate websites without the need to add images and extra markup.

However, the CSS properties, as mentioned previously, are applicable only within the latest browser versions. Internet Explorer 6 to 8 are not able to recognize those CSS properties, and won't be able to output the result in the browsers. So, as an addition, we will also utilize a number of polyfills to make our blog presentable in the old Internet Explorer.

It's going to be an adventurous chapter. Let's go.

In this chapter, we shall cover the following topics:

Looking into CSS3 properties and CSS libraries, which we are going to use in the blog
Compile and minify style sheets and JavaScripts with Koala
Compose the blog style rules with the mobile-first approach
Optimize the blog for desktop
Patch the blog in Internet Explorer with polyfills

Using CSS3

CSS3 ships with long-awaited properties, border-radius and box-shadow, that simplify old and tedious methods that were used to present rounded corner and drop shadow in HTML. On top of that, it also brings a new type of pseudo-element that enables us to style the placeholder text shown in input fields through the HTML5 placeholder attribute.

Let's take a look at how they work.

Creating rounded corners with CSS3

Back in the 90s, creating a rounded corner was complicated. Adding a pile of HTML markup, slicing out images, and formulating multiple line style of rules is inevitable, as presented in the post by Ben Ogle at http://benogle.com/2009/04/29/css-round-corners.html.

CSS3 makes it much simpler to create rounded corners with the border-radius property, and the following is an example:

div {
  width: 100px; height: 100px;
  border-radius: 30px;
}

The preceding style rule will round the box corner (read the A word on CSS Box Model section in Chapter 1, Responsive Web Design) each for 30px, as shown in the following figure:

Furthermore, we can also round only to specific corners. The following code snippet, for example, will round only the top-right corner:

div {
  width: 100px; height: 100px;
  border-top-right-radius: 30px;
}

Creating drop shadow

Much the same as creating rounded corners, using images was unavoidable to create shadow effects in the website in the past. Now, adding a drop shadow has been made easy with the introduction of the box-shadow property. The box-shadow property consists of five parameters (or values):

The first parameter specifies where the shadow takes place. This parameter is optional. Set the value to inset to let the shadow appear inside the box or leave it empty to display the shadow outside.

The second parameter specifies the shadow vertical and horizontal distance from the box.

The third parameter specifies the shadow blur that fades the shadow; a bigger number will produce a bigger but faded shadow.

The fourth parameter specifies the shadow expansion; this value is slightly contradicted to the shadow blur value. This value will enlarge yet also intensify the shadow depth.

The last parameter specifies the color. The color can be in any web-compatible color format, including Hex, RGB, RGBA, and HSL.

Carrying on the preceding example, we can add up box-shadow, as follows:

div {
  width: 100px;
  height: 100px;
  border-radius: 30px;
  box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.5);
}

The preceding code will output the shadow, as shown in the following figure:

Add inset at the beginning if you want to show the shadow inside the box, as follows:

div {
  width: 100px;
  height: 100px;
  border-radius: 30px;
  box-shadow: inset 5px 5px 10px 0 rgba(0,0,0,0.5);
}

Tip

The CSS3 box-shadow property can be applied in many creative ways, and the following is an example by Paul Underwood, for your inspiration:

http://www.paulund.co.uk/creating-different-css3-box-shadows-effects

CSS3 browser supports and the use of vendor prefix

Both the border-radius and box-shadow properties have been well-implemented in many browsers. Technically, if we would cater only to the latest browser versions, we do not need to include the so-called vendor prefix.

Yet, if we intend to enable these two properties, border-radius and box-shadow, back in the earliest browser versions, where they were still marked as experimental by the browser vendors such as Safari 3, Chrome 4, and Firefox 3, adding the vendor prefix is required. Each browser has its prefix as follows:

-webkit-: This is the Webkit-based browsers prefix, which currently includes Safari, Chrome, and Opera.
-moz-: This is the Mozilla Firefox prefix.
-ms-: This is the Internet Explorer prefix. But Internet Explorer has been supporting border-radius and box-shadow since Internet Explorer 9 without the need to add this prefix.

Let's carry on our previous examples (again). With the addition of the vendor prefix to cater to the earliest versions of Chrome, Safari, and Firefox, the code would be as follows:

div {
  width: 100px;
  height: 100px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  -webkit-box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.5);
  -moz-box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.5);
  box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.5);
}

The code may turn out to be a bit longer; still it is preferable over having to cope with complicated markups and multiple style rules.

Note

Chrome and its new browser engine, Blink

Chrome decided to fork Webkit and built its own browser engine on top of it, named Blink (http://www.chromium.org/blink). Opera, which previously discarded its initial engine (Presto) for Webkit, follows along the Chrome movement. Blink eliminates the use of the vendor prefix, so we would not find -blink- prefix or such like. In Chrome's latest versions, instead of using the vendor prefix, Chrome disables experimental features by default. Yet, we can enable it through the options in the chrome://flags page.

Customizing to placeholder text styles

With the addition of HTML5, the placeholder attribute brings the question of how to customize the placeholder text. By default, browsers display the placeholder text with a light gray color. How do we change, for example, the color or the font size?

At the time of writing this, each browser has its own way in this regard. WebKit-based browsers, such as Safari, Chrome, and Opera, use ::-webkit-input-placeholder. Internet Explorer 10 uses :-ms-input-placeholder. Firefox 4 to 18, on the other hand, use pseudo-class, :-moz-placeholder, but it has then been replaced with the pseudo-element ::-moz-placeholder (notice the double colons) since Firefox 19 to keep up with the standard.

These selectors cannot be used in tandem within a single style rule. So, the following code snippet will not work:

input::-webkit-input-placeholder,
input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder { 
  color: #fbb034;
}

They have to be declared in a single style rule declaration, as follows:

input::-webkit-input-placeholder {
  color: #fbb034; 
}
input:-moz-placeholder {
  color: #fbb034;
}
input::-moz-placeholder {
  color: #fbb034;
}
input:-ms-input-placeholder { 
  color: #fbb034;
}

This is definitely inefficient; we added extra lines only to achieve the same output. There isn't another viable option at the moment. The standard for styling the placeholder is still in discussion (see the CSSWG discussion at http://wiki.csswg.org/ideas/placeholder-styling and http://wiki.csswg.org/spec/css4-ui#more-selectors for more details).

Using CSS libraries

The underlying thing that distinguishes between a CSS library and a CSS framework is the problem it addresses. For example, a CSS framework, such as Blueprint (http://www.blueprintcss.org/), is designed as a foundation or starting point of a new website. It generally ships with various pieces of libraries to encompass many circumstances. A CSS library, on the other hand, addresses a very specific thing. Generally, a CSS library is also not tied down to a particular framework. Animate.css (http://daneden.github.io/animate.css/) and Hover.css (http://ianlunn.github.io/Hover/) are two perfect examples in this regard. Both of them are CSS libraries. They can be used along with any framework.

Herein, we will integrate two CSS libraries into the blog, namely Normalize (http://necolas.github.io/normalize.css/) and Formalize (http://formalize.me/). These CSS libraries will standardize basic element styles across different browsers and minimize styling errors that may unexpectedly occur.

Working with Koala

Once we have explored all the things that we are going to include in this project, let's set up the tool to put them together. In Chapter 1, Responsive Web Design, we have installed Koala. Koala is a free and open source development tool that ships with many features. In this first project, we will use Koala to compile style sheets and JavaScripts into a single file, as well as minify the codes to result in a smaller file size.

There will be about five style sheets that we are going to include in the blog. If we load all these style sheets separately, the browsers will have to pull off five HTTP requests, as shown in the following screenshot:

As shown in the preceding screenshot, the browser performs five HTTP requests to load all the style sheets, which have a size of 24.4 KB in total and require around 228 ms in total to load.

Combining these style sheets into a single file and squishing the codes therein will speed up the page-load performance. The style sheet can also become significantly smaller, which eventually will also save bandwidth consumption.

As shown in the following screenshot, the browser only performs one HTTP request; the style sheet size is reduced to 13.5KB, and takes only 111 ms to load. The page loads about 50 percent faster in comparison with the preceding example:

Tip

Best practices to speed up website performance:

Head over to YSlow! performance rules (https://developer.yahoo.com/performance/rules.html) or Google PageSpeed Insight rules (https://developers.google.com/speed/docs/insights/rules) for further steps to make a website load faster, aside from combining style sheets and JavaScripts.

Time for action – integrating project directory into Koala and combining the style sheets

In this section, we will integrate the configured Koala to compile and output the style sheets, by performing the following steps:

Create a new style sheet in the css folder named main.css. This is the prime style sheet, where we will compose our own style rules for the blog.
Create a new style sheet named style.css.
Download normalize.css (http://necolas.github.io/normalize.css/), and put it in the css folder of the project directory.
Download formalize.css (http://formalize.me/), and also put it in the css folder of the project directory.
Open style.css in Sublime Text.

Import the supporting style sheets using the @import rule in the following order, as follows:

@import url("css/normalize.css");
@import url("css/formalize.css");
@import url("css/responsive.gs.12col.css");
@import url("css/main.css");
@import url("css/responsive.css");

Launch Koala. Then, drag-and-drop the project directory into the Koala sidebar. Koala will show and list recognizable files, as shown in the following screenshot:
Select style.css and tick Auto Compile to compile style.css automatically whenever Koala detects a change in it. Have a look at the following screenshot:
Select the Combine Import option to let Koala combine the content within the style sheets (the content that was included in style.css) with the @import rule. Take a look at the following screenshot:
Set Output Style: to compress. Take a look at the following screenshot:
This will compress the style rules into a single line, which eventually will make the style.css file size smaller.
Click on the Compile button. Take a look at the following screenshot:
This will compile style.css and generate a new file named style.min.css as the output.
Open index.html and
link style.min.css. using the following code:
```
<link href="style.min.css" rel="stylesheet">
```

What just happened?

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.

Have a go hero – renaming the output

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:

style-min.css (with dash)
styles.min.css (with the s)
blog.css (refers to the website name)

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.

Pop quiz – website performance rules

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

Minifying resources such as CSS and JavaScript.
Compressing image files.
Leveraging browser cache.
Using CSS shorthand properties.
Using CDN to deliver web resources.

What just happened?

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

Have a go hero – renaming the output

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

style-min.css (with dash)
styles.min.css (with the s)
blog.css (refers to the website name)

Pop quiz – website performance rules

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

Minifying resources such as CSS and JavaScript.
Compressing image files.
Leveraging browser cache.
Using CSS shorthand properties.
Using CDN to deliver web resources.

Have a go hero – renaming the output

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:

style-min.css (with dash)
styles.min.css (with the s)
blog.css (refers to the website name)

Pop quiz – website performance rules

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

Minifying resources such as CSS and JavaScript.
Compressing image files.
Leveraging browser cache.
Using CSS shorthand properties.
Using CDN to deliver web resources.

Pop quiz – website performance rules

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

Minifying resources such as CSS and JavaScript.

Compressing image files.

Leveraging browser cache.

Using CSS shorthand properties.

Using CDN to deliver web resources.

Thinking mobile first

Before we get our hands on the code, let's talk about the mobile-first approach that will drive our decision on writing part of the blog style rules.

Mobile-first is one of the buzzwords in the web design community. Mobile-first is a new way of thinking on building websites of today, which also guides the pattern to build websites that are optimized for mobile use. As mentioned in Chapter 1, Responsive Web Design, mobile users are growing and desktop is no longer the main platform where users can access the web.

The mobile-first concept drives us to think and prioritize mobile use on building the website blocks, including how we compose style rules and media queries. In addition, adopting mobile-first thinking, as Brad Frost demonstrated in his blog post (http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/), allows producing leaner codes than the other way around (desktop to mobile). Herein, we will first optimize and address the blog for mobile and then enhance to the desktop version afterwards.

Mobile-first is beyond the capacity of this module, we'll make Mobile-first web applications later in Module 3, HTML5 and CSS3 Responsive Web Design Cookbook. The following are some of my recommendation sources to dig into this topic further:

Mobile First by Luke Wroblewski (http://www.abookapart.com/products/mobile-first)
Mobile First Responsive Web Design by Brad Frost (http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/)
Building a Better Responsive Website by Jeremy Girard (http://www.smashingmagazine.com/2013/03/05/building-a-better-responsive-website/)

Composing the blog styles

In the preceding sections, we added third-party styles that lay down the blog appearance fundamentals. Starting in this section, we are going to compose our own style rules for the blog. We will begin from the header then go down to the footer.

Time for action – composing the base style rules

In this section, we are going to write blog base styles. These style rules encompass the content font family, the font size, and a number of elements therein in general.

First of all, it is my personal opinion that using the default system font such as Arial and Times is so boring.

Note

Due to the browser support and font license restriction, we were only able to use fonts that were installed in the user's operating system. Consequently, for more than a decade, we're stuck to a very limited choice of fonts we can use on the Web, and many websites use the same set of fonts, such as Arial, Times, and even Comic Sans. So, yes, these are boring fonts.

Today, with the advancement in @font-face specification, as well as the license of font usage on the Web, we are now able to use fonts on the website outside the font selection of the user's computer. There are also now larger collections of fonts that we can embed on the Web for free, such as the ones that we can find in Google Font (http://www.google.com/fonts), Open Font Library (http://openfontlibrary.org/), Font Squirrel (http://www.fontsquirrel.com), Fonts for Web (http://fontsforweb.com/), and Adobe Edge Web Font (https://edgewebfonts.adobe.com/).

I really encourage web designers to explore more the possibility of, and build, a more enriched website using the custom fonts on their websites.

Perform the following steps to compose the base style rules:

To make our blog look more refreshing, we will use a couple of custom fonts from the Google Font library. Google Font has made it easy for us to use fonts on the Web. Google has taken care of the hassle of writing the syntax, as well as ensuring that the font formats are compatible in all major browsers.
Note
Speaking of which, refer to the Paul Irish post, Bulletproof @font-face syntax (http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/), for further help on composing CSS3 @font-face syntax that works across all browsers.
In addition, we won't be befuddled with the font license, as Google Font is completely free. All we have to do is add a special style sheet as explained in this page https://developers.google.com/fonts/docs/getting_started#Quick_Start. In our case, add the following link before the prime style sheet link:
```
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic|Varela+Round' rel='stylesheet'>
```
Upon doing so, we will be able to use the Droid Serif font family, along with Varela Round; see these font specimens and characters in the following web pages:
- Droid Serif (http://www.google.com/fonts/specimen/Droid+Serif)
- Varela Round (http://www.google.com/fonts/specimen/Varela+Round)

Set the entire element box sizing to border-box. Add the following line (as well as the other lines in the next steps) in main.css:

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

We are going to set the blog main font, that is, the font that applies to the entire content of the blog. Herein, we will use Droid Serif of Google Font. Add the following style rules after the list of @import style sheet:
```
body {
  font-family: "Droid Serif", Georgia, serif;
  font-size: 16px;
}
```
We are going to apply a different font family for the headings (h1, h2, h3, h4, h5, and h6) in order to set it apart from the body content. Herein, we will apply the second custom font family that we brought from the Google Font collection, Varela Round.
Add the following line to apply Varela Round to the headings:
```
h1, h2, h3, h4, h5, h6 {
    font-family: "Varela Round", Arial, sans-serif;
    font-weight: 400;
}
```
Note
The browsers, by default, set the headings' weight to bold or 600. However, Varela Round only ships with normal font weight, which equates to 400. So, as shown in the preceding code snippet, we have also set the font-weight to 400 to prevent the so-called faux-bold.
Refer to the A List Apart article, Say No to Faux Bold (http://alistapart.com/article/say-no-to-faux-bold) for further information about faux-bold.
In this step, we will also customize the default anchor tag or link styles. It's my personal preference to remove the underline of the default link style.
Note
Even Google removes the underline of its search result (http://www.theverge.com/2014/3/13/5503894/google-removes-underlined-links-site-redesign).
Furthermore, we also change the link color to #3498db. It's blue, but subtler than the blue color applied as the default link style, as shown in the following screenshot:
Add the following lines to change the default link color:
```
a {
    color: #3498db;
    text-decoration: none;
}
```
We will set the color of the link to hover state, as well. This color appears when the mouse cursor is over the link. Herein, we set the link hover color to #2a84bf, the darker version of the color we set in step 4. Have a look at the following screenshot:
Add the following line to set the color of the link when it is in hover state, as follows:
```
a:hover {
    color: #2a84bf;
}
```
Make the
image fluid with the following style rules, as follows:
```
img {
  max-width: 100%;
  height: auto;
}
```

In addition, these style rules will prevent the image from exceeding its container when the actual image width is larger than the container.

Note

Refer to A List Apart article Fluid Images (http://alistapart.com/article/fluid-images) for further detail on fluid images.

What just happened?

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:

Have a go hero – customizing the link color

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:

Have a go hero – customizing the link color

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.

What just happened?

Have a go hero – customizing the link color

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

Have a go hero – customizing the link color

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:

Time for action – enhancing the header and the navigation appearance with CSS

The steps are as follows:

Open main.css.
Add some whitespace
surrounding the header with padding, and also set the header color to #333, as follows:
```
.blog-header {
padding: 30px 15px;
background-color: #333;
}
```
To make the logo look prominent, we will set it with Varela Round font, which is the same font family we used for the headings. We also make it bigger and transform the letters all to uppercase, as follows:
```
 .blog-name {
  font-family: "Varela Round", Arial, sans-serif;
  font-weight: 400;
  font-size: 42px;
  text-align: center;
  text-transform: uppercase;
}
```
The logo
link color currently is #2a84bf, which is the common color we set for links <a>. This color does not suit well with the background color. Let's change the color to white instead, as follows:
```
.blog-name a {
    color: #fff;
}
```
Set the
search input styles, as follows:
```
.search-form input {
  height: 36px;
  background-color: #ccc;
  color: #555;
  border: 0;
  padding: 0 10px;
  border-radius: 30px;
}
```
These style rules set the input color, border color, and the background colors. It turns the input into something as shown in the following screenshot:
As you can see in the preceding screenshot, the placeholder text is barely readable as the color blends with the input background color. So, let's make the text color a bit darker, as follows:
```
.search-form input::-webkit-input-placeholder {
  color: #555;
}
.search-form input:-moz-placeholder {
  color: #555;  
}
.search-form input::-moz-placeholder {
  color: #555;  
}
.search-form input:-ms-input-placeholder {  
  color: #555;
}
```
If you use OS X or Ubuntu, you will see the glowing color that highlights the input when it is currently targeted, as shown in the following screenshot:
In OS X, the glowing color is blue. In Ubuntu, it will be orange.
I would
like to remove this glowing effect. The glowing effect is technically shown through box-shadow. So, to remove this effect, we simply set the input box-shadow to none, as follows:
```
.search-form input:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
```
It's worth noting that the glowing effect is part of the User Experience (UX) design, telling the users that they are currently within the input field. This UX design is particularly helpful if the users were only able to navigate the website with a keyboard.
So, we will have to create an effect that brings a similar UX as a replacement. Herein, we will replace the glowing effect that we removed by lightening the input background color. The following is the complete code of this step:
```
.search-form input:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background-color: #bbb;
}
```
The input background color becomes lighter when it is in focus, as shown in the following screenshot:
We will
write the style for the navigation. First, align the menu to the center, and add some whitespace at the top and the bottom of the navigation with the margin. Have a look at the following code:
```
.blog-menu {
  margin: 30px 0;
  text-align: center;
}
```
Remove the left-hand side padding of <ul>, as follows:
```
.blog-menu ul {
  padding-left: 0;
}
```
Add some whitespace between the menus with a margin, and remove the list bullet, as follows:
```
.blog-menu li {
  margin: 15px;
  list-style-type: none;
}
```

Customize the menu color and font, as follows:

.blog-menu a {
  color: #7f8c8d;
  font-size: 18px;
   text-transform: uppercase;
   font-family: "Varela Round", Arial, sans-serif;
}
.blog-menu a:hover {
    color: #3498db;
}

What just happened?

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:

Have a go hero – customizing the header

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:

Use CSS3 gradients or image for the header background
Replace the logo with an image through the CSS image replacement method
Reduce the search input border radius, change the background color, and adjust the placeholder text color

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.

What just happened?

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.

Have a go hero – customizing the header

Use CSS3 gradients or image for the header background
Replace the logo with an image through the CSS image replacement method
Reduce the search input border radius, change the background color, and adjust the placeholder text color

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.

Have a go hero – customizing the header

ideas are as follows:

Use CSS3 gradients or image for the header background
Replace the logo with an image through the CSS image replacement method
Reduce the search input border radius, change the background color, and adjust the placeholder text color

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.

Time for action – enhancing the content section appearance with CSS

Perform the following steps to style the blog content:

Add whitespace on all sides of the content section with padding and margin, as follows
```
.blog-content {
  padding: 15px;
  margin-bottom: 30px;
} 
```

Separate each blog post with some whitespace and borderline, as follows:

.post {
  margin-bottom: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid #ddd;
}

Align the title to the center, adjust the title font size a little, and change the color with the following style rules:

.post-title {
  font-size: 36px;
  text-align: center;
  margin-top: 0;
}
.post-title a {
  color: #333;
}
.post-title a:hover {
  color: #3498db;
}

Below the title, we have post-meta, which consists of the post author name and the post
publishing date. Similar to the title, we also adjust the font size and the whitespace, and change the font color, as follows:
```
.post-meta {
  font-size: 18px;
  margin: 20px 0 0;
  text-align: center;
  color: #999;
}
.post-meta ul {
  list-style-type: none;
  padding-left: 0;
}
.post-meta li {
  margin-bottom: 10px;
}
```
The post thumbnail, as you can see in the following screenshot, looks small and squished due to the margin on all its sides:
Let's remove
these margins, as follows:
```
.post-thumbnail {
  margin: 0;
}
```
Some of the images, as shown in the following screenshot, have a caption:
Let's style it to make it look distinctive from the rest of the content and also show that it is an image caption. Add the following lines of code to style the caption:
```
.post-thumbnail figcaption {
  color: #bdc3c7;
  margin-top: 15px;
  font-size: 16px;
  font-style: italic;
}
```

Adjust the post excerpt font size, color, and line height, as follows:

.post-excerpt {
  color: #555;
  font-size: 18px;
  line-height: 30px;
}

Starting in this step, we will write the style of the blog pagination. First, let's make some adjustments to the font size, the font family, the whitespace, the position, and the alignment, as shown in the following code:

.blog-pagination {
  text-align: center;
  font-size: 16px;
  position: relative;
  margin: 60px 0;
}
.blog-pagination ul {
  padding-left: 0;
}
.blog-pagination li,
.blog-pagination a {
  display: block;
  width: 100%;
}
.blog-pagination li {
  font-family: "Varela Round", Arial, sans-serif;
  color: #bdc3c7;
  text-transform: uppercase;
  margin-bottom: 10px;
}

Decorate the pagination link with rounded corner borders, as follows:

.blog-pagination a {
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  color: #7f8c8d;
  padding: 15px 30px;
  border: 1px solid #bdc3c7;
}

Specify the link decoration when the mouse cursor hovers over the links, as follows:

.blog-pagination a:hover {
  color: #fff;
  background-color: #7f8c8d;
  border: 1px solid #7f8c8d;
}

Finally, place the page number indicator at the top of the pagination links with the following style rules:
```
.blog-pagination .pageof {
  position: absolute;
  top: -30px;
}
```

What just happened?

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

Have a go hero – improving the content section

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:

Customize the post title font family and the colors
Apply border colors or rounded corners for the post image
Change the pagination border colors, or make the background more colorful

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

What just happened?

We just styled the blog

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

Have a go hero – improving the content section

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:

Customize the post title font family and the colors
Apply border colors or rounded corners for the post image
Change the pagination border colors, or make the background more colorful

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

Have a go hero – improving the content section

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:

Customize the post title font family and the colors
Apply border colors or rounded corners for the post image
Change the pagination border colors, or make the background more colorful

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

Time for action – enhancing the footer section appearance with CSS

Perform the following steps to enhance the footer style:

Adjust the footer font, color, and the margin, as follows:

.blog-footer {
  background-color: #ecf0f1;
  padding: 60px 0;
  font-family: "Varela Round", Arial, sans-serif;
  margin-top: 60px;
}
.blog-footer,
.blog-footer a {
  color: #7f8c8d;
}

The footer contains social media links. Let's adjust the styles that encompass the margin, padding, alignment, colors, and whitespace, as follows:

.social-media {
  margin: 0 0 30px;
}
.social-media ul {
  margin: 0;
  padding-left: 0;
}
.social-media li {
  margin: 0 8px 10px;
  list-style: none;
}
.social-media li,
.social-media a {
  font-size: 18px;
}
.social-media a:hover {
  color: #333;
}

Set the
margin-top out of the copyright container.
```
.copyright {
  margin-top: 0;
}
```

Align the footer content to the center, as follows:

.social-media,
.copyright {
  text-align: center;
}

What just happened?

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

What just happened?

We have just

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

Optimize the blog for desktop

The blog is currently optimized for mobile, or narrow viewport size. If you view it in a larger viewport size, you will find that some elements are misplaced or are not properly aligned. The blog logo and the navigation, for example, are currently aligned to the center, as you can see in the following screenshot:

As per our blueprint that we have shown you in Chapter 3, Constructing a Simple Responsive Blog with Responsive.gs, the logo should align to the left-hand side and each menu link should be displayed inline. In the upcoming steps, we will fix these through Media Queries; we will optimize the blog for desktop view.

Time for action – composing style rules for desktop

Perform the following steps to compose style rules for desktop:

Open responsive.css in Sublime Text.

Add the following media query:

@media screen and (min-width: 640px) {
  // add style rules here
}

We will add all the style rules in the following steps within this media query. This media query specification will apply the style rules within the viewport width starting from 640 px and up.

Align the blog logo to the left-hand side, as follows:

.blog-name {
  text-align: left;
  margin-bottom: 0;
}

Display the list item of the navigation menu, post meta, and social media inline, as follows:
```
.blog-menu li,
.post-meta li,
.social-media li {
      display: inline;
}
```
Increase the post title size, as follows:
```
.post-title {
  font-size: 48px;
}
```

Also, display the blog pagination links inline, as follows:

.blog-pagination li,
.blog-pagination a {
  display: inline;
}

Put the pagination page indicator in its initial position—inline with the blog pagination link, as follows:
```
.blog-pagination .pageof {
  position: relative;
  top: 0;
  padding: 0 20px;
}
```
Align the social media links in the footer to the left and the copyright notice to the right, as follows:
```
.social-media {
  text-align: left;
}
.copyright {
  text-align: right;
}
```

What just happened?

We have just added style rules that address the blog for the desktop view. If you are now viewing the blog in the viewport width that is larger than 640 px, you should find that the elements in the blog such as the logo and the navigation menu are in their common position, as shown in the following screenshot:

What just happened?

such as the logo and the navigation menu are in their common position, as shown in the following screenshot:

Making Internet Explorer more capable with polyfills

With the use of glorious CSS3 and HTML5 features, comes a consequence: the layout failed and is broken in the old Internet Explorer, as you can see in the following screenshot:

If you are okay with it, you can skip this section and head over to the next project immediately. However, if you feel adventurous, let's proceed to this section and fix those bugs.

Time for action – patch Internet Explorer with polyfills

Perform the steps to patch Internet Explorer with polyfills:

We have a number of polyfills in the scripts folder namely html5shiv.js, respond.js, and placeholder.js. Let's combine these scripts into a single file.
First, create a new JavaScript file named polyfills.js that will hold the content of those polyfill scripts.
Open polyfills.js in Sublime Text.
Add the following lines to import the polyfill scripts:
```
// @koala-prepend "html5shiv.js"
// @koala-prepend "respond.js"
// @koala-prepend "placeholder.js"
```
Note
The @koala-prepend directive is the Koala proprietary directive to import JavaScript files. Read more about it in the Koala documentation page at https://github.com/oklai/koala/wiki/JS-CSS-minify-and-combine.
In Koala, select polyfills.js, and click on the Compile button, as shown in the following screenshot:
By this step, Koala will have generated the minified file named polyfills.min.js.
Open index.html, and link polyfills.js before </head>, as follows:
```

```
Note
Since this script is only needed in Internet Explorer 8 and below, we encapsulate them with the Internet Explorer Conditional Comment, <!--[if lt IE 9]>, as you can see in the preceding code snippet.
Refer to the QuirksMode article for further information about Internet Explorer Conditional Comments at http://www.quirksmode.org/css/condcom.html.

What just happened?

We just applied polyfills in the blog to patch Internet Explorer rendering issues with HTML5 and Media Queries. These polyfills work out-of-the-box. Refresh Internet Explorer, and voila! Have a look at the following screenshot:

The style rules are applied, the layout is in position, and the placeholder text is there.

Have a go hero – polish the blog for Internet Explorer

We will end this project. But, as you can see from the preceding screenshot, there are still many things to address to make the blog appearance in the old Internet Explorer as good as in the latest browsers. For example:

Referring to the preceding screenshot, the placeholder text is currently aligned to the top. You can fix it and make it align vertically to the center.
You can also apply a polyfill named CSS3Pie (http://css3pie.com/) that brings the CSS3 border radius in Internet Explorer to make the search input field rounded as it is in the latest browser versions.

What just happened?

We just applied polyfills in the blog to patch Internet Explorer rendering issues with HTML5 and Media

Queries. These polyfills work out-of-the-box. Refresh Internet Explorer, and voila! Have a look at the following screenshot:

The style rules are applied, the layout is in position, and the placeholder text is there.

Have a go hero – polish the blog for Internet Explorer

Referring to the preceding screenshot, the placeholder text is currently aligned to the top. You can fix it and make it align vertically to the center.
You can also apply a polyfill named CSS3Pie (http://css3pie.com/) that brings the CSS3 border radius in Internet Explorer to make the search input field rounded as it is in the latest browser versions.

Have a go hero – polish the blog for Internet Explorer

We will end this project. But, as you can see from the preceding screenshot, there are still many things to address

to make the blog appearance in the old Internet Explorer as good as in the latest browsers. For example:

Referring to the preceding screenshot, the placeholder text is currently aligned to the top. You can fix it and make it align vertically to the center.
You can also apply a polyfill named CSS3Pie (http://css3pie.com/) that brings the CSS3 border radius in Internet Explorer to make the search input field rounded as it is in the latest browser versions.

Summary

We completed the first project; we have built a simple, responsive blog using Responsive.gs. The end result of the blog may not be that enticing for you. It is also far from polished, particularly in the old Internet Explorer; as mentioned, there are still many things to address in that regard. Still, I hope you can take something useful from the process, the techniques, and the codes therein.

To summarize, here is what we have done in this chapter, enhanced and polished the blog with CSS3, used Koala to combine and minimize style sheets and JavaScript files, and applied polyfills to patch Internet Explorer issues with HTML5 and CSS3.

In the next chapter, we will start the second project. We are going to explore another framework to build a more extensive and responsive website.

The rest of the chapter is locked

You're reading from HTML5 and CSS3: Building Responsive Websites One-stop guide for Responsive Web Design

Table of Contents (6) Chapters

Chapter 4. Enhancing the Blog Appearance

Using CSS3

Creating rounded corners with CSS3

Creating drop shadow

Tip

CSS3 browser supports and the use of vendor prefix

Note

Customizing to placeholder text styles

Using CSS libraries

Working with Koala

Tip

Time for action – integrating project directory into Koala and combining the style sheets

What just happened?

Have a go hero – renaming the output

Pop quiz – website performance rules

Have a go hero – renaming the output

Pop quiz – website performance rules

Pop quiz – website performance rules

Thinking mobile first

Composing the blog styles

Time for action – composing the base style rules

Note

Note

Note

Note

Note

What just happened?

Have a go hero – customizing the link color

Have a go hero – customizing the link color

Time for action – enhancing the header and the navigation appearance with CSS

What just happened?

Have a go hero – customizing the header

Have a go hero – customizing the header

Time for action – enhancing the content section appearance with CSS

What just happened?

Have a go hero – improving the content section

Have a go hero – improving the content section

Time for action – enhancing the footer section appearance with CSS

What just happened?

Optimize the blog for desktop

Time for action – composing style rules for desktop

What just happened?

Making Internet Explorer more capable with polyfills

Time for action – patch Internet Explorer with polyfills

Note

Note

What just happened?

Have a go hero – polish the blog for Internet Explorer

Have a go hero – polish the blog for Internet Explorer

Summary

Unlock this book and the full library FREE for 7 days

Authors (3)

Personalised recommendations for you