ui-style-kit-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.
- package/CHANGELOG.md +36 -0
- package/CODE_OF_CONDUCT.md +64 -0
- package/LICENSE +21 -0
- package/README.md +222 -0
- package/dist/ui-style-kit.css +10443 -0
- package/dist/ui-style-kit.min.css +7 -0
- package/index.html +224 -0
- package/package.json +186 -0
- package/styles/bauhaus.css +978 -0
- package/styles/bento.css +979 -0
- package/styles/brutalism.css +911 -0
- package/styles/cyberpunk.css +858 -0
- package/styles/maximalist.css +978 -0
- package/styles/minimal-saas.css +978 -0
- package/styles/neumorphism.css +1007 -0
- package/styles/retro-glass.css +840 -0
- package/styles/retrofuturism.css +1015 -0
- package/styles/tactile.css +977 -0
- package/styles/y2k.css +839 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to this project will be documented in this file.
|
|
4
|
+
|
|
5
|
+
## [1.0.0] - 2026-05-24
|
|
6
|
+
|
|
7
|
+
### Added
|
|
8
|
+
|
|
9
|
+
- Full project wiki under `wiki/`
|
|
10
|
+
- `CODE_OF_CONDUCT.md`
|
|
11
|
+
- SEO support files for GitHub Pages demo:
|
|
12
|
+
- `robots.txt`
|
|
13
|
+
- `sitemap.xml`
|
|
14
|
+
- `site.webmanifest`
|
|
15
|
+
- `browserconfig.xml`
|
|
16
|
+
- `.nojekyll`
|
|
17
|
+
- `favicon.svg`
|
|
18
|
+
- `assets/seo/og-preview.svg`
|
|
19
|
+
- `llms.txt`
|
|
20
|
+
- Professional repository scaffolding:
|
|
21
|
+
- `CONTRIBUTING.md`
|
|
22
|
+
- `SECURITY.md`
|
|
23
|
+
- `.editorconfig`
|
|
24
|
+
- `.gitattributes`
|
|
25
|
+
- `.github/workflows/ci.yml`
|
|
26
|
+
- GitHub issue and pull request templates
|
|
27
|
+
- Dependabot config
|
|
28
|
+
- Stylelint configuration:
|
|
29
|
+
- `.stylelintrc.json`
|
|
30
|
+
- `.stylelintignore`
|
|
31
|
+
- package scripts and dev dependencies
|
|
32
|
+
|
|
33
|
+
### Changed
|
|
34
|
+
|
|
35
|
+
- Expanded `index.html` with comprehensive SEO, social metadata, and JSON-LD structured data.
|
|
36
|
+
- Updated README with quality, community, and SEO sections.
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
# Code of Conduct
|
|
2
|
+
|
|
3
|
+
## Our Pledge
|
|
4
|
+
|
|
5
|
+
We are committed to making participation in this project a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity or expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.
|
|
6
|
+
|
|
7
|
+
We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.
|
|
8
|
+
|
|
9
|
+
## Our Standards
|
|
10
|
+
|
|
11
|
+
Examples of behavior that contributes to a positive environment include:
|
|
12
|
+
|
|
13
|
+
- Using welcoming and inclusive language
|
|
14
|
+
- Respecting different viewpoints and experiences
|
|
15
|
+
- Giving and accepting constructive feedback
|
|
16
|
+
- Focusing on what is best for the community and the project
|
|
17
|
+
- Showing empathy and kindness toward other community members
|
|
18
|
+
|
|
19
|
+
Examples of unacceptable behavior include:
|
|
20
|
+
|
|
21
|
+
- Sexualized language or imagery, and unwelcome sexual attention or advances
|
|
22
|
+
- Trolling, insulting or derogatory comments, and personal or political attacks
|
|
23
|
+
- Public or private harassment
|
|
24
|
+
- Publishing others' private information, such as a physical or email address, without explicit permission
|
|
25
|
+
- Other conduct that could reasonably be considered inappropriate in a professional setting
|
|
26
|
+
|
|
27
|
+
## Enforcement Responsibilities
|
|
28
|
+
|
|
29
|
+
Project maintainers are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to behavior they deem inappropriate, threatening, offensive, or harmful.
|
|
30
|
+
|
|
31
|
+
Maintainers may remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned with this Code of Conduct, and will communicate reasons for moderation decisions when appropriate.
|
|
32
|
+
|
|
33
|
+
## Scope
|
|
34
|
+
|
|
35
|
+
This Code of Conduct applies within all project spaces and also applies when an individual is officially representing the project in public spaces. Examples include using an official project email address, posting via official social channels, or acting as an appointed representative at events.
|
|
36
|
+
|
|
37
|
+
## Reporting
|
|
38
|
+
|
|
39
|
+
If you experience or witness unacceptable behavior, report it to the maintainers as soon as possible.
|
|
40
|
+
|
|
41
|
+
- Preferred contact: [Foscat](https://github.com/Foscat) or [Email Me](mailto:fosterkyle6456@gmail.com)
|
|
42
|
+
- Alternative: open a private report through repository maintainers on GitHub
|
|
43
|
+
|
|
44
|
+
All reports will be reviewed promptly and handled with care and discretion. Maintainers will respect the privacy and security of the reporter to the extent possible.
|
|
45
|
+
|
|
46
|
+
## Enforcement Guidelines
|
|
47
|
+
|
|
48
|
+
Maintainers may follow these Community Impact Guidelines when determining consequences:
|
|
49
|
+
|
|
50
|
+
1. Correction
|
|
51
|
+
For minor or first-time issues, maintainers may provide a private written warning with clarification of expected behavior.
|
|
52
|
+
|
|
53
|
+
2. Warning
|
|
54
|
+
For a violation involving a single incident or a pattern of behavior, maintainers may issue a warning with clear consequences for continued behavior.
|
|
55
|
+
|
|
56
|
+
3. Temporary Ban
|
|
57
|
+
For serious or repeated violations, maintainers may impose a temporary ban from community interaction and project participation.
|
|
58
|
+
|
|
59
|
+
4. Permanent Ban
|
|
60
|
+
For sustained inappropriate behavior, harassment, or threats to community safety, maintainers may impose a permanent ban from any sort of public interaction within the project.
|
|
61
|
+
|
|
62
|
+
## Attribution
|
|
63
|
+
|
|
64
|
+
This Code of Conduct is informed by the Contributor Covenant and common open source community moderation practices.
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Kyle Foster
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,222 @@
|
|
|
1
|
+
# UI Style Kit CSS
|
|
2
|
+
|
|
3
|
+
**UI Style Kit CSS** is a CSS-only theme and visual style preset library for standardizing websites, dashboards, admin tools, and customer-facing pages.
|
|
4
|
+
|
|
5
|
+
It is designed to be separate from, but complementary to, **Interactive Surface CSS**. Use this library for visual identity, color themes, UI style presets, and native HTML coverage. Use Interactive Surface CSS for interaction-state animation systems and surface behavior.
|
|
6
|
+
|
|
7
|
+
## Features
|
|
8
|
+
|
|
9
|
+
- 11 UI style systems
|
|
10
|
+
- 10 shared color schemes
|
|
11
|
+
- `light`, `dark`, and `contrast` modes
|
|
12
|
+
- one combined CSS entry file
|
|
13
|
+
- optional per-style CSS files
|
|
14
|
+
- CSS-only native HTML element coverage
|
|
15
|
+
- visible focus states
|
|
16
|
+
- reduced-motion support
|
|
17
|
+
- high-contrast and forced-colors support
|
|
18
|
+
- print styles
|
|
19
|
+
- NPM/CDN-friendly package structure
|
|
20
|
+
|
|
21
|
+
## Wiki
|
|
22
|
+
|
|
23
|
+
Extended documentation lives in [`wiki/`](wiki/):
|
|
24
|
+
|
|
25
|
+
- [`wiki/Home.md`](wiki/Home.md)
|
|
26
|
+
- [`wiki/Installation-and-Setup.md`](wiki/Installation-and-Setup.md)
|
|
27
|
+
- [`wiki/Theming-Model.md`](wiki/Theming-Model.md)
|
|
28
|
+
- [`wiki/Class-API.md`](wiki/Class-API.md)
|
|
29
|
+
- [`wiki/UI-Systems.md`](wiki/UI-Systems.md)
|
|
30
|
+
- [`wiki/Accessibility.md`](wiki/Accessibility.md)
|
|
31
|
+
|
|
32
|
+
## Community
|
|
33
|
+
|
|
34
|
+
- [Code of Conduct](CODE_OF_CONDUCT.md)
|
|
35
|
+
- [Contributing Guide](CONTRIBUTING.md)
|
|
36
|
+
- [Security Policy](SECURITY.md)
|
|
37
|
+
|
|
38
|
+
## Quality
|
|
39
|
+
|
|
40
|
+
```bash
|
|
41
|
+
npm install
|
|
42
|
+
npm run lint:css
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
Auto-fix style issues:
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
npm run lint:css:fix
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Demo SEO Files
|
|
52
|
+
|
|
53
|
+
The demo page includes production SEO/social metadata plus supporting files for GitHub Pages:
|
|
54
|
+
|
|
55
|
+
- `index.html` comprehensive metadata + JSON-LD
|
|
56
|
+
- `robots.txt`
|
|
57
|
+
- `sitemap.xml`
|
|
58
|
+
- `site.webmanifest`
|
|
59
|
+
- `browserconfig.xml`
|
|
60
|
+
- `.nojekyll`
|
|
61
|
+
- `favicon.svg`
|
|
62
|
+
- `assets/seo/og-preview.svg`
|
|
63
|
+
|
|
64
|
+
## Install
|
|
65
|
+
|
|
66
|
+
```bash
|
|
67
|
+
npm install ui-style-kit-css
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
## Import
|
|
71
|
+
|
|
72
|
+
```js
|
|
73
|
+
import "ui-style-kit-css/dist/ui-style-kit.css";
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
Or import one style system only:
|
|
77
|
+
|
|
78
|
+
```js
|
|
79
|
+
import "ui-style-kit-css/styles/minimal-saas.css";
|
|
80
|
+
import "ui-style-kit-css/styles/cyberpunk.css";
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
## Browser / CDN usage
|
|
84
|
+
|
|
85
|
+
After publishing to NPM:
|
|
86
|
+
|
|
87
|
+
```html
|
|
88
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui-style-kit-css@latest/dist/ui-style-kit.min.css" />
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
Local usage:
|
|
92
|
+
|
|
93
|
+
```html
|
|
94
|
+
<link rel="stylesheet" href="dist/ui-style-kit.css" />
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
## Basic usage
|
|
98
|
+
|
|
99
|
+
```html
|
|
100
|
+
<body data-ui="minimal-saas" data-theme="arctic-indigo" data-mode="light">
|
|
101
|
+
<main class="saas-page">
|
|
102
|
+
<section class="saas-container saas-stack">
|
|
103
|
+
<article class="saas-card">
|
|
104
|
+
<h1 class="saas-title">UI Style Kit CSS</h1>
|
|
105
|
+
<p class="saas-subtitle">Switch UI systems, themes, and modes with attributes.</p>
|
|
106
|
+
</article>
|
|
107
|
+
</section>
|
|
108
|
+
</main>
|
|
109
|
+
</body>
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
## UI systems
|
|
113
|
+
|
|
114
|
+
| UI style | `data-ui` | Class prefix |
|
|
115
|
+
|---|---:|---:|
|
|
116
|
+
| Minimal SaaS | `minimal-saas` | `saas` |
|
|
117
|
+
| Bento UI | `bento` | `bento` |
|
|
118
|
+
| Maximalist / Playful | `maximalist` | `max` |
|
|
119
|
+
| Bauhaus / Swiss Modern | `bauhaus` | `bau` |
|
|
120
|
+
| Skeuomorphic / Tactile | `tactile` | `tactile` |
|
|
121
|
+
| Neumorphism | `neumorphism` | `neo` |
|
|
122
|
+
| Retrofuturism | `retrofuturism` | `retro` |
|
|
123
|
+
| Brutalism | `brutalism` | `brutal` |
|
|
124
|
+
| Cyberpunk | `cyberpunk` | `cyber` |
|
|
125
|
+
| Y2K | `y2k` | `y2k` |
|
|
126
|
+
| Retro Glass | `retro-glass` | `rg` |
|
|
127
|
+
|
|
128
|
+
## Color themes
|
|
129
|
+
|
|
130
|
+
- `midnight-gold`
|
|
131
|
+
- `ocean-steel`
|
|
132
|
+
- `forest-moss`
|
|
133
|
+
- `sunset-ember`
|
|
134
|
+
- `royal-plum`
|
|
135
|
+
- `graphite-cyan`
|
|
136
|
+
- `desert-sage`
|
|
137
|
+
- `rose-quartz`
|
|
138
|
+
- `cyber-lime`
|
|
139
|
+
- `arctic-indigo`
|
|
140
|
+
|
|
141
|
+
## Modes
|
|
142
|
+
|
|
143
|
+
- `light`
|
|
144
|
+
- `dark`
|
|
145
|
+
- `contrast`
|
|
146
|
+
|
|
147
|
+
## Dynamic switching
|
|
148
|
+
|
|
149
|
+
```js
|
|
150
|
+
document.body.dataset.ui = "cyberpunk";
|
|
151
|
+
document.body.dataset.theme = "midnight-gold";
|
|
152
|
+
document.body.dataset.mode = "dark";
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
## File structure
|
|
156
|
+
|
|
157
|
+
```txt
|
|
158
|
+
ui-style-kit-css/
|
|
159
|
+
package.json
|
|
160
|
+
README.md
|
|
161
|
+
CONTRIBUTING.md
|
|
162
|
+
SECURITY.md
|
|
163
|
+
CODE_OF_CONDUCT.md
|
|
164
|
+
LICENSE
|
|
165
|
+
index.html
|
|
166
|
+
favicon.svg
|
|
167
|
+
llms.txt
|
|
168
|
+
robots.txt
|
|
169
|
+
sitemap.xml
|
|
170
|
+
site.webmanifest
|
|
171
|
+
browserconfig.xml
|
|
172
|
+
assets/
|
|
173
|
+
seo/
|
|
174
|
+
og-preview.svg
|
|
175
|
+
.stylelintrc.json
|
|
176
|
+
.stylelintignore
|
|
177
|
+
.editorconfig
|
|
178
|
+
.gitattributes
|
|
179
|
+
.github/
|
|
180
|
+
workflows/
|
|
181
|
+
ci.yml
|
|
182
|
+
dist/
|
|
183
|
+
ui-style-kit.css
|
|
184
|
+
ui-style-kit.min.css
|
|
185
|
+
styles/
|
|
186
|
+
minimal-saas.css
|
|
187
|
+
bento.css
|
|
188
|
+
maximalist.css
|
|
189
|
+
bauhaus.css
|
|
190
|
+
tactile.css
|
|
191
|
+
neumorphism.css
|
|
192
|
+
retrofuturism.css
|
|
193
|
+
brutalism.css
|
|
194
|
+
cyberpunk.css
|
|
195
|
+
y2k.css
|
|
196
|
+
retro-glass.css
|
|
197
|
+
wiki/
|
|
198
|
+
Home.md
|
|
199
|
+
Installation-and-Setup.md
|
|
200
|
+
Theming-Model.md
|
|
201
|
+
Class-API.md
|
|
202
|
+
UI-Systems.md
|
|
203
|
+
Accessibility.md
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
## Accessibility scope
|
|
207
|
+
|
|
208
|
+
UI Style Kit CSS includes CSS-only accessibility presentation helpers:
|
|
209
|
+
|
|
210
|
+
- scoped native HTML defaults
|
|
211
|
+
- visible `:focus-visible` styles
|
|
212
|
+
- `prefers-reduced-motion` support
|
|
213
|
+
- `prefers-contrast: more` support
|
|
214
|
+
- `forced-colors: active` support
|
|
215
|
+
- print styles
|
|
216
|
+
- skip-link and visually-hidden utilities per style prefix
|
|
217
|
+
|
|
218
|
+
CSS cannot guarantee accessibility by itself. Use semantic HTML, real labels, keyboard-safe JavaScript, and correct ARIA state management for interactive components.
|
|
219
|
+
|
|
220
|
+
## License
|
|
221
|
+
|
|
222
|
+
MIT
|