Book Image

Responsive Web Design by Example : Beginner's Guide

By : Thoriq Firdaus
Book Image

Responsive Web Design by Example : Beginner's Guide

By: Thoriq Firdaus

Overview of this book

Table of Contents (16 chapters)
Responsive Web Design by Example Beginner's Guide Second Edition
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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:

  1. 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.

  2. Create a new style sheet named style.css.

  3. Download normalize.css (http://necolas.github.io/normalize.css/), and put it in the css folder of the project directory.

  4. Download formalize.css (http://formalize.me/), and also put it in the css folder of the project directory.

  5. Open style.css in Sublime Text.

  6. 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");
  7. Launch Koala. Then, drag-and-drop the project directory into the Koala...