Extract from SitePoint article “Style Tiles with Sass” by James Steinbach
As responsive web design has become the new normal, many designers, developers, and agencies have realized that static comps are no longer a valuable way to show clients their sites. As Stephen Hay says :
“We’re not designing pages, we’re designing systems of components.”
Those components reflow and resize in various container sizes as the viewport changes and layouts shift. Rather than spending weeks building static comps of 3-4 different screen sizes for a single site design (and risking client rejection of all that work), many designers are turning to “style tiles” to help clients understand and approve design direction without building fully detailed comps. Style tiles are designed to “present clients with interface choices without making the investment in multiple photoshop mockups.” Sometimes they’re referred to as element collages or UI maps.
The rise of style guides fits nicely with another recent development in front-end development: starting in-browser prototyping as early in the process as possible. When we help clients understand a design by putting together style guides and move that process into markup and out of design software, we end up creating live web versions of the PDF brand guideline documents many clients use.
As the title of this post hinted, Sass has some features that make it easier for us to create living style guides. Let’s take a look at those now.
Color Palette
An easy way to make style guides easier is to automate repeatable information. For example, to show your client your color palette, you might create several squares, each one showing one of the colors. Your HTML might look like this:
<ul class="color-palette">
<li class="color-blue">
<span class="swatch"></span>
Blue
</li>
<li class="color-red">
<span class="swatch"></span>
Red
</li>
<li class="color-green">
<span class="swatch"></span>
Green
</li>
<li class="color-gray">
<span class="swatch"></span>
Gray
</li>
<li class="color-dark-gray">
<span class="swatch"></span>
Dark Gray
</li>
</ul>
That might not be the ideal markup (you could definitely use ::before instead of span.swatch), but it will work for this demo.
Once you’ve done that, you’ll need CSS to layout those color swatches for your client. We can use Sass to make that simpler. Sass maps are a great way to store those color values:
$colors: (
blue: #2980b9,
red: #e74c3c,
green: #27ae60,
gray: #95a5a6,
dark-gray: #2c3e50
);
By storing those values in a map (instead of as 5 or more variables), we now have the ability to loop through them and generate CSS automatically.
// just a little layout style to make square swatches
ul {
margin: 0;
padding: 0;
text-align: center;
}
li {
display: inline-block;
width: 15%;
margin: 1%;
padding: .5em;
box-shadow: 0 1px 4px -1px rgba(0,0,0,.5);
}
.swatch {
display: block;
height: 0;
margin-bottom: .5em;
padding: 100% 0 0;
}
// now, assign each .swatch the right background-color
@each $name, $value in $colors {
.color-#{$name} {
.swatch {
background-color: $value;
}
}
}
Headings
You can use a map for heading styles as well. The example below is a bit more complicated than the color map.
$sans: Open Sans, Tahoma, sans-serif;
$serif: Droid Serif, Palatino, serif;
$headings: (
h1: bold 2em/1.2 $sans,
h2: light 1.5em/1.2 $sans,
h3: bold 1.2em/1.2 $sans,
h4: bold 1em/1.2 $sans,
h5: bold 1em/1.2 $serif,
h6: italic 1em/1.2 $serif
);
@each $element, $font-property in $headings {
#{$element} {
font: $font-property;
}
}
That’s all fine, unless you’re getting more complex with your heading styles. If you plan to add properties like color, letter-spacing, or text-transform, you’ll need to use a nested map, like the example below:
$headings-complex: (
h1: (
font: bold 2em/1.2 $sans,
color: map-get($colors, blue)
),
h2: (
font: 200 1.5em/1.2 $sans,
letter-spacing: .1em,
text-transform: uppercase,
color: map-get($colors, dark-gray)
),
h3: (
font: bold 1.2em/1.2 $sans,
color: map-get($colors, dark-gray)
),
h4: (
font: normal 1em/1.2 $sans,
letter-spacing: .1em,
text-transform: uppercase,
color: map-get($colors, dark-gray)
),
h5: (
font: bold 1em/1.2 $serif,
color: map-get($colors, blue)
),
h6: (
font: italic 1em/1.2 $serif,
color: map-get($colors, dark-gray)
)
);
@each $element, $style-map in $headings-complex {
#{$element} {
@each $property, $value in $style-map {
#{$property}: $value;
}
}
}
At this point, you may be asking, “Why not just write all that nested map data in CSS? It looks like CSS and I’m not really saving much time by making it a loop.” That’s the great thing about using Sass to make things easier: if a technique doesn’t make it easier for you, don’t use it. But if that complex map works for your project, go for it!
Buttons
Going back to simpler uses of Sass maps, buttons are another good opportunity to automate style tiles: