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
Available classes
Button
- [core] The core button componentis-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:
Sign up Close
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:
; /** * Modifier: default buttons */ /** * Modifier: large buttons */
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+