@oardi/css-utils 0.19.6 → 0.20.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 +5 -26
- package/scss/utilities.scss +10 -8
- package/scss/variables.scss +1 -1
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -2,11 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
Powerful set of CSS Utility classes for Colors, Typography, Spacings, Flex and CSS Grid.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Showcase
|
|
6
6
|
|
|
7
7
|
Browse the Showcase [here](https://css-utils.oardi.com/)
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
## Setup
|
|
10
|
+
|
|
11
|
+
### Install npm package
|
|
10
12
|
|
|
11
13
|
```
|
|
12
14
|
npm i @oardi/css-utils
|
|
@@ -14,36 +16,13 @@ npm i @oardi/css-utils
|
|
|
14
16
|
|
|
15
17
|
### Import SCSS files
|
|
16
18
|
|
|
17
|
-
#### Option 1 - Import full library
|
|
18
|
-
|
|
19
19
|
This will import the theme with all utility classes and their responsive classes as well as predefined components. This will result in a bundle size around 44kb.
|
|
20
20
|
|
|
21
21
|
```scss
|
|
22
|
-
@use '@oardi/css-
|
|
22
|
+
@use '@oardi/css-utilss/scss/index.scss';
|
|
23
23
|
@use '@oardi/css-utils/scss/components.scss';
|
|
24
24
|
```
|
|
25
25
|
|
|
26
|
-
#### Option 2 - Import minimal set only
|
|
27
|
-
|
|
28
|
-
To reduce the bundle size, import only what you really need or use a tool like PurgeCSS.
|
|
29
|
-
|
|
30
|
-
Example of a minimal set for colors, typography and spacings like margins and paddings.
|
|
31
|
-
|
|
32
|
-
```scss
|
|
33
|
-
@use '@oardi/css-utils/scss/variables.scss';
|
|
34
|
-
@use '@oardi/css-utils/scss/typography.scss';
|
|
35
|
-
@use '@oardi/css-utils/scss/spacings.scss';
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
#### Option 3 - Import specific component only
|
|
39
|
-
|
|
40
|
-
You can import only specific predefined components as well.
|
|
41
|
-
|
|
42
|
-
```scss
|
|
43
|
-
@use '@oardi/css-utils/scss/variables.scss';
|
|
44
|
-
@use '@oardi/css-utils/scss/components/button.scss';
|
|
45
|
-
```
|
|
46
|
-
|
|
47
26
|
### Use Utility classes
|
|
48
27
|
|
|
49
28
|
```html
|
package/scss/utilities.scss
CHANGED
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
@use 'sass:map';
|
|
2
2
|
@use './theme.scss';
|
|
3
3
|
|
|
4
|
+
.d-block {
|
|
5
|
+
display: block;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.d-inline-block {
|
|
9
|
+
display: inline-block;
|
|
10
|
+
}
|
|
11
|
+
|
|
4
12
|
.d-none {
|
|
5
13
|
display: none;
|
|
6
14
|
}
|
|
@@ -16,15 +24,9 @@
|
|
|
16
24
|
max-width: var(--container);
|
|
17
25
|
margin-left: auto;
|
|
18
26
|
margin-right: auto;
|
|
19
|
-
padding-left:
|
|
20
|
-
padding-right:
|
|
27
|
+
padding-left: 1rem;
|
|
28
|
+
padding-right: 1rem;
|
|
21
29
|
width: 100%;
|
|
22
|
-
|
|
23
|
-
// use breakpoint utility
|
|
24
|
-
@media (max-width: 576px) {
|
|
25
|
-
padding-left: 1.25rem;
|
|
26
|
-
padding-right: 1.25rem;
|
|
27
|
-
}
|
|
28
30
|
}
|
|
29
31
|
|
|
30
32
|
.text-center {
|
package/scss/variables.scss
CHANGED