Style Tiles with Sass

Responsive web design has become the new normal, and many designers, developers and organizations have realized that static sample scripts are no longer an effective way to show their website to customers. As Stephen Hay said:

"We designed not pages, but component systems."

As the viewport changes and layout is adjusted, these components are rearranged and resized in various container sizes. Many designers turn to “style tile” to help customers understand and approve design directions without having to build fully detailed sample drafts instead of spending weeks building 3-4 static sample drafts of different screen sizes for a single website design (and take it out) the risk of clients rejecting all jobs). Style tile is designed to "display interface selections to customers without investing in multiple Photoshop models". Sometimes they are called element collages or UI maps.

The rise of style guides is very consistent with another latest development in front-end development: start in-browser prototype design as early as possible. When we integrate style guides to help customers understand design and move the process from design software to tagging, we end up creating a live web version of the PDF brand guide documents that many customers use.

As the title of this post suggests, Sass has some features that make it easier for us to create dynamic style guides. Let's take a look at these features now.

Color palette

One way to make style guides easier is to automate repeatable information. For example, to show your color palette to your customers, you can create several squares, each showing one color. Your HTML might look like this:

<ul class="color-palette">
  <li class="color-blue"><span class="swatch">Blue</span></li>
  <li class="color-red"><span class="swatch">Red</span></li>
  <li class="color-green"><span class="swatch">Green</span></li>
  <li class="color-gray"><span class="swatch">Gray</span></li>
  <li class="color-dark-gray"><span class="swatch">Dark Gray</span></li>
</ul>

This may not be an ideal mark (you can absolutely use ::before instead of span.swatch), but it works for this demo.

After this is done, you need CSS to layout these color samples for your customers. We can use Sass to make it easier. Sass mapping is an excellent way to store these color values:

$colors: (
  blue: #2980b9,
  red: #e74c3c,
  green: #27ae60,
  gray: #95a5a6,
  dark-gray: #2c3e50
);

By storing these values ​​in the map (rather than as 5 or more variables), we are now able to iterate over them and generate CSS automatically.

// 只需一点布局样式即可制作方形样本
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;
}

// 现在，为每个 .swatch 分配正确的 background-color
@each $name, $value in $colors {
  .color-#{$name} {
    .swatch {
      background-color: $value;
    }
  }
}

Title

You can also use mappings for title styles. The following example is a little more complicated than color mapping.

$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;
  }
}

If you get more complicated with title styles, that's fine. If you plan to add properties such as color, letter spacing, or text conversion, you need to use nested mappings as shown in the following example:

$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 might ask, "Why not write all the nested mapped data directly in CSS? It looks like CSS, and I didn't really save much time by looping it." Make things happen with Sass The advantage of getting it easier is that if a technology does not make it easier for you, don't use it. However, if that complex mapping works for your project, use it!

Button

Back to the simpler usage of Sass mapping, the button is another good opportunity to automate style tiles:

<ul class="color-palette">
  <li class="color-blue"><span class="swatch">Blue</span></li>
  <li class="color-red"><span class="swatch">Red</span></li>
  <li class="color-green"><span class="swatch">Green</span></li>
  <li class="color-gray"><span class="swatch">Gray</span></li>
  <li class="color-dark-gray"><span class="swatch">Dark Gray</span></li>
</ul>

This code snippet will create the CSS of the button based on the same color as the palette above. If you have a different UI button color set, you can use different mappings for $button-colors.

The following is all the code in this article on CodePen:

CodePen link

Style Guide Generator

The above tip helps us by writing some duplicate CSS for us, but requires us to write our own HTML to match that CSS. There are also some great tools to generate the markers you need.

I won't explain these tools in detail, but you can check out their examples and documentation.

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

Hologram is a Ruby gem that also uses Markdown in CSS comment blocks to create style guide markup.

Conclusion

Style tile is a great way to show your client the design vision without unexpectedly convinced them that they are getting a fixed-sized, pixel-perfect website. They help customers understand the fluency of their website while still conveying the nature of visual design. Sass makes it easier for us to generate these style tiles using tools such as mapping and looping.

Do you use Sass to make style tile or prototyping easier? Please let us know in the comments!

The above is the detailed content of Style Tiles with Sass. For more information, please follow other related articles on the PHP Chinese website!