3. Constructing a Simple Responsive Blog with Responsive.gs | Responsive Web Design by Example : Beginner's Guide - Second Edition

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Responsive Web Design by Example : Beginner's Guide - Second Edition - Second Edition

By : Thoriq Firdaus

4.7 (3)

Responsive Web Design by Example : Beginner's Guide - Second Edition

4.7 (3)

By: Thoriq Firdaus

Overview of this book

This is the ideal reference for both new and existing web developers who want to be able to augment their skills and showcase their content in a truly professional manner.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Sections

Time for action – heading

Conventions

Reader feedback

Customer support

Free Chapter

1. Responsive Web Design

1. Responsive Web Design

Responsive web design in a nutshell

A look into responsive frameworks

Responsive web design inspiration sources

Summary

2. Web Development Tools

2. Web Development Tools

Choosing a code editor

Time for action – installing Sublime Text Package Control

Time for action – installing XAMPP

Managing project dependency with Bower

Time for action – installing Node.js

Time for action – installing Bower

Summary

3. Constructing a Simple Responsive Blog with Responsive.gs

3. Constructing a Simple Responsive Blog with Responsive.gs

Responsive.gs components

Using HTML5 elements for semantic markups

Examining the blog's wireframe

Organizing project directories and files

Time for action – creating and organizing project directories and assets

The blog HTML structures

Time for action – constructing the blog

Summary

4. Enhancing the Blog Appearance

4. Enhancing the Blog Appearance

Using CSS3

Working with Koala

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

Thinking mobile first

Composing the blog styles

Time for action – composing the base style rules

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

Time for action – enhancing the content section appearance with CSS

Time for action – enhancing the footer section appearance with CSS

Optimize the blog for desktop

Time for action – composing style rules for desktop

Making Internet Explorer more capable with polyfills

Time for action – patch Internet Explorer with polyfills

Summary

5. Developing a Portfolio Website with Bootstrap

5. Developing a Portfolio Website with Bootstrap

The Bootstrap components

Digging into Bootstrap

Using font icons

Examining the portfolio website layout

Project directories, assets, and dependencies

Time for action – organizing project directories, assets, and installing project dependencies with Bower

The portfolio website HTML structure

Time for action – building the website HTML structure

Summary

6. Polishing the Responsive Portfolio Website with LESS

6. Polishing the Responsive Portfolio Website with LESS

Basic LESS syntax

External style sheet references

Time for action – creating style sheets and organizing external style sheet references

Working with Koala

Time for action – compiling LESS into CSS using Koala

Polishing the portfolio website with LESS

Time for action – composing the website styles with LESS syntax

Improve and make the website functioning with JavaScript

Time for action – compiling JavaScript with Koala

Summary

7. A Responsive Website for Business with Foundation

7. A Responsive Website for Business with Foundation

Examining the website layout

A look into Foundation

Additional required assets

The project directories, assets, and dependencies

Time for action – organizing the project directories, assets, and dependencies

Time for action – building the website's HTML structure

Summary

8. Extending Foundation

8. Extending Foundation

Syntactically Awesome Style Sheets

Project recap

Style sheet organizations

Time for action – organizing and compiling style sheets

The website's look and feel

Time for action – build on the website

Fine-tuning the website

Time for action – compiling JavaScript and styling the website with media queries

Summary

A. Pop Quiz Answers

Chapter 1, Responsive Web Design

Chapter 2, Web Development Tools

Chapter 3, Constructing a Simple Respons3ive Blog with Responsive.gs

Chapter 4, Enhancing the Blog Appearance

Chapter 5, Developing a Portfolio Website with Bootstrap

Chapter 6, Polishing the Responsive Portfolio Website with LESS

Chapter 8, Extend Foundation

Index

Index

Responsive.gs components

As we mentioned in Chapter 1, Responsive Web Design, Responsive.gs is a lightweight CSS framework. It comes only with the bare minimum requirements for building responsive websites. In this section, we are going to see what is included in Responsive.gs.

The classes

Responsive.gs is shipped with a series of reusable classes to form the responsive grid that makes it easier and faster for web designers to build web page layout. These classes contain preset style rules that have been carefully calibrated and tested. So we can simply drop in these classes within the HTML element to construct the responsive grid. The following is a list of the classes in Responsive.gs:

Class name	Usage
`container`	We use this class to set the web page container and align it to the center of the browser window. This class, however, does not give the element width. Responsive.gs gives us the flexibility to set the width as per our requirement.
`row`, `group`	We use these two classes to...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Responsive Web Design by Example : Beginner's Guide - Second Edition

Search

Your notes and bookmarks