Wondering what’s next for npm?Check out our public roadmap! »

    postcss-button

    0.4.3 • Public • Published

    postcss-button

    npm version Build Status Dependency Status

    NPM

    francoisromain.github.io/postcss-button

    A PostCSS plugin to create buttons.


    This plugin outputs a lot of the repetitive css code necessary to create clean buttons. It also uses box-shadow to create borders which does not break the vertical rhythm.


    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 --save-dev postcss postcss-button

    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]) {
      /* name is a custom identifier to use multiple configurations.
      If no name is provided, the default settings are overwritten */
      [button-css-rules…]
    }
    
    .my-class {
      button: [name];
      /* use 'default' to apply the default settings */
    }

    Without a configuration

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

    Css rules

    Color

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

    Background color

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

    Border

    /* width and units of the border */
    button-border-width: [width];
    
    /* color of the border */
    button-border-color: [color];
    
    /* color of the border when active */
    button-border-color-active: [color];
    
    /* color of the border on hover */
    button-border-color-hover: [color];
    
    /* short-hand syntax */
    button-border: [border-width] ([border-color]) ([border-color-active])
      ([border-color-hover]);

    Classes

    /* class name to apply the active styles */
    button-class-active: [class-name];
    
    /* class name to apply the disabled styles */
    button-class-disabled: [class-name];
    
    /* apply the classes and pseudo elements
    to the parent element in the selector chain
    if it exists. (default to false)
    (See test 07 and 08) */
    button-class-parent: [boolean];
    
    /* short-hand syntax */
    button-class: [active] ([disabled]) ([parent]);

    Missing declarations fallback to the default settings.

    Install

    npm i postcss-button

    DownloadsWeekly Downloads

    164

    Version

    0.4.3

    License

    MIT

    Unpacked Size

    16.9 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar