Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alecrust/suitcss-components-alert
Component CSS for alerts
https://github.com/alecrust/suitcss-components-alert
component component-css suitcss
Last synced: 7 days ago
JSON representation
Component CSS for alerts
- Host: GitHub
- URL: https://github.com/alecrust/suitcss-components-alert
- Owner: AlecRust
- License: mit
- Created: 2018-01-10T15:44:07.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-09-05T09:21:04.000Z (about 6 years ago)
- Last Synced: 2024-10-18T04:13:27.376Z (27 days ago)
- Topics: component, component-css, suitcss
- Language: HTML
- Size: 41 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 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](https://github.com/suitcss/suit/).
## Installation
* [yarn](https://yarnpkg.com/): `yarn add suitcss-components-alert`
* [npm](https://www.npmjs.com/): `npm install suitcss-components-alert`
* Download: [zip](https://github.com/AlecRust/suitcss-components-alert/releases/latest)
## 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:
```html
This is a default alert.
```
```html
This is a success alert.
```
### 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](https://github.com/postcss/postcss-bem-linter) and [stylelint](https://stylelint.io/)
```
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+