Getting Started | reSTYLE - UI Patterns. For Sass.

Introduction

reSTYLE introduces a new way of thinking about and authoring reusable, composable UI patterns.

reSTYLE is an eyeglass module that brings UI pattern authoring to your Sass.

Installation

Install eyeglass-restyle via npm.

npm install eyeglass-restyle --save

`dependencies` vs `devDependencies`

If you’re integrating reSTYLE into your application, you can safely use --save-dev and add it to your devDependencies.

If you’re creating a pattern library to distribute via npm, you should use --save to add it to your dependencies.

Integrating with your app

If you’re building an app with reSTYLE, you’ll need to ensure that eyeglass and node-sass are correctly configured and integrated into your build pipeline.

You’ll want to check out the eyeglass installation guide for more details and advanced options, but here’s a quick example integrating with a broccoli pipeline.

First, install the broccoli-eyeglass module:

npm install broccoli-eyeglass --save-dev

Then configure it in your Brocfile.js:

var compileSass = require('broccoli-eyeglass');

var outputDirectory = "dist";
var options = {
  cssDir: "assets/css",
  fullException: false
}
var outputTree = new compileSass(inputTrees, options);

Usage

Once you’ve got your pipeline configured, you can start using reSTYLE in your Sass. Using it starts out as simple as adding an @import to your Sass file:

@import "restyle";

You can now define reusable, composable UI patterns using the restyle-define() mixin:

@include restyle-define(my-ui-pattern, (
  color: #333,
  border: 1px solid #444
));

And retrieving the definition is one call to restyle() away:

.my-element {
  @include restyle(my-ui-pattern);
}

That’s it! You’re now ready to create your own UI patterns.

Up next

Learn more about what makes up a UI pattern, defining UI patterns, and configuration options.

getting started