postcss-button

postcss-button

francoisromain.github.io/postcss-button

A PostCSS plugin to create buttons.

---

This plugin handles a lot of repetetive css code necessary to create clean buttons. It also uses box-shadow to create borders which respect the vertical rythm.

---

Examples

There are two ways to declare a button:

With specific declarations

.my-button-class {
  /* short-hand syntax example */

  /* color: default | active | hover */
  button-color: skyblue white white;

  /* background-color: default | active | hover */
  button-background: white skyblue silver;

  /* border: size | default | active | hover */
  button-border: 4px skyblue skyblue silver;

  /* classes: active class name | disabled class name | apply classes and pseudo classes to the parent selector */
  button-class: active disabled true;
}

With a configuration

@button my-button-name {
  /* detailed-syntax example */

  /* color */
  button-color: orange;
  button-color-active: white;
  button-color-hover: white;

  /* background-color */
  button-background-color: white;
  button-background-color-active: silver;
  button-background-color-hover: orange;

  /* border */
  button-border-width: 1px;
  button-border-color: silver;
  button-border-color-active: silver;
  button-border-color-hover: orange;

  /* classes */
  button-class-active: active;
  button-class-disabled: disabled;
  button-class-parent: true;
}

.my-button-class {
  button: my-button-name;
}

01: input, output, markup, demo

02: input, output, markup, demo

---

Installation

Install the npm package:

$ 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…

---

Usage

With a configuration (optional)

@button ([name]) {
  [button-rules…]
}

.my-class {
  button: [name];
}

• name (optional): custom identifier. If no name is provided, the default settings are overwritten.

Without a configuration

.my-class {
  [button-rules…]
}

Css rules

Color

button-color-active: [color];

• color: button text color when active.

button-color-hover: [color];

• color: button text color on hover.

/* short-hand syntax */
button-color: [color] ([color-active]) ([color-hover]);

Background color

button-background-active: [color];

• color: button background color when active.

button-background-hover: [color];

• color: button background color on hover.

/* short-hand syntax */
button-background: [background-color] ([background-color-active]) ([background-color-hover]);

Border

button-border-width: [width];

• width: width and units of the border.

button-border-color: [color];

• color: color of the border.

button-border-color-active: [color];

• color: color of the border when active.

button-border-color-hover: [color];

• color: color of the border on hover.

/* short-hand syntax */
button-border: [width] ([border-color]) ([border-color-active]) ([border-color-hover]);

Classes

button-class-active: [class-name];

• class-name: class name to apply the active styles.

button-class-disbaled: [class-name];

• class-name: class name to apply the disabled styles.

button-class-parent: [boolean];

• boolean: apply the classes and pseudo element to the parent element in the selector chain if it exists (default to false). (See test 07 and 08)

/* short-hand syntax */
button-class: [active] ([disabled]) ([parent]);`

Missing declarations fallback to the default settings.

Changelog

0.3.0

• feat: make it optional to apply classes and pseudo elements to the parent in the selector chain. Option: button-class-parent: true. Default to false. See test 08.
• fix: improved documentation