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