zenkit-css 1.0.1 → 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 +106 -88
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,51 +1,81 @@
|
|
|
1
|
-
|
|
1
|
+
<p align="center">
|
|
2
|
+
<a href="https://sayedabdulkarim.github.io/-zenkit-css/docs/">
|
|
3
|
+
<img src="https://raw.githubusercontent.com/sayedabdulkarim/-zenkit-css/main/docs/zenkit-logo.svg" alt="ZenKit" width="120" height="120">
|
|
4
|
+
</a>
|
|
5
|
+
</p>
|
|
6
|
+
|
|
7
|
+
<h3 align="center">ZenKit</h3>
|
|
8
|
+
|
|
9
|
+
<p align="center">
|
|
10
|
+
A minimal, modern CSS framework for peaceful development.
|
|
11
|
+
<br>
|
|
12
|
+
<a href="https://sayedabdulkarim.github.io/-zenkit-css/docs/"><strong>Explore ZenKit docs »</strong></a>
|
|
13
|
+
<br>
|
|
14
|
+
<br>
|
|
15
|
+
<a href="https://github.com/sayedabdulkarim/-zenkit-css/issues/new?labels=bug">Report bug</a>
|
|
16
|
+
·
|
|
17
|
+
<a href="https://github.com/sayedabdulkarim/-zenkit-css/issues/new?labels=feature">Request feature</a>
|
|
18
|
+
</p>
|
|
19
|
+
|
|
20
|
+
<p align="center">
|
|
21
|
+
<a href="https://www.npmjs.com/package/zenkit-css"><img src="https://img.shields.io/npm/v/zenkit-css?color=6366F1&label=npm" alt="npm version"></a>
|
|
22
|
+
<a href="https://www.npmjs.com/package/zenkit-css"><img src="https://img.shields.io/npm/dm/zenkit-css?color=6366F1" alt="npm downloads"></a>
|
|
23
|
+
<a href="https://github.com/sayedabdulkarim/-zenkit-css/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/zenkit-css?color=6366F1" alt="License"></a>
|
|
24
|
+
<a href="https://github.com/sayedabdulkarim/-zenkit-css"><img src="https://img.shields.io/github/stars/sayedabdulkarim/-zenkit-css?style=social" alt="GitHub Stars"></a>
|
|
25
|
+
</p>
|
|
2
26
|
|
|
3
|
-
|
|
27
|
+
---
|
|
4
28
|
|
|
5
|
-
|
|
29
|
+
## ZenKit CSS
|
|
6
30
|
|
|
7
|
-
|
|
31
|
+
The most intuitive and lightweight CSS framework for building modern, responsive websites. Built with CSS Grid, Flexbox, and CSS Variables - zero JavaScript dependencies.
|
|
8
32
|
|
|
9
|
-
|
|
33
|
+
### Why ZenKit?
|
|
10
34
|
|
|
11
|
-
- **Minimal** - Only what you need, nothing more
|
|
12
|
-
- **Modern** - CSS Grid, Flexbox, CSS
|
|
35
|
+
- **Minimal** - Only what you need, nothing more (~500KB minified)
|
|
36
|
+
- **Modern** - CSS Grid, Flexbox, CSS Custom Properties
|
|
13
37
|
- **Accessible** - WCAG AA compliant color contrasts
|
|
14
38
|
- **Dark Mode** - Built-in light/dark theme support
|
|
15
39
|
- **Mobile First** - Responsive from the ground up
|
|
40
|
+
- **48+ Components** - Buttons, Cards, Modal, Forms, Tables & more
|
|
41
|
+
- **1000+ Utilities** - Spacing, Flex, Grid, Colors, Typography
|
|
16
42
|
- **No JavaScript** - Pure CSS, zero dependencies
|
|
17
43
|
|
|
18
|
-
##
|
|
44
|
+
## Quick Start
|
|
19
45
|
|
|
20
|
-
###
|
|
46
|
+
### CDN
|
|
21
47
|
|
|
22
|
-
```
|
|
23
|
-
|
|
48
|
+
```html
|
|
49
|
+
<link rel="stylesheet" href="https://unpkg.com/zenkit-css@latest/dist/zenkit.min.css">
|
|
24
50
|
```
|
|
25
51
|
|
|
26
|
-
###
|
|
52
|
+
### npm
|
|
27
53
|
|
|
28
|
-
```
|
|
29
|
-
|
|
54
|
+
```bash
|
|
55
|
+
npm install zenkit-css
|
|
30
56
|
```
|
|
31
57
|
|
|
32
|
-
### SCSS
|
|
58
|
+
### SCSS
|
|
33
59
|
|
|
34
60
|
```scss
|
|
35
61
|
@use 'zenkit-css/scss/zenkit';
|
|
36
62
|
```
|
|
37
63
|
|
|
38
|
-
##
|
|
64
|
+
## Starter Template
|
|
39
65
|
|
|
40
66
|
```html
|
|
41
67
|
<!DOCTYPE html>
|
|
42
68
|
<html lang="en" data-theme="light">
|
|
43
69
|
<head>
|
|
44
|
-
<
|
|
70
|
+
<meta charset="UTF-8">
|
|
71
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
72
|
+
<link rel="stylesheet" href="https://unpkg.com/zenkit-css@latest/dist/zenkit.min.css">
|
|
73
|
+
<title>Hello ZenKit!</title>
|
|
45
74
|
</head>
|
|
46
75
|
<body>
|
|
47
|
-
<div class="container">
|
|
48
|
-
<h1>Hello ZenKit!</h1>
|
|
76
|
+
<div class="container py-5">
|
|
77
|
+
<h1 class="text-4xl font-bold mb-4">Hello, ZenKit!</h1>
|
|
78
|
+
<p class="text-muted mb-4">Start building beautiful interfaces.</p>
|
|
49
79
|
<button class="btn btn-primary">Get Started</button>
|
|
50
80
|
</div>
|
|
51
81
|
</body>
|
|
@@ -54,80 +84,43 @@ npm install zenkit-css
|
|
|
54
84
|
|
|
55
85
|
## Components
|
|
56
86
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
<
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
<div class="d-grid grid-cols-3 gap-4"></div>
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
### Colors
|
|
83
|
-
```html
|
|
84
|
-
<div class="bg-primary text-white"></div>
|
|
85
|
-
<p class="text-muted bg-gray-100"></p>
|
|
86
|
-
```
|
|
87
|
-
|
|
88
|
-
### Typography
|
|
89
|
-
```html
|
|
90
|
-
<h1 class="text-4xl font-bold">Title</h1>
|
|
91
|
-
<p class="text-sm text-muted">Description</p>
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
## Grid System
|
|
95
|
-
|
|
96
|
-
12-column responsive grid:
|
|
97
|
-
|
|
98
|
-
```html
|
|
99
|
-
<div class="row">
|
|
100
|
-
<div class="col-12 col-md-6 col-lg-4">Column 1</div>
|
|
101
|
-
<div class="col-12 col-md-6 col-lg-4">Column 2</div>
|
|
102
|
-
<div class="col-12 col-md-12 col-lg-4">Column 3</div>
|
|
103
|
-
</div>
|
|
104
|
-
```
|
|
87
|
+
<table>
|
|
88
|
+
<tr>
|
|
89
|
+
<td><strong>Layout</strong></td>
|
|
90
|
+
<td>Container, Grid (12-col), Flexbox utilities</td>
|
|
91
|
+
</tr>
|
|
92
|
+
<tr>
|
|
93
|
+
<td><strong>Content</strong></td>
|
|
94
|
+
<td>Typography, Tables, Images, Figures</td>
|
|
95
|
+
</tr>
|
|
96
|
+
<tr>
|
|
97
|
+
<td><strong>Forms</strong></td>
|
|
98
|
+
<td>Inputs, Select, Checkbox, Radio, Switch, Validation</td>
|
|
99
|
+
</tr>
|
|
100
|
+
<tr>
|
|
101
|
+
<td><strong>Components</strong></td>
|
|
102
|
+
<td>Buttons, Cards, Alerts, Badges, Modal, Tabs, Navbar</td>
|
|
103
|
+
</tr>
|
|
104
|
+
<tr>
|
|
105
|
+
<td><strong>Utilities</strong></td>
|
|
106
|
+
<td>Spacing, Colors, Display, Flex, Sizing, Shadows</td>
|
|
107
|
+
</tr>
|
|
108
|
+
</table>
|
|
105
109
|
|
|
106
110
|
## Dark Mode
|
|
107
111
|
|
|
108
|
-
Toggle
|
|
112
|
+
Toggle with `data-theme` attribute:
|
|
109
113
|
|
|
110
114
|
```html
|
|
111
115
|
<html data-theme="dark">
|
|
112
116
|
```
|
|
113
117
|
|
|
114
|
-
Or
|
|
118
|
+
Or via JavaScript:
|
|
115
119
|
|
|
116
120
|
```javascript
|
|
117
121
|
document.documentElement.setAttribute('data-theme', 'dark');
|
|
118
122
|
```
|
|
119
123
|
|
|
120
|
-
## Breakpoints
|
|
121
|
-
|
|
122
|
-
| Name | Min Width |
|
|
123
|
-
|------|-----------|
|
|
124
|
-
| xs | 0 |
|
|
125
|
-
| sm | 576px |
|
|
126
|
-
| md | 768px |
|
|
127
|
-
| lg | 1024px |
|
|
128
|
-
| xl | 1280px |
|
|
129
|
-
| 2xl | 1536px |
|
|
130
|
-
|
|
131
124
|
## Customization
|
|
132
125
|
|
|
133
126
|
Override CSS variables:
|
|
@@ -143,13 +136,32 @@ Override CSS variables:
|
|
|
143
136
|
Or customize with SCSS:
|
|
144
137
|
|
|
145
138
|
```scss
|
|
146
|
-
// Override variables before import
|
|
147
139
|
$primary: #your-color;
|
|
148
140
|
$border-radius: 8px;
|
|
149
141
|
|
|
150
142
|
@use 'zenkit-css/scss/zenkit';
|
|
151
143
|
```
|
|
152
144
|
|
|
145
|
+
## Breakpoints
|
|
146
|
+
|
|
147
|
+
| Breakpoint | Min Width | Class Prefix |
|
|
148
|
+
|------------|-----------|--------------|
|
|
149
|
+
| xs | 0 | - |
|
|
150
|
+
| sm | 576px | `sm:` |
|
|
151
|
+
| md | 768px | `md:` |
|
|
152
|
+
| lg | 1024px | `lg:` |
|
|
153
|
+
| xl | 1280px | `xl:` |
|
|
154
|
+
| 2xl | 1536px | `2xl:` |
|
|
155
|
+
|
|
156
|
+
## Browser Support
|
|
157
|
+
|
|
158
|
+
<p>
|
|
159
|
+
<img src="https://img.shields.io/badge/Chrome-last%202-green?logo=googlechrome&logoColor=white" alt="Chrome">
|
|
160
|
+
<img src="https://img.shields.io/badge/Firefox-last%202-orange?logo=firefox&logoColor=white" alt="Firefox">
|
|
161
|
+
<img src="https://img.shields.io/badge/Safari-last%202-blue?logo=safari&logoColor=white" alt="Safari">
|
|
162
|
+
<img src="https://img.shields.io/badge/Edge-last%202-blue?logo=microsoftedge&logoColor=white" alt="Edge">
|
|
163
|
+
</p>
|
|
164
|
+
|
|
153
165
|
## Development
|
|
154
166
|
|
|
155
167
|
```bash
|
|
@@ -166,17 +178,23 @@ npm run watch
|
|
|
166
178
|
npm run dev
|
|
167
179
|
```
|
|
168
180
|
|
|
169
|
-
##
|
|
181
|
+
## Community
|
|
182
|
+
|
|
183
|
+
Get updates on ZenKit's development and chat with the community:
|
|
184
|
+
|
|
185
|
+
- Follow [@sayedabdulkarim](https://twitter.com/sayedabdulkarim) on Twitter
|
|
186
|
+
- Read and subscribe to [The Official ZenKit Blog](#)
|
|
187
|
+
|
|
188
|
+
## Contributing
|
|
170
189
|
|
|
171
|
-
|
|
172
|
-
- Firefox (last 2 versions)
|
|
173
|
-
- Safari (last 2 versions)
|
|
174
|
-
- Edge (last 2 versions)
|
|
190
|
+
Please read through our [contributing guidelines](https://github.com/sayedabdulkarim/-zenkit-css/blob/main/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
|
|
175
191
|
|
|
176
192
|
## License
|
|
177
193
|
|
|
178
|
-
MIT
|
|
194
|
+
Code released under the [MIT License](https://github.com/sayedabdulkarim/-zenkit-css/blob/main/LICENSE).
|
|
179
195
|
|
|
180
196
|
---
|
|
181
197
|
|
|
182
|
-
|
|
198
|
+
<p align="center">
|
|
199
|
+
Made with ❤️ by <a href="https://github.com/sayedabdulkarim">Sayed Abdul Karim</a>
|
|
200
|
+
</p>
|