layout-style-css 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +447 -0
- package/demo/assets/apple-touch-icon.svg +7 -0
- package/demo/assets/favicon.svg +7 -0
- package/demo/assets/social-card.svg +17 -0
- package/demo/browserconfig.xml +9 -0
- package/demo/index.html +700 -0
- package/demo/robots.txt +4 -0
- package/demo/site.webmanifest +23 -0
- package/demo/sitemap.xml +9 -0
- package/dist/layout-all-with-ui-kit-and-interactive-surface.css +3 -0
- package/dist/layout-all-with-ui-kit.css +2 -0
- package/dist/layout-all.css +13 -0
- package/dist/layout-base.css +472 -0
- package/dist/layout-style-bauhaus.css +70 -0
- package/dist/layout-style-bento.css +76 -0
- package/dist/layout-style-brutalism.css +70 -0
- package/dist/layout-style-css.css +1367 -0
- package/dist/layout-style-css.min.css +1 -0
- package/dist/layout-style-cyberpunk.css +70 -0
- package/dist/layout-style-maximalist.css +93 -0
- package/dist/layout-style-minimal-saas.css +67 -0
- package/dist/layout-style-neumorphism.css +72 -0
- package/dist/layout-style-retro-glass.css +82 -0
- package/dist/layout-style-retrofuturism.css +71 -0
- package/dist/layout-style-tactile.css +70 -0
- package/dist/layout-style-y2k.css +72 -0
- package/dist/layout-ui-style-kit-bridge.css +55 -0
- package/package.json +97 -0
- package/styles/layout-base.css +472 -0
- package/styles/layout-style-bauhaus.css +70 -0
- package/styles/layout-style-bento.css +76 -0
- package/styles/layout-style-brutalism.css +70 -0
- package/styles/layout-style-cyberpunk.css +70 -0
- package/styles/layout-style-maximalist.css +93 -0
- package/styles/layout-style-minimal-saas.css +67 -0
- package/styles/layout-style-neumorphism.css +72 -0
- package/styles/layout-style-retro-glass.css +82 -0
- package/styles/layout-style-retrofuturism.css +71 -0
- package/styles/layout-style-tactile.css +70 -0
- package/styles/layout-style-y2k.css +72 -0
- package/styles/layout-ui-style-kit-bridge.css +55 -0
package/demo/index.html
ADDED
|
@@ -0,0 +1,700 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta http-equiv="x-ua-compatible" content="IE=edge">
|
|
6
|
+
<meta http-equiv="content-language" content="en-US">
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
8
|
+
<meta name="title" content="layout-style-css + UI Style Kit CSS Demo">
|
|
9
|
+
<meta name="description" content="Interactive shell-first layout demo for layout-style-css, ui-style-kit-css v2.0.1, and optional interactive-surface-css integrations.">
|
|
10
|
+
<meta name="keywords" content="CSS layout library, layout styles, UI style kit CSS, shell layouts, responsive CSS, design system layout">
|
|
11
|
+
<meta name="author" content="Foscat">
|
|
12
|
+
<meta name="creator" content="Foscat">
|
|
13
|
+
<meta name="publisher" content="Foscat">
|
|
14
|
+
<meta name="abstract" content="Shell-first CSS layout primitives that mix independently with ui-style-kit-css visual systems.">
|
|
15
|
+
<meta name="subject" content="CSS layout style library for UI shell composition">
|
|
16
|
+
<meta name="classification" content="Developer tools, CSS libraries, design systems">
|
|
17
|
+
<meta name="category" content="Software Development">
|
|
18
|
+
<meta name="coverage" content="Worldwide">
|
|
19
|
+
<meta name="distribution" content="Global">
|
|
20
|
+
<meta name="rating" content="General">
|
|
21
|
+
<meta name="revisit-after" content="7 days">
|
|
22
|
+
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
|
|
23
|
+
<meta name="googlebot" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
|
|
24
|
+
<meta name="bingbot" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
|
|
25
|
+
<meta name="referrer" content="strict-origin-when-cross-origin">
|
|
26
|
+
<meta name="format-detection" content="telephone=no">
|
|
27
|
+
<meta name="application-name" content="layout-style-css">
|
|
28
|
+
<meta name="mobile-web-app-capable" content="yes">
|
|
29
|
+
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
30
|
+
<meta name="apple-mobile-web-app-title" content="layout-style-css">
|
|
31
|
+
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
32
|
+
<meta name="theme-color" content="#111827">
|
|
33
|
+
<meta name="msapplication-TileColor" content="#111827">
|
|
34
|
+
<meta name="msapplication-config" content="./browserconfig.xml">
|
|
35
|
+
<meta name="color-scheme" content="light dark">
|
|
36
|
+
<meta property="og:type" content="website">
|
|
37
|
+
<meta property="og:locale" content="en_US">
|
|
38
|
+
<meta property="og:title" content="layout-style-css + UI Style Kit CSS Demo">
|
|
39
|
+
<meta property="og:description" content="Swap layout shells independently from UI styles while keeping ui-style-kit-css in charge of visual identity.">
|
|
40
|
+
<meta property="og:image" content="https://foscat.github.io/layout-style-css/assets/social-card.svg">
|
|
41
|
+
<meta property="og:image:secure_url" content="https://foscat.github.io/layout-style-css/assets/social-card.svg">
|
|
42
|
+
<meta property="og:image:alt" content="layout-style-css shell-first CSS social card">
|
|
43
|
+
<meta property="og:image:type" content="image/svg+xml">
|
|
44
|
+
<meta property="og:image:width" content="1200">
|
|
45
|
+
<meta property="og:image:height" content="630">
|
|
46
|
+
<meta property="og:url" content="https://foscat.github.io/layout-style-css/">
|
|
47
|
+
<meta property="og:site_name" content="layout-style-css">
|
|
48
|
+
<meta property="og:updated_time" content="2026-06-30T00:00:00-05:00">
|
|
49
|
+
<meta name="twitter:card" content="summary_large_image">
|
|
50
|
+
<meta name="twitter:title" content="layout-style-css + UI Style Kit CSS Demo">
|
|
51
|
+
<meta name="twitter:description" content="Shell-first responsive layouts that mix and match with ui-style-kit-css v2.0.1.">
|
|
52
|
+
<meta name="twitter:image" content="https://foscat.github.io/layout-style-css/assets/social-card.svg">
|
|
53
|
+
<meta name="twitter:image:alt" content="layout-style-css shell-first CSS social card">
|
|
54
|
+
<meta itemprop="name" content="layout-style-css + UI Style Kit CSS Demo">
|
|
55
|
+
<meta itemprop="description" content="Shell-first responsive layouts that mix and match with ui-style-kit-css v2.0.1.">
|
|
56
|
+
<meta itemprop="image" content="https://foscat.github.io/layout-style-css/assets/social-card.svg">
|
|
57
|
+
<link rel="canonical" href="https://foscat.github.io/layout-style-css/">
|
|
58
|
+
<link rel="dns-prefetch" href="https://unpkg.com">
|
|
59
|
+
<link rel="preconnect" href="https://unpkg.com" crossorigin>
|
|
60
|
+
<link rel="image_src" href="./assets/social-card.svg">
|
|
61
|
+
<link rel="icon" type="image/svg+xml" href="./assets/favicon.svg">
|
|
62
|
+
<link rel="shortcut icon" href="./assets/favicon.svg">
|
|
63
|
+
<link rel="apple-touch-icon" href="./assets/apple-touch-icon.svg">
|
|
64
|
+
<link rel="mask-icon" href="./assets/favicon.svg" color="#111827">
|
|
65
|
+
<link rel="manifest" href="./site.webmanifest">
|
|
66
|
+
<link rel="sitemap" type="application/xml" title="Sitemap" href="./sitemap.xml">
|
|
67
|
+
<title>layout-style-css + UI Style Kit CSS Demo</title>
|
|
68
|
+
<link rel="stylesheet" href="https://unpkg.com/ui-style-kit-css@2.0.1/dist/ui-style-kit.with-bridge.min.css">
|
|
69
|
+
<link rel="stylesheet" href="../dist/layout-all.css">
|
|
70
|
+
<script type="application/ld+json">
|
|
71
|
+
{
|
|
72
|
+
"@context": "https://schema.org",
|
|
73
|
+
"@type": "SoftwareSourceCode",
|
|
74
|
+
"name": "layout-style-css",
|
|
75
|
+
"description": "A shell-first CSS layout library designed to mix independently with ui-style-kit-css v2.0.1.",
|
|
76
|
+
"programmingLanguage": "CSS",
|
|
77
|
+
"applicationCategory": "DeveloperApplication",
|
|
78
|
+
"url": "https://foscat.github.io/layout-style-css/",
|
|
79
|
+
"image": "https://foscat.github.io/layout-style-css/assets/social-card.svg",
|
|
80
|
+
"datePublished": "2026-06-30",
|
|
81
|
+
"dateModified": "2026-06-30",
|
|
82
|
+
"keywords": [
|
|
83
|
+
"CSS layout library",
|
|
84
|
+
"layout styles",
|
|
85
|
+
"UI style kit CSS",
|
|
86
|
+
"responsive shell layouts",
|
|
87
|
+
"design system layout"
|
|
88
|
+
],
|
|
89
|
+
"author": {
|
|
90
|
+
"@type": "Organization",
|
|
91
|
+
"name": "Foscat"
|
|
92
|
+
},
|
|
93
|
+
"publisher": {
|
|
94
|
+
"@type": "Organization",
|
|
95
|
+
"name": "Foscat"
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
</script>
|
|
99
|
+
<style>
|
|
100
|
+
/*
|
|
101
|
+
Demo CSS is intentionally structural. UI Style Kit classes and native
|
|
102
|
+
selectors own paint, typography, borders, shadows, and control styling.
|
|
103
|
+
*/
|
|
104
|
+
.demo-header {
|
|
105
|
+
width: 100%;
|
|
106
|
+
display: flex;
|
|
107
|
+
align-items: center;
|
|
108
|
+
justify-content: space-between;
|
|
109
|
+
gap: 1rem;
|
|
110
|
+
padding: 0.875rem var(--ly-page-padding-inline);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.demo-brand {
|
|
114
|
+
display: grid;
|
|
115
|
+
gap: 0.125rem;
|
|
116
|
+
min-width: 12rem;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.demo-controls {
|
|
120
|
+
display: flex;
|
|
121
|
+
flex-wrap: wrap;
|
|
122
|
+
align-items: center;
|
|
123
|
+
justify-content: flex-end;
|
|
124
|
+
gap: 0.625rem;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.demo-select {
|
|
128
|
+
min-width: 10.5rem;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.demo-sidebar {
|
|
132
|
+
padding: var(--ly-space-5);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.demo-sidebar-inner {
|
|
136
|
+
display: grid;
|
|
137
|
+
grid-auto-rows: max-content;
|
|
138
|
+
align-content: start;
|
|
139
|
+
gap: var(--ly-space-4);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.demo-sidebar-list {
|
|
143
|
+
display: grid;
|
|
144
|
+
gap: var(--ly-space-2);
|
|
145
|
+
margin: 0;
|
|
146
|
+
padding: 0;
|
|
147
|
+
list-style: none;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.demo-sidebar-list a {
|
|
151
|
+
display: block;
|
|
152
|
+
padding: 0.65rem 0.75rem;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.demo-title {
|
|
156
|
+
max-width: 12ch;
|
|
157
|
+
margin: 0;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.demo-lede {
|
|
161
|
+
max-width: 62ch;
|
|
162
|
+
margin: 0;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.demo-pill {
|
|
166
|
+
display: inline-flex;
|
|
167
|
+
align-items: center;
|
|
168
|
+
width: fit-content;
|
|
169
|
+
min-height: 2rem;
|
|
170
|
+
padding-inline: 0.75rem;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.demo-stage {
|
|
174
|
+
--ly-frame-ratio: auto;
|
|
175
|
+
min-height: 18rem;
|
|
176
|
+
display: grid;
|
|
177
|
+
align-content: end;
|
|
178
|
+
gap: var(--ly-space-4);
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.demo-stat {
|
|
182
|
+
min-height: 9rem;
|
|
183
|
+
display: grid;
|
|
184
|
+
align-content: space-between;
|
|
185
|
+
gap: var(--ly-space-3);
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.demo-panel-title {
|
|
189
|
+
margin: 0;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.demo-mini-grid {
|
|
193
|
+
display: grid;
|
|
194
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
195
|
+
gap: var(--ly-space-3);
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.demo-mini-grid > * {
|
|
199
|
+
min-width: 0;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.demo-detail-layout {
|
|
203
|
+
grid-template-columns: 1fr;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.demo-recipe-grid {
|
|
207
|
+
display: grid;
|
|
208
|
+
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
|
|
209
|
+
gap: var(--ly-space-4);
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.demo-recipe-card {
|
|
213
|
+
display: grid;
|
|
214
|
+
align-content: start;
|
|
215
|
+
gap: var(--ly-space-3);
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.demo-recipe-preview {
|
|
219
|
+
display: grid;
|
|
220
|
+
gap: var(--ly-space-2);
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.demo-recipe-preview code {
|
|
224
|
+
overflow-wrap: anywhere;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
@media (min-width: 90rem) {
|
|
228
|
+
.demo-detail-layout {
|
|
229
|
+
grid-template-columns: minmax(10rem, 0.4fr) minmax(0, 1fr);
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
@media (max-width: 48rem) {
|
|
234
|
+
.demo-header {
|
|
235
|
+
align-items: stretch;
|
|
236
|
+
flex-direction: column;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.demo-controls {
|
|
240
|
+
justify-content: stretch;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.demo-controls > * {
|
|
244
|
+
flex: 1 1 100%;
|
|
245
|
+
min-width: 0;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.demo-select {
|
|
249
|
+
width: 100%;
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
</style>
|
|
253
|
+
</head>
|
|
254
|
+
<body class="ly-root" data-ui="minimal-saas" data-layout="minimal-saas" layout-style="minimal-saas" data-theme="arctic-indigo" data-mode="light">
|
|
255
|
+
<div class="ly-app-shell">
|
|
256
|
+
<header class="ly-header ly-header--sticky ly-app-header">
|
|
257
|
+
<div class="demo-header">
|
|
258
|
+
<div class="demo-brand">
|
|
259
|
+
<strong>layout-style-css</strong>
|
|
260
|
+
<span>Independent shell layouts for ui-style-kit-css@2.0.1</span>
|
|
261
|
+
</div>
|
|
262
|
+
|
|
263
|
+
<div class="demo-controls">
|
|
264
|
+
<label>
|
|
265
|
+
<span class="ly-visually-hidden">UI system</span>
|
|
266
|
+
<select class="demo-select" id="uiSelect" data-ui-kit="select">
|
|
267
|
+
<option value="minimal-saas">Minimal SaaS UI</option>
|
|
268
|
+
<option value="bento">Bento UI</option>
|
|
269
|
+
<option value="maximalist">Maximalist UI</option>
|
|
270
|
+
<option value="bauhaus">Bauhaus UI</option>
|
|
271
|
+
<option value="tactile">Tactile UI</option>
|
|
272
|
+
<option value="neumorphism">Neumorphism UI</option>
|
|
273
|
+
<option value="retrofuturism">Retrofuturism UI</option>
|
|
274
|
+
<option value="brutalism">Brutalism UI</option>
|
|
275
|
+
<option value="cyberpunk">Cyberpunk UI</option>
|
|
276
|
+
<option value="y2k">Y2K UI</option>
|
|
277
|
+
<option value="retro-glass">Retro Glass UI</option>
|
|
278
|
+
</select>
|
|
279
|
+
</label>
|
|
280
|
+
<label>
|
|
281
|
+
<span class="ly-visually-hidden">Layout style</span>
|
|
282
|
+
<select class="demo-select" id="layoutSelect" data-ui-kit="select">
|
|
283
|
+
<option value="minimal-saas">Minimal SaaS Layout</option>
|
|
284
|
+
<option value="bento">Bento Layout</option>
|
|
285
|
+
<option value="maximalist">Maximalist Layout</option>
|
|
286
|
+
<option value="bauhaus">Bauhaus Layout</option>
|
|
287
|
+
<option value="tactile">Tactile Layout</option>
|
|
288
|
+
<option value="neumorphism">Neumorphism Layout</option>
|
|
289
|
+
<option value="retrofuturism">Retrofuturism Layout</option>
|
|
290
|
+
<option value="brutalism">Brutalism Layout</option>
|
|
291
|
+
<option value="cyberpunk">Cyberpunk Layout</option>
|
|
292
|
+
<option value="y2k">Y2K Layout</option>
|
|
293
|
+
<option value="retro-glass">Retro Glass Layout</option>
|
|
294
|
+
</select>
|
|
295
|
+
</label>
|
|
296
|
+
<label>
|
|
297
|
+
<span class="ly-visually-hidden">Theme</span>
|
|
298
|
+
<select class="demo-select" id="themeSelect" data-ui-kit="select">
|
|
299
|
+
<option value="arctic-indigo">Arctic Indigo</option>
|
|
300
|
+
<option value="midnight-gold">Midnight Gold</option>
|
|
301
|
+
<option value="ocean-steel">Ocean Steel</option>
|
|
302
|
+
<option value="forest-moss">Forest Moss</option>
|
|
303
|
+
<option value="sunset-ember">Sunset Ember</option>
|
|
304
|
+
<option value="royal-plum">Royal Plum</option>
|
|
305
|
+
<option value="graphite-cyan">Graphite Cyan</option>
|
|
306
|
+
<option value="desert-sage">Desert Sage</option>
|
|
307
|
+
<option value="rose-quartz">Rose Quartz</option>
|
|
308
|
+
<option value="cyber-lime">Cyber Lime</option>
|
|
309
|
+
</select>
|
|
310
|
+
</label>
|
|
311
|
+
<label>
|
|
312
|
+
<span class="ly-visually-hidden">Mode</span>
|
|
313
|
+
<select class="demo-select" id="modeSelect" data-ui-kit="select">
|
|
314
|
+
<option value="light">Light</option>
|
|
315
|
+
<option value="dark">Dark</option>
|
|
316
|
+
<option value="contrast">Contrast</option>
|
|
317
|
+
</select>
|
|
318
|
+
</label>
|
|
319
|
+
<button type="button" id="mixedPreset" data-ui-kit="button button-secondary">Cyberpunk UI + Maximalist Layout</button>
|
|
320
|
+
</div>
|
|
321
|
+
</div>
|
|
322
|
+
</header>
|
|
323
|
+
|
|
324
|
+
<aside class="ly-app-sidebar demo-sidebar" data-ui-kit="panel">
|
|
325
|
+
<div class="demo-sidebar-inner">
|
|
326
|
+
<span class="demo-pill" data-ui-kit="badge badge-secondary">Shell rail</span>
|
|
327
|
+
<nav aria-label="Demo sections" data-ui-kit="nav">
|
|
328
|
+
<ul class="demo-sidebar-list">
|
|
329
|
+
<li><a href="#stage" aria-current="page" data-ui-kit="nav-link">Stage</a></li>
|
|
330
|
+
<li><a href="#metrics" data-ui-kit="nav-link">Metrics</a></li>
|
|
331
|
+
<li><a href="#panes" data-ui-kit="nav-link">Panes</a></li>
|
|
332
|
+
<li><a href="#recipes" data-ui-kit="nav-link">Recipes</a></li>
|
|
333
|
+
</ul>
|
|
334
|
+
</nav>
|
|
335
|
+
<p>
|
|
336
|
+
This same rail becomes a steady SaaS sidebar, a narrow Cyberpunk utility rail, a floating Y2K dock, or a Retro Glass side panel.
|
|
337
|
+
</p>
|
|
338
|
+
</div>
|
|
339
|
+
</aside>
|
|
340
|
+
|
|
341
|
+
<main class="ly-app-main">
|
|
342
|
+
<section class="ly-section" id="stage">
|
|
343
|
+
<div class="ly-wrapper ly-wrapper--wide ly-stack ly-gap-8">
|
|
344
|
+
<div class="ly-split">
|
|
345
|
+
<div class="ly-stack ly-gap-5 ly-readable">
|
|
346
|
+
<span class="demo-pill" data-ui-kit="badge badge-primary">Matched by default, mixed by design</span>
|
|
347
|
+
<h1 class="demo-title" data-ui-kit="title">Swap shells without swapping UI style.</h1>
|
|
348
|
+
<p class="demo-lede">
|
|
349
|
+
UI styles and layout designs work best together, but they are intentionally independent. Try
|
|
350
|
+
<code>data-ui="cyberpunk"</code>, <code>data-layout="maximalist"</code>,
|
|
351
|
+
<code>data-theme="arctic-indigo"</code>, and <code>data-mode="dark"</code>.
|
|
352
|
+
</p>
|
|
353
|
+
<div class="ly-cluster">
|
|
354
|
+
<button type="button" id="matchedPreset" data-ui-kit="button button-primary">Match UI and Layout</button>
|
|
355
|
+
<button type="button" id="contrastPreset" data-ui-kit="button">Try Retro Glass Layout</button>
|
|
356
|
+
</div>
|
|
357
|
+
</div>
|
|
358
|
+
|
|
359
|
+
<aside class="ly-frame ly-surface ly-pad-6 demo-stage" data-ui-kit="panel">
|
|
360
|
+
<div class="ly-stack ly-gap-4">
|
|
361
|
+
<span class="demo-pill" data-ui-kit="badge">Responsive stage</span>
|
|
362
|
+
<p>
|
|
363
|
+
The layout style controls shell placement, pane rhythm, and grid behavior while UI Style Kit controls visual identity.
|
|
364
|
+
</p>
|
|
365
|
+
<fieldset>
|
|
366
|
+
<legend>Native controls</legend>
|
|
367
|
+
<label>
|
|
368
|
+
Preview mode
|
|
369
|
+
<select>
|
|
370
|
+
<option>Matched pair</option>
|
|
371
|
+
<option>Mixed pair</option>
|
|
372
|
+
</select>
|
|
373
|
+
</label>
|
|
374
|
+
<label><input type="checkbox" checked> UI style hooks active</label>
|
|
375
|
+
<progress value="72" max="100">72%</progress>
|
|
376
|
+
</fieldset>
|
|
377
|
+
</div>
|
|
378
|
+
</aside>
|
|
379
|
+
</div>
|
|
380
|
+
|
|
381
|
+
<div class="ly-grid ly-grid--auto" id="metrics">
|
|
382
|
+
<article class="ly-surface ly-pad-6 demo-stat" data-ui-kit="card">
|
|
383
|
+
<span>Shell mode</span>
|
|
384
|
+
<strong>11</strong>
|
|
385
|
+
<span>layout styles</span>
|
|
386
|
+
</article>
|
|
387
|
+
<article class="ly-surface ly-pad-6 demo-stat" data-ui-kit="card">
|
|
388
|
+
<span>Contract</span>
|
|
389
|
+
<strong>0</strong>
|
|
390
|
+
<span>required new classes</span>
|
|
391
|
+
</article>
|
|
392
|
+
<article class="ly-surface ly-pad-6 demo-stat" data-ui-kit="card">
|
|
393
|
+
<span>Switches</span>
|
|
394
|
+
<strong>4</strong>
|
|
395
|
+
<span>UI, layout, theme, mode</span>
|
|
396
|
+
</article>
|
|
397
|
+
<article class="ly-surface ly-pad-6 demo-stat" data-ui-kit="card">
|
|
398
|
+
<span>Bundle</span>
|
|
399
|
+
<strong>3</strong>
|
|
400
|
+
<span>optional libraries together</span>
|
|
401
|
+
</article>
|
|
402
|
+
</div>
|
|
403
|
+
|
|
404
|
+
<div class="ly-panes ly-panes--two" id="panes">
|
|
405
|
+
<aside class="ly-surface ly-pad-6 ly-stack ly-gap-4" data-ui-kit="panel">
|
|
406
|
+
<h2 class="demo-panel-title">Supporting pane</h2>
|
|
407
|
+
<p>
|
|
408
|
+
Each layout decides whether this feels like a sidecar, dock, island, slab, or glass rail.
|
|
409
|
+
</p>
|
|
410
|
+
<div class="demo-mini-grid" aria-hidden="true">
|
|
411
|
+
<span data-ui-kit="badge">Grid</span>
|
|
412
|
+
<span data-ui-kit="badge badge-secondary">Pane</span>
|
|
413
|
+
<span data-ui-kit="badge badge-primary">Shell</span>
|
|
414
|
+
</div>
|
|
415
|
+
</aside>
|
|
416
|
+
|
|
417
|
+
<article class="ly-surface ly-pad-6 ly-stack ly-gap-5" data-ui-kit="card">
|
|
418
|
+
<h2 class="demo-panel-title">Primary workspace</h2>
|
|
419
|
+
<p>
|
|
420
|
+
The markup stays fixed while the selected layout style changes the shell, split, pane, and auto-grid composition.
|
|
421
|
+
</p>
|
|
422
|
+
<div class="ly-sidebar-layout demo-detail-layout">
|
|
423
|
+
<aside class="ly-surface ly-pad-4" data-ui-kit="panel">Context</aside>
|
|
424
|
+
<article class="ly-surface ly-pad-4" data-ui-kit="panel">Workspace detail</article>
|
|
425
|
+
</div>
|
|
426
|
+
</article>
|
|
427
|
+
</div>
|
|
428
|
+
|
|
429
|
+
<section class="ly-stack ly-gap-5" id="recipes" aria-labelledby="recipes-title">
|
|
430
|
+
<div class="ly-wrapper ly-wrapper--readable ly-stack ly-gap-3">
|
|
431
|
+
<span class="demo-pill" data-ui-kit="badge badge-secondary">Layout Recipes</span>
|
|
432
|
+
<h2 class="demo-panel-title" id="recipes-title">Recipe-style organization for common wrappers.</h2>
|
|
433
|
+
<p>
|
|
434
|
+
Start with a recipe, then mix UI style, layout style, theme, and mode without changing the wrapper contract.
|
|
435
|
+
</p>
|
|
436
|
+
</div>
|
|
437
|
+
|
|
438
|
+
<div class="demo-recipe-grid">
|
|
439
|
+
<article class="ly-surface ly-pad-5 demo-recipe-card" data-ui-kit="card">
|
|
440
|
+
<h3 class="demo-panel-title">App shell</h3>
|
|
441
|
+
<p>Use one root shell for a persistent header, sidebar, and main workspace.</p>
|
|
442
|
+
<div class="ly-wrapper ly-wrapper--readable demo-recipe-preview">
|
|
443
|
+
<code>.ly-app-shell</code>
|
|
444
|
+
<code>.ly-app-header</code>
|
|
445
|
+
<code>.ly-app-sidebar</code>
|
|
446
|
+
<code>.ly-app-main</code>
|
|
447
|
+
</div>
|
|
448
|
+
</article>
|
|
449
|
+
|
|
450
|
+
<article class="ly-surface ly-pad-5 demo-recipe-card" data-ui-kit="card">
|
|
451
|
+
<h3 class="demo-panel-title">Content page</h3>
|
|
452
|
+
<p>Use a readable wrapper for documentation, articles, and focused landing sections.</p>
|
|
453
|
+
<div class="ly-wrapper ly-wrapper--readable demo-recipe-preview">
|
|
454
|
+
<code>.ly-wrapper</code>
|
|
455
|
+
<code>.ly-wrapper--readable</code>
|
|
456
|
+
<code>.ly-section</code>
|
|
457
|
+
<code>.ly-stack</code>
|
|
458
|
+
</div>
|
|
459
|
+
</article>
|
|
460
|
+
|
|
461
|
+
<article class="ly-surface ly-pad-5 demo-recipe-card" data-ui-kit="card">
|
|
462
|
+
<h3 class="demo-panel-title">Dashboard grid</h3>
|
|
463
|
+
<p>Use auto-fit tracks for cards that collapse from desktop to tablet and mobile.</p>
|
|
464
|
+
<div class="ly-wrapper ly-wrapper--readable demo-recipe-preview">
|
|
465
|
+
<code>.ly-wrapper--wide</code>
|
|
466
|
+
<code>.ly-grid</code>
|
|
467
|
+
<code>.ly-grid--auto</code>
|
|
468
|
+
<code>.ly-surface</code>
|
|
469
|
+
</div>
|
|
470
|
+
</article>
|
|
471
|
+
|
|
472
|
+
<article class="ly-surface ly-pad-5 demo-recipe-card" data-ui-kit="card">
|
|
473
|
+
<h3 class="demo-panel-title">Split hero</h3>
|
|
474
|
+
<p>Use a split when one message needs a supporting panel or interactive preview.</p>
|
|
475
|
+
<div class="ly-wrapper ly-wrapper--readable demo-recipe-preview">
|
|
476
|
+
<code>.ly-wrapper--xl</code>
|
|
477
|
+
<code>.ly-split</code>
|
|
478
|
+
<code>.ly-stack</code>
|
|
479
|
+
<code>.ly-frame</code>
|
|
480
|
+
</div>
|
|
481
|
+
</article>
|
|
482
|
+
|
|
483
|
+
<article class="ly-surface ly-pad-5 demo-recipe-card" data-ui-kit="card">
|
|
484
|
+
<h3 class="demo-panel-title">Docs sidebar</h3>
|
|
485
|
+
<p>Use a local sidebar inside the main content when the global shell is not enough.</p>
|
|
486
|
+
<div class="ly-wrapper ly-wrapper--readable demo-recipe-preview">
|
|
487
|
+
<code>.ly-sidebar-layout</code>
|
|
488
|
+
<code>.ly-sidebar-layout--right</code>
|
|
489
|
+
<code>.ly-sidebar</code>
|
|
490
|
+
<code>.ly-content</code>
|
|
491
|
+
</div>
|
|
492
|
+
</article>
|
|
493
|
+
|
|
494
|
+
<article class="ly-surface ly-pad-5 demo-recipe-card" data-ui-kit="card">
|
|
495
|
+
<h3 class="demo-panel-title">List detail</h3>
|
|
496
|
+
<p>Use adaptive panes for inboxes, editors, queues, and preview-driven workflows.</p>
|
|
497
|
+
<div class="ly-wrapper ly-wrapper--readable demo-recipe-preview">
|
|
498
|
+
<code>.ly-panes</code>
|
|
499
|
+
<code>.ly-panes--two</code>
|
|
500
|
+
<code>.ly-scroll-area</code>
|
|
501
|
+
<code>.ly-surface</code>
|
|
502
|
+
</div>
|
|
503
|
+
</article>
|
|
504
|
+
</div>
|
|
505
|
+
</section>
|
|
506
|
+
</div>
|
|
507
|
+
</section>
|
|
508
|
+
</main>
|
|
509
|
+
</div>
|
|
510
|
+
|
|
511
|
+
<script>
|
|
512
|
+
const body = document.body;
|
|
513
|
+
const uiSelect = document.querySelector("#uiSelect");
|
|
514
|
+
const layoutSelect = document.querySelector("#layoutSelect");
|
|
515
|
+
const themeSelect = document.querySelector("#themeSelect");
|
|
516
|
+
const modeSelect = document.querySelector("#modeSelect");
|
|
517
|
+
const mixedPreset = document.querySelector("#mixedPreset");
|
|
518
|
+
const matchedPreset = document.querySelector("#matchedPreset");
|
|
519
|
+
const contrastPreset = document.querySelector("#contrastPreset");
|
|
520
|
+
const uiClassPrefixes = {
|
|
521
|
+
"minimal-saas": "saas",
|
|
522
|
+
bento: "bento",
|
|
523
|
+
maximalist: "max",
|
|
524
|
+
bauhaus: "bau",
|
|
525
|
+
tactile: "tactile",
|
|
526
|
+
neumorphism: "neo",
|
|
527
|
+
retrofuturism: "retro",
|
|
528
|
+
brutalism: "brutal",
|
|
529
|
+
cyberpunk: "cyber",
|
|
530
|
+
y2k: "y2k",
|
|
531
|
+
"retro-glass": "rg"
|
|
532
|
+
};
|
|
533
|
+
|
|
534
|
+
function syncUiKitClasses(ui) {
|
|
535
|
+
const prefix = uiClassPrefixes[ui];
|
|
536
|
+
|
|
537
|
+
document.querySelectorAll("[data-ui-kit]").forEach((element) => {
|
|
538
|
+
const previousClasses = element.dataset.uiKitApplied?.split(" ").filter(Boolean) || [];
|
|
539
|
+
|
|
540
|
+
if (previousClasses.length > 0) {
|
|
541
|
+
element.classList.remove(...previousClasses);
|
|
542
|
+
}
|
|
543
|
+
|
|
544
|
+
const nextClasses = element.dataset.uiKit
|
|
545
|
+
.split(/\s+/)
|
|
546
|
+
.filter(Boolean)
|
|
547
|
+
.map((role) => `${prefix}-${role}`);
|
|
548
|
+
|
|
549
|
+
if (nextClasses.length > 0) {
|
|
550
|
+
element.classList.add(...nextClasses);
|
|
551
|
+
}
|
|
552
|
+
|
|
553
|
+
element.dataset.uiKitApplied = nextClasses.join(" ");
|
|
554
|
+
});
|
|
555
|
+
}
|
|
556
|
+
|
|
557
|
+
function applyDemoState({ ui, layout, theme, mode }) {
|
|
558
|
+
body.dataset.ui = ui;
|
|
559
|
+
body.dataset.layout = layout;
|
|
560
|
+
body.setAttribute("layout-style", layout);
|
|
561
|
+
body.dataset.theme = theme;
|
|
562
|
+
body.dataset.mode = mode;
|
|
563
|
+
syncUiKitClasses(ui);
|
|
564
|
+
|
|
565
|
+
uiSelect.value = ui;
|
|
566
|
+
layoutSelect.value = layout;
|
|
567
|
+
themeSelect.value = theme;
|
|
568
|
+
modeSelect.value = mode;
|
|
569
|
+
}
|
|
570
|
+
|
|
571
|
+
// Deep-linked state keeps visual regression checks and shared demos reproducible.
|
|
572
|
+
const queryState = new URLSearchParams(window.location.search);
|
|
573
|
+
const presetState = {
|
|
574
|
+
minimalSaas: {
|
|
575
|
+
ui: "minimal-saas",
|
|
576
|
+
layout: "minimal-saas",
|
|
577
|
+
theme: "arctic-indigo",
|
|
578
|
+
mode: "light"
|
|
579
|
+
},
|
|
580
|
+
bento: {
|
|
581
|
+
ui: "bento",
|
|
582
|
+
layout: "bento",
|
|
583
|
+
theme: "ocean-steel",
|
|
584
|
+
mode: "light"
|
|
585
|
+
},
|
|
586
|
+
bauhaus: {
|
|
587
|
+
ui: "bauhaus",
|
|
588
|
+
layout: "bauhaus",
|
|
589
|
+
theme: "graphite-cyan",
|
|
590
|
+
mode: "light"
|
|
591
|
+
},
|
|
592
|
+
tactile: {
|
|
593
|
+
ui: "tactile",
|
|
594
|
+
layout: "tactile",
|
|
595
|
+
theme: "forest-moss",
|
|
596
|
+
mode: "light"
|
|
597
|
+
},
|
|
598
|
+
mixed: {
|
|
599
|
+
ui: "cyberpunk",
|
|
600
|
+
layout: "maximalist",
|
|
601
|
+
theme: "arctic-indigo",
|
|
602
|
+
mode: "dark"
|
|
603
|
+
},
|
|
604
|
+
y2k: {
|
|
605
|
+
ui: "y2k",
|
|
606
|
+
layout: "y2k",
|
|
607
|
+
theme: "rose-quartz",
|
|
608
|
+
mode: "light"
|
|
609
|
+
},
|
|
610
|
+
neumorphism: {
|
|
611
|
+
ui: "neumorphism",
|
|
612
|
+
layout: "neumorphism",
|
|
613
|
+
theme: "desert-sage",
|
|
614
|
+
mode: "light"
|
|
615
|
+
},
|
|
616
|
+
retroGlass: {
|
|
617
|
+
ui: "retro-glass",
|
|
618
|
+
layout: "retro-glass",
|
|
619
|
+
theme: "graphite-cyan",
|
|
620
|
+
mode: "dark"
|
|
621
|
+
},
|
|
622
|
+
retrofuturism: {
|
|
623
|
+
ui: "retrofuturism",
|
|
624
|
+
layout: "retrofuturism",
|
|
625
|
+
theme: "midnight-gold",
|
|
626
|
+
mode: "dark"
|
|
627
|
+
},
|
|
628
|
+
brutalism: {
|
|
629
|
+
ui: "brutalism",
|
|
630
|
+
layout: "brutalism",
|
|
631
|
+
theme: "midnight-gold",
|
|
632
|
+
mode: "contrast"
|
|
633
|
+
},
|
|
634
|
+
cyberpunk: {
|
|
635
|
+
ui: "cyberpunk",
|
|
636
|
+
layout: "cyberpunk",
|
|
637
|
+
theme: "cyber-lime",
|
|
638
|
+
mode: "dark"
|
|
639
|
+
},
|
|
640
|
+
maximalist: {
|
|
641
|
+
ui: "maximalist",
|
|
642
|
+
layout: "maximalist",
|
|
643
|
+
theme: "sunset-ember",
|
|
644
|
+
mode: "light"
|
|
645
|
+
}
|
|
646
|
+
};
|
|
647
|
+
applyDemoState(presetState[queryState.get("preset")] || {
|
|
648
|
+
ui: queryState.get("ui") || body.dataset.ui,
|
|
649
|
+
layout: queryState.get("layout") || body.dataset.layout,
|
|
650
|
+
theme: queryState.get("theme") || body.dataset.theme,
|
|
651
|
+
mode: queryState.get("mode") || body.dataset.mode
|
|
652
|
+
});
|
|
653
|
+
|
|
654
|
+
uiSelect.addEventListener("change", () => {
|
|
655
|
+
body.dataset.ui = uiSelect.value;
|
|
656
|
+
syncUiKitClasses(uiSelect.value);
|
|
657
|
+
});
|
|
658
|
+
|
|
659
|
+
layoutSelect.addEventListener("change", () => {
|
|
660
|
+
body.dataset.layout = layoutSelect.value;
|
|
661
|
+
body.setAttribute("layout-style", layoutSelect.value);
|
|
662
|
+
});
|
|
663
|
+
|
|
664
|
+
themeSelect.addEventListener("change", () => {
|
|
665
|
+
body.dataset.theme = themeSelect.value;
|
|
666
|
+
});
|
|
667
|
+
|
|
668
|
+
modeSelect.addEventListener("change", () => {
|
|
669
|
+
body.dataset.mode = modeSelect.value;
|
|
670
|
+
});
|
|
671
|
+
|
|
672
|
+
mixedPreset.addEventListener("click", () => {
|
|
673
|
+
applyDemoState({
|
|
674
|
+
ui: "cyberpunk",
|
|
675
|
+
layout: "maximalist",
|
|
676
|
+
theme: "arctic-indigo",
|
|
677
|
+
mode: "dark"
|
|
678
|
+
});
|
|
679
|
+
});
|
|
680
|
+
|
|
681
|
+
matchedPreset.addEventListener("click", () => {
|
|
682
|
+
applyDemoState({
|
|
683
|
+
ui: uiSelect.value,
|
|
684
|
+
layout: uiSelect.value,
|
|
685
|
+
theme: themeSelect.value,
|
|
686
|
+
mode: modeSelect.value
|
|
687
|
+
});
|
|
688
|
+
});
|
|
689
|
+
|
|
690
|
+
contrastPreset.addEventListener("click", () => {
|
|
691
|
+
applyDemoState({
|
|
692
|
+
ui: "bauhaus",
|
|
693
|
+
layout: "retro-glass",
|
|
694
|
+
theme: "graphite-cyan",
|
|
695
|
+
mode: "dark"
|
|
696
|
+
});
|
|
697
|
+
});
|
|
698
|
+
</script>
|
|
699
|
+
</body>
|
|
700
|
+
</html>
|