Style Tiles with Sass

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:

@mixin button($color) {
  display: inline-block;
  background-color: $color;
  color: white;
  border-radius: .25em;
  line-height: 1;
  text-transform: uppercase;
  padding: .5em 1em;
  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
  box-shadow:
  inset 0 .125em .5em rgba(255,255,255,.25),
  inset 0 -.125em .5em rgba(0,0,0,.25);

  &:hover {
    background-color: darken($color, 5%);
  }
}

@each $name, $value in $colors {
  .button-#{$name} {
    @include button($value);
  }
}

That snippet will create CSS for buttons based on the same colors as the palette above. If you have a different set of colors for UI buttons, you could use a different map for $button-colors.

Here is a CodePen of all the code in this article:

See the Pen Style Tiles with Sass by SitePoint (@SitePoint) on CodePen.

Style Guide Generators

The tips above help us out by writing some repetitive CSS for us, but require us to write our own HTML to go along with that CSS. There are some good tools for generating the markup you need as well.

I won’t go into a detailed explanation for these tools, but you can check out their examples and documentation.

StyleDocco is an npm module that takes Markdown written in CSS comment blocks and generates HTML to match.

Hologram is a Ruby gem that also takes Markdown out of CSS comment blocks to create markup for a style guide.

Conclusion

Style tiles are a great way to give clients a vision of a design without accidentally letting them believe that they’re getting a fixed-size, pixel-perfect site. They help clients understand the fluid nature of their sites, while still communicating the essence of the visual design. Sass makes it easier for us to generate those style tiles with tools like maps and loops.

Have you used Sass to make style tiles or prototyping easier? Let us know how in the comments!