ui8kit 1.0.2 → 1.0.3
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 +20 -8
- package/css/dist/styles.css +3325 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -61,11 +61,13 @@ Since semantic CSS files contain Tailwind directives (`@apply`), they must be pr
|
|
|
61
61
|
|
|
62
62
|
```bash
|
|
63
63
|
# Install the CSS package
|
|
64
|
-
npm install ui8kit
|
|
64
|
+
npm install ui8kit@latest
|
|
65
65
|
# or
|
|
66
|
-
yarn add ui8kit
|
|
66
|
+
yarn add ui8kit@latest
|
|
67
67
|
# or
|
|
68
|
-
pnpm add ui8kit
|
|
68
|
+
pnpm add ui8kit@latest
|
|
69
|
+
# or
|
|
70
|
+
bun add ui8kit@latest
|
|
69
71
|
```
|
|
70
72
|
|
|
71
73
|
### Import in your CSS/SCSS files
|
|
@@ -90,8 +92,8 @@ Semantic CSS files contain Tailwind directives that need compilation:
|
|
|
90
92
|
@apply bg-primary text-primary-foreground shadow-xs hover:bg-primary/90;
|
|
91
93
|
}
|
|
92
94
|
|
|
93
|
-
.button-
|
|
94
|
-
@apply bg-
|
|
95
|
+
.button-secondary {
|
|
96
|
+
@apply bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/90;
|
|
95
97
|
}
|
|
96
98
|
```
|
|
97
99
|
|
|
@@ -125,6 +127,11 @@ For projects that prefer CDN over CLI installation:
|
|
|
125
127
|
|
|
126
128
|
#### Full Semantic Stylesheet
|
|
127
129
|
```html
|
|
130
|
+
<!-- Tailwind 4 CDN for DEV MODE -->
|
|
131
|
+
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
|
132
|
+
<!-- OR Tailwind 3 CDN for DEV MODE -->
|
|
133
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
134
|
+
|
|
128
135
|
<!-- Load complete semantic components -->
|
|
129
136
|
<link rel="stylesheet" href="https://unpkg.com/ui8kit@1.0.1/css/dist/semantic/index.css">
|
|
130
137
|
<!-- OR -->
|
|
@@ -163,7 +170,7 @@ import { Card } from '@/semantic/ui/card'
|
|
|
163
170
|
function App() {
|
|
164
171
|
return (
|
|
165
172
|
<Card>
|
|
166
|
-
<Button variant="
|
|
173
|
+
<Button variant="secondary">Semantic Button</Button>
|
|
167
174
|
</Card>
|
|
168
175
|
)
|
|
169
176
|
}
|
|
@@ -174,13 +181,18 @@ function App() {
|
|
|
174
181
|
<!DOCTYPE html>
|
|
175
182
|
<html>
|
|
176
183
|
<head>
|
|
184
|
+
<!-- Tailwind 4 CDN for DEV MODE -->
|
|
185
|
+
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
|
186
|
+
<!-- OR Tailwind 3 CDN for DEV MODE -->
|
|
187
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
188
|
+
|
|
177
189
|
<!-- Load semantic styles -->
|
|
178
190
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui8kit@latest/css/dist/semantic/index.css">
|
|
179
191
|
</head>
|
|
180
192
|
<body>
|
|
181
193
|
<!-- Use semantic classes directly -->
|
|
182
|
-
<div class="
|
|
183
|
-
<button class="
|
|
194
|
+
<div class="card">
|
|
195
|
+
<button class="button button-secondary button-lg">
|
|
184
196
|
Semantic Button
|
|
185
197
|
</button>
|
|
186
198
|
</div>
|