@nuvoui/core 0.2.1 → 0.3.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/README.md +89 -4
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/main.css +1 -1
- package/package.json +21 -4
- package/src/styles/layouts/_flex.scss +38 -40
- package/src/styles/utilities/_position.scss +5 -5
- package/src/styles/utilities/_spacing.scss +14 -15
package/README.md
CHANGED
|
@@ -6,9 +6,37 @@ NuvoUI isn’t your next shiny, over-engineered UI library. It’s raw, lightwei
|
|
|
6
6
|
|
|
7
7
|
## Why NuvoUI?
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
> Simple to start, grows with you.
|
|
10
|
+
|
|
11
|
+
We do not like prefixes. Why make a button like this
|
|
12
|
+
|
|
13
|
+
```html
|
|
14
|
+
<button class="btn btn-lg btn-primary btn-round py-40" >...
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
when you can have, this
|
|
18
|
+
|
|
19
|
+
```html
|
|
20
|
+
<button class="btn lg primary pill outline py-40" >...
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
But wait, there is more... lets make it fully responsei
|
|
24
|
+
```html
|
|
25
|
+
<button class="btn lg primary pill outline
|
|
26
|
+
py-40
|
|
27
|
+
py-20@sm
|
|
28
|
+
py-80@lg
|
|
29
|
+
outline" >...
|
|
30
|
+
```
|
|
31
|
+
This will
|
|
32
|
+
|
|
33
|
+
1. Use `padding-left: 40px;` and `padding-right: 40px;` as base
|
|
34
|
+
2. Use `padding-left: 20px;` and `padding-right: 20px;` @ small screen
|
|
35
|
+
3. Use `padding-left: 80px;` and `padding-right: 80px;` @ large screen
|
|
36
|
+
|
|
37
|
+
see this feels easy to us to remember ...
|
|
38
|
+
|
|
39
|
+
|
|
12
40
|
|
|
13
41
|
---
|
|
14
42
|
|
|
@@ -16,4 +44,61 @@ NuvoUI isn’t your next shiny, over-engineered UI library. It’s raw, lightwei
|
|
|
16
44
|
|
|
17
45
|
1. **Install via npm**
|
|
18
46
|
```bash
|
|
19
|
-
npm install
|
|
47
|
+
npm install @nuvoui/core
|
|
48
|
+
- or
|
|
49
|
+
pnpm install @nuvoui/core
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
2. **Import SASS**
|
|
53
|
+
|
|
54
|
+
```scss
|
|
55
|
+
@use '@nuvoui/core/src/styles/index.scss' as NuvoUI with (
|
|
56
|
+
$column-count: 25,
|
|
57
|
+
$color-dark: #1A1A1A,
|
|
58
|
+
$color-warning: #F8AF08,
|
|
59
|
+
$color-success: #34C759,
|
|
60
|
+
...
|
|
61
|
+
);
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
Another example
|
|
66
|
+
|
|
67
|
+
```scss
|
|
68
|
+
img:nth-child(1) {
|
|
69
|
+
@include NuvoUI.mx-auto;
|
|
70
|
+
@include NuvoUI.my(40);
|
|
71
|
+
@include NuvoUI.animate-move((
|
|
72
|
+
horizontal: 3%,
|
|
73
|
+
duration: 25s,
|
|
74
|
+
));
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
will result in (*psst: dont worry, we are using caching...*)
|
|
79
|
+
```css
|
|
80
|
+
img:nth-child(1) {
|
|
81
|
+
margin-left: auto;
|
|
82
|
+
margin-right: auto;
|
|
83
|
+
margin-top: 40px !important;
|
|
84
|
+
margin-bottom: 40px !important;
|
|
85
|
+
animation: anim-bounce-0per-3per 25s ease-in-out infinite;
|
|
86
|
+
}
|
|
87
|
+
@keyframes anim-bounce-0per-3per {
|
|
88
|
+
0% {
|
|
89
|
+
transform: translateX(-0%) translateY(-3%);
|
|
90
|
+
}
|
|
91
|
+
50% {
|
|
92
|
+
transform: translateX(0%) translateY(3%);
|
|
93
|
+
}
|
|
94
|
+
100% {
|
|
95
|
+
transform: translateX(-0%) translateY(-3%);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
## There are so many things to do, and we do need to make a documentation. Stay tuned...
|
|
103
|
+
|
|
104
|
+
|