README

reSTYLE

reSTYLE is an eyeglass framework for authoring configurable, composable UI patterns.

Installation

$ npm install --save-dev eyeglass-restyle

Installing eyeglass

reSTYLE depends on eyeglass being installed, so check out the eyeglass installation docs

Usage

@import "restyle";

// optional configuration
@include restyle-config(...);

Resources

Quick Example

Take the following button styles...

.btn {
  display: inline-block;
  padding: 5px 10px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #3079ed;
  border-radius: 2px;
  background-color: #4787ed;
  color: #fff;
  cursor: pointer;
}
.btn:hover {
  background-color: #357ae8;
  border-color: #2f5bb7;
}
.btn[disabled] {
  border-color: #3079ed;
  background-color: #4787ed;
  color: #fff;
  opacity: 0.8;
  cursor: default;
}


.btn.secondary {
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #f5f5f5;
  color: #444444;
}
.btn.secondary:hover {
  background-color: #e0e0e0;
  color: #333333;
}
.btn.secondary[disabled] {
  border-color: rgba(0, 0, 0, 0.1);
  background-color: #f5f5f5;
  color: #444444;
}

We can convert this to a reSTYLE definition as follows:

@import "restyle";

// define our UI pattern...
@include restyle-define(button, (
  // Note that this is different from a Sass $variable. The Sass $variable will
  //  be evaluated at definition time, whereas the special restyle variable is
  //  evaluated at invocation time. This is important for the cascading
  //  behavior of modifiers/states
  restyle-var(border-color): #3079ed,

  display: inline-block,
  padding: 5px 10px,
  font-weight: bold,
  text-align: center,
  vertical-align: middle,
  border: 1px solid restyle-var(border-color),
  border-radius: 2px,
  background-color: #4787ed,
  color: #fff,
  cursor: pointer,

  restyle-states: (
    hover: (
      background-color: #357ae8,
      border-color: #2f5bb7
    ),

    disabled: (
      border-color: restyle-var(border-color),
      // note that we can reference other values within the definition
      background-color: root(background-color),
      color: root(color),
      opacity: 0.8,
      cursor: default
    )
  ),
  restyle-modifiers: (
    secondary: (
      restyle-var(border-color): rgba(0, 0, 0, 0.1),
      border: 1px solid restyle-var(border-color),
      background-color: #f5f5f5,
      color: #444,

      restyle-states: (
        hover: (
          background-color: #e0e0e0,
          border-color: null,
          color: #333
        )
      )
    )
  )
));

// register the states (note that this would be a "per app" configuration)
@include restyle-add-state((
  hover: '&:hover',
  disabled: '&[disabled]'
));

// ...

// now invoke it...
.btn {
  @include restyle(button);
  &.secondary {
    @include restyle(secondary button);
  }
}

This is probably a bit complex for everyone, so stay tuned for some additional elaboration.

License

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

Usage no npm install needed!