Skip to content

Commit 236ba4e

Browse files
AlecRustAlecRust
committed
Initial commit
0 parents  commit 236ba4e

File tree

11 files changed

+2858
-0
lines changed

11 files changed

+2858
-0
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
build
2+
node_modules

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
### HEAD
2+
3+
### 1.0.0 (Jan 10, 2018)
4+
5+
* Initial release.

‎LICENSE.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
Copyright (c) Alec Rust
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy of
4+
this software and associated documentation files (the "Software"), to deal in
5+
the Software without restriction, including without limitation the rights to
6+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
7+
of the Software, and to permit persons to whom the Software is furnished to do
8+
so, subject to the following conditions:
9+
10+
The above copyright notice and this permission notice shall be included in all
11+
copies or substantial portions of the Software.
12+
13+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19+
SOFTWARE.

‎README.md‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
# SUIT CSS components-alert
2+
3+
A SUIT CSS component that provides a structural UI alert template to be
4+
extended with modifiers.
5+
6+
Read more about [SUIT CSS's design principles](https://github.com/suitcss/suit/).
7+
8+
## Installation
9+
10+
* [yarn](https://yarnpkg.com/): `yarn add suitcss-components-alert`
11+
* [npm](https://www.npmjs.com/): `npm install suitcss-components-alert`
12+
* Download: [zip](https://github.com/AlecRust/suitcss-components-button/releases/latest)
13+
14+
## Available classes
15+
16+
### Component structure
17+
18+
* `Alert` - [core] The core alert component
19+
20+
### Modifiers
21+
22+
* `Alert--success` - Applies success colours to the alert
23+
* `Alert--danger` - Applies danger colours to the alert
24+
25+
## Configurable variables
26+
27+
* `--Alert-border-color`
28+
* `--Alert-border-width`
29+
* `--Alert-padding`
30+
31+
* `--Alert-success-background-color`
32+
* `--Alert-success-border-color`
33+
* `--Alert-success-text-color`
34+
35+
* `--Alert-danger-background-color`
36+
* `--Alert-danger-border-color`
37+
* `--Alert-danger-text-color`
38+
39+
## Use
40+
41+
Examples:
42+
43+
```html
44+
<div class="Alert">
45+
This is a default alert.
46+
</div>
47+
```
48+
49+
```html
50+
<div class="Alert Alert--success">
51+
This is a success alert.
52+
</div>
53+
```
54+
55+
### Theming / extending
56+
57+
The CSS is focused on common structural requirements for alerts. You can extend it
58+
with application-specific theme styles in your app.
59+
60+
## Testing
61+
62+
```
63+
yarn install
64+
```
65+
66+
To generate a build:
67+
68+
```
69+
yarn build
70+
```
71+
72+
To lint code with [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) and [stylelint](https://stylelint.io/)
73+
74+
```
75+
yarn lint
76+
```
77+
78+
To generate the testing build.
79+
80+
```
81+
yarn build-test
82+
```
83+
84+
To watch the files for making changes to test:
85+
86+
```
87+
yarn watch
88+
```
89+
90+
Basic visual tests are in `test/index.html`.
91+
92+
## Browser support
93+
94+
* Google Chrome
95+
* Firefox
96+
* Opera
97+
* Safari
98+
* Internet Explorer 9+

‎index.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "./lib/alert.css";

‎index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
require('./lib/alert.css');

‎lib/alert.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/** @define Alert */
2+
3+
:root {
4+
--Alert-border-color: currentcolor;
5+
--Alert-border-width: 1px;
6+
--Alert-padding: 0.75em;
7+
8+
--Alert-success-background-color: #d4edda;
9+
--Alert-success-border-color: #c3e6cb;
10+
--Alert-success-text-color: #155724;
11+
12+
--Alert-danger-background-color: #f8d7da;
13+
--Alert-danger-border-color: #f5c6cb;
14+
--Alert-danger-text-color: #721c24;
15+
}
16+
17+
.Alert {
18+
border: var(--Alert-border-width) solid var(--Alert-border-color);
19+
padding: var(--Alert-padding);
20+
}
21+
22+
/*
23+
* Modifiers
24+
*/
25+
26+
.Alert--success {
27+
background-color: var(--Alert-success-background-color);
28+
border-color: var(--Alert-success-border-color);
29+
color: var(--Alert-success-text-color);
30+
}
31+
32+
.Alert--danger {
33+
background-color: var(--Alert-danger-background-color);
34+
border-color: var(--Alert-danger-border-color);
35+
color: var(--Alert-danger-text-color);
36+
}

‎package.json‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"name": "suitcss-components-alert",
3+
"version": "1.0.0",
4+
"description": "Structural alert styles for SUIT CSS",
5+
"keywords": [
6+
"browser",
7+
"css-components",
8+
"alert",
9+
"suitcss",
10+
"style"
11+
],
12+
"homepage": "https://github.com/AlecRust/suitcss-components-alert#readme",
13+
"bugs": "https://github.com/AlecRust/suitcss-components-alert/labels/bug",
14+
"license": "MIT",
15+
"author": "Alec Rust",
16+
"files": [
17+
"index.css",
18+
"index.js",
19+
"lib"
20+
],
21+
"style": "index.css",
22+
"repository": {
23+
"type": "git",
24+
"url": "git://github.com/AlecRust/suitcss-components-alert.git"
25+
},
26+
"scripts": {
27+
"build": "yarn setup && yarn preprocess",
28+
"build-test": "yarn setup && yarn preprocess-test",
29+
"lint": "suitcss -e index.css build/lint.css && rm build/lint.css",
30+
"preprocess": "suitcss index.css build/build.css",
31+
"preprocess-test": "suitcss -i test test/test.css build/test.css",
32+
"setup": "yarn",
33+
"watch": "yarn preprocess-test -w -v",
34+
"test": "yarn lint"
35+
},
36+
"devDependencies": {
37+
"suitcss-components-test": "*",
38+
"suitcss-preprocessor": "^4.0.0"
39+
}
40+
}

‎test/index.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>Alert [component] - SUIT CSS</title>
4+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
5+
<link rel="stylesheet" href="../build/test.css">
6+
7+
<div class="Test">
8+
<h1 class="Test-title">SUIT CSS: <a href="https://github.com/AlecRust/suitcss-components-alert">Alert</a> component tests</h1>
9+
10+
<h3 class="Test-describe">.Alert</h3>
11+
<h3 class="Test-it">renders default</h3>
12+
<div class="Test-run" id="renders">
13+
<div class="Alert">
14+
This is a default alert.
15+
</div>
16+
</div>
17+
18+
<h3 class="Test-describe">.Alert.Alert--success</h3>
19+
<h3 class="Test-it">renders with success modifier</h3>
20+
<div class="Test-run" id="renders-success">
21+
<div class="Alert Alert--success">
22+
This is a success alert.
23+
</div>
24+
</div>
25+
26+
<h3 class="Test-describe">.Alert.Alert--danger</h3>
27+
<h3 class="Test-it">renders with danger modifier</h3>
28+
<div class="Test-run" id="renders-danger">
29+
<div class="Alert Alert--danger">
30+
This is a danger alert.
31+
</div>
32+
</div>
33+
</div>

‎test/test.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@import "suitcss-components-test";
2+
@import "../index.css";

0 commit comments

Comments
 (0)