List of Figures

Chapter 1. Sass and Compass make stylesheets fun again

Figure 1.1. The Sass authoring and compilation workflow

Figure 1.2. Compiling with Compass

Figure 1.3. A standalone compass project

Figure 1.4. 960.gs—the 960 Grid System CSS framework

Chapter 2. Basic Sass syntax

Figure 2.1. Importing Sass files

Chapter 3. CSS grids without the math

Figure 3.1. The PeepCode blog uses a CSS grid.

Figure 3.2. The grid revealed

Figure 3.3. Grid layouts are for text, too.

Figure 3.4. 960 fluid grid

Figure 3.5. 960 Grid System

Figure 3.6. An example of 960.gs

Figure 3.7. Vertical rhythm on the PeepCode blog

Figure 3.8. Simple vertical rhythm example

Figure 3.9. Setting up a typographic scale

Figure 3.10. Vertical rhythm with typographic scale

Chapter 4. Eliminate the mundane using Compass

Figure 4.1. Example of pretty bullets

Figure 4.2. Example of a horizontal list

Figure 4.3. Example of a delimited list

Figure 4.4. Coffee text replacement

Chapter 5. CSS3 with Compass

Figure 5.1. Buttons with rounded corners

Figure 5.2. CSS3 drop shadows

Figure 5.3. Applying multiple shadows to an element in CSS3

Figure 5.4. Television test pattern gradient

Figure 5.5. ChunkFive makes a great headline font

Figure 5.6. Do web sites need to look exactly the same in every browser?

Figure 5.7. Simple rounded corners and background gradients for buttons

Chapter 6. Spriting

Figure 6.1. Example of a simple sprite map

Figure 6.2. CSS creates a viewport

Figure 6.3. A more modern sprite map

Figure 6.4. A sprite map from Amazon.com