/suitcss-components-alert

Component CSS for alerts

Primary LanguageHTMLMIT LicenseMIT

SUIT CSS components-alert

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

Read more about SUIT CSS's design principles.

Installation

  • yarn: yarn add suitcss-components-alert
  • npm: npm install suitcss-components-alert
  • Download: zip

Available classes

Component structure

  • Alert - [core] The core alert component

Modifiers

  • Alert--info - Applies info colours to the alert
  • Alert--success - Applies success colours to the alert
  • Alert--danger - Applies danger colours to the alert
  • Alert--warning - Applies warning colours to the alert

Configurable variables

  • --Alert-borderColor

  • --Alert-borderWidth

  • --Alert-padding

  • --Alert--info-backgroundColor

  • --Alert--info-borderColor

  • --Alert--info-textColor

  • --Alert--success-backgroundColor

  • --Alert--success-borderColor

  • --Alert--success-textColor

  • --Alert--danger-backgroundColor

  • --Alert--danger-borderColor

  • --Alert--danger-textColor

  • --Alert--warning-backgroundColor

  • --Alert--warning-borderColor

  • --Alert--warning-textColor

Use

Examples:

<div class="Alert">
  This is a default alert.
</div>
<div class="Alert Alert--success">
  This is a success alert.
</div>

Theming / extending

The CSS is focused on common structural requirements for alerts. You can extend it with application-specific theme styles in your app.

Testing

yarn install

To generate a build:

yarn build

To lint code with postcss-bem-linter and stylelint

yarn lint

To generate the testing build.

yarn build-test

To watch the files for making changes to test:

yarn watch

Basic visual tests are in test/index.html.

Browser support

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