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
package/ply-classes.json
ADDED
|
@@ -0,0 +1,2625 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": "1.3.0",
|
|
3
|
+
"framework": "ply",
|
|
4
|
+
"totalClasses": 457,
|
|
5
|
+
"uniqueClasses": 457,
|
|
6
|
+
"darkMode": "Auto dark mode uses :root:not([data-theme]) and prefers-color-scheme: dark. Setting any data-theme value on <html> disables auto dark mode, so custom themes won't have dark styles applied over them.",
|
|
7
|
+
"themeMinimum": {
|
|
8
|
+
"description": "Override these variables for a minimum viable custom theme. All other variables are optional refinements.",
|
|
9
|
+
"variables": [
|
|
10
|
+
"--ply-bg-body",
|
|
11
|
+
"--ply-bg-surface",
|
|
12
|
+
"--ply-bg-muted",
|
|
13
|
+
"--ply-color-body",
|
|
14
|
+
"--ply-color-headings",
|
|
15
|
+
"--ply-color-secondary",
|
|
16
|
+
"--ply-border-color",
|
|
17
|
+
"--ply-btn-default-bg",
|
|
18
|
+
"--ply-btn-secondary-bg",
|
|
19
|
+
"--ply-color-accent",
|
|
20
|
+
"--ply-btn-border-radius",
|
|
21
|
+
"--ply-nav-bg",
|
|
22
|
+
"--ply-nav-border"
|
|
23
|
+
]
|
|
24
|
+
},
|
|
25
|
+
"themeRecommended": {
|
|
26
|
+
"description": "Override these for a polished theme. Not strictly required but prevents default values from leaking through.",
|
|
27
|
+
"variables": [
|
|
28
|
+
"--ply-bg-surface-alt",
|
|
29
|
+
"--ply-color-muted",
|
|
30
|
+
"--ply-color-placeholder",
|
|
31
|
+
"--ply-color-text-inverse",
|
|
32
|
+
"--ply-border-strong",
|
|
33
|
+
"--ply-color-focus",
|
|
34
|
+
"--ply-color-input-bg",
|
|
35
|
+
"--ply-color-input-border",
|
|
36
|
+
"--ply-color-code-bg",
|
|
37
|
+
"--ply-color-code-border",
|
|
38
|
+
"--ply-color-table-border",
|
|
39
|
+
"--ply-color-table-stripped",
|
|
40
|
+
"--ply-nav-color",
|
|
41
|
+
"--ply-nav-hover",
|
|
42
|
+
"--ply-layer-0",
|
|
43
|
+
"--ply-layer-1",
|
|
44
|
+
"--ply-layer-2",
|
|
45
|
+
"--ply-layer-3",
|
|
46
|
+
"--ply-shadow-1",
|
|
47
|
+
"--ply-shadow-2",
|
|
48
|
+
"--ply-shadow-3",
|
|
49
|
+
"--ply-btn-default-color",
|
|
50
|
+
"--ply-btn-default-bg-hover",
|
|
51
|
+
"--ply-btn-default-bg-active",
|
|
52
|
+
"--ply-btn-secondary-color",
|
|
53
|
+
"--ply-btn-secondary-bg-hover",
|
|
54
|
+
"--ply-btn-secondary-bg-active",
|
|
55
|
+
"--ply-color-link-hover",
|
|
56
|
+
"--ply-color-accent",
|
|
57
|
+
"--ply-btn-border-radius"
|
|
58
|
+
]
|
|
59
|
+
},
|
|
60
|
+
"themeTemplate": {
|
|
61
|
+
"description": "Copy-paste starting point for custom themes. Replace placeholder values with your design colors. Every ply component respects these variables.",
|
|
62
|
+
"css": "[data-theme=\"my-theme\"] {\n /* Background */\n --ply-bg-body: #___;\n --ply-bg-surface: #___;\n --ply-bg-surface-alt: #___;\n --ply-bg-muted: #___;\n\n /* Text */\n --ply-color-body: #___;\n --ply-color-headings: #___;\n --ply-color-secondary: #___;\n --ply-color-muted: #___;\n --ply-color-placeholder: #___;\n --ply-color-text-inverse: #___;\n\n /* Borders */\n --ply-border-color: #___;\n --ply-border-strong: #___;\n\n /* Interactive */\n --ply-color-accent: #___;\n --ply-color-focus: #___;\n --ply-color-link-hover: #___;\n\n /* Buttons */\n --ply-btn-default-bg: #___;\n --ply-btn-default-color: #___;\n --ply-btn-default-bg-hover: #___;\n --ply-btn-default-bg-active: #___;\n --ply-btn-secondary-bg: #___;\n --ply-btn-secondary-color: #___;\n --ply-btn-secondary-bg-hover: #___;\n --ply-btn-secondary-bg-active: #___;\n --ply-btn-border-radius: 2rem;\n\n /* Forms */\n --ply-color-input-bg: #___;\n --ply-color-input-border: #___;\n\n /* Navigation */\n --ply-nav-bg: #___;\n --ply-nav-color: #___;\n --ply-nav-border: #___;\n --ply-nav-hover: #___;\n\n /* Code */\n --ply-color-code-bg: #___;\n --ply-color-code-border: #___;\n\n /* Tables */\n --ply-color-table-border: #___;\n --ply-color-table-stripped: #___;\n\n /* Elevation */\n --ply-layer-0: #___;\n --ply-layer-1: #___;\n --ply-layer-2: #___;\n --ply-layer-3: #___;\n --ply-shadow-1: rgba(0, 0, 0, 0.08);\n --ply-shadow-2: rgba(0, 0, 0, 0.1);\n --ply-shadow-3: rgba(0, 0, 0, 0.12);\n\n /* Typography (optional) */\n --ply-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n --ply-font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n --ply-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n}"
|
|
63
|
+
},
|
|
64
|
+
"classes": {
|
|
65
|
+
"units-container": {
|
|
66
|
+
"category": "grid",
|
|
67
|
+
"description": "Grid wrapper with max-width 1200px, auto-centered with padding.",
|
|
68
|
+
"example": "<div class=\"units-container\">...</div>"
|
|
69
|
+
},
|
|
70
|
+
"units-row": {
|
|
71
|
+
"category": "grid",
|
|
72
|
+
"description": "Flex row container for grid units. Uses flex-flow: row wrap.",
|
|
73
|
+
"children": [
|
|
74
|
+
"unit-100",
|
|
75
|
+
"unit-90",
|
|
76
|
+
"unit-88",
|
|
77
|
+
"unit-80",
|
|
78
|
+
"unit-75",
|
|
79
|
+
"unit-70",
|
|
80
|
+
"unit-66",
|
|
81
|
+
"unit-65",
|
|
82
|
+
"unit-62",
|
|
83
|
+
"unit-60",
|
|
84
|
+
"unit-50",
|
|
85
|
+
"unit-40",
|
|
86
|
+
"unit-38",
|
|
87
|
+
"unit-35",
|
|
88
|
+
"unit-33",
|
|
89
|
+
"unit-30",
|
|
90
|
+
"unit-25",
|
|
91
|
+
"unit-20",
|
|
92
|
+
"unit-12",
|
|
93
|
+
"unit-10",
|
|
94
|
+
"unit-auto"
|
|
95
|
+
],
|
|
96
|
+
"example": "<div class=\"units-row\"><div class=\"unit-50\">...</div><div class=\"unit-50\">...</div></div>"
|
|
97
|
+
},
|
|
98
|
+
"container-query": {
|
|
99
|
+
"category": "grid",
|
|
100
|
+
"description": "Enables CSS container queries on an element (container-type: inline-size). Wrap around a units-row to use container-scoped responsive classes instead of viewport-based ones.",
|
|
101
|
+
"containerPrefixes": [
|
|
102
|
+
"container-phone-unit-*",
|
|
103
|
+
"container-large-phone-unit-*",
|
|
104
|
+
"container-tablet-unit-*",
|
|
105
|
+
"container-small-desktop-unit-*"
|
|
106
|
+
],
|
|
107
|
+
"example": "<div class=\"container-query\"><div class=\"units-row\"><div class=\"unit-50 container-tablet-unit-100\">Stacks when container is narrow</div><div class=\"unit-50 container-tablet-unit-100\">Stacks when container is narrow</div></div></div>"
|
|
108
|
+
},
|
|
109
|
+
"unit-100": {
|
|
110
|
+
"category": "grid",
|
|
111
|
+
"description": "Grid unit — flex-basis: 100%. Collapses to 100% on tablet breakpoint.",
|
|
112
|
+
"parent": "units-row",
|
|
113
|
+
"responsive": [
|
|
114
|
+
"tablet-unit-*",
|
|
115
|
+
"phone-unit-*",
|
|
116
|
+
"large-phone-unit-*",
|
|
117
|
+
"small-desktop-unit-*",
|
|
118
|
+
"large-screen-unit-*",
|
|
119
|
+
"x-large-screen-unit-*",
|
|
120
|
+
"forever-unit-*",
|
|
121
|
+
"container-phone-unit-*",
|
|
122
|
+
"container-large-phone-unit-*",
|
|
123
|
+
"container-tablet-unit-*",
|
|
124
|
+
"container-small-desktop-unit-*"
|
|
125
|
+
],
|
|
126
|
+
"example": "<div class=\"units-row\"><div class=\"unit-100\">Full width</div></div>"
|
|
127
|
+
},
|
|
128
|
+
"unit-90": {
|
|
129
|
+
"category": "grid",
|
|
130
|
+
"description": "Grid unit — flex-basis: 90%.",
|
|
131
|
+
"parent": "units-row",
|
|
132
|
+
"responsive": [
|
|
133
|
+
"tablet-unit-*",
|
|
134
|
+
"phone-unit-*",
|
|
135
|
+
"large-phone-unit-*",
|
|
136
|
+
"small-desktop-unit-*",
|
|
137
|
+
"large-screen-unit-*",
|
|
138
|
+
"x-large-screen-unit-*",
|
|
139
|
+
"forever-unit-*",
|
|
140
|
+
"container-phone-unit-*",
|
|
141
|
+
"container-large-phone-unit-*",
|
|
142
|
+
"container-tablet-unit-*",
|
|
143
|
+
"container-small-desktop-unit-*"
|
|
144
|
+
]
|
|
145
|
+
},
|
|
146
|
+
"unit-88": {
|
|
147
|
+
"category": "grid",
|
|
148
|
+
"description": "Grid unit — flex-basis: 87.5%.",
|
|
149
|
+
"parent": "units-row",
|
|
150
|
+
"responsive": [
|
|
151
|
+
"tablet-unit-*",
|
|
152
|
+
"phone-unit-*",
|
|
153
|
+
"large-phone-unit-*",
|
|
154
|
+
"small-desktop-unit-*",
|
|
155
|
+
"large-screen-unit-*",
|
|
156
|
+
"x-large-screen-unit-*",
|
|
157
|
+
"forever-unit-*",
|
|
158
|
+
"container-phone-unit-*",
|
|
159
|
+
"container-large-phone-unit-*",
|
|
160
|
+
"container-tablet-unit-*",
|
|
161
|
+
"container-small-desktop-unit-*"
|
|
162
|
+
]
|
|
163
|
+
},
|
|
164
|
+
"unit-80": {
|
|
165
|
+
"category": "grid",
|
|
166
|
+
"description": "Grid unit — flex-basis: 80%.",
|
|
167
|
+
"parent": "units-row",
|
|
168
|
+
"responsive": [
|
|
169
|
+
"tablet-unit-*",
|
|
170
|
+
"phone-unit-*",
|
|
171
|
+
"large-phone-unit-*",
|
|
172
|
+
"small-desktop-unit-*",
|
|
173
|
+
"large-screen-unit-*",
|
|
174
|
+
"x-large-screen-unit-*",
|
|
175
|
+
"forever-unit-*",
|
|
176
|
+
"container-phone-unit-*",
|
|
177
|
+
"container-large-phone-unit-*",
|
|
178
|
+
"container-tablet-unit-*",
|
|
179
|
+
"container-small-desktop-unit-*"
|
|
180
|
+
]
|
|
181
|
+
},
|
|
182
|
+
"unit-75": {
|
|
183
|
+
"category": "grid",
|
|
184
|
+
"description": "Grid unit — flex-basis: 75%.",
|
|
185
|
+
"parent": "units-row",
|
|
186
|
+
"responsive": [
|
|
187
|
+
"tablet-unit-*",
|
|
188
|
+
"phone-unit-*",
|
|
189
|
+
"large-phone-unit-*",
|
|
190
|
+
"small-desktop-unit-*",
|
|
191
|
+
"large-screen-unit-*",
|
|
192
|
+
"x-large-screen-unit-*",
|
|
193
|
+
"forever-unit-*",
|
|
194
|
+
"container-phone-unit-*",
|
|
195
|
+
"container-large-phone-unit-*",
|
|
196
|
+
"container-tablet-unit-*",
|
|
197
|
+
"container-small-desktop-unit-*"
|
|
198
|
+
]
|
|
199
|
+
},
|
|
200
|
+
"unit-70": {
|
|
201
|
+
"category": "grid",
|
|
202
|
+
"description": "Grid unit — flex-basis: 70%.",
|
|
203
|
+
"parent": "units-row",
|
|
204
|
+
"responsive": [
|
|
205
|
+
"tablet-unit-*",
|
|
206
|
+
"phone-unit-*",
|
|
207
|
+
"large-phone-unit-*",
|
|
208
|
+
"small-desktop-unit-*",
|
|
209
|
+
"large-screen-unit-*",
|
|
210
|
+
"x-large-screen-unit-*",
|
|
211
|
+
"forever-unit-*",
|
|
212
|
+
"container-phone-unit-*",
|
|
213
|
+
"container-large-phone-unit-*",
|
|
214
|
+
"container-tablet-unit-*",
|
|
215
|
+
"container-small-desktop-unit-*"
|
|
216
|
+
]
|
|
217
|
+
},
|
|
218
|
+
"unit-66": {
|
|
219
|
+
"category": "grid",
|
|
220
|
+
"description": "Grid unit — flex-basis: 66.6% (two-thirds).",
|
|
221
|
+
"parent": "units-row",
|
|
222
|
+
"responsive": [
|
|
223
|
+
"tablet-unit-*",
|
|
224
|
+
"phone-unit-*",
|
|
225
|
+
"large-phone-unit-*",
|
|
226
|
+
"small-desktop-unit-*",
|
|
227
|
+
"large-screen-unit-*",
|
|
228
|
+
"x-large-screen-unit-*",
|
|
229
|
+
"forever-unit-*",
|
|
230
|
+
"container-phone-unit-*",
|
|
231
|
+
"container-large-phone-unit-*",
|
|
232
|
+
"container-tablet-unit-*",
|
|
233
|
+
"container-small-desktop-unit-*"
|
|
234
|
+
]
|
|
235
|
+
},
|
|
236
|
+
"unit-65": {
|
|
237
|
+
"category": "grid",
|
|
238
|
+
"description": "Grid unit — flex-basis: 65%.",
|
|
239
|
+
"parent": "units-row",
|
|
240
|
+
"responsive": [
|
|
241
|
+
"tablet-unit-*",
|
|
242
|
+
"phone-unit-*",
|
|
243
|
+
"large-phone-unit-*",
|
|
244
|
+
"small-desktop-unit-*",
|
|
245
|
+
"large-screen-unit-*",
|
|
246
|
+
"x-large-screen-unit-*",
|
|
247
|
+
"forever-unit-*",
|
|
248
|
+
"container-phone-unit-*",
|
|
249
|
+
"container-large-phone-unit-*",
|
|
250
|
+
"container-tablet-unit-*",
|
|
251
|
+
"container-small-desktop-unit-*"
|
|
252
|
+
]
|
|
253
|
+
},
|
|
254
|
+
"unit-62": {
|
|
255
|
+
"category": "grid",
|
|
256
|
+
"description": "Grid unit — flex-basis: 62.5%.",
|
|
257
|
+
"parent": "units-row",
|
|
258
|
+
"responsive": [
|
|
259
|
+
"tablet-unit-*",
|
|
260
|
+
"phone-unit-*",
|
|
261
|
+
"large-phone-unit-*",
|
|
262
|
+
"small-desktop-unit-*",
|
|
263
|
+
"large-screen-unit-*",
|
|
264
|
+
"x-large-screen-unit-*",
|
|
265
|
+
"forever-unit-*",
|
|
266
|
+
"container-phone-unit-*",
|
|
267
|
+
"container-large-phone-unit-*",
|
|
268
|
+
"container-tablet-unit-*",
|
|
269
|
+
"container-small-desktop-unit-*"
|
|
270
|
+
]
|
|
271
|
+
},
|
|
272
|
+
"unit-60": {
|
|
273
|
+
"category": "grid",
|
|
274
|
+
"description": "Grid unit — flex-basis: 60%.",
|
|
275
|
+
"parent": "units-row",
|
|
276
|
+
"responsive": [
|
|
277
|
+
"tablet-unit-*",
|
|
278
|
+
"phone-unit-*",
|
|
279
|
+
"large-phone-unit-*",
|
|
280
|
+
"small-desktop-unit-*",
|
|
281
|
+
"large-screen-unit-*",
|
|
282
|
+
"x-large-screen-unit-*",
|
|
283
|
+
"forever-unit-*",
|
|
284
|
+
"container-phone-unit-*",
|
|
285
|
+
"container-large-phone-unit-*",
|
|
286
|
+
"container-tablet-unit-*",
|
|
287
|
+
"container-small-desktop-unit-*"
|
|
288
|
+
]
|
|
289
|
+
},
|
|
290
|
+
"unit-50": {
|
|
291
|
+
"category": "grid",
|
|
292
|
+
"description": "Grid unit — flex-basis: 50% (half).",
|
|
293
|
+
"parent": "units-row",
|
|
294
|
+
"responsive": [
|
|
295
|
+
"tablet-unit-*",
|
|
296
|
+
"phone-unit-*",
|
|
297
|
+
"large-phone-unit-*",
|
|
298
|
+
"small-desktop-unit-*",
|
|
299
|
+
"large-screen-unit-*",
|
|
300
|
+
"x-large-screen-unit-*",
|
|
301
|
+
"forever-unit-*",
|
|
302
|
+
"container-phone-unit-*",
|
|
303
|
+
"container-large-phone-unit-*",
|
|
304
|
+
"container-tablet-unit-*",
|
|
305
|
+
"container-small-desktop-unit-*"
|
|
306
|
+
],
|
|
307
|
+
"example": "<div class=\"units-row\"><div class=\"unit-50\">Left</div><div class=\"unit-50\">Right</div></div>"
|
|
308
|
+
},
|
|
309
|
+
"unit-40": {
|
|
310
|
+
"category": "grid",
|
|
311
|
+
"description": "Grid unit — flex-basis: 40%.",
|
|
312
|
+
"parent": "units-row",
|
|
313
|
+
"responsive": [
|
|
314
|
+
"tablet-unit-*",
|
|
315
|
+
"phone-unit-*",
|
|
316
|
+
"large-phone-unit-*",
|
|
317
|
+
"small-desktop-unit-*",
|
|
318
|
+
"large-screen-unit-*",
|
|
319
|
+
"x-large-screen-unit-*",
|
|
320
|
+
"forever-unit-*",
|
|
321
|
+
"container-phone-unit-*",
|
|
322
|
+
"container-large-phone-unit-*",
|
|
323
|
+
"container-tablet-unit-*",
|
|
324
|
+
"container-small-desktop-unit-*"
|
|
325
|
+
]
|
|
326
|
+
},
|
|
327
|
+
"unit-38": {
|
|
328
|
+
"category": "grid",
|
|
329
|
+
"description": "Grid unit — flex-basis: 37.5%.",
|
|
330
|
+
"parent": "units-row",
|
|
331
|
+
"responsive": [
|
|
332
|
+
"tablet-unit-*",
|
|
333
|
+
"phone-unit-*",
|
|
334
|
+
"large-phone-unit-*",
|
|
335
|
+
"small-desktop-unit-*",
|
|
336
|
+
"large-screen-unit-*",
|
|
337
|
+
"x-large-screen-unit-*",
|
|
338
|
+
"forever-unit-*",
|
|
339
|
+
"container-phone-unit-*",
|
|
340
|
+
"container-large-phone-unit-*",
|
|
341
|
+
"container-tablet-unit-*",
|
|
342
|
+
"container-small-desktop-unit-*"
|
|
343
|
+
]
|
|
344
|
+
},
|
|
345
|
+
"unit-35": {
|
|
346
|
+
"category": "grid",
|
|
347
|
+
"description": "Grid unit — flex-basis: 35%.",
|
|
348
|
+
"parent": "units-row",
|
|
349
|
+
"responsive": [
|
|
350
|
+
"tablet-unit-*",
|
|
351
|
+
"phone-unit-*",
|
|
352
|
+
"large-phone-unit-*",
|
|
353
|
+
"small-desktop-unit-*",
|
|
354
|
+
"large-screen-unit-*",
|
|
355
|
+
"x-large-screen-unit-*",
|
|
356
|
+
"forever-unit-*",
|
|
357
|
+
"container-phone-unit-*",
|
|
358
|
+
"container-large-phone-unit-*",
|
|
359
|
+
"container-tablet-unit-*",
|
|
360
|
+
"container-small-desktop-unit-*"
|
|
361
|
+
]
|
|
362
|
+
},
|
|
363
|
+
"unit-33": {
|
|
364
|
+
"category": "grid",
|
|
365
|
+
"description": "Grid unit — flex-basis: 33.3% (one-third).",
|
|
366
|
+
"parent": "units-row",
|
|
367
|
+
"responsive": [
|
|
368
|
+
"tablet-unit-*",
|
|
369
|
+
"phone-unit-*",
|
|
370
|
+
"large-phone-unit-*",
|
|
371
|
+
"small-desktop-unit-*",
|
|
372
|
+
"large-screen-unit-*",
|
|
373
|
+
"x-large-screen-unit-*",
|
|
374
|
+
"forever-unit-*",
|
|
375
|
+
"container-phone-unit-*",
|
|
376
|
+
"container-large-phone-unit-*",
|
|
377
|
+
"container-tablet-unit-*",
|
|
378
|
+
"container-small-desktop-unit-*"
|
|
379
|
+
],
|
|
380
|
+
"example": "<div class=\"units-row\"><div class=\"unit-33\">Col</div><div class=\"unit-33\">Col</div><div class=\"unit-33\">Col</div></div>"
|
|
381
|
+
},
|
|
382
|
+
"unit-30": {
|
|
383
|
+
"category": "grid",
|
|
384
|
+
"description": "Grid unit — flex-basis: 30%.",
|
|
385
|
+
"parent": "units-row",
|
|
386
|
+
"responsive": [
|
|
387
|
+
"tablet-unit-*",
|
|
388
|
+
"phone-unit-*",
|
|
389
|
+
"large-phone-unit-*",
|
|
390
|
+
"small-desktop-unit-*",
|
|
391
|
+
"large-screen-unit-*",
|
|
392
|
+
"x-large-screen-unit-*",
|
|
393
|
+
"forever-unit-*",
|
|
394
|
+
"container-phone-unit-*",
|
|
395
|
+
"container-large-phone-unit-*",
|
|
396
|
+
"container-tablet-unit-*",
|
|
397
|
+
"container-small-desktop-unit-*"
|
|
398
|
+
]
|
|
399
|
+
},
|
|
400
|
+
"unit-25": {
|
|
401
|
+
"category": "grid",
|
|
402
|
+
"description": "Grid unit — flex-basis: 25% (one-quarter).",
|
|
403
|
+
"parent": "units-row",
|
|
404
|
+
"responsive": [
|
|
405
|
+
"tablet-unit-*",
|
|
406
|
+
"phone-unit-*",
|
|
407
|
+
"large-phone-unit-*",
|
|
408
|
+
"small-desktop-unit-*",
|
|
409
|
+
"large-screen-unit-*",
|
|
410
|
+
"x-large-screen-unit-*",
|
|
411
|
+
"forever-unit-*",
|
|
412
|
+
"container-phone-unit-*",
|
|
413
|
+
"container-large-phone-unit-*",
|
|
414
|
+
"container-tablet-unit-*",
|
|
415
|
+
"container-small-desktop-unit-*"
|
|
416
|
+
]
|
|
417
|
+
},
|
|
418
|
+
"unit-20": {
|
|
419
|
+
"category": "grid",
|
|
420
|
+
"description": "Grid unit — flex-basis: 20%.",
|
|
421
|
+
"parent": "units-row",
|
|
422
|
+
"responsive": [
|
|
423
|
+
"tablet-unit-*",
|
|
424
|
+
"phone-unit-*",
|
|
425
|
+
"large-phone-unit-*",
|
|
426
|
+
"small-desktop-unit-*",
|
|
427
|
+
"large-screen-unit-*",
|
|
428
|
+
"x-large-screen-unit-*",
|
|
429
|
+
"forever-unit-*",
|
|
430
|
+
"container-phone-unit-*",
|
|
431
|
+
"container-large-phone-unit-*",
|
|
432
|
+
"container-tablet-unit-*",
|
|
433
|
+
"container-small-desktop-unit-*"
|
|
434
|
+
]
|
|
435
|
+
},
|
|
436
|
+
"unit-12": {
|
|
437
|
+
"category": "grid",
|
|
438
|
+
"description": "Grid unit — flex-basis: 12.5%.",
|
|
439
|
+
"parent": "units-row",
|
|
440
|
+
"responsive": [
|
|
441
|
+
"tablet-unit-*",
|
|
442
|
+
"phone-unit-*",
|
|
443
|
+
"large-phone-unit-*",
|
|
444
|
+
"small-desktop-unit-*",
|
|
445
|
+
"large-screen-unit-*",
|
|
446
|
+
"x-large-screen-unit-*",
|
|
447
|
+
"forever-unit-*",
|
|
448
|
+
"container-phone-unit-*",
|
|
449
|
+
"container-large-phone-unit-*",
|
|
450
|
+
"container-tablet-unit-*",
|
|
451
|
+
"container-small-desktop-unit-*"
|
|
452
|
+
]
|
|
453
|
+
},
|
|
454
|
+
"unit-10": {
|
|
455
|
+
"category": "grid",
|
|
456
|
+
"description": "Grid unit — flex-basis: 10%.",
|
|
457
|
+
"parent": "units-row",
|
|
458
|
+
"responsive": [
|
|
459
|
+
"tablet-unit-*",
|
|
460
|
+
"phone-unit-*",
|
|
461
|
+
"large-phone-unit-*",
|
|
462
|
+
"small-desktop-unit-*",
|
|
463
|
+
"large-screen-unit-*",
|
|
464
|
+
"x-large-screen-unit-*",
|
|
465
|
+
"forever-unit-*",
|
|
466
|
+
"container-phone-unit-*",
|
|
467
|
+
"container-large-phone-unit-*",
|
|
468
|
+
"container-tablet-unit-*",
|
|
469
|
+
"container-small-desktop-unit-*"
|
|
470
|
+
]
|
|
471
|
+
},
|
|
472
|
+
"unit-auto": {
|
|
473
|
+
"category": "grid",
|
|
474
|
+
"description": "Grid unit — flex-grow: 1, fills remaining space.",
|
|
475
|
+
"parent": "units-row",
|
|
476
|
+
"responsive": [
|
|
477
|
+
"tablet-unit-*",
|
|
478
|
+
"phone-unit-*",
|
|
479
|
+
"large-phone-unit-*",
|
|
480
|
+
"small-desktop-unit-*",
|
|
481
|
+
"large-screen-unit-*",
|
|
482
|
+
"x-large-screen-unit-*",
|
|
483
|
+
"forever-unit-*",
|
|
484
|
+
"container-phone-unit-*",
|
|
485
|
+
"container-large-phone-unit-*",
|
|
486
|
+
"container-tablet-unit-*",
|
|
487
|
+
"container-small-desktop-unit-*"
|
|
488
|
+
]
|
|
489
|
+
},
|
|
490
|
+
"reverse-direction": {
|
|
491
|
+
"category": "grid",
|
|
492
|
+
"description": "Reverse row direction (flex-direction: row-reverse). Applied to units-row.",
|
|
493
|
+
"example": "<div class=\"units-row reverse-direction\">...</div>"
|
|
494
|
+
},
|
|
495
|
+
"split": {
|
|
496
|
+
"category": "grid",
|
|
497
|
+
"description": "Remove gutters from child units. Applied to units-row.",
|
|
498
|
+
"example": "<div class=\"units-row split\">...</div>"
|
|
499
|
+
},
|
|
500
|
+
"centered-content": {
|
|
501
|
+
"category": "grid",
|
|
502
|
+
"description": "Center content within row (justify-content: center; text-align: center). Applied to units-row.",
|
|
503
|
+
"example": "<div class=\"units-row centered-content\">...</div>"
|
|
504
|
+
},
|
|
505
|
+
"stacked": {
|
|
506
|
+
"category": "grid",
|
|
507
|
+
"description": "Remove bottom margin from row. Applied to units-row.",
|
|
508
|
+
"example": "<div class=\"units-row stacked\">...</div>"
|
|
509
|
+
},
|
|
510
|
+
"btn": {
|
|
511
|
+
"category": "buttons",
|
|
512
|
+
"description": "Base button class. Inline-block, centered text, secondary gray background (same as btn-secondary). All btn variants include :focus-visible outlines for keyboard accessibility and meet WCAG AA color contrast requirements in both light and dark modes. Use <button> elements (not <a> tags) for actions. For primary actions use btn-primary, for secondary actions use btn or btn-secondary.",
|
|
513
|
+
"example": "<button class=\"btn\">Click</button>",
|
|
514
|
+
"note": "Produces the same styling as .btn-secondary by default"
|
|
515
|
+
},
|
|
516
|
+
"btn-primary": {
|
|
517
|
+
"category": "buttons",
|
|
518
|
+
"description": "Primary action button. Blue by default, themed via --ply-btn-default-bg. Use for the main call-to-action. WCAG AA compliant (4.56:1 contrast). Hover/active states derived via color-mix().",
|
|
519
|
+
"example": "<button class=\"btn btn-primary\">Submit</button>"
|
|
520
|
+
},
|
|
521
|
+
"btn-secondary": {
|
|
522
|
+
"category": "buttons",
|
|
523
|
+
"description": "Secondary action button. Dark gray by default, themed via --ply-btn-secondary-bg. Use for secondary actions alongside a primary button.",
|
|
524
|
+
"example": "<button class=\"btn btn-secondary\">Cancel</button>",
|
|
525
|
+
"note": "Identical to .btn (both produce secondary styling by default)"
|
|
526
|
+
},
|
|
527
|
+
"btn-primary-outline": {
|
|
528
|
+
"category": "buttons",
|
|
529
|
+
"description": "Outlined primary button. Border and text color from --ply-btn-default-bg, transparent background. Fills with primary color on hover.",
|
|
530
|
+
"example": "<button class=\"btn btn-primary-outline\">Learn More</button>"
|
|
531
|
+
},
|
|
532
|
+
"btn-secondary-outline": {
|
|
533
|
+
"category": "buttons",
|
|
534
|
+
"description": "Outlined secondary button. Border and text color from --ply-btn-secondary-bg, transparent background. Fills with secondary color on hover.",
|
|
535
|
+
"example": "<button class=\"btn btn-secondary-outline\">Details</button>"
|
|
536
|
+
},
|
|
537
|
+
"btn-blue": {
|
|
538
|
+
"category": "buttons",
|
|
539
|
+
"description": "Static blue button. Hardcoded color, immune to theming. Use for color-coded actions that should not change with custom themes.",
|
|
540
|
+
"example": "<button class=\"btn btn-blue\">Submit</button>"
|
|
541
|
+
},
|
|
542
|
+
"btn-red": {
|
|
543
|
+
"category": "buttons",
|
|
544
|
+
"description": "Static red button. Hardcoded color, immune to theming. Use for destructive actions.",
|
|
545
|
+
"example": "<button class=\"btn btn-red\">Delete</button>"
|
|
546
|
+
},
|
|
547
|
+
"btn-green": {
|
|
548
|
+
"category": "buttons",
|
|
549
|
+
"description": "Static green button. Hardcoded color, immune to theming. Use for success/confirmation actions.",
|
|
550
|
+
"example": "<button class=\"btn btn-green\">Success</button>"
|
|
551
|
+
},
|
|
552
|
+
"btn-black": {
|
|
553
|
+
"category": "buttons",
|
|
554
|
+
"description": "Black color variant button.",
|
|
555
|
+
"example": "<button class=\"btn btn-black\">Action</button>"
|
|
556
|
+
},
|
|
557
|
+
"btn-yellow": {
|
|
558
|
+
"category": "buttons",
|
|
559
|
+
"description": "Static yellow button. Hardcoded color, immune to theming. Dark text for contrast.",
|
|
560
|
+
"example": "<button class=\"btn btn-yellow\">Warning</button>"
|
|
561
|
+
},
|
|
562
|
+
"btn-white": {
|
|
563
|
+
"category": "buttons",
|
|
564
|
+
"description": "White color variant button.",
|
|
565
|
+
"example": "<button class=\"btn btn-white\">Light</button>"
|
|
566
|
+
},
|
|
567
|
+
"btn-outline": {
|
|
568
|
+
"category": "buttons",
|
|
569
|
+
"description": "Outlined button variant. Transparent background with border.",
|
|
570
|
+
"example": "<button class=\"btn btn-outline\">Outline</button>"
|
|
571
|
+
},
|
|
572
|
+
"btn-active": {
|
|
573
|
+
"category": "buttons",
|
|
574
|
+
"description": "Active/pressed state. Muted background with inset shadow.",
|
|
575
|
+
"example": "<button class=\"btn btn-active\">Active</button>"
|
|
576
|
+
},
|
|
577
|
+
"btn-disabled": {
|
|
578
|
+
"category": "buttons",
|
|
579
|
+
"description": "Disabled state. Muted colors, default cursor.",
|
|
580
|
+
"example": "<button class=\"btn btn-disabled\">Disabled</button>"
|
|
581
|
+
},
|
|
582
|
+
"btn-square": {
|
|
583
|
+
"category": "buttons",
|
|
584
|
+
"description": "Alias for btn-straight. Remove border-radius from button.",
|
|
585
|
+
"example": "<button class=\"btn btn-square\">Square</button>"
|
|
586
|
+
},
|
|
587
|
+
"btn-group": {
|
|
588
|
+
"category": "buttons",
|
|
589
|
+
"description": "Button group container. Flex row that joins buttons together.",
|
|
590
|
+
"children": [
|
|
591
|
+
"btn"
|
|
592
|
+
],
|
|
593
|
+
"example": "<div class=\"btn-group\"><button class=\"btn\">One</button><button class=\"btn\">Two</button></div>"
|
|
594
|
+
},
|
|
595
|
+
"form": {
|
|
596
|
+
"category": "forms",
|
|
597
|
+
"description": "Form wrapper class. Enables styled inputs with full width, border-radius, and consistent padding.",
|
|
598
|
+
"example": "<form class=\"form\"><label>Name<input type=\"text\"></label></form>"
|
|
599
|
+
},
|
|
600
|
+
"form-inline": {
|
|
601
|
+
"category": "forms",
|
|
602
|
+
"description": "Inline form layout. Labels and inputs display inline-block.",
|
|
603
|
+
"example": "<ul class=\"form-inline\"><li><label>Name <input type=\"text\"></label></li></ul>"
|
|
604
|
+
},
|
|
605
|
+
"form-inline-list": {
|
|
606
|
+
"category": "forms",
|
|
607
|
+
"description": "Inline form list layout with spacing between items.",
|
|
608
|
+
"example": "<ul class=\"form-inline-list\"><li><label>Name <input type=\"text\"></label></li></ul>"
|
|
609
|
+
},
|
|
610
|
+
"form-list": {
|
|
611
|
+
"category": "forms",
|
|
612
|
+
"description": "List-style form layout with vertical spacing between items.",
|
|
613
|
+
"example": "<ul class=\"form-list\"><li><label><input type=\"checkbox\"> Option</label></li></ul>"
|
|
614
|
+
},
|
|
615
|
+
"form-desc": {
|
|
616
|
+
"category": "forms",
|
|
617
|
+
"description": "Form description/help text. Small, muted color.",
|
|
618
|
+
"example": "<span class=\"form-desc\">Enter your full name</span>"
|
|
619
|
+
},
|
|
620
|
+
"input-error": {
|
|
621
|
+
"category": "forms",
|
|
622
|
+
"description": "Error state for inputs. Red border with red box-shadow.",
|
|
623
|
+
"example": "<input type=\"text\" class=\"input-error\">"
|
|
624
|
+
},
|
|
625
|
+
"input-success": {
|
|
626
|
+
"category": "forms",
|
|
627
|
+
"description": "Success state for inputs. Green border with green box-shadow.",
|
|
628
|
+
"example": "<input type=\"text\" class=\"input-success\">"
|
|
629
|
+
},
|
|
630
|
+
"input-gray": {
|
|
631
|
+
"category": "forms",
|
|
632
|
+
"description": "Gray/neutral state for inputs. Gray border with gray box-shadow.",
|
|
633
|
+
"example": "<input type=\"text\" class=\"input-gray\">"
|
|
634
|
+
},
|
|
635
|
+
"input-search": {
|
|
636
|
+
"category": "forms",
|
|
637
|
+
"description": "Rounded search input with pill-shaped border-radius.",
|
|
638
|
+
"example": "<input type=\"search\" class=\"input-search\">"
|
|
639
|
+
},
|
|
640
|
+
"input-on-black": {
|
|
641
|
+
"category": "forms",
|
|
642
|
+
"description": "Input styled for dark backgrounds. Semi-transparent white background.",
|
|
643
|
+
"example": "<input type=\"text\" class=\"input-on-black\" placeholder=\"Search...\">"
|
|
644
|
+
},
|
|
645
|
+
"input-groups": {
|
|
646
|
+
"category": "forms",
|
|
647
|
+
"description": "Input group container. Flex layout for prepend/append addons.",
|
|
648
|
+
"children": [
|
|
649
|
+
"input-prepend",
|
|
650
|
+
"input-append",
|
|
651
|
+
"btn-append"
|
|
652
|
+
],
|
|
653
|
+
"example": "<div class=\"input-groups\"><span class=\"input-prepend\">$</span><input type=\"text\"></div>"
|
|
654
|
+
},
|
|
655
|
+
"input-prepend": {
|
|
656
|
+
"category": "forms",
|
|
657
|
+
"description": "Prepended addon for input groups. Displays before the input.",
|
|
658
|
+
"parent": "input-groups"
|
|
659
|
+
},
|
|
660
|
+
"input-append": {
|
|
661
|
+
"category": "forms",
|
|
662
|
+
"description": "Appended addon for input groups. Displays after the input.",
|
|
663
|
+
"parent": "input-groups"
|
|
664
|
+
},
|
|
665
|
+
"btn-append": {
|
|
666
|
+
"category": "forms",
|
|
667
|
+
"description": "Button appended to an input group.",
|
|
668
|
+
"parent": "input-groups",
|
|
669
|
+
"example": "<div class=\"input-groups\"><input type=\"text\"><div class=\"btn-append\"><button class=\"btn\">Go</button></div></div>"
|
|
670
|
+
},
|
|
671
|
+
"select-outlined": {
|
|
672
|
+
"category": "forms",
|
|
673
|
+
"description": "Outlined select variant. Transparent background with visible border.",
|
|
674
|
+
"example": "<select class=\"select-outlined\"><option>Choose</option></select>"
|
|
675
|
+
},
|
|
676
|
+
"navbar": {
|
|
677
|
+
"category": "navigation",
|
|
678
|
+
"description": "Horizontal navigation bar with bottom border. Contains ul > li > a structure.",
|
|
679
|
+
"example": "<nav class=\"navbar\"><ul><li class=\"active\"><a href=\"#\">Home</a></li><li><a href=\"#\">About</a></li></ul></nav>"
|
|
680
|
+
},
|
|
681
|
+
"navbar-centered": {
|
|
682
|
+
"category": "navigation",
|
|
683
|
+
"description": "Center-align navbar items (justify-content: center).",
|
|
684
|
+
"parent": "navbar",
|
|
685
|
+
"example": "<nav class=\"navbar navbar-centered\"><ul><li><a href=\"#\">Link</a></li></ul></nav>"
|
|
686
|
+
},
|
|
687
|
+
"navbar-left": {
|
|
688
|
+
"category": "navigation",
|
|
689
|
+
"description": "Left-align navbar items (justify-content: flex-start).",
|
|
690
|
+
"parent": "navbar"
|
|
691
|
+
},
|
|
692
|
+
"navbar-right": {
|
|
693
|
+
"category": "navigation",
|
|
694
|
+
"description": "Right-align navbar items (justify-content: flex-end).",
|
|
695
|
+
"parent": "navbar"
|
|
696
|
+
},
|
|
697
|
+
"navbar-vertical": {
|
|
698
|
+
"category": "navigation",
|
|
699
|
+
"description": "Vertical navbar layout with left border instead of bottom border.",
|
|
700
|
+
"parent": "navbar",
|
|
701
|
+
"example": "<nav class=\"navbar navbar-vertical\"><ul><li class=\"active\"><a href=\"#\">Item</a></li></ul></nav>"
|
|
702
|
+
},
|
|
703
|
+
"navbar-thick": {
|
|
704
|
+
"category": "navigation",
|
|
705
|
+
"description": "Bold 2px bottom border on navbar.",
|
|
706
|
+
"parent": "navbar",
|
|
707
|
+
"example": "<nav class=\"navbar navbar-thick\"><ul><li><a href=\"#\">Link</a></li></ul></nav>"
|
|
708
|
+
},
|
|
709
|
+
"navbar-borderless": {
|
|
710
|
+
"category": "navigation",
|
|
711
|
+
"description": "No border on navbar. Active items use background highlight instead.",
|
|
712
|
+
"parent": "navbar",
|
|
713
|
+
"example": "<nav class=\"navbar navbar-borderless\"><ul><li><a href=\"#\">Link</a></li></ul></nav>"
|
|
714
|
+
},
|
|
715
|
+
"navbar-border-blue": {
|
|
716
|
+
"category": "navigation",
|
|
717
|
+
"description": "Blue bottom border on navbar.",
|
|
718
|
+
"parent": "navbar"
|
|
719
|
+
},
|
|
720
|
+
"navbar-border-green": {
|
|
721
|
+
"category": "navigation",
|
|
722
|
+
"description": "Green bottom border on navbar.",
|
|
723
|
+
"parent": "navbar"
|
|
724
|
+
},
|
|
725
|
+
"navbar-border-red": {
|
|
726
|
+
"category": "navigation",
|
|
727
|
+
"description": "Red bottom border on navbar.",
|
|
728
|
+
"parent": "navbar"
|
|
729
|
+
},
|
|
730
|
+
"navbar-border-yellow": {
|
|
731
|
+
"category": "navigation",
|
|
732
|
+
"description": "Yellow bottom border on navbar.",
|
|
733
|
+
"parent": "navbar"
|
|
734
|
+
},
|
|
735
|
+
"navbar-stack": {
|
|
736
|
+
"category": "navigation",
|
|
737
|
+
"description": "On mobile, wrap navbar items instead of horizontal scrolling.",
|
|
738
|
+
"parent": "navbar"
|
|
739
|
+
},
|
|
740
|
+
"navbar-pills": {
|
|
741
|
+
"category": "navigation",
|
|
742
|
+
"description": "Pill-style navigation. Horizontal flex layout with hover backgrounds.",
|
|
743
|
+
"example": "<nav class=\"navbar-pills\"><ul><li class=\"active\"><a href=\"#\">Tab</a></li></ul></nav>"
|
|
744
|
+
},
|
|
745
|
+
"nav-stacked": {
|
|
746
|
+
"category": "navigation",
|
|
747
|
+
"description": "Vertical stacked navigation. Clean default with blue accent on active state. Use with nav-stacked-blocked for filled row style.",
|
|
748
|
+
"example": "<nav class=\"nav-stacked\"><ul><li class=\"active\"><a href=\"#\">Item</a></li></ul></nav>"
|
|
749
|
+
},
|
|
750
|
+
"nav-stacked-blocked": {
|
|
751
|
+
"category": "navigation",
|
|
752
|
+
"description": "Modifier for nav-stacked. Adds background fills and bottom borders to each row.",
|
|
753
|
+
"example": "<nav class=\"nav-stacked nav-stacked-blocked\"><ul><li class=\"active\"><a href=\"#\">Item</a></li></ul></nav>"
|
|
754
|
+
},
|
|
755
|
+
"nav-tabs": {
|
|
756
|
+
"category": "navigation",
|
|
757
|
+
"description": "Tab navigation with bottom border. Active tab has border-bottom highlight.",
|
|
758
|
+
"example": "<div class=\"nav-tabs\"><ul><li class=\"active\"><a href=\"#\">Tab 1</a></li><li><a href=\"#\">Tab 2</a></li></ul></div>"
|
|
759
|
+
},
|
|
760
|
+
"nav-stats": {
|
|
761
|
+
"category": "navigation",
|
|
762
|
+
"description": "Navigation with stats/badges. Positions badges absolutely to the right.",
|
|
763
|
+
"example": "<nav class=\"nav-stacked nav-stats\"><ul><li><a href=\"#\">Inbox <sup>12</sup></a></li></ul></nav>"
|
|
764
|
+
},
|
|
765
|
+
"breadcrumbs": {
|
|
766
|
+
"category": "navigation",
|
|
767
|
+
"description": "Breadcrumb navigation with slash separators between items.",
|
|
768
|
+
"example": "<div class=\"breadcrumbs\"><ul><li><a href=\"#\">Home</a></li><li class=\"active\"><a href=\"#\">Page</a></li></ul></div>"
|
|
769
|
+
},
|
|
770
|
+
"breadcrumbs-path": {
|
|
771
|
+
"category": "navigation",
|
|
772
|
+
"description": "Breadcrumb path-style variant. Modifier on breadcrumbs with spaced slashes.",
|
|
773
|
+
"parent": "breadcrumbs"
|
|
774
|
+
},
|
|
775
|
+
"pagination": {
|
|
776
|
+
"category": "navigation",
|
|
777
|
+
"description": "Pagination controls. Floated list items with hover and active states.",
|
|
778
|
+
"example": "<ul class=\"pagination\"><li><a href=\"#\">1</a></li><li class=\"active\"><a href=\"#\">2</a></li><li><a href=\"#\">3</a></li></ul>"
|
|
779
|
+
},
|
|
780
|
+
"active": {
|
|
781
|
+
"category": "navigation",
|
|
782
|
+
"description": "Active state for navigation items. Applied to li elements within navs.",
|
|
783
|
+
"example": "<li class=\"active\"><a href=\"#\">Current Page</a></li>"
|
|
784
|
+
},
|
|
785
|
+
"navigation-toggle": {
|
|
786
|
+
"category": "navigation",
|
|
787
|
+
"description": "Mobile menu toggle button with hamburger icon.",
|
|
788
|
+
"example": "<div class=\"navigation-toggle\"><span>Menu</span></div>"
|
|
789
|
+
},
|
|
790
|
+
"navigation-fixed": {
|
|
791
|
+
"category": "navigation",
|
|
792
|
+
"description": "Fixed positioning for navigation. position: fixed; top: 0; left: 0; z-index: 101.",
|
|
793
|
+
"example": "<nav class=\"navbar navigation-fixed\">...</nav>"
|
|
794
|
+
},
|
|
795
|
+
"text-xs": {
|
|
796
|
+
"category": "typography",
|
|
797
|
+
"description": "Extra small font size utility."
|
|
798
|
+
},
|
|
799
|
+
"text-sm": {
|
|
800
|
+
"category": "typography",
|
|
801
|
+
"description": "Small font size utility."
|
|
802
|
+
},
|
|
803
|
+
"text-base": {
|
|
804
|
+
"category": "typography",
|
|
805
|
+
"description": "Base font size utility."
|
|
806
|
+
},
|
|
807
|
+
"text-lg": {
|
|
808
|
+
"category": "typography",
|
|
809
|
+
"description": "Large font size utility."
|
|
810
|
+
},
|
|
811
|
+
"text-xl": {
|
|
812
|
+
"category": "typography",
|
|
813
|
+
"description": "Extra large font size utility."
|
|
814
|
+
},
|
|
815
|
+
"text-2xl": {
|
|
816
|
+
"category": "typography",
|
|
817
|
+
"description": "2x large font size utility."
|
|
818
|
+
},
|
|
819
|
+
"text-3xl": {
|
|
820
|
+
"category": "typography",
|
|
821
|
+
"description": "3x large font size utility."
|
|
822
|
+
},
|
|
823
|
+
"text-4xl": {
|
|
824
|
+
"category": "typography",
|
|
825
|
+
"description": "4x large font size utility."
|
|
826
|
+
},
|
|
827
|
+
"text-5xl": {
|
|
828
|
+
"category": "typography",
|
|
829
|
+
"description": "5x large font size utility."
|
|
830
|
+
},
|
|
831
|
+
"big": {
|
|
832
|
+
"category": "typography",
|
|
833
|
+
"description": "Legacy large font size class."
|
|
834
|
+
},
|
|
835
|
+
"small": {
|
|
836
|
+
"category": "typography",
|
|
837
|
+
"description": "Legacy small font size class."
|
|
838
|
+
},
|
|
839
|
+
"smaller": {
|
|
840
|
+
"category": "typography",
|
|
841
|
+
"description": "Legacy smaller font size class."
|
|
842
|
+
},
|
|
843
|
+
"light": {
|
|
844
|
+
"category": "typography",
|
|
845
|
+
"description": "Light font weight (300).",
|
|
846
|
+
"important": true
|
|
847
|
+
},
|
|
848
|
+
"font-normal": {
|
|
849
|
+
"category": "typography",
|
|
850
|
+
"description": "Normal font weight utility."
|
|
851
|
+
},
|
|
852
|
+
"font-medium": {
|
|
853
|
+
"category": "typography",
|
|
854
|
+
"description": "Medium font weight utility."
|
|
855
|
+
},
|
|
856
|
+
"font-semibold": {
|
|
857
|
+
"category": "typography",
|
|
858
|
+
"description": "Semibold font weight utility."
|
|
859
|
+
},
|
|
860
|
+
"font-bold": {
|
|
861
|
+
"category": "typography",
|
|
862
|
+
"description": "Bold font weight utility."
|
|
863
|
+
},
|
|
864
|
+
"leading-tight": {
|
|
865
|
+
"category": "typography",
|
|
866
|
+
"description": "Tight line-height utility."
|
|
867
|
+
},
|
|
868
|
+
"leading-snug": {
|
|
869
|
+
"category": "typography",
|
|
870
|
+
"description": "Snug line-height utility."
|
|
871
|
+
},
|
|
872
|
+
"leading-normal": {
|
|
873
|
+
"category": "typography",
|
|
874
|
+
"description": "Normal line-height utility."
|
|
875
|
+
},
|
|
876
|
+
"leading-relaxed": {
|
|
877
|
+
"category": "typography",
|
|
878
|
+
"description": "Relaxed line-height utility."
|
|
879
|
+
},
|
|
880
|
+
"lead": {
|
|
881
|
+
"category": "typography",
|
|
882
|
+
"description": "Lead paragraph style. Larger font size with relaxed line-height.",
|
|
883
|
+
"example": "<p class=\"lead\">This is a lead paragraph.</p>"
|
|
884
|
+
},
|
|
885
|
+
"bold": {
|
|
886
|
+
"category": "typography",
|
|
887
|
+
"description": "Bold text (font-weight: bold !important).",
|
|
888
|
+
"important": true
|
|
889
|
+
},
|
|
890
|
+
"italic": {
|
|
891
|
+
"category": "typography",
|
|
892
|
+
"description": "Italic text (font-style: italic)."
|
|
893
|
+
},
|
|
894
|
+
"uppercase": {
|
|
895
|
+
"category": "typography",
|
|
896
|
+
"description": "Uppercase text (text-transform: uppercase)."
|
|
897
|
+
},
|
|
898
|
+
"nowrap": {
|
|
899
|
+
"category": "typography",
|
|
900
|
+
"description": "Prevent text wrapping (white-space: nowrap)."
|
|
901
|
+
},
|
|
902
|
+
"text-right": {
|
|
903
|
+
"category": "typography",
|
|
904
|
+
"description": "Right-aligned text."
|
|
905
|
+
},
|
|
906
|
+
"text-left": {
|
|
907
|
+
"category": "typography",
|
|
908
|
+
"description": "Left-aligned text."
|
|
909
|
+
},
|
|
910
|
+
"h1": {
|
|
911
|
+
"category": "typography",
|
|
912
|
+
"description": "Apply h1 heading styles to any element.",
|
|
913
|
+
"example": "<span class=\"h1\">Large heading</span>"
|
|
914
|
+
},
|
|
915
|
+
"h2": {
|
|
916
|
+
"category": "typography",
|
|
917
|
+
"description": "Apply h2 heading styles to any element."
|
|
918
|
+
},
|
|
919
|
+
"h3": {
|
|
920
|
+
"category": "typography",
|
|
921
|
+
"description": "Apply h3 heading styles to any element."
|
|
922
|
+
},
|
|
923
|
+
"h4": {
|
|
924
|
+
"category": "typography",
|
|
925
|
+
"description": "Apply h4 heading styles to any element."
|
|
926
|
+
},
|
|
927
|
+
"h5": {
|
|
928
|
+
"category": "typography",
|
|
929
|
+
"description": "Apply h5 heading styles to any element."
|
|
930
|
+
},
|
|
931
|
+
"h6": {
|
|
932
|
+
"category": "typography",
|
|
933
|
+
"description": "Apply h6 heading styles to any element. Bold, uppercase."
|
|
934
|
+
},
|
|
935
|
+
"fixed": {
|
|
936
|
+
"category": "helpers",
|
|
937
|
+
"description": "position: fixed."
|
|
938
|
+
},
|
|
939
|
+
"absolute": {
|
|
940
|
+
"category": "helpers",
|
|
941
|
+
"description": "position: absolute."
|
|
942
|
+
},
|
|
943
|
+
"relative": {
|
|
944
|
+
"category": "helpers",
|
|
945
|
+
"description": "position: relative."
|
|
946
|
+
},
|
|
947
|
+
"static": {
|
|
948
|
+
"category": "helpers",
|
|
949
|
+
"description": "position: static."
|
|
950
|
+
},
|
|
951
|
+
"sticky": {
|
|
952
|
+
"category": "helpers",
|
|
953
|
+
"description": "position: sticky."
|
|
954
|
+
},
|
|
955
|
+
"display-flex": {
|
|
956
|
+
"category": "helpers",
|
|
957
|
+
"description": "display: flex."
|
|
958
|
+
},
|
|
959
|
+
"display-block": {
|
|
960
|
+
"category": "helpers",
|
|
961
|
+
"description": "display: block."
|
|
962
|
+
},
|
|
963
|
+
"display-inline-block": {
|
|
964
|
+
"category": "helpers",
|
|
965
|
+
"description": "display: inline-block."
|
|
966
|
+
},
|
|
967
|
+
"display-grid": {
|
|
968
|
+
"category": "helpers",
|
|
969
|
+
"description": "display: grid."
|
|
970
|
+
},
|
|
971
|
+
"display-none": {
|
|
972
|
+
"category": "helpers",
|
|
973
|
+
"description": "display: none."
|
|
974
|
+
},
|
|
975
|
+
"items-center": {
|
|
976
|
+
"category": "helpers",
|
|
977
|
+
"description": "align-items: center. Use with display-flex."
|
|
978
|
+
},
|
|
979
|
+
"items-start": {
|
|
980
|
+
"category": "helpers",
|
|
981
|
+
"description": "align-items: flex-start. Use with display-flex."
|
|
982
|
+
},
|
|
983
|
+
"items-end": {
|
|
984
|
+
"category": "helpers",
|
|
985
|
+
"description": "align-items: flex-end. Use with display-flex."
|
|
986
|
+
},
|
|
987
|
+
"items-stretch": {
|
|
988
|
+
"category": "helpers",
|
|
989
|
+
"description": "align-items: stretch. Use with display-flex."
|
|
990
|
+
},
|
|
991
|
+
"items-baseline": {
|
|
992
|
+
"category": "helpers",
|
|
993
|
+
"description": "align-items: baseline. Use with display-flex."
|
|
994
|
+
},
|
|
995
|
+
"justify-center": {
|
|
996
|
+
"category": "helpers",
|
|
997
|
+
"description": "justify-content: center. Use with display-flex."
|
|
998
|
+
},
|
|
999
|
+
"justify-between": {
|
|
1000
|
+
"category": "helpers",
|
|
1001
|
+
"description": "justify-content: space-between. Use with display-flex."
|
|
1002
|
+
},
|
|
1003
|
+
"justify-around": {
|
|
1004
|
+
"category": "helpers",
|
|
1005
|
+
"description": "justify-content: space-around. Use with display-flex."
|
|
1006
|
+
},
|
|
1007
|
+
"margin": {
|
|
1008
|
+
"category": "helpers",
|
|
1009
|
+
"description": "Add default margin on all sides."
|
|
1010
|
+
},
|
|
1011
|
+
"margin-xs": {
|
|
1012
|
+
"category": "helpers",
|
|
1013
|
+
"description": "Add extra-small margin on all sides (0.25rem)."
|
|
1014
|
+
},
|
|
1015
|
+
"margin-sm": {
|
|
1016
|
+
"category": "helpers",
|
|
1017
|
+
"description": "Add small margin on all sides (0.5rem)."
|
|
1018
|
+
},
|
|
1019
|
+
"margin-lg": {
|
|
1020
|
+
"category": "helpers",
|
|
1021
|
+
"description": "Add large margin on all sides (1.5rem)."
|
|
1022
|
+
},
|
|
1023
|
+
"margin-xl": {
|
|
1024
|
+
"category": "helpers",
|
|
1025
|
+
"description": "Add extra-large margin on all sides (2rem)."
|
|
1026
|
+
},
|
|
1027
|
+
"margin-top": {
|
|
1028
|
+
"category": "helpers",
|
|
1029
|
+
"description": "Add default margin-top."
|
|
1030
|
+
},
|
|
1031
|
+
"margin-top-xs": {
|
|
1032
|
+
"category": "helpers",
|
|
1033
|
+
"description": "Add extra-small margin-top (0.25rem)."
|
|
1034
|
+
},
|
|
1035
|
+
"margin-top-sm": {
|
|
1036
|
+
"category": "helpers",
|
|
1037
|
+
"description": "Add small margin-top (0.5rem)."
|
|
1038
|
+
},
|
|
1039
|
+
"margin-top-lg": {
|
|
1040
|
+
"category": "helpers",
|
|
1041
|
+
"description": "Add large margin-top (1.5rem)."
|
|
1042
|
+
},
|
|
1043
|
+
"margin-top-xl": {
|
|
1044
|
+
"category": "helpers",
|
|
1045
|
+
"description": "Add extra-large margin-top (2rem)."
|
|
1046
|
+
},
|
|
1047
|
+
"margin-bottom": {
|
|
1048
|
+
"category": "helpers",
|
|
1049
|
+
"description": "Add default margin-bottom."
|
|
1050
|
+
},
|
|
1051
|
+
"margin-bottom-xs": {
|
|
1052
|
+
"category": "helpers",
|
|
1053
|
+
"description": "Add extra-small margin-bottom (0.25rem)."
|
|
1054
|
+
},
|
|
1055
|
+
"margin-bottom-sm": {
|
|
1056
|
+
"category": "helpers",
|
|
1057
|
+
"description": "Add small margin-bottom (0.5rem)."
|
|
1058
|
+
},
|
|
1059
|
+
"margin-bottom-lg": {
|
|
1060
|
+
"category": "helpers",
|
|
1061
|
+
"description": "Add large margin-bottom (1.5rem)."
|
|
1062
|
+
},
|
|
1063
|
+
"margin-bottom-xl": {
|
|
1064
|
+
"category": "helpers",
|
|
1065
|
+
"description": "Add extra-large margin-bottom (2rem)."
|
|
1066
|
+
},
|
|
1067
|
+
"margin-left": {
|
|
1068
|
+
"category": "helpers",
|
|
1069
|
+
"description": "Add default margin-left."
|
|
1070
|
+
},
|
|
1071
|
+
"margin-left-xs": {
|
|
1072
|
+
"category": "helpers",
|
|
1073
|
+
"description": "Add extra-small margin-left (0.25rem)."
|
|
1074
|
+
},
|
|
1075
|
+
"margin-left-sm": {
|
|
1076
|
+
"category": "helpers",
|
|
1077
|
+
"description": "Add small margin-left (0.5rem)."
|
|
1078
|
+
},
|
|
1079
|
+
"margin-left-lg": {
|
|
1080
|
+
"category": "helpers",
|
|
1081
|
+
"description": "Add large margin-left (1.5rem)."
|
|
1082
|
+
},
|
|
1083
|
+
"margin-left-xl": {
|
|
1084
|
+
"category": "helpers",
|
|
1085
|
+
"description": "Add extra-large margin-left (2rem)."
|
|
1086
|
+
},
|
|
1087
|
+
"margin-right": {
|
|
1088
|
+
"category": "helpers",
|
|
1089
|
+
"description": "Add default margin-right."
|
|
1090
|
+
},
|
|
1091
|
+
"margin-right-xs": {
|
|
1092
|
+
"category": "helpers",
|
|
1093
|
+
"description": "Add extra-small margin-right (0.25rem)."
|
|
1094
|
+
},
|
|
1095
|
+
"margin-right-sm": {
|
|
1096
|
+
"category": "helpers",
|
|
1097
|
+
"description": "Add small margin-right (0.5rem)."
|
|
1098
|
+
},
|
|
1099
|
+
"margin-right-lg": {
|
|
1100
|
+
"category": "helpers",
|
|
1101
|
+
"description": "Add large margin-right (1.5rem)."
|
|
1102
|
+
},
|
|
1103
|
+
"margin-right-xl": {
|
|
1104
|
+
"category": "helpers",
|
|
1105
|
+
"description": "Add extra-large margin-right (2rem)."
|
|
1106
|
+
},
|
|
1107
|
+
"no-margin": {
|
|
1108
|
+
"category": "helpers",
|
|
1109
|
+
"description": "Remove all margin (!important).",
|
|
1110
|
+
"important": true
|
|
1111
|
+
},
|
|
1112
|
+
"no-spacing": {
|
|
1113
|
+
"category": "helpers",
|
|
1114
|
+
"description": "Remove all margin and padding (!important).",
|
|
1115
|
+
"important": true
|
|
1116
|
+
},
|
|
1117
|
+
"no-padding": {
|
|
1118
|
+
"category": "helpers",
|
|
1119
|
+
"description": "Remove all padding (!important).",
|
|
1120
|
+
"important": true
|
|
1121
|
+
},
|
|
1122
|
+
"padding": {
|
|
1123
|
+
"category": "helpers",
|
|
1124
|
+
"description": "Add default padding on all sides."
|
|
1125
|
+
},
|
|
1126
|
+
"padding-xs": {
|
|
1127
|
+
"category": "helpers",
|
|
1128
|
+
"description": "Add extra-small padding on all sides (0.25rem)."
|
|
1129
|
+
},
|
|
1130
|
+
"padding-sm": {
|
|
1131
|
+
"category": "helpers",
|
|
1132
|
+
"description": "Add small padding on all sides (0.5rem)."
|
|
1133
|
+
},
|
|
1134
|
+
"padding-lg": {
|
|
1135
|
+
"category": "helpers",
|
|
1136
|
+
"description": "Add large padding on all sides (1.5rem)."
|
|
1137
|
+
},
|
|
1138
|
+
"padding-xl": {
|
|
1139
|
+
"category": "helpers",
|
|
1140
|
+
"description": "Add extra-large padding on all sides (2rem)."
|
|
1141
|
+
},
|
|
1142
|
+
"padding-top": {
|
|
1143
|
+
"category": "helpers",
|
|
1144
|
+
"description": "Add default padding-top."
|
|
1145
|
+
},
|
|
1146
|
+
"padding-top-xs": {
|
|
1147
|
+
"category": "helpers",
|
|
1148
|
+
"description": "Add extra-small padding-top (0.25rem)."
|
|
1149
|
+
},
|
|
1150
|
+
"padding-top-sm": {
|
|
1151
|
+
"category": "helpers",
|
|
1152
|
+
"description": "Add small padding-top (0.5rem)."
|
|
1153
|
+
},
|
|
1154
|
+
"padding-top-lg": {
|
|
1155
|
+
"category": "helpers",
|
|
1156
|
+
"description": "Add large padding-top (1.5rem)."
|
|
1157
|
+
},
|
|
1158
|
+
"padding-top-xl": {
|
|
1159
|
+
"category": "helpers",
|
|
1160
|
+
"description": "Add extra-large padding-top (2rem)."
|
|
1161
|
+
},
|
|
1162
|
+
"padding-bottom": {
|
|
1163
|
+
"category": "helpers",
|
|
1164
|
+
"description": "Add default padding-bottom."
|
|
1165
|
+
},
|
|
1166
|
+
"padding-bottom-xs": {
|
|
1167
|
+
"category": "helpers",
|
|
1168
|
+
"description": "Add extra-small padding-bottom (0.25rem)."
|
|
1169
|
+
},
|
|
1170
|
+
"padding-bottom-sm": {
|
|
1171
|
+
"category": "helpers",
|
|
1172
|
+
"description": "Add small padding-bottom (0.5rem)."
|
|
1173
|
+
},
|
|
1174
|
+
"padding-bottom-lg": {
|
|
1175
|
+
"category": "helpers",
|
|
1176
|
+
"description": "Add large padding-bottom (1.5rem)."
|
|
1177
|
+
},
|
|
1178
|
+
"padding-bottom-xl": {
|
|
1179
|
+
"category": "helpers",
|
|
1180
|
+
"description": "Add extra-large padding-bottom (2rem)."
|
|
1181
|
+
},
|
|
1182
|
+
"padding-left": {
|
|
1183
|
+
"category": "helpers",
|
|
1184
|
+
"description": "Add default padding-left."
|
|
1185
|
+
},
|
|
1186
|
+
"padding-left-xs": {
|
|
1187
|
+
"category": "helpers",
|
|
1188
|
+
"description": "Add extra-small padding-left (0.25rem)."
|
|
1189
|
+
},
|
|
1190
|
+
"padding-left-sm": {
|
|
1191
|
+
"category": "helpers",
|
|
1192
|
+
"description": "Add small padding-left (0.5rem)."
|
|
1193
|
+
},
|
|
1194
|
+
"padding-left-lg": {
|
|
1195
|
+
"category": "helpers",
|
|
1196
|
+
"description": "Add large padding-left (1.5rem)."
|
|
1197
|
+
},
|
|
1198
|
+
"padding-left-xl": {
|
|
1199
|
+
"category": "helpers",
|
|
1200
|
+
"description": "Add extra-large padding-left (2rem)."
|
|
1201
|
+
},
|
|
1202
|
+
"padding-right": {
|
|
1203
|
+
"category": "helpers",
|
|
1204
|
+
"description": "Add default padding-right."
|
|
1205
|
+
},
|
|
1206
|
+
"padding-right-xs": {
|
|
1207
|
+
"category": "helpers",
|
|
1208
|
+
"description": "Add extra-small padding-right (0.25rem)."
|
|
1209
|
+
},
|
|
1210
|
+
"padding-right-sm": {
|
|
1211
|
+
"category": "helpers",
|
|
1212
|
+
"description": "Add small padding-right (0.5rem)."
|
|
1213
|
+
},
|
|
1214
|
+
"padding-right-lg": {
|
|
1215
|
+
"category": "helpers",
|
|
1216
|
+
"description": "Add large padding-right (1.5rem)."
|
|
1217
|
+
},
|
|
1218
|
+
"padding-right-xl": {
|
|
1219
|
+
"category": "helpers",
|
|
1220
|
+
"description": "Add extra-large padding-right (2rem)."
|
|
1221
|
+
},
|
|
1222
|
+
"border": {
|
|
1223
|
+
"category": "helpers",
|
|
1224
|
+
"description": "Add 1px solid border on all sides."
|
|
1225
|
+
},
|
|
1226
|
+
"border-top": {
|
|
1227
|
+
"category": "helpers",
|
|
1228
|
+
"description": "Add 1px solid border on top."
|
|
1229
|
+
},
|
|
1230
|
+
"border-bottom": {
|
|
1231
|
+
"category": "helpers",
|
|
1232
|
+
"description": "Add 1px solid border on bottom."
|
|
1233
|
+
},
|
|
1234
|
+
"border-left": {
|
|
1235
|
+
"category": "helpers",
|
|
1236
|
+
"description": "Add 1px solid border on left."
|
|
1237
|
+
},
|
|
1238
|
+
"border-right": {
|
|
1239
|
+
"category": "helpers",
|
|
1240
|
+
"description": "Add 1px solid border on right."
|
|
1241
|
+
},
|
|
1242
|
+
"no-border": {
|
|
1243
|
+
"category": "helpers",
|
|
1244
|
+
"description": "Remove all borders (!important).",
|
|
1245
|
+
"important": true
|
|
1246
|
+
},
|
|
1247
|
+
"width-100": {
|
|
1248
|
+
"category": "helpers",
|
|
1249
|
+
"description": "Width 100%.",
|
|
1250
|
+
"responsive": [
|
|
1251
|
+
"tablet-width-*",
|
|
1252
|
+
"phone-width-*",
|
|
1253
|
+
"large-phone-width-*",
|
|
1254
|
+
"small-desktop-width-*"
|
|
1255
|
+
]
|
|
1256
|
+
},
|
|
1257
|
+
"width-90": {
|
|
1258
|
+
"category": "helpers",
|
|
1259
|
+
"description": "Width 90%.",
|
|
1260
|
+
"responsive": [
|
|
1261
|
+
"tablet-width-*",
|
|
1262
|
+
"phone-width-*",
|
|
1263
|
+
"large-phone-width-*",
|
|
1264
|
+
"small-desktop-width-*"
|
|
1265
|
+
]
|
|
1266
|
+
},
|
|
1267
|
+
"width-80": {
|
|
1268
|
+
"category": "helpers",
|
|
1269
|
+
"description": "Width 80%.",
|
|
1270
|
+
"responsive": [
|
|
1271
|
+
"tablet-width-*",
|
|
1272
|
+
"phone-width-*",
|
|
1273
|
+
"large-phone-width-*",
|
|
1274
|
+
"small-desktop-width-*"
|
|
1275
|
+
]
|
|
1276
|
+
},
|
|
1277
|
+
"width-75": {
|
|
1278
|
+
"category": "helpers",
|
|
1279
|
+
"description": "Width 75%.",
|
|
1280
|
+
"responsive": [
|
|
1281
|
+
"tablet-width-*",
|
|
1282
|
+
"phone-width-*",
|
|
1283
|
+
"large-phone-width-*",
|
|
1284
|
+
"small-desktop-width-*"
|
|
1285
|
+
]
|
|
1286
|
+
},
|
|
1287
|
+
"width-70": {
|
|
1288
|
+
"category": "helpers",
|
|
1289
|
+
"description": "Width 70%.",
|
|
1290
|
+
"responsive": [
|
|
1291
|
+
"tablet-width-*",
|
|
1292
|
+
"phone-width-*",
|
|
1293
|
+
"large-phone-width-*",
|
|
1294
|
+
"small-desktop-width-*"
|
|
1295
|
+
]
|
|
1296
|
+
},
|
|
1297
|
+
"width-66": {
|
|
1298
|
+
"category": "helpers",
|
|
1299
|
+
"description": "Width 66.6%.",
|
|
1300
|
+
"responsive": [
|
|
1301
|
+
"tablet-width-*",
|
|
1302
|
+
"phone-width-*",
|
|
1303
|
+
"large-phone-width-*",
|
|
1304
|
+
"small-desktop-width-*"
|
|
1305
|
+
]
|
|
1306
|
+
},
|
|
1307
|
+
"width-50": {
|
|
1308
|
+
"category": "helpers",
|
|
1309
|
+
"description": "Width 50%.",
|
|
1310
|
+
"responsive": [
|
|
1311
|
+
"tablet-width-*",
|
|
1312
|
+
"phone-width-*",
|
|
1313
|
+
"large-phone-width-*",
|
|
1314
|
+
"small-desktop-width-*"
|
|
1315
|
+
]
|
|
1316
|
+
},
|
|
1317
|
+
"width-40": {
|
|
1318
|
+
"category": "helpers",
|
|
1319
|
+
"description": "Width 40%.",
|
|
1320
|
+
"responsive": [
|
|
1321
|
+
"tablet-width-*",
|
|
1322
|
+
"phone-width-*",
|
|
1323
|
+
"large-phone-width-*",
|
|
1324
|
+
"small-desktop-width-*"
|
|
1325
|
+
]
|
|
1326
|
+
},
|
|
1327
|
+
"width-33": {
|
|
1328
|
+
"category": "helpers",
|
|
1329
|
+
"description": "Width 33.3%.",
|
|
1330
|
+
"responsive": [
|
|
1331
|
+
"tablet-width-*",
|
|
1332
|
+
"phone-width-*",
|
|
1333
|
+
"large-phone-width-*",
|
|
1334
|
+
"small-desktop-width-*"
|
|
1335
|
+
]
|
|
1336
|
+
},
|
|
1337
|
+
"width-25": {
|
|
1338
|
+
"category": "helpers",
|
|
1339
|
+
"description": "Width 25%.",
|
|
1340
|
+
"responsive": [
|
|
1341
|
+
"tablet-width-*",
|
|
1342
|
+
"phone-width-*",
|
|
1343
|
+
"large-phone-width-*",
|
|
1344
|
+
"small-desktop-width-*"
|
|
1345
|
+
]
|
|
1346
|
+
},
|
|
1347
|
+
"width-20": {
|
|
1348
|
+
"category": "helpers",
|
|
1349
|
+
"description": "Width 20%.",
|
|
1350
|
+
"responsive": [
|
|
1351
|
+
"tablet-width-*",
|
|
1352
|
+
"phone-width-*",
|
|
1353
|
+
"large-phone-width-*",
|
|
1354
|
+
"small-desktop-width-*"
|
|
1355
|
+
]
|
|
1356
|
+
},
|
|
1357
|
+
"width-10": {
|
|
1358
|
+
"category": "helpers",
|
|
1359
|
+
"description": "Width 10%.",
|
|
1360
|
+
"responsive": [
|
|
1361
|
+
"tablet-width-*",
|
|
1362
|
+
"phone-width-*",
|
|
1363
|
+
"large-phone-width-*",
|
|
1364
|
+
"small-desktop-width-*"
|
|
1365
|
+
]
|
|
1366
|
+
},
|
|
1367
|
+
"height-100": {
|
|
1368
|
+
"category": "helpers",
|
|
1369
|
+
"description": "Height 100%."
|
|
1370
|
+
},
|
|
1371
|
+
"height-90": {
|
|
1372
|
+
"category": "helpers",
|
|
1373
|
+
"description": "Height 90%."
|
|
1374
|
+
},
|
|
1375
|
+
"height-80": {
|
|
1376
|
+
"category": "helpers",
|
|
1377
|
+
"description": "Height 80%."
|
|
1378
|
+
},
|
|
1379
|
+
"height-75": {
|
|
1380
|
+
"category": "helpers",
|
|
1381
|
+
"description": "Height 75%."
|
|
1382
|
+
},
|
|
1383
|
+
"height-70": {
|
|
1384
|
+
"category": "helpers",
|
|
1385
|
+
"description": "Height 70%."
|
|
1386
|
+
},
|
|
1387
|
+
"height-50": {
|
|
1388
|
+
"category": "helpers",
|
|
1389
|
+
"description": "Height 50%."
|
|
1390
|
+
},
|
|
1391
|
+
"height-33": {
|
|
1392
|
+
"category": "helpers",
|
|
1393
|
+
"description": "Height 33.3%."
|
|
1394
|
+
},
|
|
1395
|
+
"height-25": {
|
|
1396
|
+
"category": "helpers",
|
|
1397
|
+
"description": "Height 25%."
|
|
1398
|
+
},
|
|
1399
|
+
"height-10": {
|
|
1400
|
+
"category": "helpers",
|
|
1401
|
+
"description": "Height 10%."
|
|
1402
|
+
},
|
|
1403
|
+
"sr-only": {
|
|
1404
|
+
"category": "helpers",
|
|
1405
|
+
"description": "Visually hidden but accessible to screen readers."
|
|
1406
|
+
},
|
|
1407
|
+
"skip-link": {
|
|
1408
|
+
"category": "helpers",
|
|
1409
|
+
"description": "Skip navigation link — hidden until focused. Use as the first focusable element inside <body>.",
|
|
1410
|
+
"example": "<a href=\"#main\" class=\"skip-link\">Skip to main content</a>"
|
|
1411
|
+
},
|
|
1412
|
+
"hide-on-desktop": {
|
|
1413
|
+
"category": "helpers",
|
|
1414
|
+
"description": "Hidden on desktop, visible on mobile (display: block below 767px)."
|
|
1415
|
+
},
|
|
1416
|
+
"hide-on-mobile": {
|
|
1417
|
+
"category": "helpers",
|
|
1418
|
+
"description": "Hidden on mobile (display: none below 767px)."
|
|
1419
|
+
},
|
|
1420
|
+
"text-primary": {
|
|
1421
|
+
"category": "helpers",
|
|
1422
|
+
"description": "Body text color (theme-aware). Maps to --ply-color-body."
|
|
1423
|
+
},
|
|
1424
|
+
"text-secondary": {
|
|
1425
|
+
"category": "helpers",
|
|
1426
|
+
"description": "Secondary/subdued text color (theme-aware). Maps to --ply-color-secondary."
|
|
1427
|
+
},
|
|
1428
|
+
"text-tertiary": {
|
|
1429
|
+
"category": "helpers",
|
|
1430
|
+
"description": "Muted/tertiary text color (theme-aware). Maps to --ply-color-muted. Alias: text-muted."
|
|
1431
|
+
},
|
|
1432
|
+
"text-inverse": {
|
|
1433
|
+
"category": "helpers",
|
|
1434
|
+
"description": "Inverse text color (theme-aware). Maps to --ply-color-text-inverse."
|
|
1435
|
+
},
|
|
1436
|
+
"success": {
|
|
1437
|
+
"category": "helpers",
|
|
1438
|
+
"description": "Green text color for success states."
|
|
1439
|
+
},
|
|
1440
|
+
"error": {
|
|
1441
|
+
"category": "helpers",
|
|
1442
|
+
"description": "Red text color for error states."
|
|
1443
|
+
},
|
|
1444
|
+
"no-orphan": {
|
|
1445
|
+
"category": "helpers",
|
|
1446
|
+
"description": "Prevents orphaned words at the end of text blocks using text-wrap: pretty."
|
|
1447
|
+
},
|
|
1448
|
+
"text-balance": {
|
|
1449
|
+
"category": "helpers",
|
|
1450
|
+
"description": "Balances line lengths for headings using text-wrap: balance."
|
|
1451
|
+
},
|
|
1452
|
+
"gap-xs": {
|
|
1453
|
+
"category": "helpers",
|
|
1454
|
+
"description": "Gap between flex/grid children: 0.25rem."
|
|
1455
|
+
},
|
|
1456
|
+
"gap-sm": {
|
|
1457
|
+
"category": "helpers",
|
|
1458
|
+
"description": "Gap between flex/grid children: 0.5rem."
|
|
1459
|
+
},
|
|
1460
|
+
"gap": {
|
|
1461
|
+
"category": "helpers",
|
|
1462
|
+
"description": "Gap between flex/grid children: 0.75rem."
|
|
1463
|
+
},
|
|
1464
|
+
"gap-lg": {
|
|
1465
|
+
"category": "helpers",
|
|
1466
|
+
"description": "Gap between flex/grid children: 1.5rem."
|
|
1467
|
+
},
|
|
1468
|
+
"gap-xl": {
|
|
1469
|
+
"category": "helpers",
|
|
1470
|
+
"description": "Gap between flex/grid children: 2rem."
|
|
1471
|
+
},
|
|
1472
|
+
"no-link-style": {
|
|
1473
|
+
"category": "helpers",
|
|
1474
|
+
"description": "Suppresses link color and underline on all <a> tags inside the container. Useful for card-style links."
|
|
1475
|
+
},
|
|
1476
|
+
"bg-glass": {
|
|
1477
|
+
"category": "helpers",
|
|
1478
|
+
"description": "Transparent background with backdrop blur. Theme-aware: white tint in light mode, dark tint in dark mode. Customizable via --ply-bg-glass."
|
|
1479
|
+
},
|
|
1480
|
+
"equal-height": {
|
|
1481
|
+
"category": "grid",
|
|
1482
|
+
"description": "On units-row: makes all unit children stretch to the same height. Their direct children automatically fill the available height.",
|
|
1483
|
+
"parent": "units-row",
|
|
1484
|
+
"example": "<div class=\"units-row equal-height\"><div class=\"unit-33\"><div class=\"border padding\">Short</div></div><div class=\"unit-33\"><div class=\"border padding\">Taller content here</div></div></div>"
|
|
1485
|
+
},
|
|
1486
|
+
"clearfix": {
|
|
1487
|
+
"category": "helpers",
|
|
1488
|
+
"description": "Clearfix for floated elements."
|
|
1489
|
+
},
|
|
1490
|
+
"flat-list": {
|
|
1491
|
+
"category": "helpers",
|
|
1492
|
+
"description": "Remove list styling (margin-left: 0, list-style: none)."
|
|
1493
|
+
},
|
|
1494
|
+
"circle": {
|
|
1495
|
+
"category": "helpers",
|
|
1496
|
+
"description": "border-radius: 100%."
|
|
1497
|
+
},
|
|
1498
|
+
"border-radius": {
|
|
1499
|
+
"category": "helpers",
|
|
1500
|
+
"description": "Apply default border-radius."
|
|
1501
|
+
},
|
|
1502
|
+
"color-black": {
|
|
1503
|
+
"category": "helpers",
|
|
1504
|
+
"description": "Text color: black."
|
|
1505
|
+
},
|
|
1506
|
+
"color-white": {
|
|
1507
|
+
"category": "helpers",
|
|
1508
|
+
"description": "Text color: white."
|
|
1509
|
+
},
|
|
1510
|
+
"color-gray-10": {
|
|
1511
|
+
"category": "helpers",
|
|
1512
|
+
"description": "Text color: black at 10% opacity."
|
|
1513
|
+
},
|
|
1514
|
+
"color-gray-20": {
|
|
1515
|
+
"category": "helpers",
|
|
1516
|
+
"description": "Text color: black at 20% opacity."
|
|
1517
|
+
},
|
|
1518
|
+
"color-gray-30": {
|
|
1519
|
+
"category": "helpers",
|
|
1520
|
+
"description": "Text color: black at 30% opacity."
|
|
1521
|
+
},
|
|
1522
|
+
"color-gray-40": {
|
|
1523
|
+
"category": "helpers",
|
|
1524
|
+
"description": "Text color: black at 40% opacity."
|
|
1525
|
+
},
|
|
1526
|
+
"color-gray-50": {
|
|
1527
|
+
"category": "helpers",
|
|
1528
|
+
"description": "Text color: black at 50% opacity."
|
|
1529
|
+
},
|
|
1530
|
+
"color-gray-60": {
|
|
1531
|
+
"category": "helpers",
|
|
1532
|
+
"description": "Text color: black at 60% opacity."
|
|
1533
|
+
},
|
|
1534
|
+
"color-gray-70": {
|
|
1535
|
+
"category": "helpers",
|
|
1536
|
+
"description": "Text color: black at 70% opacity."
|
|
1537
|
+
},
|
|
1538
|
+
"color-gray-80": {
|
|
1539
|
+
"category": "helpers",
|
|
1540
|
+
"description": "Text color: black at 80% opacity."
|
|
1541
|
+
},
|
|
1542
|
+
"color-gray-90": {
|
|
1543
|
+
"category": "helpers",
|
|
1544
|
+
"description": "Text color: black at 90% opacity."
|
|
1545
|
+
},
|
|
1546
|
+
"table-bordered": {
|
|
1547
|
+
"category": "tables",
|
|
1548
|
+
"description": "Add borders to all table cells. Applied to table element.",
|
|
1549
|
+
"example": "<table class=\"table-bordered\"><tr><td>Cell</td></tr></table>"
|
|
1550
|
+
},
|
|
1551
|
+
"table-simple": {
|
|
1552
|
+
"category": "tables",
|
|
1553
|
+
"description": "Remove borders and left padding from table. Applied to table element.",
|
|
1554
|
+
"example": "<table class=\"table-simple\"><tr><td>Cell</td></tr></table>"
|
|
1555
|
+
},
|
|
1556
|
+
"table-flat": {
|
|
1557
|
+
"category": "tables",
|
|
1558
|
+
"description": "Remove borders and all padding from table. Applied to table element."
|
|
1559
|
+
},
|
|
1560
|
+
"table-stroked": {
|
|
1561
|
+
"category": "tables",
|
|
1562
|
+
"description": "Table with bottom borders only on cells."
|
|
1563
|
+
},
|
|
1564
|
+
"table-stripped": {
|
|
1565
|
+
"category": "tables",
|
|
1566
|
+
"description": "Striped table rows (odd rows get background color). Applied to table element.",
|
|
1567
|
+
"example": "<table class=\"table-stripped\"><tbody><tr><td>Row 1</td></tr><tr><td>Row 2</td></tr></tbody></table>"
|
|
1568
|
+
},
|
|
1569
|
+
"table-hovered": {
|
|
1570
|
+
"category": "tables",
|
|
1571
|
+
"description": "Highlight table rows on hover. Applied to table element.",
|
|
1572
|
+
"example": "<table class=\"table-hovered\"><tbody><tr><td>Hoverable</td></tr></tbody></table>"
|
|
1573
|
+
},
|
|
1574
|
+
"table-container": {
|
|
1575
|
+
"category": "tables",
|
|
1576
|
+
"description": "Responsive scrollable wrapper for tables. Adds horizontal scroll on overflow.",
|
|
1577
|
+
"example": "<div class=\"table-container\"><table>...</table></div>"
|
|
1578
|
+
},
|
|
1579
|
+
"btn-ghost": {
|
|
1580
|
+
"category": "buttons",
|
|
1581
|
+
"description": "Ghost button. Transparent background, no border. Shows subtle background on hover. For icon-only or low-emphasis actions.",
|
|
1582
|
+
"example": "<button class=\"btn btn-ghost\">Ghost</button>"
|
|
1583
|
+
},
|
|
1584
|
+
"btn-icon": {
|
|
1585
|
+
"category": "buttons",
|
|
1586
|
+
"description": "Icon-only button modifier. Equal padding on all sides for a square aspect ratio. Combine with btn-ghost for toolbar-style icon buttons.",
|
|
1587
|
+
"example": "<button class=\"btn btn-ghost btn-icon\" aria-label=\"Search\"><svg>...</svg></button>"
|
|
1588
|
+
},
|
|
1589
|
+
"align-right": {
|
|
1590
|
+
"category": "buttons",
|
|
1591
|
+
"description": "Right-align buttons inside btn-group.",
|
|
1592
|
+
"parent": "btn-group"
|
|
1593
|
+
},
|
|
1594
|
+
"align-left": {
|
|
1595
|
+
"category": "buttons",
|
|
1596
|
+
"description": "Left-align buttons inside btn-group.",
|
|
1597
|
+
"parent": "btn-group"
|
|
1598
|
+
},
|
|
1599
|
+
"align-center": {
|
|
1600
|
+
"category": "helpers",
|
|
1601
|
+
"description": "align-items: center with text-align center."
|
|
1602
|
+
},
|
|
1603
|
+
"fill-width": {
|
|
1604
|
+
"category": "buttons",
|
|
1605
|
+
"description": "Stretch buttons to fill full width inside btn-group.",
|
|
1606
|
+
"parent": "btn-group"
|
|
1607
|
+
},
|
|
1608
|
+
"rounded": {
|
|
1609
|
+
"category": "buttons",
|
|
1610
|
+
"description": "Round the outer corners of a btn-group.",
|
|
1611
|
+
"parent": "btn-group"
|
|
1612
|
+
},
|
|
1613
|
+
"unit-role-right": {
|
|
1614
|
+
"category": "grid",
|
|
1615
|
+
"description": "Float a grid unit to the right."
|
|
1616
|
+
},
|
|
1617
|
+
"unit-role-left": {
|
|
1618
|
+
"category": "grid",
|
|
1619
|
+
"description": "Clear left float on a grid unit."
|
|
1620
|
+
},
|
|
1621
|
+
"code": {
|
|
1622
|
+
"category": "helpers",
|
|
1623
|
+
"description": "Inline code styling. Prefer the native <code> element instead."
|
|
1624
|
+
},
|
|
1625
|
+
"sans": {
|
|
1626
|
+
"category": "helpers",
|
|
1627
|
+
"description": "Apply system sans-serif font stack."
|
|
1628
|
+
},
|
|
1629
|
+
"serif": {
|
|
1630
|
+
"category": "helpers",
|
|
1631
|
+
"description": "Apply Georgia serif font family."
|
|
1632
|
+
},
|
|
1633
|
+
"mono": {
|
|
1634
|
+
"category": "helpers",
|
|
1635
|
+
"description": "Apply monospace font family."
|
|
1636
|
+
},
|
|
1637
|
+
"layer-0": {
|
|
1638
|
+
"category": "helpers",
|
|
1639
|
+
"description": "Background layer 0. Uses --ply-bg-body."
|
|
1640
|
+
},
|
|
1641
|
+
"layer-1": {
|
|
1642
|
+
"category": "helpers",
|
|
1643
|
+
"description": "Background layer 1 with subtle box-shadow. Uses --ply-bg-surface."
|
|
1644
|
+
},
|
|
1645
|
+
"layer-2": {
|
|
1646
|
+
"category": "helpers",
|
|
1647
|
+
"description": "Background layer 2 with medium box-shadow. Uses --ply-bg-surface-alt."
|
|
1648
|
+
},
|
|
1649
|
+
"layer-3": {
|
|
1650
|
+
"category": "helpers",
|
|
1651
|
+
"description": "Background layer 3 with large box-shadow. Uses --ply-bg-muted."
|
|
1652
|
+
},
|
|
1653
|
+
"shadow-1": {
|
|
1654
|
+
"category": "helpers",
|
|
1655
|
+
"description": "Small box-shadow. Uses --ply-shadow-1."
|
|
1656
|
+
},
|
|
1657
|
+
"shadow-2": {
|
|
1658
|
+
"category": "helpers",
|
|
1659
|
+
"description": "Medium box-shadow. Uses --ply-shadow-2."
|
|
1660
|
+
},
|
|
1661
|
+
"shadow-3": {
|
|
1662
|
+
"category": "helpers",
|
|
1663
|
+
"description": "Large box-shadow. Uses --ply-shadow-3."
|
|
1664
|
+
},
|
|
1665
|
+
"color-white-10": {
|
|
1666
|
+
"category": "helpers",
|
|
1667
|
+
"description": "Text color: white at 10% opacity."
|
|
1668
|
+
},
|
|
1669
|
+
"color-white-20": {
|
|
1670
|
+
"category": "helpers",
|
|
1671
|
+
"description": "Text color: white at 20% opacity."
|
|
1672
|
+
},
|
|
1673
|
+
"color-white-30": {
|
|
1674
|
+
"category": "helpers",
|
|
1675
|
+
"description": "Text color: white at 30% opacity."
|
|
1676
|
+
},
|
|
1677
|
+
"color-white-40": {
|
|
1678
|
+
"category": "helpers",
|
|
1679
|
+
"description": "Text color: white at 40% opacity."
|
|
1680
|
+
},
|
|
1681
|
+
"color-white-50": {
|
|
1682
|
+
"category": "helpers",
|
|
1683
|
+
"description": "Text color: white at 50% opacity."
|
|
1684
|
+
},
|
|
1685
|
+
"color-white-60": {
|
|
1686
|
+
"category": "helpers",
|
|
1687
|
+
"description": "Text color: white at 60% opacity."
|
|
1688
|
+
},
|
|
1689
|
+
"color-white-70": {
|
|
1690
|
+
"category": "helpers",
|
|
1691
|
+
"description": "Text color: white at 70% opacity."
|
|
1692
|
+
},
|
|
1693
|
+
"color-white-80": {
|
|
1694
|
+
"category": "helpers",
|
|
1695
|
+
"description": "Text color: white at 80% opacity."
|
|
1696
|
+
},
|
|
1697
|
+
"color-white-90": {
|
|
1698
|
+
"category": "helpers",
|
|
1699
|
+
"description": "Text color: white at 90% opacity."
|
|
1700
|
+
},
|
|
1701
|
+
"color-blue": {
|
|
1702
|
+
"category": "helpers",
|
|
1703
|
+
"description": "Text color: theme-aware blue."
|
|
1704
|
+
},
|
|
1705
|
+
"color-red": {
|
|
1706
|
+
"category": "helpers",
|
|
1707
|
+
"description": "Text color: theme-aware red."
|
|
1708
|
+
},
|
|
1709
|
+
"color-green": {
|
|
1710
|
+
"category": "helpers",
|
|
1711
|
+
"description": "Text color: theme-aware green."
|
|
1712
|
+
},
|
|
1713
|
+
"color-yellow": {
|
|
1714
|
+
"category": "helpers",
|
|
1715
|
+
"description": "Text color: theme-aware yellow."
|
|
1716
|
+
},
|
|
1717
|
+
"bg-blue": {
|
|
1718
|
+
"category": "helpers",
|
|
1719
|
+
"description": "Blue background color. Theme-aware, WCAG AA with white text."
|
|
1720
|
+
},
|
|
1721
|
+
"bg-red": {
|
|
1722
|
+
"category": "helpers",
|
|
1723
|
+
"description": "Red background color. Theme-aware, WCAG AA with white text."
|
|
1724
|
+
},
|
|
1725
|
+
"bg-green": {
|
|
1726
|
+
"category": "helpers",
|
|
1727
|
+
"description": "Green background color. Theme-aware, WCAG AA with white text."
|
|
1728
|
+
},
|
|
1729
|
+
"bg-yellow": {
|
|
1730
|
+
"category": "helpers",
|
|
1731
|
+
"description": "Yellow background color. Theme-aware, WCAG AA with dark text."
|
|
1732
|
+
},
|
|
1733
|
+
"color-accent": {
|
|
1734
|
+
"category": "helpers",
|
|
1735
|
+
"description": "Text color: accent/brand color. Uses --ply-color-accent. Theme-aware."
|
|
1736
|
+
},
|
|
1737
|
+
"bg-accent": {
|
|
1738
|
+
"category": "helpers",
|
|
1739
|
+
"description": "Accent/brand background color. Uses --ply-color-accent. Theme-aware."
|
|
1740
|
+
},
|
|
1741
|
+
"bg-surface": {
|
|
1742
|
+
"category": "helpers",
|
|
1743
|
+
"description": "Surface background color. Theme-aware."
|
|
1744
|
+
},
|
|
1745
|
+
"text-on-color": {
|
|
1746
|
+
"category": "helpers",
|
|
1747
|
+
"description": "White text for use on colored backgrounds."
|
|
1748
|
+
},
|
|
1749
|
+
"border-radius-lg": {
|
|
1750
|
+
"category": "helpers",
|
|
1751
|
+
"description": "Large border radius (0.75rem)."
|
|
1752
|
+
},
|
|
1753
|
+
"border-radius-xl": {
|
|
1754
|
+
"category": "helpers",
|
|
1755
|
+
"description": "Extra large border radius (1.5rem)."
|
|
1756
|
+
},
|
|
1757
|
+
"spinning": {
|
|
1758
|
+
"category": "helpers",
|
|
1759
|
+
"description": "Infinite 360° spin animation."
|
|
1760
|
+
},
|
|
1761
|
+
"fade-in": {
|
|
1762
|
+
"category": "helpers",
|
|
1763
|
+
"description": "Fade-in animation from opacity 0 to 1."
|
|
1764
|
+
},
|
|
1765
|
+
"fully-centered": {
|
|
1766
|
+
"category": "helpers",
|
|
1767
|
+
"description": "Flex center on both axes with text-align center."
|
|
1768
|
+
},
|
|
1769
|
+
"vertically-centered-space-between": {
|
|
1770
|
+
"category": "helpers",
|
|
1771
|
+
"description": "Vertical center with space-between horizontal distribution."
|
|
1772
|
+
},
|
|
1773
|
+
"blocks-2": {
|
|
1774
|
+
"category": "grid",
|
|
1775
|
+
"description": "2-column equal block layout using float.",
|
|
1776
|
+
"example": "<div class=\"blocks-2\"><div>Block</div><div>Block</div></div>"
|
|
1777
|
+
},
|
|
1778
|
+
"blocks-3": {
|
|
1779
|
+
"category": "grid",
|
|
1780
|
+
"description": "3-column equal block layout using float.",
|
|
1781
|
+
"example": "<div class=\"blocks-3\"><div>Block</div><div>Block</div><div>Block</div></div>"
|
|
1782
|
+
},
|
|
1783
|
+
"blocks-4": {
|
|
1784
|
+
"category": "grid",
|
|
1785
|
+
"description": "4-column equal block layout using float."
|
|
1786
|
+
},
|
|
1787
|
+
"blocks-5": {
|
|
1788
|
+
"category": "grid",
|
|
1789
|
+
"description": "5-column equal block layout using float."
|
|
1790
|
+
},
|
|
1791
|
+
"blocks-6": {
|
|
1792
|
+
"category": "grid",
|
|
1793
|
+
"description": "6-column equal block layout using float."
|
|
1794
|
+
},
|
|
1795
|
+
"block-first": {
|
|
1796
|
+
"category": "grid",
|
|
1797
|
+
"description": "Clear float for first block in a new row."
|
|
1798
|
+
},
|
|
1799
|
+
"blocks-mobile-50": {
|
|
1800
|
+
"category": "grid",
|
|
1801
|
+
"description": "2-column block layout on mobile."
|
|
1802
|
+
},
|
|
1803
|
+
"blocks-mobile-33": {
|
|
1804
|
+
"category": "grid",
|
|
1805
|
+
"description": "3-column block layout on mobile."
|
|
1806
|
+
},
|
|
1807
|
+
"cursor-pointer": {
|
|
1808
|
+
"category": "helpers",
|
|
1809
|
+
"description": "cursor: pointer. Alias: cursor-finger."
|
|
1810
|
+
},
|
|
1811
|
+
"cursor-default": {
|
|
1812
|
+
"category": "helpers",
|
|
1813
|
+
"description": "cursor: default. Alias: cursor-arrow."
|
|
1814
|
+
},
|
|
1815
|
+
"cursor-none": {
|
|
1816
|
+
"category": "helpers",
|
|
1817
|
+
"description": "cursor: none."
|
|
1818
|
+
},
|
|
1819
|
+
"cursor-progress": {
|
|
1820
|
+
"category": "helpers",
|
|
1821
|
+
"description": "cursor: progress."
|
|
1822
|
+
},
|
|
1823
|
+
"cursor-help": {
|
|
1824
|
+
"category": "helpers",
|
|
1825
|
+
"description": "cursor: help. Alias: cursor-question-mark."
|
|
1826
|
+
},
|
|
1827
|
+
"cursor-text": {
|
|
1828
|
+
"category": "helpers",
|
|
1829
|
+
"description": "cursor: text."
|
|
1830
|
+
},
|
|
1831
|
+
"cursor-cell": {
|
|
1832
|
+
"category": "helpers",
|
|
1833
|
+
"description": "cursor: cell. Alias: cursor-plus."
|
|
1834
|
+
},
|
|
1835
|
+
"cursor-crosshair": {
|
|
1836
|
+
"category": "helpers",
|
|
1837
|
+
"description": "cursor: crosshair."
|
|
1838
|
+
},
|
|
1839
|
+
"cursor-alias": {
|
|
1840
|
+
"category": "helpers",
|
|
1841
|
+
"description": "cursor: alias. Alias: cursor-shortcut."
|
|
1842
|
+
},
|
|
1843
|
+
"cursor-context-menu": {
|
|
1844
|
+
"category": "helpers",
|
|
1845
|
+
"description": "cursor: context-menu."
|
|
1846
|
+
},
|
|
1847
|
+
"cursor-copy": {
|
|
1848
|
+
"category": "helpers",
|
|
1849
|
+
"description": "cursor: copy."
|
|
1850
|
+
},
|
|
1851
|
+
"cursor-move": {
|
|
1852
|
+
"category": "helpers",
|
|
1853
|
+
"description": "cursor: move."
|
|
1854
|
+
},
|
|
1855
|
+
"cursor-no-drop": {
|
|
1856
|
+
"category": "helpers",
|
|
1857
|
+
"description": "cursor: no-drop."
|
|
1858
|
+
},
|
|
1859
|
+
"cursor-not-allowed": {
|
|
1860
|
+
"category": "helpers",
|
|
1861
|
+
"description": "cursor: not-allowed."
|
|
1862
|
+
},
|
|
1863
|
+
"cursor-all-scroll": {
|
|
1864
|
+
"category": "helpers",
|
|
1865
|
+
"description": "cursor: all-scroll."
|
|
1866
|
+
},
|
|
1867
|
+
"cursor-ew-resize": {
|
|
1868
|
+
"category": "helpers",
|
|
1869
|
+
"description": "cursor: ew-resize. Alias: cursor-col-resize."
|
|
1870
|
+
},
|
|
1871
|
+
"cursor-ns-resize": {
|
|
1872
|
+
"category": "helpers",
|
|
1873
|
+
"description": "cursor: ns-resize. Alias: cursor-row-resize."
|
|
1874
|
+
},
|
|
1875
|
+
"cursor-nesw-resize": {
|
|
1876
|
+
"category": "helpers",
|
|
1877
|
+
"description": "cursor: nesw-resize."
|
|
1878
|
+
},
|
|
1879
|
+
"cursor-n-resize": {
|
|
1880
|
+
"category": "helpers",
|
|
1881
|
+
"description": "cursor: n-resize."
|
|
1882
|
+
},
|
|
1883
|
+
"cursor-e-resize": {
|
|
1884
|
+
"category": "helpers",
|
|
1885
|
+
"description": "cursor: e-resize."
|
|
1886
|
+
},
|
|
1887
|
+
"cursor-s-resize": {
|
|
1888
|
+
"category": "helpers",
|
|
1889
|
+
"description": "cursor: s-resize."
|
|
1890
|
+
},
|
|
1891
|
+
"cursor-w-resize": {
|
|
1892
|
+
"category": "helpers",
|
|
1893
|
+
"description": "cursor: w-resize."
|
|
1894
|
+
},
|
|
1895
|
+
"cursor-ne-resize": {
|
|
1896
|
+
"category": "helpers",
|
|
1897
|
+
"description": "cursor: ne-resize."
|
|
1898
|
+
},
|
|
1899
|
+
"cursor-nw-resize": {
|
|
1900
|
+
"category": "helpers",
|
|
1901
|
+
"description": "cursor: nw-resize."
|
|
1902
|
+
},
|
|
1903
|
+
"cursor-sw-resize": {
|
|
1904
|
+
"category": "helpers",
|
|
1905
|
+
"description": "cursor: sw-resize."
|
|
1906
|
+
},
|
|
1907
|
+
"cursor-se-resize": {
|
|
1908
|
+
"category": "helpers",
|
|
1909
|
+
"description": "cursor: se-resize."
|
|
1910
|
+
},
|
|
1911
|
+
"accordion-title": {
|
|
1912
|
+
"category": "helpers",
|
|
1913
|
+
"description": "Accordion item header. Clickable to toggle panel visibility."
|
|
1914
|
+
},
|
|
1915
|
+
"accordion-title-opened": {
|
|
1916
|
+
"category": "helpers",
|
|
1917
|
+
"description": "Open state for accordion title."
|
|
1918
|
+
},
|
|
1919
|
+
"accordion-panel": {
|
|
1920
|
+
"category": "helpers",
|
|
1921
|
+
"description": "Accordion content panel. Hidden by default, shown when title is opened."
|
|
1922
|
+
},
|
|
1923
|
+
"accordion-toggle": {
|
|
1924
|
+
"category": "helpers",
|
|
1925
|
+
"description": "Toggle indicator element inside accordion title."
|
|
1926
|
+
},
|
|
1927
|
+
"accordion-toggle-closed": {
|
|
1928
|
+
"category": "helpers",
|
|
1929
|
+
"description": "Closed state toggle indicator (plus icon)."
|
|
1930
|
+
},
|
|
1931
|
+
"accordion-toggle-opened": {
|
|
1932
|
+
"category": "helpers",
|
|
1933
|
+
"description": "Open state toggle indicator (minus icon)."
|
|
1934
|
+
},
|
|
1935
|
+
"autocomplete": {
|
|
1936
|
+
"category": "forms",
|
|
1937
|
+
"description": "Autocomplete dropdown container for form inputs."
|
|
1938
|
+
},
|
|
1939
|
+
"dropdown": {
|
|
1940
|
+
"category": "helpers",
|
|
1941
|
+
"description": "Positioned absolute dropdown panel. Appears below trigger element."
|
|
1942
|
+
},
|
|
1943
|
+
"caret": {
|
|
1944
|
+
"category": "helpers",
|
|
1945
|
+
"description": "Downward-pointing dropdown arrow indicator."
|
|
1946
|
+
},
|
|
1947
|
+
"caret-up": {
|
|
1948
|
+
"category": "helpers",
|
|
1949
|
+
"description": "Upward-pointing caret. Modifier on caret."
|
|
1950
|
+
},
|
|
1951
|
+
"label": {
|
|
1952
|
+
"category": "notifications",
|
|
1953
|
+
"description": "Inline label/tag. Small, uppercase, bold text with background color."
|
|
1954
|
+
},
|
|
1955
|
+
"label-outline": {
|
|
1956
|
+
"category": "notifications",
|
|
1957
|
+
"description": "Outlined label variant with border instead of background fill."
|
|
1958
|
+
},
|
|
1959
|
+
"label-black": {
|
|
1960
|
+
"category": "notifications",
|
|
1961
|
+
"description": "Black label."
|
|
1962
|
+
},
|
|
1963
|
+
"label-blue": {
|
|
1964
|
+
"category": "notifications",
|
|
1965
|
+
"description": "Blue label."
|
|
1966
|
+
},
|
|
1967
|
+
"label-red": {
|
|
1968
|
+
"category": "notifications",
|
|
1969
|
+
"description": "Red label."
|
|
1970
|
+
},
|
|
1971
|
+
"label-green": {
|
|
1972
|
+
"category": "notifications",
|
|
1973
|
+
"description": "Green label."
|
|
1974
|
+
},
|
|
1975
|
+
"label-yellow": {
|
|
1976
|
+
"category": "notifications",
|
|
1977
|
+
"description": "Yellow label."
|
|
1978
|
+
},
|
|
1979
|
+
"label-white": {
|
|
1980
|
+
"category": "notifications",
|
|
1981
|
+
"description": "White label."
|
|
1982
|
+
},
|
|
1983
|
+
"badge": {
|
|
1984
|
+
"category": "notifications",
|
|
1985
|
+
"description": "Rounded pill badge for counts or status indicators."
|
|
1986
|
+
},
|
|
1987
|
+
"badge-small": {
|
|
1988
|
+
"category": "notifications",
|
|
1989
|
+
"description": "Small badge variant."
|
|
1990
|
+
},
|
|
1991
|
+
"badge-black": {
|
|
1992
|
+
"category": "notifications",
|
|
1993
|
+
"description": "Black badge."
|
|
1994
|
+
},
|
|
1995
|
+
"badge-blue": {
|
|
1996
|
+
"category": "notifications",
|
|
1997
|
+
"description": "Blue badge."
|
|
1998
|
+
},
|
|
1999
|
+
"badge-red": {
|
|
2000
|
+
"category": "notifications",
|
|
2001
|
+
"description": "Red badge."
|
|
2002
|
+
},
|
|
2003
|
+
"badge-green": {
|
|
2004
|
+
"category": "notifications",
|
|
2005
|
+
"description": "Green badge."
|
|
2006
|
+
},
|
|
2007
|
+
"badge-yellow": {
|
|
2008
|
+
"category": "notifications",
|
|
2009
|
+
"description": "Yellow badge."
|
|
2010
|
+
},
|
|
2011
|
+
"badge-white": {
|
|
2012
|
+
"category": "notifications",
|
|
2013
|
+
"description": "White badge."
|
|
2014
|
+
},
|
|
2015
|
+
"modal-blur": {
|
|
2016
|
+
"category": "helpers",
|
|
2017
|
+
"description": "Apply blur effect to background content behind a modal."
|
|
2018
|
+
},
|
|
2019
|
+
"modal-box": {
|
|
2020
|
+
"category": "helpers",
|
|
2021
|
+
"description": "Modal viewport container. Fixed position, full-screen overlay."
|
|
2022
|
+
},
|
|
2023
|
+
"modal": {
|
|
2024
|
+
"category": "helpers",
|
|
2025
|
+
"description": "Modal dialog box. Centered content panel with background and shadow."
|
|
2026
|
+
},
|
|
2027
|
+
"modal-close": {
|
|
2028
|
+
"category": "helpers",
|
|
2029
|
+
"description": "Modal close button. Positioned in top-right corner."
|
|
2030
|
+
},
|
|
2031
|
+
"tooltip": {
|
|
2032
|
+
"category": "helpers",
|
|
2033
|
+
"description": "Tooltip popup. Positioned element for contextual information."
|
|
2034
|
+
},
|
|
2035
|
+
"tooltip-theme-red": {
|
|
2036
|
+
"category": "helpers",
|
|
2037
|
+
"description": "Red-themed tooltip."
|
|
2038
|
+
},
|
|
2039
|
+
"tooltip-theme-blue": {
|
|
2040
|
+
"category": "helpers",
|
|
2041
|
+
"description": "Blue-themed tooltip."
|
|
2042
|
+
},
|
|
2043
|
+
"tooltip-theme-green": {
|
|
2044
|
+
"category": "helpers",
|
|
2045
|
+
"description": "Green-themed tooltip."
|
|
2046
|
+
},
|
|
2047
|
+
"tooltip-theme-yellow": {
|
|
2048
|
+
"category": "helpers",
|
|
2049
|
+
"description": "Yellow-themed tooltip."
|
|
2050
|
+
},
|
|
2051
|
+
"tooltip-theme-white": {
|
|
2052
|
+
"category": "helpers",
|
|
2053
|
+
"description": "White-themed tooltip."
|
|
2054
|
+
},
|
|
2055
|
+
"loader": {
|
|
2056
|
+
"category": "helpers",
|
|
2057
|
+
"description": "Spinning loader animation indicator."
|
|
2058
|
+
},
|
|
2059
|
+
"flexible-embed": {
|
|
2060
|
+
"category": "helpers",
|
|
2061
|
+
"description": "16:9 responsive embed container for videos and iframes."
|
|
2062
|
+
},
|
|
2063
|
+
"filterbox": {
|
|
2064
|
+
"category": "forms",
|
|
2065
|
+
"description": "Filterable input wrapper with dropdown list."
|
|
2066
|
+
},
|
|
2067
|
+
"filterbox-list": {
|
|
2068
|
+
"category": "forms",
|
|
2069
|
+
"description": "Dropdown list for filterbox results."
|
|
2070
|
+
},
|
|
2071
|
+
"typeahead-empty": {
|
|
2072
|
+
"category": "forms",
|
|
2073
|
+
"description": "Empty results message for typeahead."
|
|
2074
|
+
},
|
|
2075
|
+
"multiselect": {
|
|
2076
|
+
"category": "forms",
|
|
2077
|
+
"description": "Multi-select wrapper with tag-based selection."
|
|
2078
|
+
},
|
|
2079
|
+
"multiselect-tags": {
|
|
2080
|
+
"category": "forms",
|
|
2081
|
+
"description": "Tag container inside multiselect."
|
|
2082
|
+
},
|
|
2083
|
+
"multiselect-tag": {
|
|
2084
|
+
"category": "forms",
|
|
2085
|
+
"description": "Individual selected tag inside multiselect."
|
|
2086
|
+
},
|
|
2087
|
+
"multiselect-results": {
|
|
2088
|
+
"category": "forms",
|
|
2089
|
+
"description": "Dropdown results list for multiselect."
|
|
2090
|
+
},
|
|
2091
|
+
"tools-droparea": {
|
|
2092
|
+
"category": "forms",
|
|
2093
|
+
"description": "Drag-and-drop file upload area with dashed border."
|
|
2094
|
+
},
|
|
2095
|
+
"tools-droparea-placeholder": {
|
|
2096
|
+
"category": "forms",
|
|
2097
|
+
"description": "Placeholder text inside drag-and-drop upload area."
|
|
2098
|
+
},
|
|
2099
|
+
"navigation-toggle-solid": {
|
|
2100
|
+
"category": "navigation",
|
|
2101
|
+
"description": "Solid background variant of the mobile navigation toggle button."
|
|
2102
|
+
},
|
|
2103
|
+
"sortable": {
|
|
2104
|
+
"category": "tables",
|
|
2105
|
+
"description": "Makes a th element show sort direction arrows on hover. Add to th elements.",
|
|
2106
|
+
"example": "<th class=\"sortable\">Name</th>"
|
|
2107
|
+
},
|
|
2108
|
+
"sort-asc": {
|
|
2109
|
+
"category": "tables",
|
|
2110
|
+
"description": "Highlights ascending sort arrow on a sortable header.",
|
|
2111
|
+
"example": "<th class=\"sortable sort-asc\">Name</th>"
|
|
2112
|
+
},
|
|
2113
|
+
"sort-desc": {
|
|
2114
|
+
"category": "tables",
|
|
2115
|
+
"description": "Highlights descending sort arrow on a sortable header.",
|
|
2116
|
+
"example": "<th class=\"sortable sort-desc\">Name</th>"
|
|
2117
|
+
},
|
|
2118
|
+
"table-filter": {
|
|
2119
|
+
"category": "tables",
|
|
2120
|
+
"description": "Add alongside input-groups to auto-size selects for table filter bars.",
|
|
2121
|
+
"example": "<div class=\"input-groups table-filter\">...</div>"
|
|
2122
|
+
},
|
|
2123
|
+
"table-actions": {
|
|
2124
|
+
"category": "tables",
|
|
2125
|
+
"description": "Right-aligned icon button toolbar above a table.",
|
|
2126
|
+
"example": "<div class=\"table-actions\"><button class=\"btn btn-ghost btn-icon\">...</button></div>"
|
|
2127
|
+
},
|
|
2128
|
+
"pagination-solid": {
|
|
2129
|
+
"category": "navigation",
|
|
2130
|
+
"description": "Solid/filled pagination variant with no borders.",
|
|
2131
|
+
"example": "<ul class=\"pagination pagination-solid\">...</ul>"
|
|
2132
|
+
},
|
|
2133
|
+
"pagination-sm": {
|
|
2134
|
+
"category": "navigation",
|
|
2135
|
+
"description": "Compact pagination with smaller padding and font.",
|
|
2136
|
+
"example": "<ul class=\"pagination pagination-sm\">...</ul>"
|
|
2137
|
+
},
|
|
2138
|
+
"pagination-lg": {
|
|
2139
|
+
"category": "navigation",
|
|
2140
|
+
"description": "Spacious pagination with larger padding and font.",
|
|
2141
|
+
"example": "<ul class=\"pagination pagination-lg\">...</ul>"
|
|
2142
|
+
},
|
|
2143
|
+
"pagination-info": {
|
|
2144
|
+
"category": "navigation",
|
|
2145
|
+
"description": "Summary text displayed beside pagination controls.",
|
|
2146
|
+
"example": "<span class=\"pagination-info\">Showing 1-10 of 48</span>"
|
|
2147
|
+
},
|
|
2148
|
+
"steps": {
|
|
2149
|
+
"category": "forms",
|
|
2150
|
+
"description": "Horizontal step indicator container. Use with ol element.",
|
|
2151
|
+
"example": "<ol class=\"steps\"><li class=\"step\">...</li></ol>"
|
|
2152
|
+
},
|
|
2153
|
+
"step": {
|
|
2154
|
+
"category": "forms",
|
|
2155
|
+
"description": "Individual step item inside steps container. Auto-numbered via CSS counter.",
|
|
2156
|
+
"example": "<li class=\"step\"><span class=\"step-label\">Account</span></li>"
|
|
2157
|
+
},
|
|
2158
|
+
"steps-vertical": {
|
|
2159
|
+
"category": "forms",
|
|
2160
|
+
"description": "Vertical step layout modifier for steps container.",
|
|
2161
|
+
"example": "<ol class=\"steps steps-vertical\">...</ol>"
|
|
2162
|
+
},
|
|
2163
|
+
"steps-sm": {
|
|
2164
|
+
"category": "forms",
|
|
2165
|
+
"description": "Smaller step circles and text.",
|
|
2166
|
+
"example": "<ol class=\"steps steps-sm\">...</ol>"
|
|
2167
|
+
},
|
|
2168
|
+
"step-label": {
|
|
2169
|
+
"category": "forms",
|
|
2170
|
+
"description": "Step title text inside a step.",
|
|
2171
|
+
"parent": "step"
|
|
2172
|
+
},
|
|
2173
|
+
"step-desc": {
|
|
2174
|
+
"category": "forms",
|
|
2175
|
+
"description": "Step description text below the label.",
|
|
2176
|
+
"parent": "step"
|
|
2177
|
+
},
|
|
2178
|
+
"step-content": {
|
|
2179
|
+
"category": "forms",
|
|
2180
|
+
"description": "Wrapper for label and desc in vertical steps.",
|
|
2181
|
+
"parent": "step"
|
|
2182
|
+
},
|
|
2183
|
+
"step-panel": {
|
|
2184
|
+
"category": "forms",
|
|
2185
|
+
"description": "Form content section, hidden by default. Add active class to show.",
|
|
2186
|
+
"example": "<div class=\"step-panel active\">...</div>"
|
|
2187
|
+
},
|
|
2188
|
+
"step-nav": {
|
|
2189
|
+
"category": "forms",
|
|
2190
|
+
"description": "Back/Next button bar with top border for multi-step forms.",
|
|
2191
|
+
"example": "<div class=\"step-nav\"><button class=\"btn\">Back</button><button class=\"btn btn-blue\">Next</button></div>"
|
|
2192
|
+
},
|
|
2193
|
+
"dialog-sm": {
|
|
2194
|
+
"category": "dialogs",
|
|
2195
|
+
"description": "Small dialog with 24rem max-width.",
|
|
2196
|
+
"example": "<dialog class=\"dialog-sm\">...</dialog>"
|
|
2197
|
+
},
|
|
2198
|
+
"dialog-lg": {
|
|
2199
|
+
"category": "dialogs",
|
|
2200
|
+
"description": "Large dialog with 48rem max-width.",
|
|
2201
|
+
"example": "<dialog class=\"dialog-lg\">...</dialog>"
|
|
2202
|
+
},
|
|
2203
|
+
"dialog-full": {
|
|
2204
|
+
"category": "dialogs",
|
|
2205
|
+
"description": "Full viewport dialog.",
|
|
2206
|
+
"example": "<dialog class=\"dialog-full\">...</dialog>"
|
|
2207
|
+
},
|
|
2208
|
+
"dialog-header": {
|
|
2209
|
+
"category": "dialogs",
|
|
2210
|
+
"description": "Flex header with title and close button for dialog.",
|
|
2211
|
+
"parent": "dialog"
|
|
2212
|
+
},
|
|
2213
|
+
"dialog-body": {
|
|
2214
|
+
"category": "dialogs",
|
|
2215
|
+
"description": "Padded content area for dialog.",
|
|
2216
|
+
"parent": "dialog"
|
|
2217
|
+
},
|
|
2218
|
+
"dialog-footer": {
|
|
2219
|
+
"category": "dialogs",
|
|
2220
|
+
"description": "Right-aligned action button bar for dialog.",
|
|
2221
|
+
"parent": "dialog"
|
|
2222
|
+
},
|
|
2223
|
+
"dialog-close": {
|
|
2224
|
+
"category": "dialogs",
|
|
2225
|
+
"description": "Styled close button for dialog header.",
|
|
2226
|
+
"parent": "dialog"
|
|
2227
|
+
},
|
|
2228
|
+
"dialog-confirm": {
|
|
2229
|
+
"category": "dialogs",
|
|
2230
|
+
"description": "Compact centered confirmation dialog pattern.",
|
|
2231
|
+
"example": "<dialog class=\"dialog-confirm\">...</dialog>"
|
|
2232
|
+
},
|
|
2233
|
+
"dialog-scroll": {
|
|
2234
|
+
"category": "dialogs",
|
|
2235
|
+
"description": "Scrollable body with pinned header and footer.",
|
|
2236
|
+
"example": "<dialog class=\"dialog-scroll\">...</dialog>"
|
|
2237
|
+
},
|
|
2238
|
+
"dialog-layer-1": {
|
|
2239
|
+
"category": "dialogs",
|
|
2240
|
+
"description": "Z-index layer 1 for stacked dialogs (z-index: 100)."
|
|
2241
|
+
},
|
|
2242
|
+
"dialog-layer-2": {
|
|
2243
|
+
"category": "dialogs",
|
|
2244
|
+
"description": "Z-index layer 2 for stacked dialogs (z-index: 110, lighter backdrop)."
|
|
2245
|
+
},
|
|
2246
|
+
"dialog-layer-3": {
|
|
2247
|
+
"category": "dialogs",
|
|
2248
|
+
"description": "Z-index layer 3 for stacked dialogs (z-index: 120, lightest backdrop)."
|
|
2249
|
+
},
|
|
2250
|
+
"no-rtl": {
|
|
2251
|
+
"category": "rtl",
|
|
2252
|
+
"description": "Opt out of RTL mirroring for specific elements inside dir=rtl containers.",
|
|
2253
|
+
"example": "<pre class=\"no-rtl\"><code>LTR content</code></pre>"
|
|
2254
|
+
},
|
|
2255
|
+
"margin-inline-start": {
|
|
2256
|
+
"category": "rtl",
|
|
2257
|
+
"description": "Margin on the start side (left in LTR, right in RTL).",
|
|
2258
|
+
"example": "<div class=\"margin-inline-start\">...</div>"
|
|
2259
|
+
},
|
|
2260
|
+
"margin-inline-end": {
|
|
2261
|
+
"category": "rtl",
|
|
2262
|
+
"description": "Margin on the end side (right in LTR, left in RTL)."
|
|
2263
|
+
},
|
|
2264
|
+
"padding-inline-start": {
|
|
2265
|
+
"category": "rtl",
|
|
2266
|
+
"description": "Padding on the start side (left in LTR, right in RTL)."
|
|
2267
|
+
},
|
|
2268
|
+
"padding-inline-end": {
|
|
2269
|
+
"category": "rtl",
|
|
2270
|
+
"description": "Padding on the end side (right in LTR, left in RTL)."
|
|
2271
|
+
},
|
|
2272
|
+
"border-inline-start": {
|
|
2273
|
+
"category": "rtl",
|
|
2274
|
+
"description": "Border on the start side (left in LTR, right in RTL)."
|
|
2275
|
+
},
|
|
2276
|
+
"border-inline-end": {
|
|
2277
|
+
"category": "rtl",
|
|
2278
|
+
"description": "Border on the end side (right in LTR, left in RTL)."
|
|
2279
|
+
},
|
|
2280
|
+
"cursor-col-resize": {
|
|
2281
|
+
"category": "helpers",
|
|
2282
|
+
"description": "Column resize cursor."
|
|
2283
|
+
},
|
|
2284
|
+
"cursor-row-resize": {
|
|
2285
|
+
"category": "helpers",
|
|
2286
|
+
"description": "Row resize cursor."
|
|
2287
|
+
},
|
|
2288
|
+
"no-top-margin": {
|
|
2289
|
+
"category": "helpers",
|
|
2290
|
+
"description": "Remove top margin (!important).",
|
|
2291
|
+
"important": true
|
|
2292
|
+
},
|
|
2293
|
+
"no-right-margin": {
|
|
2294
|
+
"category": "helpers",
|
|
2295
|
+
"description": "Remove right margin (!important).",
|
|
2296
|
+
"important": true
|
|
2297
|
+
},
|
|
2298
|
+
"no-bottom-margin": {
|
|
2299
|
+
"category": "helpers",
|
|
2300
|
+
"description": "Remove bottom margin (!important).",
|
|
2301
|
+
"important": true
|
|
2302
|
+
},
|
|
2303
|
+
"no-left-margin": {
|
|
2304
|
+
"category": "helpers",
|
|
2305
|
+
"description": "Remove left margin (!important).",
|
|
2306
|
+
"important": true
|
|
2307
|
+
},
|
|
2308
|
+
"no-top-padding": {
|
|
2309
|
+
"category": "helpers",
|
|
2310
|
+
"description": "Remove top padding (!important).",
|
|
2311
|
+
"important": true
|
|
2312
|
+
},
|
|
2313
|
+
"no-right-padding": {
|
|
2314
|
+
"category": "helpers",
|
|
2315
|
+
"description": "Remove right padding (!important).",
|
|
2316
|
+
"important": true
|
|
2317
|
+
},
|
|
2318
|
+
"no-bottom-padding": {
|
|
2319
|
+
"category": "helpers",
|
|
2320
|
+
"description": "Remove bottom padding (!important).",
|
|
2321
|
+
"important": true
|
|
2322
|
+
},
|
|
2323
|
+
"no-left-padding": {
|
|
2324
|
+
"category": "helpers",
|
|
2325
|
+
"description": "Remove left padding (!important).",
|
|
2326
|
+
"important": true
|
|
2327
|
+
},
|
|
2328
|
+
"no-border-top": {
|
|
2329
|
+
"category": "helpers",
|
|
2330
|
+
"description": "Remove top border (!important).",
|
|
2331
|
+
"important": true
|
|
2332
|
+
},
|
|
2333
|
+
"no-border-right": {
|
|
2334
|
+
"category": "helpers",
|
|
2335
|
+
"description": "Remove right border (!important).",
|
|
2336
|
+
"important": true
|
|
2337
|
+
},
|
|
2338
|
+
"no-border-bottom": {
|
|
2339
|
+
"category": "helpers",
|
|
2340
|
+
"description": "Remove bottom border (!important).",
|
|
2341
|
+
"important": true
|
|
2342
|
+
},
|
|
2343
|
+
"no-border-left": {
|
|
2344
|
+
"category": "helpers",
|
|
2345
|
+
"description": "Remove left border (!important).",
|
|
2346
|
+
"important": true
|
|
2347
|
+
},
|
|
2348
|
+
"last": {
|
|
2349
|
+
"category": "helpers",
|
|
2350
|
+
"description": "Remove right margin (!important).",
|
|
2351
|
+
"important": true
|
|
2352
|
+
},
|
|
2353
|
+
"end": {
|
|
2354
|
+
"category": "helpers",
|
|
2355
|
+
"description": "Remove bottom margin (!important).",
|
|
2356
|
+
"important": true
|
|
2357
|
+
},
|
|
2358
|
+
"pause": {
|
|
2359
|
+
"category": "helpers",
|
|
2360
|
+
"description": "Half-height bottom margin (!important).",
|
|
2361
|
+
"important": true
|
|
2362
|
+
},
|
|
2363
|
+
"medium": {
|
|
2364
|
+
"category": "typography",
|
|
2365
|
+
"description": "Medium font weight (400 !important).",
|
|
2366
|
+
"important": true
|
|
2367
|
+
},
|
|
2368
|
+
"centered": {
|
|
2369
|
+
"category": "grid",
|
|
2370
|
+
"description": "Center a grid unit (float: none !important, margin: 0 auto).",
|
|
2371
|
+
"parent": "units-row",
|
|
2372
|
+
"important": true
|
|
2373
|
+
},
|
|
2374
|
+
"unit-centered": {
|
|
2375
|
+
"category": "grid",
|
|
2376
|
+
"description": "Center a grid unit (float: none !important, margin: 0 auto). Alias: centered.",
|
|
2377
|
+
"parent": "units-row",
|
|
2378
|
+
"important": true
|
|
2379
|
+
},
|
|
2380
|
+
"gap-xxl": {
|
|
2381
|
+
"category": "helpers",
|
|
2382
|
+
"description": "Gap between flex/grid children: var(--ply-space-xxl, 3rem)."
|
|
2383
|
+
},
|
|
2384
|
+
"margin-xxl": {
|
|
2385
|
+
"category": "helpers",
|
|
2386
|
+
"description": "Add extra extra large margin on all sides (3rem)."
|
|
2387
|
+
},
|
|
2388
|
+
"margin-top-xxl": {
|
|
2389
|
+
"category": "helpers",
|
|
2390
|
+
"description": "Add extra extra large margin-top (3rem)."
|
|
2391
|
+
},
|
|
2392
|
+
"margin-right-xxl": {
|
|
2393
|
+
"category": "helpers",
|
|
2394
|
+
"description": "Add extra extra large margin-right (3rem)."
|
|
2395
|
+
},
|
|
2396
|
+
"margin-bottom-xxl": {
|
|
2397
|
+
"category": "helpers",
|
|
2398
|
+
"description": "Add extra extra large margin-bottom (3rem)."
|
|
2399
|
+
},
|
|
2400
|
+
"margin-left-xxl": {
|
|
2401
|
+
"category": "helpers",
|
|
2402
|
+
"description": "Add extra extra large margin-left (3rem)."
|
|
2403
|
+
},
|
|
2404
|
+
"padding-xxl": {
|
|
2405
|
+
"category": "helpers",
|
|
2406
|
+
"description": "Add extra extra large padding on all sides (3rem)."
|
|
2407
|
+
},
|
|
2408
|
+
"padding-top-xxl": {
|
|
2409
|
+
"category": "helpers",
|
|
2410
|
+
"description": "Add extra extra large padding-top (3rem)."
|
|
2411
|
+
},
|
|
2412
|
+
"padding-right-xxl": {
|
|
2413
|
+
"category": "helpers",
|
|
2414
|
+
"description": "Add extra extra large padding-right (3rem)."
|
|
2415
|
+
},
|
|
2416
|
+
"padding-bottom-xxl": {
|
|
2417
|
+
"category": "helpers",
|
|
2418
|
+
"description": "Add extra extra large padding-bottom (3rem)."
|
|
2419
|
+
},
|
|
2420
|
+
"padding-left-xxl": {
|
|
2421
|
+
"category": "helpers",
|
|
2422
|
+
"description": "Add extra extra large padding-left (3rem)."
|
|
2423
|
+
},
|
|
2424
|
+
"padding-xxl-top": {
|
|
2425
|
+
"category": "helpers",
|
|
2426
|
+
"description": "Alias for padding-top-xxl. Add extra extra large padding-top (3rem)."
|
|
2427
|
+
},
|
|
2428
|
+
"padding-xxl-right": {
|
|
2429
|
+
"category": "helpers",
|
|
2430
|
+
"description": "Alias for padding-right-xxl. Add extra extra large padding-right (3rem)."
|
|
2431
|
+
},
|
|
2432
|
+
"padding-xxl-bottom": {
|
|
2433
|
+
"category": "helpers",
|
|
2434
|
+
"description": "Alias for padding-bottom-xxl. Add extra extra large padding-bottom (3rem)."
|
|
2435
|
+
},
|
|
2436
|
+
"padding-xxl-left": {
|
|
2437
|
+
"category": "helpers",
|
|
2438
|
+
"description": "Alias for padding-left-xxl. Add extra extra large padding-left (3rem)."
|
|
2439
|
+
}
|
|
2440
|
+
},
|
|
2441
|
+
"customProperties": {
|
|
2442
|
+
"typography": {
|
|
2443
|
+
"--ply-font-body": "Font family for body text and form controls. Default: system font stack (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, etc.).",
|
|
2444
|
+
"--ply-font-heading": "Font family for headings (h1-h6). Default: inherits from --ply-font-body.",
|
|
2445
|
+
"--ply-font-mono": "Font family for code, pre, kbd, samp elements. Default: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace."
|
|
2446
|
+
},
|
|
2447
|
+
"background": {
|
|
2448
|
+
"--ply-bg-body": "Page background. Light: #ffffff, Dark: #161616",
|
|
2449
|
+
"--ply-bg-surface": "Card/panel background. Light: #ffffff, Dark: #262626",
|
|
2450
|
+
"--ply-bg-surface-alt": "Alternate surface. Light: #f4f4f4, Dark: #333333",
|
|
2451
|
+
"--ply-bg-muted": "Muted/hover background. Light: #e0e0e0, Dark: #393939",
|
|
2452
|
+
"--ply-bg-glass": "Frosted glass overlay. backdrop-filter: blur(8px). Light: rgba(255,255,255,0.15), Dark: rgba(38,38,38,0.25)"
|
|
2453
|
+
},
|
|
2454
|
+
"text": {
|
|
2455
|
+
"--ply-color-body": "Primary text color. Light: #161616, Dark: #f4f4f4",
|
|
2456
|
+
"--ply-color-headings": "Heading text color. Light: #161616, Dark: #ffffff",
|
|
2457
|
+
"--ply-color-secondary": "Secondary text. Light: #525252, Dark: #c6c6c6",
|
|
2458
|
+
"--ply-color-muted": "Muted/tertiary text (supplementary content). Light: #767676, Dark: #8d8d8d",
|
|
2459
|
+
"--ply-color-placeholder": "Input placeholder text. Light: #a8a8a8, Dark: #6f6f6f",
|
|
2460
|
+
"--ply-color-text-inverse": "Inverse text (for colored backgrounds). Light: #fff, Dark: #fff"
|
|
2461
|
+
},
|
|
2462
|
+
"borders": {
|
|
2463
|
+
"--ply-border-color": "Standard border. Light: #e0e0e0, Dark: #525252",
|
|
2464
|
+
"--ply-border-strong": "Emphasized border. Light: #8d8d8d, Dark: #6f6f6f"
|
|
2465
|
+
},
|
|
2466
|
+
"interactive": {
|
|
2467
|
+
"--ply-color-accent": "Brand accent color for icons, badges, and section accents. Independent of button color and focus rings. Light: #0353e9, Dark: #4589ff. Override in custom themes without affecting buttons.",
|
|
2468
|
+
"--ply-color-link": "Link color. Light: #0f62fe, Dark: #78a9ff",
|
|
2469
|
+
"--ply-color-link-hover": "Link hover. Light: #0043ce, Dark: #a6c8ff",
|
|
2470
|
+
"--ply-color-focus": "Focus ring color. #0f62fe in both themes",
|
|
2471
|
+
"--ply-btn-border-radius": "Button border-radius. Default: 2rem (pill shape). Override for square or rounded buttons."
|
|
2472
|
+
},
|
|
2473
|
+
"forms": {
|
|
2474
|
+
"--ply-color-field-bg": "Field background. Light: #ffffff, Dark: #262626",
|
|
2475
|
+
"--ply-color-input-border": "Input border. Light: #8d8d8d, Dark: #6f6f6f",
|
|
2476
|
+
"--ply-color-input-bg": "Input background. Light: #ffffff, Dark: #393939"
|
|
2477
|
+
},
|
|
2478
|
+
"code": {
|
|
2479
|
+
"--ply-color-code-bg": "Inline code background. Light: #f4f4f4, Dark: #333333",
|
|
2480
|
+
"--ply-color-code-border": "Inline code border. Light: #e0e0e0, Dark: #525252"
|
|
2481
|
+
},
|
|
2482
|
+
"tables": {
|
|
2483
|
+
"--ply-color-table-border": "Table cell border. Light: #e0e0e0, Dark: #525252",
|
|
2484
|
+
"--ply-color-table-stripped": "Striped row background. Light: #f4f4f4, Dark: #1c1c1c",
|
|
2485
|
+
"--ply-color-table-hovered": "Hovered row background. Light: #e8e8e8, Dark: #333333"
|
|
2486
|
+
},
|
|
2487
|
+
"buttons": {
|
|
2488
|
+
"--ply-btn-default-bg": "Primary button background. Controls btn-primary color and link colors. Light: #0353e9, Dark: #78a9ff. Override in custom themes to change primary + links together.",
|
|
2489
|
+
"--ply-btn-secondary-bg": "Secondary button background. Controls btn, btn-secondary color. Light: #393939, Dark: #4c4c4c.",
|
|
2490
|
+
"--ply-btn-default-color": "Default button text color. Light: inherits --ply-color-text-inverse (#fff), Dark: #f4f4f4"
|
|
2491
|
+
},
|
|
2492
|
+
"navigation": {
|
|
2493
|
+
"--ply-nav-bg": "Navbar background. Light: #ffffff, Dark: #262626",
|
|
2494
|
+
"--ply-nav-color": "Nav link text. Light: #525252, Dark: #c6c6c6",
|
|
2495
|
+
"--ply-nav-border": "Nav border. Light: #e0e0e0, Dark: #525252",
|
|
2496
|
+
"--ply-nav-hover": "Nav item hover bg. Light: #f4f4f4, Dark: #333333",
|
|
2497
|
+
"--ply-nav-active-color": "Active nav item text. Light: #161616, Dark: #ffffff"
|
|
2498
|
+
},
|
|
2499
|
+
"elevation": {
|
|
2500
|
+
"--ply-layer-0": "Base layer bg. Same as bg-body",
|
|
2501
|
+
"--ply-layer-1": "Elevated layer. Light: #f4f4f4, Dark: #262626",
|
|
2502
|
+
"--ply-layer-2": "Higher layer. Light: #e0e0e0, Dark: #393939",
|
|
2503
|
+
"--ply-layer-3": "Highest layer. Light: #c6c6c6, Dark: #525252",
|
|
2504
|
+
"--ply-shadow-1": "Subtle shadow. Light: rgba(0,0,0,0.08), Dark: rgba(0,0,0,0.2)",
|
|
2505
|
+
"--ply-shadow-2": "Medium shadow. Light: rgba(0,0,0,0.1), Dark: rgba(0,0,0,0.3)",
|
|
2506
|
+
"--ply-shadow-3": "Heavy shadow. Light: rgba(0,0,0,0.12), Dark: rgba(0,0,0,0.4)"
|
|
2507
|
+
},
|
|
2508
|
+
"brand": {
|
|
2509
|
+
"--ply-bg-blue": "Blue button/badge bg. #0f62fe (same both themes)",
|
|
2510
|
+
"--ply-bg-blue-hover": "Blue hover. #0043ce",
|
|
2511
|
+
"--ply-bg-blue-active": "Blue active. #002d9c",
|
|
2512
|
+
"--ply-bg-red": "Red bg. #da1e28",
|
|
2513
|
+
"--ply-bg-red-hover": "Red hover. #ba1b23",
|
|
2514
|
+
"--ply-bg-red-active": "Red active. #750e13",
|
|
2515
|
+
"--ply-bg-green": "Green bg. #198038",
|
|
2516
|
+
"--ply-bg-green-hover": "Green hover. #0e6027",
|
|
2517
|
+
"--ply-bg-green-active": "Green active. #044317",
|
|
2518
|
+
"--ply-bg-yellow": "Yellow bg. #f1c21b",
|
|
2519
|
+
"--ply-bg-yellow-hover": "Yellow hover. #d2a106",
|
|
2520
|
+
"--ply-bg-yellow-active": "Yellow active. #b28600"
|
|
2521
|
+
},
|
|
2522
|
+
"palette": {
|
|
2523
|
+
"--ply-blue-1 / -2 / -3": "Blue palette: base, light, pastel",
|
|
2524
|
+
"--ply-red-1 / -2 / -3": "Red palette: base, light, pastel",
|
|
2525
|
+
"--ply-green-1 / -2 / -3": "Green palette: base, light, pastel",
|
|
2526
|
+
"--ply-yellow-1 / -2 / -3": "Yellow palette: base, light, pastel",
|
|
2527
|
+
"--ply-indigo-1 / -2 / -3": "Indigo palette: base, light, pastel",
|
|
2528
|
+
"--ply-purple-1 / -2 / -3": "Purple palette: base, light, pastel",
|
|
2529
|
+
"--ply-pink-1 / -2 / -3": "Pink palette: base, light, pastel",
|
|
2530
|
+
"--ply-orange-1 / -2 / -3": "Orange palette: base, light, pastel",
|
|
2531
|
+
"--ply-teal-1 / -2 / -3": "Teal palette: base, light, pastel",
|
|
2532
|
+
"--ply-cyan-1 / -2 / -3": "Cyan palette: base, light, pastel"
|
|
2533
|
+
},
|
|
2534
|
+
"spacing": {
|
|
2535
|
+
"--ply-space-xs": "Extra-small spacing unit. Default: 0.25rem",
|
|
2536
|
+
"--ply-space-sm": "Small spacing unit. Default: 0.5rem",
|
|
2537
|
+
"--ply-space-md": "Medium spacing unit. Default: 0.75rem",
|
|
2538
|
+
"--ply-space-lg": "Large spacing unit. Default: 1.5rem",
|
|
2539
|
+
"--ply-space-xl": "Extra-large spacing unit. Default: 2rem",
|
|
2540
|
+
"--ply-space-xxl": "Extra extra large spacing unit. Default: 3rem"
|
|
2541
|
+
}
|
|
2542
|
+
},
|
|
2543
|
+
"semanticElements": {
|
|
2544
|
+
"dialog": {
|
|
2545
|
+
"file": "_reset.scss",
|
|
2546
|
+
"styling": "border: none, border-radius: 0.25rem, padding: 1.5rem, max-width: 32rem, box-shadow, theme-aware background. ::backdrop overlay included.",
|
|
2547
|
+
"tip": "Use native <dialog> with .showModal() instead of custom overlays. Add bg-glass class for frosted effect."
|
|
2548
|
+
},
|
|
2549
|
+
"details": {
|
|
2550
|
+
"file": "_reset.scss",
|
|
2551
|
+
"styling": "Border, border-radius, padding. Summary gets cursor: pointer, font-weight: 600. Rotation arrow on open state.",
|
|
2552
|
+
"tip": "Use for collapsible content. No classes needed — just <details><summary>Title</summary>Content</details>."
|
|
2553
|
+
},
|
|
2554
|
+
"table": {
|
|
2555
|
+
"file": "_typography.scss, _tables.scss",
|
|
2556
|
+
"styling": "Full width, border-collapse, themed borders on th/td, bold thead. Caption gets uppercase muted styling.",
|
|
2557
|
+
"tip": "Just write a <table>. Add table-bordered, table-striped, or table-hover classes for variants."
|
|
2558
|
+
},
|
|
2559
|
+
"nav": {
|
|
2560
|
+
"file": "_navigation.scss",
|
|
2561
|
+
"styling": "ul list-style: none, margin: 0. Add .navbar for horizontal nav bar.",
|
|
2562
|
+
"tip": "Wrap <ul> in <nav class='navbar'> for a styled navigation bar."
|
|
2563
|
+
},
|
|
2564
|
+
"blockquote": {
|
|
2565
|
+
"file": "_typography.scss",
|
|
2566
|
+
"styling": "Italic, larger font, left padding with 2px left border. <small> and <cite> get muted color.",
|
|
2567
|
+
"tip": "Just use <blockquote>. Add <small> or <cite> for attribution."
|
|
2568
|
+
},
|
|
2569
|
+
"code": {
|
|
2570
|
+
"file": "_typography.scss",
|
|
2571
|
+
"styling": "Monospace font, 90% size, inline padding, theme-aware background and border.",
|
|
2572
|
+
"tip": "Inline: <code>. Block: <pre><code>. ply resets pre>code padding so it doesn't double up."
|
|
2573
|
+
},
|
|
2574
|
+
"kbd": {
|
|
2575
|
+
"file": "_typography.scss",
|
|
2576
|
+
"styling": "Black background, white text, monospace, no-wrap.",
|
|
2577
|
+
"tip": "Use for keyboard shortcuts: <kbd>Ctrl</kbd>+<kbd>K</kbd>"
|
|
2578
|
+
},
|
|
2579
|
+
"mark": {
|
|
2580
|
+
"file": "_typography.scss",
|
|
2581
|
+
"styling": "Yellow background, black text. Theme-aware.",
|
|
2582
|
+
"tip": "Use for highlighted/search result text."
|
|
2583
|
+
},
|
|
2584
|
+
"progress": {
|
|
2585
|
+
"file": "_reset.scss",
|
|
2586
|
+
"styling": "Full width, 0.5rem height, themed background, border-radius. WebKit and Firefox vendor prefixes.",
|
|
2587
|
+
"tip": "Native <progress value='70' max='100'></progress>. No classes needed."
|
|
2588
|
+
},
|
|
2589
|
+
"meter": {
|
|
2590
|
+
"file": "_reset.scss",
|
|
2591
|
+
"styling": "Full width, 0.5rem height, themed background, border-radius.",
|
|
2592
|
+
"tip": "Native <meter value='0.7'></meter>. No classes needed."
|
|
2593
|
+
},
|
|
2594
|
+
"hr": {
|
|
2595
|
+
"file": "_reset.scss",
|
|
2596
|
+
"styling": "1px height, theme-aware border-color, display: block.",
|
|
2597
|
+
"tip": "Just <hr>. Adapts to light/dark theme automatically."
|
|
2598
|
+
},
|
|
2599
|
+
"headings": {
|
|
2600
|
+
"file": "_typography.scss",
|
|
2601
|
+
"styling": "h1-h6 get themed color, font-family, responsive sizing, margin-bottom: 0.5rem.",
|
|
2602
|
+
"tip": "Use semantic headings. Responsive sizing is automatic across breakpoints."
|
|
2603
|
+
},
|
|
2604
|
+
"form-controls": {
|
|
2605
|
+
"file": "_forms.scss",
|
|
2606
|
+
"styling": "Inputs, textareas, selects get themed borders, backgrounds, focus states (blue border + shadow). Wrap in .form for full styling.",
|
|
2607
|
+
"tip": "Wrap form in <div class='form'> to enable ply's input styling. Labels become block-level with pointer cursor."
|
|
2608
|
+
}
|
|
2609
|
+
},
|
|
2610
|
+
"namingConvention": {
|
|
2611
|
+
"pattern": "{property}-{direction}-{modifier}",
|
|
2612
|
+
"examples": [
|
|
2613
|
+
"margin-top",
|
|
2614
|
+
"padding-left-extra",
|
|
2615
|
+
"border-bottom-thick"
|
|
2616
|
+
],
|
|
2617
|
+
"sizeModifiers": [
|
|
2618
|
+
"xs",
|
|
2619
|
+
"sm",
|
|
2620
|
+
"lg",
|
|
2621
|
+
"xl",
|
|
2622
|
+
"xxl"
|
|
2623
|
+
]
|
|
2624
|
+
}
|
|
2625
|
+
}
|