ui8kit 1.0.2 → 1.0.4
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 +17 -36
- 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
|
|
|
@@ -119,39 +121,18 @@ module.exports = {
|
|
|
119
121
|
|
|
120
122
|
**Note**: CDN links with `@import` URLs will remain as external references and won't be processed by Tailwind's build system.
|
|
121
123
|
|
|
122
|
-
### CDN Integration
|
|
124
|
+
### CDN Integration
|
|
123
125
|
|
|
124
126
|
For projects that prefer CDN over CLI installation:
|
|
125
127
|
|
|
126
|
-
####
|
|
128
|
+
#### Compiled Semantic Stylesheet
|
|
127
129
|
```html
|
|
128
|
-
<!-- Load
|
|
129
|
-
<link rel="stylesheet" href="https://
|
|
130
|
+
<!-- Load compiled semantic components -->
|
|
131
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui8kit@latest/css/dist/styles.css">
|
|
130
132
|
<!-- OR -->
|
|
131
|
-
<link rel="stylesheet" href="https://
|
|
133
|
+
<link rel="stylesheet" href="https://unpkg.com/ui8kit@latest/css/dist/styles.css">
|
|
132
134
|
```
|
|
133
135
|
|
|
134
|
-
#### Individual Component Stylesheets
|
|
135
|
-
```html
|
|
136
|
-
<!-- Load only specific components you need -->
|
|
137
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui8kit@latest/css/dist/semantic/button.css">
|
|
138
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui8kit@latest/css/dist/semantic/card.css">
|
|
139
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui8kit@latest/css/dist/semantic/input.css">
|
|
140
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui8kit@latest/css/dist/semantic/alert.css">
|
|
141
|
-
```
|
|
142
|
-
|
|
143
|
-
#### Available Individual Components
|
|
144
|
-
- `button.css` - Enhanced button styles
|
|
145
|
-
- `card.css` - Card component layouts
|
|
146
|
-
- `input.css` - Form input styling
|
|
147
|
-
- `alert.css` - Alert and notification styles
|
|
148
|
-
- `badge.css` - Badge and label components
|
|
149
|
-
- `avatar.css` - User avatar components
|
|
150
|
-
- `table.css` - Data table styling
|
|
151
|
-
- `pagination.css` - Navigation pagination
|
|
152
|
-
- `breadcrumb.css` - Navigation breadcrumbs
|
|
153
|
-
- `skeleton.css` - Loading skeleton states
|
|
154
|
-
|
|
155
136
|
### Usage Examples
|
|
156
137
|
|
|
157
138
|
#### With CLI Installation
|
|
@@ -163,7 +144,7 @@ import { Card } from '@/semantic/ui/card'
|
|
|
163
144
|
function App() {
|
|
164
145
|
return (
|
|
165
146
|
<Card>
|
|
166
|
-
<Button variant="
|
|
147
|
+
<Button variant="secondary">Semantic Button</Button>
|
|
167
148
|
</Card>
|
|
168
149
|
)
|
|
169
150
|
}
|
|
@@ -174,13 +155,13 @@ function App() {
|
|
|
174
155
|
<!DOCTYPE html>
|
|
175
156
|
<html>
|
|
176
157
|
<head>
|
|
177
|
-
<!-- Load semantic styles -->
|
|
178
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui8kit@latest/css/dist/
|
|
158
|
+
<!-- Load compiled semantic styles -->
|
|
159
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui8kit@latest/css/dist/styles.css">
|
|
179
160
|
</head>
|
|
180
161
|
<body>
|
|
181
162
|
<!-- Use semantic classes directly -->
|
|
182
|
-
<div class="
|
|
183
|
-
<button class="
|
|
163
|
+
<div class="card">
|
|
164
|
+
<button class="button button-secondary button-lg">
|
|
184
165
|
Semantic Button
|
|
185
166
|
</button>
|
|
186
167
|
</div>
|