Mastering Responsive Web Design

Conventions

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "The sizes attribute can also be used with the <picture> element, but we're going to focus on using the sizes attribute with the <img> tag."

A block of code is set as follows:

*, *:before, *:after {
    box-sizing: border-box;
}

//Moble-first Media Queries Mixin
@mixin forLargeScreens($width) {
    @media (min-width: $width/16+em) { @content }
}

When we wish to draw your attention to a particular part of a code block, the ...