@oardi/css-utils 0.54.0 → 0.55.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/readme.md +100 -23
- package/scss/components/alert.scss +75 -0
- package/scss/components/toast.scss +2 -2
- package/scss/index.scss +1 -0
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -1,61 +1,138 @@
|
|
|
1
1
|
# CSS Utils
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A lightweight frontend style toolkit built with SCSS, CSS variables and cascade layers.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
CSS Utils provides utility classes, responsive helpers and reusable component styles for building modern layouts without writing repetitive custom CSS.
|
|
6
|
+
|
|
7
|
+
## Features
|
|
8
|
+
|
|
9
|
+
- Utility classes for colors, typography, spacing, display, flex and grid
|
|
10
|
+
- Mobile-first responsive variants
|
|
11
|
+
- Reusable component styles for buttons, cards, forms, badges, tabs, toasts and more
|
|
12
|
+
- Customizable design tokens based on CSS variables
|
|
13
|
+
- Organized with CSS cascade layers
|
|
6
14
|
|
|
7
15
|
## Showcase
|
|
8
16
|
|
|
9
|
-
- Browse the
|
|
10
|
-
-
|
|
17
|
+
- Browse the showcase: [css-utils.oardi.com](https://css-utils.oardi.com/)
|
|
18
|
+
- Try it on StackBlitz: [StackBlitz Demo](https://stackblitz.com/edit/oardi-css-utils/)
|
|
11
19
|
|
|
12
20
|
## Setup
|
|
13
21
|
|
|
14
22
|
### Install npm package
|
|
15
23
|
|
|
16
|
-
```
|
|
24
|
+
```bash
|
|
17
25
|
npm i @oardi/css-utils
|
|
18
26
|
```
|
|
19
27
|
|
|
20
|
-
###
|
|
28
|
+
### Create a layer order
|
|
29
|
+
|
|
30
|
+
To ensure correct cascade layer ordering, create a `layers.scss` file:
|
|
31
|
+
|
|
32
|
+
```scss
|
|
33
|
+
@layer reset, base, components, utilities;
|
|
34
|
+
```
|
|
21
35
|
|
|
22
|
-
Import
|
|
36
|
+
Import it before the library styles:
|
|
23
37
|
|
|
24
38
|
```scss
|
|
25
|
-
@use '
|
|
39
|
+
@use 'layers.scss';
|
|
40
|
+
// ...
|
|
26
41
|
```
|
|
27
42
|
|
|
28
|
-
###
|
|
43
|
+
### Import the library
|
|
44
|
+
|
|
45
|
+
Import the full library with all utilities, responsive helpers and component styles:
|
|
46
|
+
|
|
47
|
+
```scss
|
|
48
|
+
@use '@oardi/css-utils/scss/index.scss';
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Usage
|
|
52
|
+
|
|
53
|
+
### Utility classes
|
|
29
54
|
|
|
30
55
|
```html
|
|
31
|
-
<div class="text-center">some text</div>
|
|
56
|
+
<div class="text-center bg-primary p-3">some text</div>
|
|
32
57
|
```
|
|
33
58
|
|
|
34
|
-
This
|
|
59
|
+
This creates a centered text block with background color and padding.
|
|
35
60
|
|
|
36
|
-
|
|
37
|
-
|
|
61
|
+
### Responsive utilities
|
|
62
|
+
|
|
63
|
+
```html
|
|
64
|
+
<div class="grid">
|
|
65
|
+
<div class="col-12 col-md-6 col-lg-4">Responsive column</div>
|
|
38
66
|
</div>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
Utilities are mobile-first. Classes without a breakpoint apply to all screen sizes, while breakpoint variants apply from the defined breakpoint and up.
|
|
70
|
+
|
|
71
|
+
### Component classes
|
|
72
|
+
|
|
73
|
+
```html
|
|
74
|
+
<button class="btn btn-primary btn-solid" type="button">some button text</button>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
### Component variants
|
|
78
|
+
|
|
79
|
+
Many components follow the same pattern:
|
|
80
|
+
|
|
81
|
+
```text
|
|
82
|
+
Base class → .btn
|
|
83
|
+
Color class → .btn-primary
|
|
84
|
+
Variant class → .btn-solid
|
|
85
|
+
Size class → .btn-sm
|
|
86
|
+
State class → .is-active
|
|
87
|
+
```
|
|
39
88
|
|
|
40
|
-
|
|
89
|
+
Example:
|
|
41
90
|
|
|
42
91
|
```html
|
|
43
|
-
<button class="btn btn-
|
|
92
|
+
<button class="btn btn-primary btn-outline btn-sm" type="button">Small outline button</button>
|
|
44
93
|
```
|
|
45
94
|
|
|
46
|
-
|
|
95
|
+
### Customization
|
|
96
|
+
|
|
97
|
+
CSS Utils is based on CSS variables, so you can customize the look of the system from your own stylesheet.
|
|
98
|
+
|
|
99
|
+
```scss
|
|
100
|
+
:root {
|
|
101
|
+
--primary: #0057ff;
|
|
102
|
+
--on-primary: #ffffff;
|
|
103
|
+
|
|
104
|
+
--bg-body: #fdfdfd;
|
|
105
|
+
--bg-surface: #ffffff;
|
|
106
|
+
--bg-inverse: var(--gray-900);
|
|
107
|
+
|
|
108
|
+
--text-color: var(--gray-900);
|
|
109
|
+
--text-inverse: #ffffff;
|
|
110
|
+
|
|
111
|
+
--border-radius: 0.5rem;
|
|
112
|
+
}
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
You can also override component variables locally:
|
|
116
|
+
|
|
117
|
+
```html
|
|
118
|
+
<button class="btn btn-primary btn-solid" type="button" style="--button-border-radius: 9999px;">Rounded button</button>
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
## Documentation
|
|
122
|
+
|
|
123
|
+
The full documentation and showcase are available at:
|
|
47
124
|
|
|
48
|
-
|
|
125
|
+
[https://css-utils.oardi.com](https://css-utils.oardi.com/)
|
|
49
126
|
|
|
50
|
-
|
|
127
|
+
## Maintainer
|
|
51
128
|
|
|
52
129
|
Developed and maintained by [Ardian Shala](https://github.com/oardi)
|
|
53
130
|
|
|
54
|
-
|
|
131
|
+
## Credits and inspiration
|
|
55
132
|
|
|
56
|
-
|
|
133
|
+
CSS Utils is inspired by ideas and patterns from:
|
|
57
134
|
|
|
58
|
-
- [
|
|
59
|
-
- [
|
|
60
|
-
- [
|
|
135
|
+
- [Bootstrap](https://getbootstrap.com/)
|
|
136
|
+
- [Tailwind CSS](https://tailwindcss.com/)
|
|
137
|
+
- [Font Awesome](https://fontawesome.com/)
|
|
61
138
|
- [Nuxt](https://nuxt.com/)
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
.alert {
|
|
3
|
+
--alert-padding-y: var(--spacer-3);
|
|
4
|
+
--alert-padding-x: var(--spacer-3);
|
|
5
|
+
--alert-bg-color: var(--bg-surface);
|
|
6
|
+
--alert-color: var(--text-color);
|
|
7
|
+
--alert-border-width: var(--border-width);
|
|
8
|
+
--alert-border-color: var(--border-color);
|
|
9
|
+
--alert-border-radius: var(--border-radius);
|
|
10
|
+
--alert-gap: var(--spacer-2);
|
|
11
|
+
|
|
12
|
+
display: flex;
|
|
13
|
+
align-items: flex-start;
|
|
14
|
+
gap: var(--alert-gap);
|
|
15
|
+
width: 100%;
|
|
16
|
+
padding: var(--alert-padding-y) var(--alert-padding-x);
|
|
17
|
+
color: var(--alert-color);
|
|
18
|
+
background-color: var(--alert-bg-color);
|
|
19
|
+
border: var(--alert-border-width) solid var(--alert-border-color);
|
|
20
|
+
border-radius: var(--alert-border-radius);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.alert-icon {
|
|
24
|
+
display: inline-flex;
|
|
25
|
+
flex-shrink: 0;
|
|
26
|
+
color: inherit;
|
|
27
|
+
fill: currentColor;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.alert-content {
|
|
31
|
+
flex: 1;
|
|
32
|
+
min-width: 0;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.alert-title {
|
|
36
|
+
margin: 0;
|
|
37
|
+
font-weight: 600;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.alert-message {
|
|
41
|
+
margin: 0;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.alert-actions {
|
|
45
|
+
display: inline-flex;
|
|
46
|
+
align-items: center;
|
|
47
|
+
gap: var(--spacer-1);
|
|
48
|
+
flex-shrink: 0;
|
|
49
|
+
margin-inline-start: auto;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.alert-action.btn {
|
|
53
|
+
--button-color: currentColor;
|
|
54
|
+
--button-color-hover: currentColor;
|
|
55
|
+
--button-color-active: currentColor;
|
|
56
|
+
--button-on-color: currentColor;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.alert-close.icon-btn {
|
|
60
|
+
--icon-button-color: currentColor;
|
|
61
|
+
--icon-button-color-hover: currentColor;
|
|
62
|
+
--icon-button-color-active: currentColor;
|
|
63
|
+
--icon-button-on-color: currentColor;
|
|
64
|
+
|
|
65
|
+
flex-shrink: 0;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.alert-content + .alert-close {
|
|
69
|
+
margin-inline-start: auto;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.alert-actions + .alert-close {
|
|
73
|
+
margin-inline-start: var(--spacer-1);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
@@ -51,14 +51,14 @@
|
|
|
51
51
|
margin-inline-start: auto;
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
-
.toast-action {
|
|
54
|
+
.toast-action.btn {
|
|
55
55
|
--button-color: currentColor;
|
|
56
56
|
--button-color-hover: currentColor;
|
|
57
57
|
--button-color-active: currentColor;
|
|
58
58
|
--button-on-color: currentColor;
|
|
59
59
|
}
|
|
60
60
|
|
|
61
|
-
.toast-close {
|
|
61
|
+
.toast-close.icon-btn {
|
|
62
62
|
--icon-button-color: currentColor;
|
|
63
63
|
--icon-button-color-hover: currentColor;
|
|
64
64
|
--icon-button-color-active: currentColor;
|