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:

Continue reading %Style Tiles with Sass%

by James Steinbach via SitePoint