SUIT CSS components-button

A SUIT CSS component that provides a structural UI button template to be extended with modifiers.

Read more about SUIT CSS's design principles.

Installation

• npm: npm install suitcss-components-button
• Download: zip

Available classes

• Button - [core] The core button component
• is-disabled - [state] For disabled-state button styles (themes)

N.B. You must also include the disabled attribute on button elements. For a elements, you should prevent JavaScript event handlers from firing.

Configurable variables

• --Button-border-width
• --Button-border-color
• --Button-color
• --Button-font
• --Button-padding
• --Button-disabled-opacity

Use

Examples:

<a class="Button" href="{{url}}">Sign up</a>

<button class="Button Button--default is-disabled" type="button">Close</button>

Theming / extending

The CSS is focused on common structural requirements for buttons. You can build your application-specific theme styles in your app. For example:

@import "suitcss-components-button";

/**
 * Modifier: default buttons
 */

.Button--default {
  background-color: #eee;
  color: #444;
  border-color: #d9d9d9 #d9d9d9 #ccc;
  border-radius: 2px;
}

.Button--default:hover,
.Button--default:focus,
.Button--default:active,
.Button--default.is-pressed {
  background-color: #f5f5f5;
  color: #222;
  border-color: #c6c6c6 #c6c6c6 #bbb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.Button--default:focus {
  border-color: #069;
  outline: 0;
}

.Button--default:active,
.Button--default.is-pressed {
  background-color: #ccc;
  box-shadow: inset 0 1px 2px rgba(0,0,0, 0.2);
}

/**
 * Modifier: large buttons
 */

.Button--large {
  font-size: 1.5em;
  padding: 0.75em 1.5em;
}

Testing

Install Node (comes with npm).

npm install

To generate a build:

npm run build

To lint code with postcss-bem-linter and stylelint

npm run lint

To generate the testing build.

npm run build-test

To watch the files for making changes to test:

npm run watch

Basic visual tests are in test/index.html.

Browser support

• Google Chrome
• Firefox
• Opera
• Safari
• Internet Explorer 9+

HEAD

6.0.2 (November 27, 2017)

• Remove default border radius (#25)

6.0.1 (October 27, 2017)

• Add support for JS bundling (#24)

6.0.0 (January 14, 2017)

• Remove cursor: pointer; (#22)
• Upgrade preprocessor to ^3.0.1

5.0.0 (December 09, 2015)

• Remove support for input elements - issue
• Upgrade preprocessor to ^0.8.0

4.0.0 (June 26, 2014)

• Change variable names.

3.3.1 (June 24, 2014)

• Add .css extension to imports for interoperability.

3.3.0 (June 22, 2014)

• npm-based workflow.
• Add new preprocessor build tools.
• Fix Firefox/IE default button focus styles.

3.2.0 (May 15, 2014)

• Update variables syntax.

3.1.0 (April 1, 2014)

• Add npm support.
• Revert to implicit-width, inline-block rendering.
• Add variables support.
• Use Component(1) for development.

3.0.0 (October 19, 2013)

• Rewrite the test file using suit-grid.
• Remove vertical-align:middle to make the component conform with framework.
• Allow text wrapping.
• Make buttons full-width by default.
• Add CSS linting and configuration.

2.0.0 (May 26, 2013)

• Prevent user-select of text.
• Remove size modifiers.
• Add is-disabled and :disabled styles.
• Rename component.json to bower.json.

1.1.0 (March 7, 2013)

• Add a test file.
• Change class name notation.

1.0.0 (October 4, 2012)

• Public release.