Unopinionated and configurable button objects

The JigSass Button object is built for maximal flexibility, providing only very basic styles as default. JigSass Button objects are transparent by default, and are meant to be extended by type-size, color and background-color utils, and by configurable button object modifiers.

Installation

Using npm:

npm i -S jigsass-objects-button

Usage

First, you need to import JigSass Button:

@import 'path/to/jigsass-objects-button/scss/index';

And optionally reconfigure the defaults to your liking.

Like all other JigSass modules, JigSass Button does not automatically generate any CSS when imported. In order to use its classes, you would have to first explicitly indicate your intention to use them by enabling their generation in the associated configurations map, Leaving us only with CSS we need:

All JigSass Button classes are responsive-enabled, using JigSass MQ and the breakpoints defined in the $jigsass-breakpoints variable.

Based enabled selectors in the configuration map, responsive modifiers are generated according to the following logic:

.o-btn[--modifier][-[-from-{breakpoint-name}][-until-{breakpoint-name}][-misc-{breakpoint-name}]]

So, assuming the medium, large and landscape breakpoints are defined in $jigsass-breakpoints as 600px, 1024px and (orientation: landscape) respectively,

$jigsass-btn-conf: (
  no-breakpoint: (
    outline: true,
  ),
  until-medium: (
    outline: true,
  ),
  from-large-when-landscape: (
    facebook: true,
  ),
)

will generate the following classes:

• .o-btn--outline, which is not limited to any media-query.
• .o-btn--outline--until-medium, which will be in effect at (max-width: 37.49em) and will override styles in the default class until that point.
• .o-btn--facebook--from-large-when-landscape, which will go into effect at (min-width: 64em) and (orientation: landscape) and will override styles in the default class under these conditions.

License: MIT

By default, JigSass Button does not generate any CSS output when imported into a stylesheet. CSS output must be enabled on a per-selector basis, inside the dedicated configuration maps:

Buttons and modifier classes

$jigsass-btn-conf

Type: Map

Configuration map for enabling generation of button button modifier classes.

Default: ()

Example:

$jigsass-btn-conf: (
  no-breakpoint: (
    no-modifier: true,  // Enables generation of the `.o-btn`
                        // class outside of any media query.
    foo: true,          // Enables generation of the `.o-btn--foo`
                        // modifier class outside of any media query.
  ),
  from-<bp-name>: (
    no-modifier: true,  // Enables generation of the `.o-btn--from-<bp-name>`
                        // class inside a min-width media query
                        // defined ins `$jigsass-breakpoints.length`.
    foo: true,          // Enables generation of the `.o-btn--foo--from-<bp-name>`
                        // class inside a min-width media query
                        // defined ins `$jigsass-breakpoints.length`.
  ),
  until-<bp-name>: (
    no-modifier: true,  // Enables generation of the `.o-btn--until-<bp-name>`
                        // class inside a max-width media query
                        // defined ins `$jigsass-breakpoints.length`.
  foo: true,          // Enables generation of the `.o-btn--foo--until-<bp-name>`
                        // class inside a max-width media query
                        // defined ins `$jigsass-breakpoints.length`.
  ),
  when-<bp-name>: (
    no-modifier: true,  // Enables generation of the `.o-btn--when-<bp-name>`
                        // class inside a misc media query
                        // defined ins `$jigsass-breakpoints.features`.
    foo: true,          // Enables generation of the `.o-btn--foo--when-<bp-name>`
                        // class inside a misc media query
                        // defined ins `$jigsass-breakpoints.features`.
  ),
  from-<bp-name>-until-<bp-name>: (...);
  from-<bp-name>-when-<bp-name>: (...);
  until-<bp-name>-when-<bp-name>: (...);
  from-<bp-name>-until-<bp-name>-when-<bp-name>: (...);
);

Disabled buttons

$jigsass-btn-disabled-conf

Type: Map

Configuration map for enabling generation of disabled button classes.

Default: ()

Example:

$jigsass-btn-disabled-conf: (
  no-breakpoint: (
    no-modifier: true,  // Enables generation of the `.o-btn-is-disabled`
                        // class outside of any media query.
    foo: true,          // Enables generation of the `.o-btn-is-disabled--foo`
                        // modifier class outside of any media query.
  ),
  from-<bp-name>: (
    no-modifier: true,  // Enables generation of the `.o-btn-is-disabled--from-<bp-name>`
                        // class inside a min-width media query
                        // defined ins `$jigsass-breakpoints.length`.
    foo: true,          // Enables generation of the `.o-btn-is-disabled--foo--from-<bp-name>`
                        // class inside a min-width media query
                        // defined ins `$jigsass-breakpoints.length`.
  ),
  until-<bp-name>: (
    no-modifier: true,  // Enables generation of the `.o-btn-is-disabled--until-<bp-name>`
                        // class inside a max-width media query
                        // defined ins `$jigsass-breakpoints.length`.
  foo: true,          // Enables generation of the `.o-btn-is-disabled--foo--until-<bp-name>`
                        // class inside a max-width media query
                        // defined ins `$jigsass-breakpoints.length`.
  ),
  when-<bp-name>: (
    no-modifier: true,  // Enables generation of the `.o-btn-is-disabled--when-<bp-name>`
                        // class inside a misc media query
                        // defined ins `$jigsass-breakpoints.features`.
    foo: true,          // Enables generation of the `.o-btn-is-disabled--foo--when-<bp-name>`
                        // class inside a misc media query
                        // defined ins `$jigsass-breakpoints.features`.
  ),
  from-<bp-name>-until-<bp-name>: (...);
  from-<bp-name>-when-<bp-name>: (...);
  until-<bp-name>-when-<bp-name>: (...);
  from-<bp-name>-until-<bp-name>-when-<bp-name>: (...);
);

JigSass Button allows for some modification through configuration variables. Redefine them to your liking before importing JigSass Buttons.

Button Padding

$jigsass-btn-padding

Type: Map

A map of button padding modifiers, each key should contain a list of two unitless numbers, representing the number of rhythm units used as padding on the horizontal and vertical axes, respectively.

Default: (default: 2 1)

Properties:

Example:

$jigsass-btn-padding: (
  default: 2 1,
  small: 1 0.5,
  large: 3 3,
);

Button Outline

$jigsass-btn-outline

Type: List

The border width and style (and optionally color) of outlined buttons (.o-btn--outline)

Default: 1px solid

Button Style

$jigsass-btn-style

Type: Map

Style declarations to add to the .o-btn class.

Default: ()

Example:

$jigsass-btn-style: (
  transition: all 0.25s ease-out,
);

Button Modifiers

$jigsass-btn-modifiers

Type: Map

CSS declarations for button modifiers, with each modifier being a nested map at the first level.

Default: ()

Example:

$jigsass-btn-modifiers: (
  primary: (
    background-color: #09a5d9,
    color: #fff,

    '&:hover, &:focus, &:active': (
      background-color: darken(#09a5d9, 5%),
    )
  ),
  facebook: (
    background-color: #3b5998,
    color: #fff,

    '&:hover, &:focus, &:active': (
      background-color: darken(#3b5998, 5%),
    )
  ),
  twitter: (
    background-color: #55acee,
    color: #fff,

    '&:hover, &:focus, &:active': (
      background-color: darken(#55acee, 5%),
    )
  ),
  gplus: (
    background-color: #dc4e41,
    color: #fff,

    '&:hover, &:focus, &:active': (
      background-color: darken(#dc4e41, 5%),
    )
  ),
);

Disabled Buttons

$jigsass-btn-disabled

Type: Map

Style declarations for the .o-btn-is-disabled class.

Default: `

(
  opacity: 0.4,
  cursor: default,
)

.o-btn

An actionable piece of UI

By default, o-btn elements are transparent and are meant to be extended by type-size, color and background-color utils, and by configurable button object modifiers.

<div class='demo-wrapper'>
  <button type='button' class='o-btn'>A `button` element</button>
  <a href="#" class='o-btn'>An `a` element</a>
  <input type='button' class='o-btn'value='An `input` element' />
</div>

.o-btn--small

A small button.

Changes the padding of the button, text size should be modified using type-size utils.

<div class='demo-wrapper'>
  <button type='button' class='o-btn o-btn--small'>A `button` element</button>
  <a href="#"  class='o-btn o-btn--small'>An `a` element</a>
  <input type='button' value='An `input` element' class='o-btn o-btn--small' />
</div>

.o-btn--large

A large button.

Changes the padding of the button, text size should be modified using type-size utils.

<div class='demo-wrapper'>
  <button type='button' class='o-btn o-btn--large'>A `button` element</button>
  <a href="#"  class='o-btn o-btn--large'>An `a` element</a>
  <input type='button' value='An `input` element' class='o-btn o-btn--large' />
</div>

.o-btn--outline

An outlined button, extends .o-btn in the markup.

<div class='demo-wrapper'>
  <button type='button' class='o-btn o-btn--outline demo-crimson'>A `button` element</button>
  <a href="#"  class='o-btn o-btn--outline demo-teal'>An `a` element</a>
  <input type='button' value='An `input` element' class='o-btn o-btn--outline  demo-deeppink' />
</div>

.o-btn--round

A rounded button, extends .o-btn in the markup.

<div class='demo-wrapper'>
  <button type='button' class='o-btn o-btn--round  demo-bgc'>A `button` element</button>
  <a href="#"  class='o-btn o-btn--round  demo-bgc'>An `a` element</a>
  <input type='button' value='An `input` element' class='o-btn o-btn--round  demo-bgc' />
</div>

.o-btn--primary

A primary modifier, extends .o-btn in the markup.

Style is defined in the primary key of the $jigsass-btn-modifiers variable.

<div class='demo-wrapper'>
  <button type='button' class='o-btn o-btn--primary'>A `button` element</button>
  <a href="#"  class='o-btn o-btn--primary'>An `a` element</a>
  <input type='button' value='An `input` element' class='o-btn o-btn--primary' />
</div>

.o-btn--facebook

A facebook modifier, extends .o-btn in the markup.

Style is defined in the facebook key of the $jigsass-btn-modifiers variable.

<div class='demo-wrapper'>
  <button type='button' class='o-btn o-btn--facebook'>A `button` element</button>
  <a href="#"  class='o-btn o-btn--facebook'>An `a` element</a>
  <input type='button' value='An `input` element' class='o-btn o-btn--facebook' />
</div>

.o-btn--twitter

A twitter modifier, extends .o-btn in the markup.

Style is defined in the twitter key of the $jigsass-btn-modifiers variable.

<div class='demo-wrapper'>
  <button type='button' class='o-btn o-btn--twitter'>A `button` element</button>
  <a href="#"  class='o-btn o-btn--twitter'>An `a` element</a>
  <input type='button' value='An `input` element' class='o-btn o-btn--twitter' />
</div>

.o-btn--action

A action modifier, extends .o-btn in the markup.

Style is defined in the action key of the $jigsass-btn-modifiers variable.

<div class='demo-wrapper'>
  <button type='button' class='o-btn o-btn--action'>A `button` element</button>
  <a href="#"  class='o-btn o-btn--action'>An `a` element</a>
  <input type='button' value='An `input` element' class='o-btn o-btn--action' />
</div>

.o-btn-is-disabled

A disabled button.

Style is defined in the $jigsass-btn-disabled variable.

<div class='demo-wrapper'>
  <button type='button' class='o-btn o-btn-is-disabled'>A `button` element</button>
  <a href="#"  class='o-btn o-btn-is-disabled  demo-crimson'>An `a` element</a>
  <input type='button' value='An `input` element' class='o-btn o-btn-is-disabled  demo-teal' />
</div>