ply-css 1.3.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 (75) hide show
  1. package/CLAUDE.md +176 -0
  2. package/LICENSE +22 -0
  3. package/PLY.md +646 -0
  4. package/README.md +170 -0
  5. package/dist/css/ply-core.css +6175 -0
  6. package/dist/css/ply-core.min.css +1 -0
  7. package/dist/css/ply-essentials.min.css +1 -0
  8. package/dist/css/ply-helpers.min.css +1 -0
  9. package/dist/css/ply.css +7429 -0
  10. package/dist/css/ply.min.css +1 -0
  11. package/dist/css/styles.css +7432 -0
  12. package/dist/css/styles.min.css +1 -0
  13. package/llms-full.txt +834 -0
  14. package/llms.txt +34 -0
  15. package/package.json +70 -0
  16. package/ply-classes.json +2625 -0
  17. package/snippets/accessible-drag-and-drop.html +122 -0
  18. package/snippets/card.html +58 -0
  19. package/snippets/contact-form.html +49 -0
  20. package/snippets/custom-theme.html +280 -0
  21. package/snippets/dashboard.html +77 -0
  22. package/snippets/data-table.html +64 -0
  23. package/snippets/login-page.html +45 -0
  24. package/snippets/navbar-page.html +39 -0
  25. package/snippets/notifications.html +63 -0
  26. package/snippets/pricing-cards.html +95 -0
  27. package/snippets/responsive-header.html +98 -0
  28. package/snippets/starter-page.html +782 -0
  29. package/snippets/two-column-layout.html +40 -0
  30. package/src/scss/_ply-core-components.scss +32 -0
  31. package/src/scss/_ply.scss +47 -0
  32. package/src/scss/components/_accordion.scss +73 -0
  33. package/src/scss/components/_alignments.scss +64 -0
  34. package/src/scss/components/_autocomplete.scss +28 -0
  35. package/src/scss/components/_blocks-responsive.scss +30 -0
  36. package/src/scss/components/_blocks.scss +39 -0
  37. package/src/scss/components/_buttons.scss +452 -0
  38. package/src/scss/components/_colors.scss +447 -0
  39. package/src/scss/components/_container-queries.scss +35 -0
  40. package/src/scss/components/_cursors.scss +24 -0
  41. package/src/scss/components/_dialog-patterns.scss +176 -0
  42. package/src/scss/components/_dropdown.scss +68 -0
  43. package/src/scss/components/_filterbox.scss +57 -0
  44. package/src/scss/components/_flexible-embed.scss +19 -0
  45. package/src/scss/components/_forms.scss +450 -0
  46. package/src/scss/components/_grid.scss +210 -0
  47. package/src/scss/components/_helpers-core.scss +357 -0
  48. package/src/scss/components/_helpers.scss +466 -0
  49. package/src/scss/components/_labels.scss +105 -0
  50. package/src/scss/components/_livesearch.scss +233 -0
  51. package/src/scss/components/_loader.scss +24 -0
  52. package/src/scss/components/_media-queries.scss +9 -0
  53. package/src/scss/components/_mixins.scss +387 -0
  54. package/src/scss/components/_modal.scss +73 -0
  55. package/src/scss/components/_multi-step-form.scss +190 -0
  56. package/src/scss/components/_navigation-responsive.scss +63 -0
  57. package/src/scss/components/_navigation.scss +592 -0
  58. package/src/scss/components/_notifications.scss +185 -0
  59. package/src/scss/components/_prettyprint.scss +86 -0
  60. package/src/scss/components/_print.scss +74 -0
  61. package/src/scss/components/_progress.scss +32 -0
  62. package/src/scss/components/_reset.scss +365 -0
  63. package/src/scss/components/_rtl.scss +213 -0
  64. package/src/scss/components/_table-interactive.scss +110 -0
  65. package/src/scss/components/_tables.scss +52 -0
  66. package/src/scss/components/_themes.scss +6 -0
  67. package/src/scss/components/_tooltip.scss +35 -0
  68. package/src/scss/components/_typography.scss +565 -0
  69. package/src/scss/components/_upload.scss +19 -0
  70. package/src/scss/components/_variables.scss +129 -0
  71. package/src/scss/ply-core.scss +1 -0
  72. package/src/scss/ply-essentials.scss +15 -0
  73. package/src/scss/ply-helpers.scss +11 -0
  74. package/src/scss/ply-iso.scss +1 -0
  75. package/src/scss/styles.scss +9 -0
package/README.md ADDED
@@ -0,0 +1,170 @@
1
+ # ply
2
+
3
+ A ratio-based, AI-ready CSS framework with dark mode, accessibility, and a small footprint.
4
+
5
+ **18.5KB gzipped. No JavaScript. No build step. One `<link>` tag.**
6
+
7
+ ## Install
8
+
9
+ ### npm + Sass (recommended)
10
+
11
+ For real projects, install ply and import the SCSS source to get the full color palette, variables, and mixins.
12
+
13
+ ```sh
14
+ npm install ply-css
15
+ ```
16
+
17
+ ```scss
18
+ @use "ply-css/src/scss/ply" as *;
19
+ ```
20
+
21
+ ### CDN (prototyping)
22
+
23
+ ```html
24
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ply-css@1/dist/css/ply.min.css">
25
+ ```
26
+
27
+ ### Git
28
+
29
+ ```sh
30
+ git clone https://github.com/thatgibbyguy/ply.git
31
+ ```
32
+
33
+ ## Why ply?
34
+
35
+ CSS frameworks were designed for humans reading documentation. But increasingly, the first consumer of your framework is an AI — a coding agent in Replit, Claude, Cursor, or Copilot generating a UI from a prompt.
36
+
37
+ - **Start semantic** — ply automatically styles `<nav>`, `<table>`, `<code>`, `<blockquote>`, `<details>`, `<dialog>`, and more. Start with what HTML gives you, then reach for classes when you need them.
38
+ - **AI-native** — ships with `PLY.md` (AI instruction file) and `ply-classes.json` (machine-readable class reference). Class names are predictable: `.alert-blue`, `.btn-sm`, `.unit-50`.
39
+ - **Accessible by default** — `:focus-visible` outlines on all interactive elements (including `<summary>` and legacy components), `prefers-reduced-motion`, `prefers-color-scheme` dark mode, semantic HTML styling, WCAG AA contrast in both light and dark themes. Published [VPAT 2.5](https://plycss.com/docs/vpat) documenting conformance against all WCAG 2.1 Level A and AA criteria.
40
+ - **Small footprint** — 18.5KB gzipped (full), ~15KB (core). No JavaScript runtime, no build step, no tree-shaking.
41
+ - **Ratio-based grid** — think in percentages, not arbitrary columns. `unit-50` is 50%, `unit-33` is 33%. Responsive prefixes: `tablet-unit-*`, `phone-unit-*`.
42
+ - **Custom theming** — override `--ply-*` CSS custom properties to create any theme. Light and dark modes built in.
43
+
44
+ ## Quick Start
45
+
46
+ ```html
47
+ <!DOCTYPE html>
48
+ <html lang="en">
49
+ <head>
50
+ <meta charset="UTF-8">
51
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
52
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ply-css@1/dist/css/ply.min.css">
53
+ </head>
54
+ <body>
55
+ <div class="units-container">
56
+ <div class="units-row">
57
+ <div class="unit-50 tablet-unit-100">
58
+ <h1>Hello, ply</h1>
59
+ <p>A two-column layout. Stacks on tablet and below.</p>
60
+ </div>
61
+ <div class="unit-50 tablet-unit-100">
62
+ <button class="btn btn-primary">Get Started</button>
63
+ </div>
64
+ </div>
65
+ </div>
66
+ </body>
67
+ </html>
68
+ ```
69
+
70
+ ## Bundles
71
+
72
+ | Bundle | File | Description |
73
+ |--------|------|-------------|
74
+ | Full | `ply.min.css` | Everything — grid, typography, forms, buttons, navigation, notifications, labels, dropdown, loader, helpers |
75
+ | Core | `ply-core.min.css` | Grid, typography, forms, buttons, navigation, notifications, essential helpers |
76
+ | Essentials | `ply-essentials.min.css` | Grid + helpers only |
77
+
78
+ ## Dark Mode
79
+
80
+ ply respects `prefers-color-scheme` automatically. No configuration needed.
81
+
82
+ To force a mode:
83
+
84
+ ```html
85
+ <html data-theme="dark"> <!-- Force dark -->
86
+ <html data-theme="light"> <!-- Force light -->
87
+ <html> <!-- Auto (follows OS) -->
88
+ ```
89
+
90
+ ## Custom Themes
91
+
92
+ Override `--ply-*` CSS custom properties to create any theme:
93
+
94
+ ```css
95
+ [data-theme="warm"] {
96
+ --ply-bg-body: #faf5f0;
97
+ --ply-color-body: #1c1917;
98
+ --ply-color-headings: #44240e;
99
+ --ply-color-accent: #92400e; /* Icons, badges, section accents */
100
+ --ply-btn-default-bg: #92400e; /* Primary button + links */
101
+ --ply-btn-secondary-bg: #78350f; /* Secondary button */
102
+ --ply-btn-border-radius: 0.5rem; /* Button corner radius */
103
+ --ply-font-body: Palatino, Georgia, serif;
104
+ --ply-font-heading: Palatino, Georgia, serif;
105
+ /* ... */
106
+ }
107
+ ```
108
+
109
+ ```html
110
+ <html data-theme="warm">
111
+ ```
112
+
113
+ See `snippets/custom-theme.html` for a full working example.
114
+
115
+ ## Icons
116
+
117
+ ply doesn't include icons. [Feather Icons](https://feathericons.com) is recommended — lightweight, clean, and pairs well with ply. Any icon library works.
118
+
119
+ ```html
120
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
121
+ <script>feather.replace();</script>
122
+ ```
123
+
124
+ ## AI Integration
125
+
126
+ For AI agents (Claude, Cursor, Copilot, Replit AI):
127
+
128
+ - **`PLY.md`** — complete class reference, usage rules, anti-patterns, and snippets
129
+ - **`ply-classes.json`** — machine-readable class map for programmatic tool use
130
+ - **`snippets/`** — copy-paste HTML files for common patterns (dashboard, login, contact form, etc.)
131
+
132
+ ply is standalone — it should not be used alongside Tailwind, Bootstrap, or other CSS frameworks.
133
+
134
+ ## Development
135
+
136
+ ```sh
137
+ npm install
138
+ npm run build # Compile all bundles
139
+ npm run watch # Watch for changes
140
+ npm run lint # Run stylelint
141
+ ```
142
+
143
+ ### Tech
144
+
145
+ - [Sass](https://sass-lang.com/) (modern `@use`/`@forward` modules)
146
+ - [PostCSS](https://postcss.org/) + [Autoprefixer](https://github.com/postcss/autoprefixer) + [cssnano](https://cssnano.github.io/cssnano/)
147
+
148
+ ## Compliance
149
+
150
+ ply targets ADA Title II (28 CFR Part 35) / WCAG 2.1 AA compliance at the framework level. A [VPAT 2.5](https://plycss.com/docs/vpat) is published documenting conformance against all Level A and Level AA success criteria.
151
+
152
+ ## Documentation
153
+
154
+ Full interactive docs at [plyCSS.com](https://plycss.com) — browse every class with live examples, search the entire framework, and copy-paste code snippets.
155
+
156
+ ## Roadmap
157
+
158
+ - CSS logical properties for native RTL support (replaces bolt-on mirroring)
159
+ - Build-time class validator / VS Code extension
160
+ - Automated accessibility test suite (VPAT evidence)
161
+
162
+ ## Contributing
163
+
164
+ Fork this repo and create a Pull Request with your changes.
165
+
166
+ ## License
167
+
168
+ MIT
169
+
170
+ Special thanks to [imperavi](https://imperavi.com/) for creating the CSS framework I could only envision at the time.