zenkit-css 1.0.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.
Files changed (96) hide show
  1. package/README.md +182 -0
  2. package/dist/zenkit.css +33721 -0
  3. package/dist/zenkit.css.map +1 -0
  4. package/dist/zenkit.min.css +1 -0
  5. package/dist/zenkit.min.css.map +1 -0
  6. package/package.json +41 -0
  7. package/scss/abstracts/_functions.scss +174 -0
  8. package/scss/abstracts/_mixins.scss +272 -0
  9. package/scss/abstracts/_variables.scss +216 -0
  10. package/scss/base/_reset.scss +130 -0
  11. package/scss/base/_root.scss +194 -0
  12. package/scss/base/_typography.scss +271 -0
  13. package/scss/components/_accordion.scss +200 -0
  14. package/scss/components/_affix.scss +278 -0
  15. package/scss/components/_alerts.scss +175 -0
  16. package/scss/components/_anchor.scss +438 -0
  17. package/scss/components/_autocomplete.scss +530 -0
  18. package/scss/components/_avatar.scss +256 -0
  19. package/scss/components/_backtop.scss +329 -0
  20. package/scss/components/_badges.scss +266 -0
  21. package/scss/components/_breadcrumb.scss +102 -0
  22. package/scss/components/_buttons.scss +340 -0
  23. package/scss/components/_calendar.scss +787 -0
  24. package/scss/components/_cards.scss +265 -0
  25. package/scss/components/_carousel.scss +306 -0
  26. package/scss/components/_cascader.scss +510 -0
  27. package/scss/components/_close-button.scss +106 -0
  28. package/scss/components/_colorpicker.scss +593 -0
  29. package/scss/components/_datepicker.scss +625 -0
  30. package/scss/components/_descriptions.scss +453 -0
  31. package/scss/components/_divider.scss +253 -0
  32. package/scss/components/_drawer.scss +485 -0
  33. package/scss/components/_dropdown.scss +323 -0
  34. package/scss/components/_empty.scss +321 -0
  35. package/scss/components/_floatbutton.scss +400 -0
  36. package/scss/components/_forms.scss +753 -0
  37. package/scss/components/_image.scss +497 -0
  38. package/scss/components/_inputnumber.scss +475 -0
  39. package/scss/components/_layout.scss +538 -0
  40. package/scss/components/_list-group.scss +227 -0
  41. package/scss/components/_list.scss +528 -0
  42. package/scss/components/_mentions.scss +479 -0
  43. package/scss/components/_menu.scss +510 -0
  44. package/scss/components/_message.scss +412 -0
  45. package/scss/components/_modal.scss +304 -0
  46. package/scss/components/_navbar.scss +329 -0
  47. package/scss/components/_notification.scss +499 -0
  48. package/scss/components/_offcanvas.scss +274 -0
  49. package/scss/components/_pagination.scss +176 -0
  50. package/scss/components/_placeholder.scss +237 -0
  51. package/scss/components/_popconfirm.scss +393 -0
  52. package/scss/components/_popover.scss +298 -0
  53. package/scss/components/_progress.scss +225 -0
  54. package/scss/components/_rating.scss +314 -0
  55. package/scss/components/_result.scss +383 -0
  56. package/scss/components/_segmented.scss +441 -0
  57. package/scss/components/_select.scss +412 -0
  58. package/scss/components/_spinners.scss +229 -0
  59. package/scss/components/_statistic.scss +336 -0
  60. package/scss/components/_steps.scss +343 -0
  61. package/scss/components/_tabs.scss +239 -0
  62. package/scss/components/_tag.scss +317 -0
  63. package/scss/components/_timeline.scss +341 -0
  64. package/scss/components/_timepicker.scss +468 -0
  65. package/scss/components/_toast.scss +279 -0
  66. package/scss/components/_tooltip.scss +305 -0
  67. package/scss/components/_tour.scss +488 -0
  68. package/scss/components/_transfer.scss +556 -0
  69. package/scss/components/_tree.scss +518 -0
  70. package/scss/components/_treeselect.scss +531 -0
  71. package/scss/components/_upload.scss +510 -0
  72. package/scss/components/_watermark.scss +314 -0
  73. package/scss/content/_figures.scss +38 -0
  74. package/scss/content/_images.scss +138 -0
  75. package/scss/content/_tables.scss +232 -0
  76. package/scss/layout/_container.scss +71 -0
  77. package/scss/layout/_grid.scss +258 -0
  78. package/scss/utilities/_animations.scss +494 -0
  79. package/scss/utilities/_borders.scss +246 -0
  80. package/scss/utilities/_colors.scss +194 -0
  81. package/scss/utilities/_display.scss +263 -0
  82. package/scss/utilities/_filters.scss +328 -0
  83. package/scss/utilities/_flex.scss +178 -0
  84. package/scss/utilities/_float.scss +70 -0
  85. package/scss/utilities/_grid-utils.scss +151 -0
  86. package/scss/utilities/_helpers.scss +479 -0
  87. package/scss/utilities/_interactions.scss +249 -0
  88. package/scss/utilities/_overflow.scss +204 -0
  89. package/scss/utilities/_position.scss +245 -0
  90. package/scss/utilities/_shadows.scss +67 -0
  91. package/scss/utilities/_sizing.scss +217 -0
  92. package/scss/utilities/_spacing.scss +207 -0
  93. package/scss/utilities/_text.scss +237 -0
  94. package/scss/utilities/_transforms.scss +368 -0
  95. package/scss/utilities/_visibility.scss +251 -0
  96. package/scss/zenkit.scss +121 -0
package/README.md ADDED
@@ -0,0 +1,182 @@
1
+ # ZenKit
2
+
3
+ [![GitHub](https://img.shields.io/github/stars/sayedabdulkarim/-zenkit-css?style=social)](https://github.com/sayedabdulkarim/-zenkit-css)
4
+
5
+ > A minimal, modern CSS framework for peaceful development
6
+
7
+ [Documentation](https://sayedabdulkarim.github.io/-zenkit-css/docs/) | [GitHub](https://github.com/sayedabdulkarim/-zenkit-css)
8
+
9
+ ## Features
10
+
11
+ - **Minimal** - Only what you need, nothing more
12
+ - **Modern** - CSS Grid, Flexbox, CSS Variables
13
+ - **Accessible** - WCAG AA compliant color contrasts
14
+ - **Dark Mode** - Built-in light/dark theme support
15
+ - **Mobile First** - Responsive from the ground up
16
+ - **No JavaScript** - Pure CSS, zero dependencies
17
+
18
+ ## Installation
19
+
20
+ ### NPM
21
+
22
+ ```bash
23
+ npm install zenkit-css
24
+ ```
25
+
26
+ ### CDN
27
+
28
+ ```html
29
+ <link rel="stylesheet" href="path/to/zenkit.min.css">
30
+ ```
31
+
32
+ ### SCSS Import
33
+
34
+ ```scss
35
+ @use 'zenkit-css/scss/zenkit';
36
+ ```
37
+
38
+ ## Quick Start
39
+
40
+ ```html
41
+ <!DOCTYPE html>
42
+ <html lang="en" data-theme="light">
43
+ <head>
44
+ <link rel="stylesheet" href="zenkit.min.css">
45
+ </head>
46
+ <body>
47
+ <div class="container">
48
+ <h1>Hello ZenKit!</h1>
49
+ <button class="btn btn-primary">Get Started</button>
50
+ </div>
51
+ </body>
52
+ </html>
53
+ ```
54
+
55
+ ## Components
56
+
57
+ - **Buttons** - Solid, outline, ghost, sizes, groups
58
+ - **Cards** - Header, body, footer, variants
59
+ - **Forms** - Inputs, selects, checkboxes, switches, validation
60
+ - **Navbar** - Responsive navigation with variants
61
+ - **Alerts** - Success, warning, danger, info
62
+ - **Badges** - Solid, soft, outline, pills
63
+ - **Modal** - Dialogs with sizes
64
+
65
+ ## Utilities
66
+
67
+ ### Spacing
68
+ ```html
69
+ <div class="p-4 m-2 mt-4 mb-2 mx-auto"></div>
70
+ ```
71
+
72
+ ### Flexbox
73
+ ```html
74
+ <div class="d-flex justify-between items-center gap-4"></div>
75
+ ```
76
+
77
+ ### Grid
78
+ ```html
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
+ ```
105
+
106
+ ## Dark Mode
107
+
108
+ Toggle dark mode with `data-theme` attribute:
109
+
110
+ ```html
111
+ <html data-theme="dark">
112
+ ```
113
+
114
+ Or use JavaScript:
115
+
116
+ ```javascript
117
+ document.documentElement.setAttribute('data-theme', 'dark');
118
+ ```
119
+
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
+ ## Customization
132
+
133
+ Override CSS variables:
134
+
135
+ ```css
136
+ :root {
137
+ --primary: #your-color;
138
+ --radius: 8px;
139
+ --font-sans: 'Your Font', sans-serif;
140
+ }
141
+ ```
142
+
143
+ Or customize with SCSS:
144
+
145
+ ```scss
146
+ // Override variables before import
147
+ $primary: #your-color;
148
+ $border-radius: 8px;
149
+
150
+ @use 'zenkit-css/scss/zenkit';
151
+ ```
152
+
153
+ ## Development
154
+
155
+ ```bash
156
+ # Install dependencies
157
+ npm install
158
+
159
+ # Build CSS
160
+ npm run build
161
+
162
+ # Watch for changes
163
+ npm run watch
164
+
165
+ # Start dev server
166
+ npm run dev
167
+ ```
168
+
169
+ ## Browser Support
170
+
171
+ - Chrome (last 2 versions)
172
+ - Firefox (last 2 versions)
173
+ - Safari (last 2 versions)
174
+ - Edge (last 2 versions)
175
+
176
+ ## License
177
+
178
+ MIT
179
+
180
+ ---
181
+
182
+ Made with &#10084; by **Sayed Abdul Karim**