Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Responsive Web Design by Example : Beginner's Guide - Second Edition

You're reading from   Responsive Web Design by Example : Beginner's Guide - Second Edition Build powerful and engaging responsive websites with ease

Arrow left icon
Product type Paperback
Published in Nov 2014
Publisher
ISBN-13 9781783553259
Length 258 pages
Edition 2nd Edition
Languages
Arrow right icon
Author (1):
Arrow left icon
Thoriq Firdaus Thoriq Firdaus
Author Profile Icon Thoriq Firdaus
Thoriq Firdaus
Arrow right icon
View More author details
Toc

Table of Contents (11) Chapters Close

Preface 1. Responsive Web Design FREE CHAPTER 2. Web Development Tools 3. Constructing a Simple Responsive Blog with Responsive.gs 4. Enhancing the Blog Appearance 5. Developing a Portfolio Website with Bootstrap 6. Polishing the Responsive Portfolio Website with LESS 7. A Responsive Website for Business with Foundation 8. Extending Foundation A. Pop Quiz Answers Index

Time for action – organizing and compiling style sheets


Perform the following steps right to the end to properly organize the style sheets and compile them into CSS.

  1. We need to install Bourbon. Launch a terminal or the command prompt, and type the following command:

    bower install bourbon --save
    

    This command installs the Bourbon package through the Bower registry and registers it within the bower.json file of the project.

    Tip

    I've discussed the bower.json file exclusively in this post (https://webdesign.tutsplus.com/tutorials/quick-tip-what-to-do-when-you-encounter-a-bower-file--cms-21162), check it out!

  2. Create new style sheets named main.scss, responsive.scss, and styles.scss in the scss folder.

  3. The _main.scss style sheet is the one where we will put all our own style rules. We will use the _responsive.scss file to exclusively put in the media queries of the website. And the styles.scss file is where we will compile those style sheets together.

    Tip

    The underscore _ that began the file name is a...

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime