Defining UI Patterns | reSTYLE - UI Patterns. For Sass.

Introduction

reSTYLE’s core concept is defining (or registering) UI patterns. This is accomplished by associating a pattern identifier with a pattern definition (as a Sass map).

Let’s start out with creating a simple button pattern.

@include restyle-define(button, (
  background-color: #4787ed,
  border: 1px solid #3079ed,
  border-radius: 2px,
  color: #fff,
  display: inline-block,
  font-weight: bold,
  padding: 5px 10px,
  text-align: center,
  vertical-align: middle
));

This pattern can now be invoked with the restyle() mixin:

.btn {
  @include restyle(button);
}

This will output the following CSS…

.btn {
  background-color: #4787ed;
  border: 1px solid #3079ed;
  border-radius: 2px;
  color: #fff;
  display: inline-block;
  font-weight: bold;
  padding: 5px 10px;
  text-align: center;
  vertical-align: middle;
}

Simple, right?

Capturing Definitions

Already have CSS you want to convert into a UI pattern? It’s as simple as capturing the CSS into your pattern identifier:

@include restyle-define(button) {
  background-color: #4787ed;
  border: 1px solid #3079ed;
  border-radius: 2px;
  color: #fff;
  display: inline-block;
  font-weight: bold;
  padding: 5px 10px;
  text-align: center;
  vertical-align: middle;
}

.btn {
  @include restyle(button);
}

Capturing is a great solution for converting existing stylesheets, but lacks many of the advanced features when using a proper reSTYLE definition.