Book Image

Mastering Responsive Web Design

By : Ricardo Zea
Book Image

Mastering Responsive Web Design

By: Ricardo Zea

Overview of this book

Building powerful and accessible websites and apps using HTML5 and CSS3 is a must if we want to create memorable experiences for our users. In the ever-changing world of web design and development, being proficient in responsive web design is no longer an option: it is mandatory. Each chapter will take you one step closer to becoming an expert in RWD. Right from the start your skills will be pushed as we introduce you to the power of Sass, the CSS preprocessor, to increase the speed of writing repetitive CSS tasks. We’ll then use simple but meaningful HTML examples, and add ARIA roles to increase accessibility. We’ll also cover when desktop-first or mobile-first approaches are ideal, and strategies to implement a mobile-first approach in your HTML builds. After this we will learn how to use an easily scalable CSS grid or, if you prefer, how to use Flexbox instead. We also cover how to implement images and video in both responsive and responsible ways. Finally, we build a solid and elegant typographic scale, and make sure your messages and communications display correctly with responsive emails.
Table of Contents (16 chapters)
Mastering Responsive Web Design
About the Author
About the Reviewers

How does Sass work?

Knowing how Sass works is a matter of understanding several basic technological concepts:

  1. Sass can be based on two different technologies: Ruby or LibSass. In this book, we're going to use Sass based on Ruby.

  2. Sass is a Ruby gem. Gems are packages for use in Ruby. A Ruby gem is a software that runs only on Ruby. Ruby is a programming language, just like PHP, .NET, Java, and so on.

  3. We can make Sass run via the command line, but we can also run Sass with a third-party application, making the use of the command line unnecessary.

  4. Sass is a programming/scripting language used to create CSS.

  5. CSS is a very repetitive language. Sass allows authors to optimize those repetitive tasks and create CSS faster and more efficiently.

  6. Part of the Sass workflow is when Sass is watching an SCSS file, for example, book-styles.scss. When it detects a change in that SCSS file, it then compiles it into a CSS file book-styles.css.


Watching an SCSS file means that the Sass watcher is running in the background looking over the SCSS file(s) for any changes.

Installing Sass

Here are the steps we're going to follow:

  1. Download the Ruby installer

  2. Open the command line

  3. Install the Sass gem

Downloading the Ruby installer

Windows: Download the Ruby installer from the following link:

Mac: Ruby comes preinstalled on all Macs, so there's no need to download anything.

Opening the command line

Windows and Mac: Open the command line.


Windows Tip!

Press Windows + R, type CMD, and then press Enter.

Installing the Sass gem

Type the following command into the command prompt (it doesn't matter which folder you're in):

Windows, use the following command:

gem install sass

Mac, use the following command:

sudo gem install sass

It'll take a few seconds to install Sass.


At the time of writing, the latest version of Sass was 3.4.14. The version/revisions might be different by the time the book comes out.

That's it! Sass is now installed on your machine.

Using Sass

What I'm about to show you is completely different to what any other Sass tutorial out there tells you to do. Most of those tutorials complicate things too much. This is the simplest way to use Sass you'll ever read.

The following screenshots are on Windows, but the process can be applied exactly the same regardless of platform.

In the following steps, you will see examples of how the necessary folders and files look after being created, not how to create them:

  1. Create a /Demo folder anywhere on your drive:

  2. Inside that folder, create two subfolders, /css and /scss:

  3. Create a .scss file. Go into the /scss folder and create a file called styles.scss:


    Notice the file extension .scss? This is your Sass file. Yes, right now there's nothing in it, it's empty.

  4. Go back to the command line for a minute and follow these steps:

    1. In the command line, type cd <space>

    2. A space after cd means Change Directory. From your file manager, drag and drop the /Demo folder into the command prompt/terminal window and press Enter.

    3. You should be in the /Demo folder now.

  5. Make Sass watch your /scss and /css folders by typing this in the command line:

    sass --watch scss:css­
  6. Make Sass watch the /scss and /css folders.

    That's it! You are now using Sass!


    The --watch flag tells Sass to pay attention to the /scss and /css folders so that when we make a change to a .scss file (in our case, styles.scss), Sass will detect the change and compile the SCSS into the final CSS file we're going to use in our website or app.

  7. Edit the .scss file and watch Sass compile it into a .css file:

    1. Open your text editor (I use Sublime Text).

    2. Open the styles.scss file.

    3. Add some CSS to it.

    4. Save the styles.scss file.

    5. From your command line/terminal, verify that the compiling was successful.

    6. Open your styles.css file and enjoy your new creation.