postcss-button

postcss-button

francoisromain.github.io/postcss-button

A PostCSS plugin to create buttons.

Installation

Install the npm module:

$ npm install postcss-button --save-dev

Require the PostCSS plugin:

postcss([ require('postcss-button') ])

See PostCSS docs to setup with Gulp, Grunt, Webpack, npm scripts…

Configuration (optional)

The default settings can be overrided with an atrule:

@button {
  color: grey;
  background-color: white;
  color-active: black;
  background-color-active: silver;
  border-width: 0;
  border-style: none;
  border-color: grey;
  border-color-active: black;
  border-radius: 0;
  class-active: active;
  class-disabled: disabled;
}

Usage

There are two ways of declaring a button:

• With an atRule declaration
• With specific declarations

With an atRule declaration

@button [name] {
  color: grey;
  background-color: white;
  color-active: black;
  background-color-active: silver;
  border-width: 0;
  border-style: none;
  border-color: grey;
  border-color-active: black;
  border-radius: 0;
  class-active: active;
  class-disabled: disabled;
}

.my-button {
  button: [name]
}

• name: custom identifier

With specific declarations

.my-button {
  button-color: [color] [background-color] [color-active] [background-color-active];
  button-border: [width] [style] [color] [color-active];
  button-radius: [size];
  button-classes: [active] [disabled];
}

Missing declarations will use the default settings.

Example: input, output, markup, demo

Changelog

0.1.0

• mvp