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.
- package/CLAUDE.md +176 -0
- package/LICENSE +22 -0
- package/PLY.md +646 -0
- package/README.md +170 -0
- package/dist/css/ply-core.css +6175 -0
- package/dist/css/ply-core.min.css +1 -0
- package/dist/css/ply-essentials.min.css +1 -0
- package/dist/css/ply-helpers.min.css +1 -0
- package/dist/css/ply.css +7429 -0
- package/dist/css/ply.min.css +1 -0
- package/dist/css/styles.css +7432 -0
- package/dist/css/styles.min.css +1 -0
- package/llms-full.txt +834 -0
- package/llms.txt +34 -0
- package/package.json +70 -0
- package/ply-classes.json +2625 -0
- package/snippets/accessible-drag-and-drop.html +122 -0
- package/snippets/card.html +58 -0
- package/snippets/contact-form.html +49 -0
- package/snippets/custom-theme.html +280 -0
- package/snippets/dashboard.html +77 -0
- package/snippets/data-table.html +64 -0
- package/snippets/login-page.html +45 -0
- package/snippets/navbar-page.html +39 -0
- package/snippets/notifications.html +63 -0
- package/snippets/pricing-cards.html +95 -0
- package/snippets/responsive-header.html +98 -0
- package/snippets/starter-page.html +782 -0
- package/snippets/two-column-layout.html +40 -0
- package/src/scss/_ply-core-components.scss +32 -0
- package/src/scss/_ply.scss +47 -0
- package/src/scss/components/_accordion.scss +73 -0
- package/src/scss/components/_alignments.scss +64 -0
- package/src/scss/components/_autocomplete.scss +28 -0
- package/src/scss/components/_blocks-responsive.scss +30 -0
- package/src/scss/components/_blocks.scss +39 -0
- package/src/scss/components/_buttons.scss +452 -0
- package/src/scss/components/_colors.scss +447 -0
- package/src/scss/components/_container-queries.scss +35 -0
- package/src/scss/components/_cursors.scss +24 -0
- package/src/scss/components/_dialog-patterns.scss +176 -0
- package/src/scss/components/_dropdown.scss +68 -0
- package/src/scss/components/_filterbox.scss +57 -0
- package/src/scss/components/_flexible-embed.scss +19 -0
- package/src/scss/components/_forms.scss +450 -0
- package/src/scss/components/_grid.scss +210 -0
- package/src/scss/components/_helpers-core.scss +357 -0
- package/src/scss/components/_helpers.scss +466 -0
- package/src/scss/components/_labels.scss +105 -0
- package/src/scss/components/_livesearch.scss +233 -0
- package/src/scss/components/_loader.scss +24 -0
- package/src/scss/components/_media-queries.scss +9 -0
- package/src/scss/components/_mixins.scss +387 -0
- package/src/scss/components/_modal.scss +73 -0
- package/src/scss/components/_multi-step-form.scss +190 -0
- package/src/scss/components/_navigation-responsive.scss +63 -0
- package/src/scss/components/_navigation.scss +592 -0
- package/src/scss/components/_notifications.scss +185 -0
- package/src/scss/components/_prettyprint.scss +86 -0
- package/src/scss/components/_print.scss +74 -0
- package/src/scss/components/_progress.scss +32 -0
- package/src/scss/components/_reset.scss +365 -0
- package/src/scss/components/_rtl.scss +213 -0
- package/src/scss/components/_table-interactive.scss +110 -0
- package/src/scss/components/_tables.scss +52 -0
- package/src/scss/components/_themes.scss +6 -0
- package/src/scss/components/_tooltip.scss +35 -0
- package/src/scss/components/_typography.scss +565 -0
- package/src/scss/components/_upload.scss +19 -0
- package/src/scss/components/_variables.scss +129 -0
- package/src/scss/ply-core.scss +1 -0
- package/src/scss/ply-essentials.scss +15 -0
- package/src/scss/ply-helpers.scss +11 -0
- package/src/scss/ply-iso.scss +1 -0
- package/src/scss/styles.scss +9 -0
|
@@ -0,0 +1,782 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>ply — The AI-Ready CSS Framework</title>
|
|
7
|
+
<link rel="stylesheet" href="../dist/css/ply.min.css">
|
|
8
|
+
<style>
|
|
9
|
+
/* Page-specific layout helpers — not part of the framework */
|
|
10
|
+
.hero { padding: 6rem 0 4rem; }
|
|
11
|
+
.hero h1 { font-size: 4.5rem; letter-spacing: -0.04em; margin-bottom: 0.25rem; }
|
|
12
|
+
.hero .lead { font-size: 1.35rem; max-width: 38em; }
|
|
13
|
+
.section { padding: 4rem 0 2rem; }
|
|
14
|
+
.section-label {
|
|
15
|
+
font-size: 0.75rem;
|
|
16
|
+
font-weight: 600;
|
|
17
|
+
letter-spacing: 0.12em;
|
|
18
|
+
text-transform: uppercase;
|
|
19
|
+
color: var(--ply-color-muted);
|
|
20
|
+
margin-bottom: 0.5rem;
|
|
21
|
+
}
|
|
22
|
+
.section h2 { margin-top: 0; }
|
|
23
|
+
.card {
|
|
24
|
+
background: var(--ply-bg-surface);
|
|
25
|
+
border: 1px solid var(--ply-border-color);
|
|
26
|
+
border-radius: 6px;
|
|
27
|
+
padding: 1.5rem;
|
|
28
|
+
margin-bottom: 1.5rem;
|
|
29
|
+
}
|
|
30
|
+
.card h3, .card h4 { margin-top: 0; }
|
|
31
|
+
.swatch {
|
|
32
|
+
display: inline-block;
|
|
33
|
+
width: 2.5rem;
|
|
34
|
+
height: 2.5rem;
|
|
35
|
+
border-radius: 4px;
|
|
36
|
+
border: 1px solid var(--ply-border-color);
|
|
37
|
+
vertical-align: middle;
|
|
38
|
+
margin-right: 0.5rem;
|
|
39
|
+
}
|
|
40
|
+
.theme-switcher select {
|
|
41
|
+
font-size: 0.85rem;
|
|
42
|
+
padding: 0.35rem 2rem 0.35rem 0.5rem;
|
|
43
|
+
}
|
|
44
|
+
hr.divider {
|
|
45
|
+
border: none;
|
|
46
|
+
border-top: 1px solid var(--ply-border-color);
|
|
47
|
+
margin: 3rem 0;
|
|
48
|
+
}
|
|
49
|
+
.layer-demo {
|
|
50
|
+
padding: 1.25rem;
|
|
51
|
+
border-radius: 6px;
|
|
52
|
+
margin-bottom: 1rem;
|
|
53
|
+
}
|
|
54
|
+
</style>
|
|
55
|
+
</head>
|
|
56
|
+
<body style="background: var(--ply-bg-body); color: var(--ply-color-body);">
|
|
57
|
+
<a href="#main" class="skip-link">Skip to main content</a>
|
|
58
|
+
|
|
59
|
+
<!-- Navbar -->
|
|
60
|
+
<nav class="navbar">
|
|
61
|
+
<ul>
|
|
62
|
+
<li class="active"><a href="#">ply</a></li>
|
|
63
|
+
<li><a href="#elements">Elements</a></li>
|
|
64
|
+
<li><a href="#components">Components</a></li>
|
|
65
|
+
<li><a href="#layers">Layers</a></li>
|
|
66
|
+
<li><a href="https://github.com/thatgibbyguy/ply">GitHub</a></li>
|
|
67
|
+
<li style="margin-left: auto;" class="theme-switcher">
|
|
68
|
+
<select
|
|
69
|
+
id="theme-select"
|
|
70
|
+
class="select-outlined"
|
|
71
|
+
aria-label="Choose theme"
|
|
72
|
+
onchange="document.documentElement.setAttribute('data-theme', this.value)"
|
|
73
|
+
>
|
|
74
|
+
<option value="">Auto</option>
|
|
75
|
+
<option value="light">Light</option>
|
|
76
|
+
<option value="dark">Dark</option>
|
|
77
|
+
</select>
|
|
78
|
+
</li>
|
|
79
|
+
</ul>
|
|
80
|
+
</nav>
|
|
81
|
+
|
|
82
|
+
<div class="units-container">
|
|
83
|
+
<main id="main">
|
|
84
|
+
|
|
85
|
+
<!-- Hero -->
|
|
86
|
+
<div class="hero">
|
|
87
|
+
<div class="units-row">
|
|
88
|
+
<div class="unit-60 tablet-unit-100">
|
|
89
|
+
<p class="section-label">CSS Framework / v0.9.9</p>
|
|
90
|
+
<h1>ply</h1>
|
|
91
|
+
<p class="lead">A ratio-based CSS framework built for AI agents, accessible by default, and small enough to ship anywhere. One stylesheet. ~18KB gzipped. No JavaScript, no build step, no configuration.</p>
|
|
92
|
+
<div class="margin-top">
|
|
93
|
+
<button class="btn btn-blue btn-sm" onclick="document.getElementById('why').scrollIntoView({behavior:'smooth'})">Why ply</button>
|
|
94
|
+
<button class="btn btn-outline btn-sm" onclick="document.getElementById('elements').scrollIntoView({behavior:'smooth'})">View Elements</button>
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
|
|
100
|
+
<hr class="divider">
|
|
101
|
+
|
|
102
|
+
<!-- Why ply -->
|
|
103
|
+
<section class="section" id="why">
|
|
104
|
+
<p class="section-label">Rationale</p>
|
|
105
|
+
<h2>Why ply exists</h2>
|
|
106
|
+
<p>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. ply is designed for that world.</p>
|
|
107
|
+
|
|
108
|
+
<div class="units-row">
|
|
109
|
+
<div class="unit-33 tablet-unit-100">
|
|
110
|
+
<div class="card">
|
|
111
|
+
<h3>AI-Native</h3>
|
|
112
|
+
<p>Ships with <code>PLY.md</code> and <code>ply-classes.json</code> — a complete class reference any AI agent can read. Class names are predictable: <code>.alert-blue</code>, <code>.btn-sm</code>, <code>.unit-50</code>. An LLM guesses correctly on the first try.</p>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
<div class="unit-33 tablet-unit-100">
|
|
116
|
+
<div class="card">
|
|
117
|
+
<h3>Accessible by Default</h3>
|
|
118
|
+
<p>Accessibility is a civil rights issue. When your UI isn't accessible, you exclude people. ply bakes <code>:focus-visible</code> outlines, <code>prefers-reduced-motion</code>, semantic HTML styling, and WCAG AA contrast into the CSS itself.</p>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
<div class="unit-33 tablet-unit-100">
|
|
122
|
+
<div class="card">
|
|
123
|
+
<h3>Small Footprint</h3>
|
|
124
|
+
<p>~18KB gzipped, full framework. No JavaScript runtime. No build step. No tree-shaking. One <code><link></code> tag. That matters when you're spinning up prototypes in Replit or shipping to users on slow connections.</p>
|
|
125
|
+
</div>
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
</section>
|
|
129
|
+
|
|
130
|
+
<hr class="divider">
|
|
131
|
+
|
|
132
|
+
<!-- Native HTML Elements -->
|
|
133
|
+
<section class="section" id="elements">
|
|
134
|
+
<p class="section-label">Native Elements</p>
|
|
135
|
+
<h2>Every HTML element, styled</h2>
|
|
136
|
+
<p>ply styles semantic HTML so you get good defaults without adding classes. Below is every native element ply enhances.</p>
|
|
137
|
+
|
|
138
|
+
<!-- Typography -->
|
|
139
|
+
<div class="units-row">
|
|
140
|
+
<div class="unit-50 tablet-unit-100">
|
|
141
|
+
<div class="card">
|
|
142
|
+
<h4>Headings</h4>
|
|
143
|
+
<h1>Heading 1</h1>
|
|
144
|
+
<h2>Heading 2</h2>
|
|
145
|
+
<h3>Heading 3</h3>
|
|
146
|
+
<h4>Heading 4</h4>
|
|
147
|
+
<h5>Heading 5</h5>
|
|
148
|
+
<h6>Heading 6</h6>
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
151
|
+
<div class="unit-50 tablet-unit-100">
|
|
152
|
+
<div class="card">
|
|
153
|
+
<h4>Inline Text</h4>
|
|
154
|
+
<p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, <a href="#">a link</a>, <code>inline code</code>, <kbd>Ctrl+S</kbd>, <mark>highlighted text</mark>, <small>small text</small>, <abbr title="Abbreviation">abbr</abbr>, and <del>deleted text</del>.</p>
|
|
155
|
+
<p>Superscript: x<sup>2</sup> and subscript: H<sub>2</sub>O.</p>
|
|
156
|
+
<address>123 Example St, Internet, WWW 00000</address>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
159
|
+
</div>
|
|
160
|
+
|
|
161
|
+
<!-- Blockquote & Lists -->
|
|
162
|
+
<div class="units-row">
|
|
163
|
+
<div class="unit-50 tablet-unit-100">
|
|
164
|
+
<div class="card">
|
|
165
|
+
<h4>Blockquote</h4>
|
|
166
|
+
<blockquote>
|
|
167
|
+
<p>Design is not just what it looks like and feels like. Design is how it works.</p>
|
|
168
|
+
</blockquote>
|
|
169
|
+
|
|
170
|
+
<h4>Ordered List</h4>
|
|
171
|
+
<ol>
|
|
172
|
+
<li>First item</li>
|
|
173
|
+
<li>Second item
|
|
174
|
+
<ol>
|
|
175
|
+
<li>Nested item</li>
|
|
176
|
+
</ol>
|
|
177
|
+
</li>
|
|
178
|
+
<li>Third item</li>
|
|
179
|
+
</ol>
|
|
180
|
+
|
|
181
|
+
<h4>Unordered List</h4>
|
|
182
|
+
<ul>
|
|
183
|
+
<li>First item</li>
|
|
184
|
+
<li>Second item
|
|
185
|
+
<ul>
|
|
186
|
+
<li>Nested item</li>
|
|
187
|
+
</ul>
|
|
188
|
+
</li>
|
|
189
|
+
<li>Third item</li>
|
|
190
|
+
</ul>
|
|
191
|
+
</div>
|
|
192
|
+
</div>
|
|
193
|
+
<div class="unit-50 tablet-unit-100">
|
|
194
|
+
<div class="card">
|
|
195
|
+
<h4>Definition List</h4>
|
|
196
|
+
<dl>
|
|
197
|
+
<dt>ply</dt>
|
|
198
|
+
<dd>A ratio-based CSS framework built for AI agents.</dd>
|
|
199
|
+
<dt>Accessible</dt>
|
|
200
|
+
<dd>Designed to be usable by everyone, including people who rely on assistive technology.</dd>
|
|
201
|
+
<dt>Ratio-based</dt>
|
|
202
|
+
<dd>Grid columns defined as percentages of the parent: <code>unit-50</code>, <code>unit-33</code>, <code>unit-25</code>.</dd>
|
|
203
|
+
</dl>
|
|
204
|
+
|
|
205
|
+
<h4>Details & Summary</h4>
|
|
206
|
+
<details>
|
|
207
|
+
<summary>Click to expand — native HTML disclosure</summary>
|
|
208
|
+
<p>This is a <code><details></code> element. It works with keyboard navigation, screen readers, and requires zero JavaScript. ply styles the indicator and spacing.</p>
|
|
209
|
+
</details>
|
|
210
|
+
<details>
|
|
211
|
+
<summary>Another disclosure widget</summary>
|
|
212
|
+
<p>Multiple details elements stack naturally.</p>
|
|
213
|
+
</details>
|
|
214
|
+
</div>
|
|
215
|
+
</div>
|
|
216
|
+
</div>
|
|
217
|
+
|
|
218
|
+
<!-- Code -->
|
|
219
|
+
<div class="units-row">
|
|
220
|
+
<div class="unit-100">
|
|
221
|
+
<div class="card">
|
|
222
|
+
<h4>Preformatted Code</h4>
|
|
223
|
+
<pre><code><div class="units-row">
|
|
224
|
+
<div class="unit-50 tablet-unit-100">
|
|
225
|
+
<h2>Left column</h2>
|
|
226
|
+
<p>Content here.</p>
|
|
227
|
+
</div>
|
|
228
|
+
<div class="unit-50 tablet-unit-100">
|
|
229
|
+
<h2>Right column</h2>
|
|
230
|
+
<p>More content.</p>
|
|
231
|
+
</div>
|
|
232
|
+
</div></code></pre>
|
|
233
|
+
</div>
|
|
234
|
+
</div>
|
|
235
|
+
</div>
|
|
236
|
+
|
|
237
|
+
<!-- Table -->
|
|
238
|
+
<div class="units-row">
|
|
239
|
+
<div class="unit-100">
|
|
240
|
+
<div class="card">
|
|
241
|
+
<h4>Table</h4>
|
|
242
|
+
<table class="table-stripped table-hovered">
|
|
243
|
+
<thead>
|
|
244
|
+
<tr>
|
|
245
|
+
<th>Feature</th>
|
|
246
|
+
<th>ply</th>
|
|
247
|
+
<th>Tailwind</th>
|
|
248
|
+
<th>Bootstrap</th>
|
|
249
|
+
</tr>
|
|
250
|
+
</thead>
|
|
251
|
+
<tbody>
|
|
252
|
+
<tr>
|
|
253
|
+
<td>Size (gzip)</td>
|
|
254
|
+
<td><strong>~18KB</strong></td>
|
|
255
|
+
<td>~10KB+ (varies)</td>
|
|
256
|
+
<td>~30KB</td>
|
|
257
|
+
</tr>
|
|
258
|
+
<tr>
|
|
259
|
+
<td>Build step</td>
|
|
260
|
+
<td><strong>No</strong></td>
|
|
261
|
+
<td>Yes</td>
|
|
262
|
+
<td>No</td>
|
|
263
|
+
</tr>
|
|
264
|
+
<tr>
|
|
265
|
+
<td>AI instruction file</td>
|
|
266
|
+
<td><strong>PLY.md + JSON</strong></td>
|
|
267
|
+
<td>No</td>
|
|
268
|
+
<td>No</td>
|
|
269
|
+
</tr>
|
|
270
|
+
<tr>
|
|
271
|
+
<td>Dark mode</td>
|
|
272
|
+
<td><strong>Automatic</strong></td>
|
|
273
|
+
<td>Automatic (v4)</td>
|
|
274
|
+
<td>Attribute-based</td>
|
|
275
|
+
</tr>
|
|
276
|
+
<tr>
|
|
277
|
+
<td>Custom themes</td>
|
|
278
|
+
<td><strong>CSS custom properties</strong></td>
|
|
279
|
+
<td>Config / CSS</td>
|
|
280
|
+
<td>Sass + CSS vars</td>
|
|
281
|
+
</tr>
|
|
282
|
+
<tr>
|
|
283
|
+
<td>Focus styles</td>
|
|
284
|
+
<td><strong>Built-in</strong></td>
|
|
285
|
+
<td>Utility-based</td>
|
|
286
|
+
<td>Built-in</td>
|
|
287
|
+
</tr>
|
|
288
|
+
<tr>
|
|
289
|
+
<td>Reduced motion</td>
|
|
290
|
+
<td><strong>Built-in</strong></td>
|
|
291
|
+
<td>Utility-based</td>
|
|
292
|
+
<td>Built-in</td>
|
|
293
|
+
</tr>
|
|
294
|
+
</tbody>
|
|
295
|
+
</table>
|
|
296
|
+
</div>
|
|
297
|
+
</div>
|
|
298
|
+
</div>
|
|
299
|
+
|
|
300
|
+
<!-- Forms -->
|
|
301
|
+
<div class="units-row">
|
|
302
|
+
<div class="unit-50 tablet-unit-100">
|
|
303
|
+
<div class="card">
|
|
304
|
+
<h4>Form Elements</h4>
|
|
305
|
+
<form class="form" onsubmit="return false;">
|
|
306
|
+
<label>
|
|
307
|
+
Text input
|
|
308
|
+
<input type="text" placeholder="Type here...">
|
|
309
|
+
</label>
|
|
310
|
+
<label>
|
|
311
|
+
Email
|
|
312
|
+
<input type="email" placeholder="name@example.com">
|
|
313
|
+
</label>
|
|
314
|
+
<label>
|
|
315
|
+
Password
|
|
316
|
+
<input type="password" placeholder="Password">
|
|
317
|
+
</label>
|
|
318
|
+
<label>
|
|
319
|
+
Select
|
|
320
|
+
<select>
|
|
321
|
+
<option>Option 1</option>
|
|
322
|
+
<option>Option 2</option>
|
|
323
|
+
<option>Option 3</option>
|
|
324
|
+
</select>
|
|
325
|
+
</label>
|
|
326
|
+
<label>
|
|
327
|
+
Textarea
|
|
328
|
+
<textarea rows="3" placeholder="Write something..."></textarea>
|
|
329
|
+
</label>
|
|
330
|
+
<label>
|
|
331
|
+
Date
|
|
332
|
+
<input type="date">
|
|
333
|
+
</label>
|
|
334
|
+
<label>
|
|
335
|
+
Color
|
|
336
|
+
<input type="color" value="#2575ed">
|
|
337
|
+
</label>
|
|
338
|
+
<label>
|
|
339
|
+
Range
|
|
340
|
+
<input type="range" min="0" max="100" value="50">
|
|
341
|
+
</label>
|
|
342
|
+
<label>
|
|
343
|
+
File
|
|
344
|
+
<input type="file">
|
|
345
|
+
</label>
|
|
346
|
+
</form>
|
|
347
|
+
</div>
|
|
348
|
+
</div>
|
|
349
|
+
<div class="unit-50 tablet-unit-100">
|
|
350
|
+
<div class="card">
|
|
351
|
+
<h4>Checkboxes & Radios</h4>
|
|
352
|
+
<fieldset>
|
|
353
|
+
<legend>Choose your options</legend>
|
|
354
|
+
<label><input type="checkbox" checked> Option A</label>
|
|
355
|
+
<label><input type="checkbox"> Option B</label>
|
|
356
|
+
<label><input type="checkbox"> Option C</label>
|
|
357
|
+
</fieldset>
|
|
358
|
+
<fieldset>
|
|
359
|
+
<legend>Pick one</legend>
|
|
360
|
+
<label><input type="radio" name="pick" checked> Radio 1</label>
|
|
361
|
+
<label><input type="radio" name="pick"> Radio 2</label>
|
|
362
|
+
<label><input type="radio" name="pick"> Radio 3</label>
|
|
363
|
+
</fieldset>
|
|
364
|
+
|
|
365
|
+
<h4>Input States</h4>
|
|
366
|
+
<form class="form" onsubmit="return false;">
|
|
367
|
+
<label>
|
|
368
|
+
Success
|
|
369
|
+
<input type="text" class="input-success" value="Valid input">
|
|
370
|
+
</label>
|
|
371
|
+
<label>
|
|
372
|
+
Error
|
|
373
|
+
<input type="text" class="input-error" value="Invalid input">
|
|
374
|
+
</label>
|
|
375
|
+
<label>
|
|
376
|
+
Disabled
|
|
377
|
+
<input type="text" disabled value="Disabled input">
|
|
378
|
+
</label>
|
|
379
|
+
</form>
|
|
380
|
+
|
|
381
|
+
<h4>Input Groups</h4>
|
|
382
|
+
<div class="input-groups">
|
|
383
|
+
<span class="input-prepend">https://</span>
|
|
384
|
+
<input type="text" placeholder="example.com">
|
|
385
|
+
</div>
|
|
386
|
+
|
|
387
|
+
<h4>Progress & Meter</h4>
|
|
388
|
+
<label>Progress (65%)
|
|
389
|
+
<progress value="65" max="100"></progress>
|
|
390
|
+
</label>
|
|
391
|
+
<label>Meter (7/10)
|
|
392
|
+
<meter min="0" max="10" low="3" high="7" optimum="8" value="7"></meter>
|
|
393
|
+
</label>
|
|
394
|
+
</div>
|
|
395
|
+
</div>
|
|
396
|
+
</div>
|
|
397
|
+
|
|
398
|
+
<!-- Dialog -->
|
|
399
|
+
<div class="units-row">
|
|
400
|
+
<div class="unit-100">
|
|
401
|
+
<div class="card">
|
|
402
|
+
<h4>Dialog (Modal)</h4>
|
|
403
|
+
<p>Native <code><dialog></code> element — no JavaScript library required.</p>
|
|
404
|
+
<button class="btn btn-sm" onclick="document.getElementById('demo-dialog').showModal()">Open Dialog</button>
|
|
405
|
+
<dialog id="demo-dialog">
|
|
406
|
+
<h3>Native Dialog</h3>
|
|
407
|
+
<p>This is a <code><dialog></code> element styled by ply. It supports backdrop, focus trapping (browser-native), and Escape to close.</p>
|
|
408
|
+
<form method="dialog">
|
|
409
|
+
<button class="btn btn-sm">Close</button>
|
|
410
|
+
</form>
|
|
411
|
+
</dialog>
|
|
412
|
+
</div>
|
|
413
|
+
</div>
|
|
414
|
+
</div>
|
|
415
|
+
|
|
416
|
+
<!-- Horizontal Rule -->
|
|
417
|
+
<div class="units-row">
|
|
418
|
+
<div class="unit-100">
|
|
419
|
+
<div class="card">
|
|
420
|
+
<h4>Horizontal Rule</h4>
|
|
421
|
+
<p>Content above the rule.</p>
|
|
422
|
+
<hr>
|
|
423
|
+
<p>Content below the rule.</p>
|
|
424
|
+
</div>
|
|
425
|
+
</div>
|
|
426
|
+
</div>
|
|
427
|
+
</section>
|
|
428
|
+
|
|
429
|
+
<hr class="divider">
|
|
430
|
+
|
|
431
|
+
<!-- Components -->
|
|
432
|
+
<section class="section" id="components">
|
|
433
|
+
<p class="section-label">Components</p>
|
|
434
|
+
<h2>ply components</h2>
|
|
435
|
+
|
|
436
|
+
<!-- Buttons -->
|
|
437
|
+
<div class="units-row">
|
|
438
|
+
<div class="unit-100">
|
|
439
|
+
<div class="card">
|
|
440
|
+
<h4>Buttons</h4>
|
|
441
|
+
<div class="margin-bottom">
|
|
442
|
+
<button class="btn">Default</button>
|
|
443
|
+
<button class="btn btn-blue">Blue</button>
|
|
444
|
+
<button class="btn btn-red">Red</button>
|
|
445
|
+
<button class="btn btn-green">Green</button>
|
|
446
|
+
<button class="btn btn-yellow">Yellow</button>
|
|
447
|
+
<button class="btn btn-black">Black</button>
|
|
448
|
+
<button class="btn btn-white">White</button>
|
|
449
|
+
</div>
|
|
450
|
+
<div class="margin-bottom">
|
|
451
|
+
<button class="btn btn-outline">Outline</button>
|
|
452
|
+
<button class="btn btn-outline bold">Outline Bold</button>
|
|
453
|
+
<button class="btn btn-active">Active</button>
|
|
454
|
+
<button class="btn" disabled>Disabled</button>
|
|
455
|
+
</div>
|
|
456
|
+
<div class="margin-bottom">
|
|
457
|
+
<button class="btn btn-lg">Large</button>
|
|
458
|
+
<button class="btn">Default</button>
|
|
459
|
+
<button class="btn btn-sm">Small</button>
|
|
460
|
+
<button class="btn btn-xs">Extra Small</button>
|
|
461
|
+
</div>
|
|
462
|
+
<h4>Button Group</h4>
|
|
463
|
+
<div class="btn-group">
|
|
464
|
+
<button class="btn btn-outline">Left</button>
|
|
465
|
+
<button class="btn btn-outline">Center</button>
|
|
466
|
+
<button class="btn btn-outline">Right</button>
|
|
467
|
+
</div>
|
|
468
|
+
</div>
|
|
469
|
+
</div>
|
|
470
|
+
</div>
|
|
471
|
+
|
|
472
|
+
<!-- Alerts -->
|
|
473
|
+
<div class="units-row">
|
|
474
|
+
<div class="unit-100">
|
|
475
|
+
<div class="card">
|
|
476
|
+
<h4>Alerts</h4>
|
|
477
|
+
<div class="alert alert-blue">
|
|
478
|
+
<span class="alert-content">Info — This is a blue alert for informational messages.</span>
|
|
479
|
+
<button class="alert-dismiss" aria-label="Dismiss"></button>
|
|
480
|
+
</div>
|
|
481
|
+
<div class="alert alert-green">
|
|
482
|
+
<span class="alert-content">Success — Operation completed successfully.</span>
|
|
483
|
+
<button class="alert-dismiss" aria-label="Dismiss"></button>
|
|
484
|
+
</div>
|
|
485
|
+
<div class="alert alert-yellow">
|
|
486
|
+
<span class="alert-content">Warning — Please review before continuing.</span>
|
|
487
|
+
<button class="alert-dismiss" aria-label="Dismiss"></button>
|
|
488
|
+
</div>
|
|
489
|
+
<div class="alert alert-red">
|
|
490
|
+
<span class="alert-content">Error — Something went wrong.</span>
|
|
491
|
+
<button class="alert-dismiss" aria-label="Dismiss"></button>
|
|
492
|
+
</div>
|
|
493
|
+
<div class="alert alert-black">
|
|
494
|
+
<span class="alert-content">Neutral — A general-purpose notification.</span>
|
|
495
|
+
</div>
|
|
496
|
+
|
|
497
|
+
<h4>Alert Variants</h4>
|
|
498
|
+
<div class="alert alert-outline alert-blue">
|
|
499
|
+
<span class="alert-content">Outlined blue alert.</span>
|
|
500
|
+
</div>
|
|
501
|
+
<div class="alert alert-ghost alert-blue">
|
|
502
|
+
<span class="alert-content">Ghost blue alert — transparent background.</span>
|
|
503
|
+
</div>
|
|
504
|
+
</div>
|
|
505
|
+
</div>
|
|
506
|
+
</div>
|
|
507
|
+
|
|
508
|
+
<!-- Navigation -->
|
|
509
|
+
<div class="units-row">
|
|
510
|
+
<div class="unit-50 tablet-unit-100">
|
|
511
|
+
<div class="card">
|
|
512
|
+
<h4>Navigation Pills</h4>
|
|
513
|
+
<nav>
|
|
514
|
+
<ul class="navbar-pills">
|
|
515
|
+
<li class="active"><a href="#">Active</a></li>
|
|
516
|
+
<li><a href="#">Link</a></li>
|
|
517
|
+
<li><a href="#">Link</a></li>
|
|
518
|
+
</ul>
|
|
519
|
+
</nav>
|
|
520
|
+
|
|
521
|
+
<h4>Tabs</h4>
|
|
522
|
+
<nav>
|
|
523
|
+
<ul class="nav-tabs">
|
|
524
|
+
<li class="active"><a href="#">Tab 1</a></li>
|
|
525
|
+
<li><a href="#">Tab 2</a></li>
|
|
526
|
+
<li><a href="#">Tab 3</a></li>
|
|
527
|
+
</ul>
|
|
528
|
+
</nav>
|
|
529
|
+
</div>
|
|
530
|
+
</div>
|
|
531
|
+
<div class="unit-50 tablet-unit-100">
|
|
532
|
+
<div class="card">
|
|
533
|
+
<h4>Breadcrumbs</h4>
|
|
534
|
+
<nav aria-label="Breadcrumb">
|
|
535
|
+
<ul class="breadcrumbs">
|
|
536
|
+
<li><a href="#">Home</a></li>
|
|
537
|
+
<li><a href="#">Components</a></li>
|
|
538
|
+
<li>Breadcrumbs</li>
|
|
539
|
+
</ul>
|
|
540
|
+
</nav>
|
|
541
|
+
|
|
542
|
+
<h4>Pagination</h4>
|
|
543
|
+
<nav aria-label="Pagination">
|
|
544
|
+
<ul class="pagination">
|
|
545
|
+
<li><a href="#">«</a></li>
|
|
546
|
+
<li><a href="#">1</a></li>
|
|
547
|
+
<li class="active"><a href="#">2</a></li>
|
|
548
|
+
<li><a href="#">3</a></li>
|
|
549
|
+
<li><a href="#">»</a></li>
|
|
550
|
+
</ul>
|
|
551
|
+
</nav>
|
|
552
|
+
</div>
|
|
553
|
+
</div>
|
|
554
|
+
</div>
|
|
555
|
+
|
|
556
|
+
<!-- Labels -->
|
|
557
|
+
<div class="units-row">
|
|
558
|
+
<div class="unit-100">
|
|
559
|
+
<div class="card">
|
|
560
|
+
<h4>Labels</h4>
|
|
561
|
+
<span class="label">Default</span>
|
|
562
|
+
<span class="label label-blue">Blue</span>
|
|
563
|
+
<span class="label label-red">Red</span>
|
|
564
|
+
<span class="label label-green">Green</span>
|
|
565
|
+
<span class="label label-yellow">Yellow</span>
|
|
566
|
+
<span class="label label-black">Black</span>
|
|
567
|
+
</div>
|
|
568
|
+
</div>
|
|
569
|
+
</div>
|
|
570
|
+
</section>
|
|
571
|
+
|
|
572
|
+
<hr class="divider">
|
|
573
|
+
|
|
574
|
+
<!-- Layers & Depth -->
|
|
575
|
+
<section class="section" id="layers">
|
|
576
|
+
<p class="section-label">Elevation</p>
|
|
577
|
+
<h2>Layers & Depth</h2>
|
|
578
|
+
<p>ply provides a 4-level elevation system using CSS custom properties. Each layer has a background and corresponding shadow that adapts across all themes.</p>
|
|
579
|
+
|
|
580
|
+
<div class="units-row">
|
|
581
|
+
<div class="unit-25 tablet-unit-50 phone-unit-100">
|
|
582
|
+
<div class="layer-demo layer-0">
|
|
583
|
+
<strong>Layer 0</strong>
|
|
584
|
+
<p class="text-sm">Base surface. No elevation.</p>
|
|
585
|
+
</div>
|
|
586
|
+
</div>
|
|
587
|
+
<div class="unit-25 tablet-unit-50 phone-unit-100">
|
|
588
|
+
<div class="layer-demo layer-1" style="border-radius: 6px;">
|
|
589
|
+
<strong>Layer 1</strong>
|
|
590
|
+
<p class="text-sm">Cards, panels. Subtle lift.</p>
|
|
591
|
+
</div>
|
|
592
|
+
</div>
|
|
593
|
+
<div class="unit-25 tablet-unit-50 phone-unit-100">
|
|
594
|
+
<div class="layer-demo layer-2" style="border-radius: 6px;">
|
|
595
|
+
<strong>Layer 2</strong>
|
|
596
|
+
<p class="text-sm">Dropdowns, popovers.</p>
|
|
597
|
+
</div>
|
|
598
|
+
</div>
|
|
599
|
+
<div class="unit-25 tablet-unit-50 phone-unit-100">
|
|
600
|
+
<div class="layer-demo layer-3" style="border-radius: 6px;">
|
|
601
|
+
<strong>Layer 3</strong>
|
|
602
|
+
<p class="text-sm">Modals, dialogs.</p>
|
|
603
|
+
</div>
|
|
604
|
+
</div>
|
|
605
|
+
</div>
|
|
606
|
+
|
|
607
|
+
<div class="units-row">
|
|
608
|
+
<div class="unit-100">
|
|
609
|
+
<div class="card">
|
|
610
|
+
<h4>Shadow Utilities</h4>
|
|
611
|
+
<p>Apply shadows independently with <code>.shadow-1</code>, <code>.shadow-2</code>, <code>.shadow-3</code>:</p>
|
|
612
|
+
<div class="units-row">
|
|
613
|
+
<div class="unit-33 tablet-unit-100">
|
|
614
|
+
<div class="shadow-1 padding border-radius margin-bottom" style="background: var(--ply-bg-surface);">
|
|
615
|
+
<code>.shadow-1</code> — subtle
|
|
616
|
+
</div>
|
|
617
|
+
</div>
|
|
618
|
+
<div class="unit-33 tablet-unit-100">
|
|
619
|
+
<div class="shadow-2 padding border-radius margin-bottom" style="background: var(--ply-bg-surface);">
|
|
620
|
+
<code>.shadow-2</code> — medium
|
|
621
|
+
</div>
|
|
622
|
+
</div>
|
|
623
|
+
<div class="unit-33 tablet-unit-100">
|
|
624
|
+
<div class="shadow-3 padding border-radius margin-bottom" style="background: var(--ply-bg-surface);">
|
|
625
|
+
<code>.shadow-3</code> — pronounced
|
|
626
|
+
</div>
|
|
627
|
+
</div>
|
|
628
|
+
</div>
|
|
629
|
+
</div>
|
|
630
|
+
</div>
|
|
631
|
+
</div>
|
|
632
|
+
|
|
633
|
+
<div class="units-row">
|
|
634
|
+
<div class="unit-100">
|
|
635
|
+
<div class="card">
|
|
636
|
+
<h4>CSS Custom Properties</h4>
|
|
637
|
+
<pre><code>/* Use in your own CSS */
|
|
638
|
+
.my-card {
|
|
639
|
+
background: var(--ply-layer-1);
|
|
640
|
+
box-shadow: var(--ply-shadow-2);
|
|
641
|
+
}
|
|
642
|
+
|
|
643
|
+
/* Or use the utility classes */
|
|
644
|
+
<div class="layer-2">Elevated content</div>
|
|
645
|
+
<div class="shadow-1">Subtle shadow only</div></code></pre>
|
|
646
|
+
</div>
|
|
647
|
+
</div>
|
|
648
|
+
</div>
|
|
649
|
+
</section>
|
|
650
|
+
|
|
651
|
+
<hr class="divider">
|
|
652
|
+
|
|
653
|
+
<!-- Theming -->
|
|
654
|
+
<section class="section" id="themes">
|
|
655
|
+
<p class="section-label">Theming</p>
|
|
656
|
+
<h2>Build Your Own Theme</h2>
|
|
657
|
+
<p>ply uses CSS custom properties (<code>--ply-*</code>) for every color, border, shadow, and layer. To create a custom theme, override these tokens in a <code>[data-theme]</code> selector and set that attribute on <code><html></code>. No Sass, no build step.</p>
|
|
658
|
+
|
|
659
|
+
<div class="units-row">
|
|
660
|
+
<div class="unit-100">
|
|
661
|
+
<div class="card">
|
|
662
|
+
<h4>Three steps</h4>
|
|
663
|
+
<pre><code><!-- 1. Define your theme in a <style> block or stylesheet -->
|
|
664
|
+
<style>
|
|
665
|
+
[data-theme="brand"] {
|
|
666
|
+
--ply-bg-body: #fefce8;
|
|
667
|
+
--ply-bg-surface: #ffffff;
|
|
668
|
+
--ply-color-body: #1a1a1a;
|
|
669
|
+
--ply-color-link: #b45309;
|
|
670
|
+
--ply-border-color: #d6d3d1;
|
|
671
|
+
--ply-btn-default-bg: #b45309;
|
|
672
|
+
--ply-btn-default-hover: #92400e;
|
|
673
|
+
/* override as many or as few tokens as you need */
|
|
674
|
+
}
|
|
675
|
+
</style>
|
|
676
|
+
|
|
677
|
+
<!-- 2. Activate it -->
|
|
678
|
+
<html data-theme="brand">
|
|
679
|
+
|
|
680
|
+
<!-- 3. Or switch at runtime -->
|
|
681
|
+
<script>
|
|
682
|
+
document.documentElement.setAttribute('data-theme', 'brand');
|
|
683
|
+
</script></code></pre>
|
|
684
|
+
</div>
|
|
685
|
+
</div>
|
|
686
|
+
</div>
|
|
687
|
+
|
|
688
|
+
<div class="units-row">
|
|
689
|
+
<div class="unit-50 tablet-unit-100">
|
|
690
|
+
<div class="card">
|
|
691
|
+
<h4>Built-in modes</h4>
|
|
692
|
+
<p>ply ships with <strong>light</strong> and <strong>dark</strong>. Dark mode activates automatically via <code>prefers-color-scheme</code>, or you can force it with <code>data-theme="dark"</code>.</p>
|
|
693
|
+
</div>
|
|
694
|
+
</div>
|
|
695
|
+
<div class="unit-50 tablet-unit-100">
|
|
696
|
+
<div class="card">
|
|
697
|
+
<h4>Everything adapts</h4>
|
|
698
|
+
<p>All components — alerts, buttons, forms, navigation, tables, layers — read from <code>--ply-*</code> tokens. Override the tokens and every component follows.</p>
|
|
699
|
+
</div>
|
|
700
|
+
</div>
|
|
701
|
+
</div>
|
|
702
|
+
|
|
703
|
+
<div class="units-row">
|
|
704
|
+
<div class="unit-100">
|
|
705
|
+
<div class="card">
|
|
706
|
+
<h4>Token reference</h4>
|
|
707
|
+
<table class="table-stripped">
|
|
708
|
+
<thead>
|
|
709
|
+
<tr><th>Token</th><th>Purpose</th></tr>
|
|
710
|
+
</thead>
|
|
711
|
+
<tbody>
|
|
712
|
+
<tr><td><code>--ply-bg-body</code></td><td>Page background</td></tr>
|
|
713
|
+
<tr><td><code>--ply-bg-surface</code></td><td>Card / panel background</td></tr>
|
|
714
|
+
<tr><td><code>--ply-bg-surface-alt</code></td><td>Alternating surface</td></tr>
|
|
715
|
+
<tr><td><code>--ply-bg-muted</code></td><td>Muted / disabled background</td></tr>
|
|
716
|
+
<tr><td><code>--ply-color-body</code></td><td>Primary text</td></tr>
|
|
717
|
+
<tr><td><code>--ply-color-headings</code></td><td>Heading text</td></tr>
|
|
718
|
+
<tr><td><code>--ply-color-secondary</code></td><td>Secondary text</td></tr>
|
|
719
|
+
<tr><td><code>--ply-color-muted</code></td><td>Muted text</td></tr>
|
|
720
|
+
<tr><td><code>--ply-color-text-inverse</code></td><td>Text on dark buttons</td></tr>
|
|
721
|
+
<tr><td><code>--ply-border-color</code></td><td>Default borders</td></tr>
|
|
722
|
+
<tr><td><code>--ply-color-link</code></td><td>Link color</td></tr>
|
|
723
|
+
<tr><td><code>--ply-color-focus</code></td><td>Focus ring</td></tr>
|
|
724
|
+
<tr><td><code>--ply-color-input-bg</code></td><td>Input background</td></tr>
|
|
725
|
+
<tr><td><code>--ply-color-input-border</code></td><td>Input border</td></tr>
|
|
726
|
+
<tr><td><code>--ply-btn-default-bg</code></td><td>Default button</td></tr>
|
|
727
|
+
<tr><td><code>--ply-nav-bg</code></td><td>Navigation background</td></tr>
|
|
728
|
+
<tr><td><code>--ply-layer-0</code>–<code>3</code></td><td>Elevation backgrounds</td></tr>
|
|
729
|
+
<tr><td><code>--ply-shadow-1</code>–<code>3</code></td><td>Elevation shadows</td></tr>
|
|
730
|
+
</tbody>
|
|
731
|
+
</table>
|
|
732
|
+
<p class="text-sm" style="color:var(--ply-color-muted);">See <a href="custom-theme.html">custom-theme.html</a> for a full working example with two custom themes (Midnight and Warm).</p>
|
|
733
|
+
</div>
|
|
734
|
+
</div>
|
|
735
|
+
</div>
|
|
736
|
+
</section>
|
|
737
|
+
|
|
738
|
+
<hr class="divider">
|
|
739
|
+
|
|
740
|
+
<!-- Typography Scale -->
|
|
741
|
+
<section class="section" id="typography">
|
|
742
|
+
<p class="section-label">Typography</p>
|
|
743
|
+
<h2>Type Scale</h2>
|
|
744
|
+
<div class="units-row">
|
|
745
|
+
<div class="unit-100">
|
|
746
|
+
<div class="card">
|
|
747
|
+
<p class="text-5xl">text-5xl</p>
|
|
748
|
+
<p class="text-4xl">text-4xl</p>
|
|
749
|
+
<p class="text-3xl">text-3xl</p>
|
|
750
|
+
<p class="text-2xl">text-2xl</p>
|
|
751
|
+
<p class="text-xl">text-xl</p>
|
|
752
|
+
<p class="text-lg">text-lg</p>
|
|
753
|
+
<p class="text-base">text-base</p>
|
|
754
|
+
<p class="text-sm">text-sm</p>
|
|
755
|
+
<p class="text-xs">text-xs</p>
|
|
756
|
+
</div>
|
|
757
|
+
</div>
|
|
758
|
+
</div>
|
|
759
|
+
</section>
|
|
760
|
+
|
|
761
|
+
<hr class="divider">
|
|
762
|
+
|
|
763
|
+
<!-- Get Started -->
|
|
764
|
+
<section class="section">
|
|
765
|
+
<p class="section-label">Install</p>
|
|
766
|
+
<h2>Get Started</h2>
|
|
767
|
+
<p>Add one line to your HTML:</p>
|
|
768
|
+
<pre><code><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ply-css@1/dist/css/ply.min.css"></code></pre>
|
|
769
|
+
<p>That's it. Write semantic HTML. ply handles the rest.</p>
|
|
770
|
+
</section>
|
|
771
|
+
|
|
772
|
+
<hr class="divider">
|
|
773
|
+
|
|
774
|
+
<footer style="padding: 2rem 0; text-align: center;">
|
|
775
|
+
<p class="text-sm" style="color: var(--ply-color-muted);">ply v0.9.9 — MIT License — <a href="https://github.com/thatgibbyguy/ply">GitHub</a></p>
|
|
776
|
+
</footer>
|
|
777
|
+
|
|
778
|
+
</main>
|
|
779
|
+
</div>
|
|
780
|
+
|
|
781
|
+
</body>
|
|
782
|
+
</html>
|