layout-style-css 2.1.0 → 3.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/README.md +124 -145
- package/dist/core.css +2 -1
- package/dist/foundation.css +194 -0
- package/dist/layout-style-css.css +527 -941
- package/dist/layout-style-css.min.css +1 -1
- package/dist/personalities/bauhaus.css +13 -39
- package/dist/personalities/bento.css +16 -37
- package/dist/personalities/brutalism.css +13 -30
- package/dist/personalities/cyberpunk.css +12 -29
- package/dist/personalities/f-pattern.css +16 -42
- package/dist/personalities/maximalist.css +16 -45
- package/dist/personalities/minimal-saas.css +7 -31
- package/dist/personalities/mondrian.css +12 -37
- package/dist/personalities/neumorphism.css +15 -39
- package/dist/personalities/retro-glass.css +14 -39
- package/dist/personalities/retrofuturism.css +12 -29
- package/dist/personalities/split-screen.css +24 -36
- package/dist/personalities/synthwave.css +13 -41
- package/dist/personalities/tactile.css +15 -32
- package/dist/personalities/y2k.css +13 -30
- package/dist/personalities/z-pattern.css +16 -43
- package/dist/personalities.css +1 -1
- package/dist/primitives.css +27 -63
- package/dist/recipes.css +92 -167
- package/dist/utilities.css +39 -104
- package/dist/wrappers.css +28 -108
- package/package.json +12 -24
- package/CHANGELOG.md +0 -90
- package/CONTRIBUTING.md +0 -55
- package/SECURITY.md +0 -50
- package/demo/assets/apple-touch-icon.svg +0 -7
- package/demo/assets/favicon.svg +0 -7
- package/demo/assets/social-card.png +0 -0
- package/demo/browserconfig.xml +0 -9
- package/demo/demo.css +0 -523
- package/demo/demo.js +0 -605
- package/demo/index.html +0 -325
- package/demo/robots.txt +0 -4
- package/demo/site.webmanifest +0 -23
- package/demo/sitemap.xml +0 -9
- package/dist/integrations/ui-style-kit.css +0 -175
- package/dist/legacy.css +0 -787
- package/docs/wiki/Contributing.md +0 -36
- package/docs/wiki/Demo-And-GitHub-Pages.md +0 -53
- package/docs/wiki/Getting-Started.md +0 -51
- package/docs/wiki/Home.md +0 -33
- package/docs/wiki/Installation-And-CDN.md +0 -72
- package/docs/wiki/Layout-Primitives.md +0 -48
- package/docs/wiki/Layout-Recipes.md +0 -49
- package/docs/wiki/Layout-Styles.md +0 -33
- package/docs/wiki/Migrating-To-2.0.md +0 -186
- package/docs/wiki/Release-And-Publishing.md +0 -77
- package/docs/wiki/Security-And-Support.md +0 -36
- package/docs/wiki/UI-Style-Kit-Compatibility.md +0 -49
- package/docs/wiki/_Sidebar.md +0 -15
- package/styles/core.css +0 -6
- package/styles/integrations/ui-style-kit.css +0 -175
- package/styles/legacy.css +0 -173
- package/styles/personalities/bauhaus.css +0 -46
- package/styles/personalities/bento.css +0 -43
- package/styles/personalities/brutalism.css +0 -36
- package/styles/personalities/cyberpunk.css +0 -36
- package/styles/personalities/f-pattern.css +0 -48
- package/styles/personalities/maximalist.css +0 -51
- package/styles/personalities/minimal-saas.css +0 -37
- package/styles/personalities/mondrian.css +0 -44
- package/styles/personalities/neumorphism.css +0 -46
- package/styles/personalities/retro-glass.css +0 -44
- package/styles/personalities/retrofuturism.css +0 -36
- package/styles/personalities/split-screen.css +0 -41
- package/styles/personalities/synthwave.css +0 -48
- package/styles/personalities/tactile.css +0 -39
- package/styles/personalities/y2k.css +0 -36
- package/styles/personalities/z-pattern.css +0 -49
- package/styles/personalities.css +0 -18
- package/styles/primitives.css +0 -219
- package/styles/recipes.css +0 -270
- package/styles/utilities.css +0 -162
- package/styles/wrappers.css +0 -174
package/demo/index.html
DELETED
|
@@ -1,325 +0,0 @@
|
|
|
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, viewport-fit=cover">
|
|
8
|
-
<meta name="title" content="layout-style-css 2.1 Interactive Layout Lab">
|
|
9
|
-
<meta name="description" content="Explore container-first wrappers, recipes, and layout personalities in layout-style-css 2.1 with optional UI Style Kit and Interactive Surface integrations.">
|
|
10
|
-
<meta name="keywords" content="CSS layout library, container queries, layout recipes, UI Style Kit CSS, Interactive Surface CSS, responsive CSS">
|
|
11
|
-
<meta name="author" content="Foscat">
|
|
12
|
-
<meta name="creator" content="Foscat">
|
|
13
|
-
<meta name="publisher" content="Foscat">
|
|
14
|
-
<meta name="abstract" content="A container-first layout laboratory for semantic wrappers, responsive recipes, and independent layout personalities.">
|
|
15
|
-
<meta name="subject" content="CSS layout system and responsive composition library">
|
|
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" media="(prefers-color-scheme: dark)">
|
|
33
|
-
<meta name="theme-color" content="#f8fafc" media="(prefers-color-scheme: light)">
|
|
34
|
-
<meta name="msapplication-TileColor" content="#111827">
|
|
35
|
-
<meta name="msapplication-config" content="./browserconfig.xml">
|
|
36
|
-
<meta name="color-scheme" content="light dark">
|
|
37
|
-
<meta property="og:type" content="website">
|
|
38
|
-
<meta property="og:locale" content="en_US">
|
|
39
|
-
<meta property="og:title" content="layout-style-css 2.1 Interactive Layout Lab">
|
|
40
|
-
<meta property="og:description" content="Test semantic wrappers, container-responsive recipes, and sixteen spatial personalities without coupling layout to paint.">
|
|
41
|
-
<meta property="og:image" content="https://foscat.github.io/layout-style-css/assets/social-card.png">
|
|
42
|
-
<meta property="og:image:secure_url" content="https://foscat.github.io/layout-style-css/assets/social-card.png">
|
|
43
|
-
<meta property="og:image:alt" content="layout-style-css interactive layout lab social card">
|
|
44
|
-
<meta property="og:image:type" content="image/png">
|
|
45
|
-
<meta property="og:image:width" content="1200">
|
|
46
|
-
<meta property="og:image:height" content="630">
|
|
47
|
-
<meta property="og:url" content="https://foscat.github.io/layout-style-css/">
|
|
48
|
-
<meta property="og:site_name" content="layout-style-css">
|
|
49
|
-
<meta property="og:updated_time" content="2026-07-20T00:00:00-05:00">
|
|
50
|
-
<meta name="twitter:card" content="summary_large_image">
|
|
51
|
-
<meta name="twitter:title" content="layout-style-css 2.1 Interactive Layout Lab">
|
|
52
|
-
<meta name="twitter:description" content="Container-first responsive layouts that pair cleanly with UI Style Kit CSS 2.1 visual builds and Interactive Surface CSS 1.5.0.">
|
|
53
|
-
<meta name="twitter:image" content="https://foscat.github.io/layout-style-css/assets/social-card.png">
|
|
54
|
-
<meta name="twitter:image:alt" content="layout-style-css interactive layout lab social card">
|
|
55
|
-
<meta itemprop="name" content="layout-style-css 2.1 Interactive Layout Lab">
|
|
56
|
-
<meta itemprop="description" content="A live workbench for semantic wrappers, responsive recipes, and spatial personalities.">
|
|
57
|
-
<meta itemprop="image" content="https://foscat.github.io/layout-style-css/assets/social-card.png">
|
|
58
|
-
<link rel="canonical" href="https://foscat.github.io/layout-style-css/">
|
|
59
|
-
<link rel="dns-prefetch" href="https://unpkg.com">
|
|
60
|
-
<link rel="preconnect" href="https://unpkg.com" crossorigin>
|
|
61
|
-
<link rel="image_src" href="./assets/social-card.png">
|
|
62
|
-
<link rel="icon" type="image/svg+xml" href="./assets/favicon.svg">
|
|
63
|
-
<link rel="shortcut icon" href="./assets/favicon.svg">
|
|
64
|
-
<link rel="apple-touch-icon" href="./assets/apple-touch-icon.svg">
|
|
65
|
-
<link rel="mask-icon" href="./assets/favicon.svg" color="#111827">
|
|
66
|
-
<link rel="manifest" href="./site.webmanifest">
|
|
67
|
-
<link rel="sitemap" type="application/xml" title="Sitemap" href="./sitemap.xml">
|
|
68
|
-
<title>layout-style-css 2.1 Interactive Layout Lab</title>
|
|
69
|
-
|
|
70
|
-
<link id="uiKitStylesheet" rel="stylesheet" href="https://unpkg.com/ui-style-kit-css@2.1.0/dist/ui-style-kit.visual.min.css" integrity="sha384-DUhB5MkNLJffjy7NRg13prdEcPTUR6zdPtameCyfq3tId/cM8o3ojpyvU/xdxZ8t" crossorigin="anonymous">
|
|
71
|
-
<link id="uiKitInteractiveThemeStylesheet" rel="stylesheet" href="https://unpkg.com/ui-style-kit-css@2.1.0/styles/interactive-surface-theme.css" integrity="sha384-t7ZuirMM/Qoeoz+/5+S4JxIGXs076pqlgMxv6FymZW3tGj7snT8J2ZlV2+sH6++j" crossorigin="anonymous">
|
|
72
|
-
<link id="interactiveSurfaceStylesheet" rel="stylesheet" href="https://unpkg.com/interactive-surface-css@1.5.0/state-core.css" integrity="sha384-v2NwNOzOcQ5ed7W7OHahaKHXspqfD0p8XO+kueqrsyfEcuBO2izsAQb/J/PxF0eX" crossorigin="anonymous">
|
|
73
|
-
<link id="layoutIntegrationStylesheet" rel="stylesheet" href="../dist/integrations/ui-style-kit.css" disabled data-deprecated="true">
|
|
74
|
-
<link id="layoutCoreStylesheet" rel="stylesheet" href="../dist/layout-style-css.css">
|
|
75
|
-
<link rel="stylesheet" href="./demo.css">
|
|
76
|
-
|
|
77
|
-
<script type="application/ld+json">
|
|
78
|
-
{
|
|
79
|
-
"@context": "https://schema.org",
|
|
80
|
-
"@type": "SoftwareSourceCode",
|
|
81
|
-
"name": "layout-style-css",
|
|
82
|
-
"version": "2.1.0",
|
|
83
|
-
"description": "A dependency-free, container-first CSS layout library for semantic wrappers, composition primitives, responsive recipes, and spatial personalities.",
|
|
84
|
-
"programmingLanguage": "CSS",
|
|
85
|
-
"applicationCategory": "DeveloperApplication",
|
|
86
|
-
"url": "https://foscat.github.io/layout-style-css/",
|
|
87
|
-
"image": "https://foscat.github.io/layout-style-css/assets/social-card.png",
|
|
88
|
-
"datePublished": "2026-07-20",
|
|
89
|
-
"dateModified": "2026-07-20",
|
|
90
|
-
"author": { "@type": "Organization", "name": "Foscat" },
|
|
91
|
-
"publisher": { "@type": "Organization", "name": "Foscat" }
|
|
92
|
-
}
|
|
93
|
-
</script>
|
|
94
|
-
<script type="module" src="./demo.js"></script>
|
|
95
|
-
</head>
|
|
96
|
-
<body class="ly-root" data-ui="minimal-saas" data-theme="arctic-indigo" data-mode="light" data-ly-layout="minimal-saas" data-density="comfortable" data-ecosystem="all-three">
|
|
97
|
-
<a class="demo-skip-link" href="#layoutLab">Skip to the layout lab</a>
|
|
98
|
-
|
|
99
|
-
<header class="demo-topbar">
|
|
100
|
-
<div class="demo-brand">
|
|
101
|
-
<span class="demo-kicker">layout-style-css 2.1</span>
|
|
102
|
-
<strong>Interactive Layout Lab</strong>
|
|
103
|
-
</div>
|
|
104
|
-
<div class="demo-topbar-actions">
|
|
105
|
-
<span id="ecosystemStatus" class="demo-status" role="status">All three libraries</span>
|
|
106
|
-
<button type="button" id="demoControlsToggle" aria-expanded="false" aria-controls="demoControlsDrawer" data-demo-button data-ui-kit="button button-secondary">
|
|
107
|
-
Layout controls
|
|
108
|
-
</button>
|
|
109
|
-
</div>
|
|
110
|
-
</header>
|
|
111
|
-
|
|
112
|
-
<div id="demoControlsBackdrop" class="demo-backdrop" hidden aria-hidden="true"></div>
|
|
113
|
-
|
|
114
|
-
<div class="demo-page">
|
|
115
|
-
<aside id="demoControlsDrawer" class="demo-controls" aria-labelledby="controlsTitle" aria-hidden="true" hidden inert>
|
|
116
|
-
<div class="demo-controls-heading">
|
|
117
|
-
<div>
|
|
118
|
-
<span class="demo-kicker">Workbench</span>
|
|
119
|
-
<h2 id="controlsTitle">Layout controls</h2>
|
|
120
|
-
</div>
|
|
121
|
-
<button type="button" id="demoControlsClose" data-demo-button data-ui-kit="button button-secondary">
|
|
122
|
-
Close
|
|
123
|
-
</button>
|
|
124
|
-
</div>
|
|
125
|
-
|
|
126
|
-
<form class="demo-controls-grid" autocomplete="off">
|
|
127
|
-
<label for="wrapperSelect">Wrapper
|
|
128
|
-
<select id="wrapperSelect" data-query-key="wrapper" data-ui-kit="select">
|
|
129
|
-
<option value="default">Default</option>
|
|
130
|
-
<option value="compact">Compact · 40rem</option>
|
|
131
|
-
<option value="prose">Prose · 68ch</option>
|
|
132
|
-
<option value="content">Content · 72rem</option>
|
|
133
|
-
<option value="wide">Wide · 112rem</option>
|
|
134
|
-
<option value="full">Full width</option>
|
|
135
|
-
<option value="breakout">Breakout lanes</option>
|
|
136
|
-
</select>
|
|
137
|
-
</label>
|
|
138
|
-
|
|
139
|
-
<label for="recipeSelect">Recipe
|
|
140
|
-
<select id="recipeSelect" data-query-key="recipe" data-ui-kit="select">
|
|
141
|
-
<option value="app-shell">App shell</option>
|
|
142
|
-
<option value="dashboard">Dashboard</option>
|
|
143
|
-
<option value="docs">Documentation</option>
|
|
144
|
-
<option value="list-detail">List detail</option>
|
|
145
|
-
<option value="split-hero">Split hero</option>
|
|
146
|
-
<option value="gallery">Gallery</option>
|
|
147
|
-
<option value="card-grid">Card grid</option>
|
|
148
|
-
</select>
|
|
149
|
-
</label>
|
|
150
|
-
|
|
151
|
-
<label for="personalitySelect">Personality
|
|
152
|
-
<select id="personalitySelect" data-query-key="personality" data-ui-kit="select">
|
|
153
|
-
<option value="minimal-saas">Minimal SaaS</option>
|
|
154
|
-
<option value="bauhaus">Bauhaus</option>
|
|
155
|
-
<option value="tactile">Tactile</option>
|
|
156
|
-
<option value="cyberpunk">Cyberpunk</option>
|
|
157
|
-
<option value="f-pattern">F-pattern</option>
|
|
158
|
-
<option value="brutalism">Brutalism</option>
|
|
159
|
-
<option value="neumorphism">Neumorphism</option>
|
|
160
|
-
<option value="y2k">Y2K</option>
|
|
161
|
-
<option value="retro-glass">Retro Glass</option>
|
|
162
|
-
<option value="z-pattern">Z-pattern</option>
|
|
163
|
-
<option value="retrofuturism">Retrofuturism</option>
|
|
164
|
-
<option value="mondrian">Mondrian</option>
|
|
165
|
-
<option value="synthwave">Synthwave</option>
|
|
166
|
-
<option value="bento">Bento</option>
|
|
167
|
-
<option value="maximalist">Maximalist</option>
|
|
168
|
-
<option value="split-screen">Split Screen</option>
|
|
169
|
-
</select>
|
|
170
|
-
</label>
|
|
171
|
-
|
|
172
|
-
<label for="containerSelect">Nested container
|
|
173
|
-
<select id="containerSelect" data-query-key="container" data-ui-kit="select">
|
|
174
|
-
<option value="auto">Auto</option>
|
|
175
|
-
<option value="40rem">40rem · compact</option>
|
|
176
|
-
<option value="47rem">47rem · below medium</option>
|
|
177
|
-
<option value="49rem">49rem · above medium</option>
|
|
178
|
-
<option value="63rem">63rem · below large</option>
|
|
179
|
-
<option value="65rem">65rem · above large</option>
|
|
180
|
-
<option value="80rem">80rem · expansive</option>
|
|
181
|
-
</select>
|
|
182
|
-
</label>
|
|
183
|
-
|
|
184
|
-
<label for="densitySelect">Density
|
|
185
|
-
<select id="densitySelect" data-query-key="density" data-ui-kit="select">
|
|
186
|
-
<option value="compact">Compact</option>
|
|
187
|
-
<option value="comfortable">Comfortable</option>
|
|
188
|
-
<option value="spacious">Spacious</option>
|
|
189
|
-
</select>
|
|
190
|
-
</label>
|
|
191
|
-
|
|
192
|
-
<label for="uiSelect">UI style
|
|
193
|
-
<select id="uiSelect" data-query-key="ui" data-ui-kit="select">
|
|
194
|
-
<option value="minimal-saas">Minimal SaaS</option>
|
|
195
|
-
<option value="bento">Bento</option>
|
|
196
|
-
<option value="maximalist">Maximalist</option>
|
|
197
|
-
<option value="bauhaus">Bauhaus</option>
|
|
198
|
-
<option value="tactile">Tactile</option>
|
|
199
|
-
<option value="neumorphism">Neumorphism</option>
|
|
200
|
-
<option value="retrofuturism">Retrofuturism</option>
|
|
201
|
-
<option value="brutalism">Brutalism</option>
|
|
202
|
-
<option value="cyberpunk">Cyberpunk</option>
|
|
203
|
-
<option value="y2k">Y2K</option>
|
|
204
|
-
<option value="retro-glass">Retro Glass</option>
|
|
205
|
-
</select>
|
|
206
|
-
</label>
|
|
207
|
-
|
|
208
|
-
<label for="themeSelect">Theme
|
|
209
|
-
<select id="themeSelect" data-query-key="theme" data-ui-kit="select">
|
|
210
|
-
<option value="midnight-gold">Midnight Gold</option>
|
|
211
|
-
<option value="ocean-steel">Ocean Steel</option>
|
|
212
|
-
<option value="forest-moss">Forest Moss</option>
|
|
213
|
-
<option value="sunset-ember">Sunset Ember</option>
|
|
214
|
-
<option value="royal-plum">Royal Plum</option>
|
|
215
|
-
<option value="graphite-cyan">Graphite Cyan</option>
|
|
216
|
-
<option value="desert-sage">Desert Sage</option>
|
|
217
|
-
<option value="rose-quartz">Rose Quartz</option>
|
|
218
|
-
<option value="cyber-lime">Cyber Lime</option>
|
|
219
|
-
<option value="arctic-indigo">Arctic Indigo</option>
|
|
220
|
-
</select>
|
|
221
|
-
</label>
|
|
222
|
-
|
|
223
|
-
<label for="modeSelect">Mode
|
|
224
|
-
<select id="modeSelect" data-query-key="mode" data-ui-kit="select">
|
|
225
|
-
<option value="light">Light</option>
|
|
226
|
-
<option value="dark">Dark</option>
|
|
227
|
-
<option value="contrast">High contrast</option>
|
|
228
|
-
</select>
|
|
229
|
-
</label>
|
|
230
|
-
|
|
231
|
-
<label for="ecosystemSelect">Ecosystem
|
|
232
|
-
<select id="ecosystemSelect" data-query-key="ecosystem" data-ui-kit="select">
|
|
233
|
-
<option value="layout-only">Layout only</option>
|
|
234
|
-
<option value="layout-ui">Layout + UI</option>
|
|
235
|
-
<option value="all-three">All three</option>
|
|
236
|
-
</select>
|
|
237
|
-
</label>
|
|
238
|
-
</form>
|
|
239
|
-
</aside>
|
|
240
|
-
|
|
241
|
-
<main id="layoutLab" class="demo-main">
|
|
242
|
-
<section class="demo-intro" aria-labelledby="demoTitle">
|
|
243
|
-
<div>
|
|
244
|
-
<span class="demo-kicker">Container-first · dependency-free</span>
|
|
245
|
-
<h1 id="demoTitle">Compose for the space a component actually has.</h1>
|
|
246
|
-
<p>
|
|
247
|
-
Change wrappers, recipes, personalities, and companion layers independently. The preview keeps semantic mobile order while named areas rearrange at its own 48rem and 64rem container thresholds.
|
|
248
|
-
</p>
|
|
249
|
-
</div>
|
|
250
|
-
<div class="demo-state-panel">
|
|
251
|
-
<span>Interactive Surface 1.5.0 state</span>
|
|
252
|
-
<button type="button" id="stateToggle" class="interactive-surface" aria-pressed="false" data-surface-level="2" data-surface-variant="primary" data-demo-button data-ui-kit="button button-primary">
|
|
253
|
-
Toggle active state
|
|
254
|
-
</button>
|
|
255
|
-
</div>
|
|
256
|
-
</section>
|
|
257
|
-
|
|
258
|
-
<section class="demo-lab" aria-labelledby="stageTitle">
|
|
259
|
-
<div class="demo-section-heading">
|
|
260
|
-
<div>
|
|
261
|
-
<span class="demo-kicker">Live preview</span>
|
|
262
|
-
<h2 id="stageTitle">Responsive recipe stage</h2>
|
|
263
|
-
</div>
|
|
264
|
-
<output id="containerReadout" for="containerSelect">Container: auto</output>
|
|
265
|
-
</div>
|
|
266
|
-
|
|
267
|
-
<div id="previewFrame" class="demo-preview-frame" data-container-width="auto">
|
|
268
|
-
<div id="previewRoot" class="ly-root demo-preview-root" data-ly-layout="minimal-saas">
|
|
269
|
-
<div id="previewWrapper" class="ly-wrapper">
|
|
270
|
-
<div id="recipePreview" class="ly-app-shell demo-recipe" data-ly-recipe="app-shell">
|
|
271
|
-
<header class="demo-region" data-ly-area="header" data-demo-sequence="header">
|
|
272
|
-
<strong>Header</strong>
|
|
273
|
-
<button type="button" data-demo-button data-demo-focus="header" data-ui-kit="button">Header action</button>
|
|
274
|
-
</header>
|
|
275
|
-
<nav class="demo-region" data-ly-area="nav" data-demo-sequence="nav" aria-label="Preview navigation">
|
|
276
|
-
<strong>Navigation</strong>
|
|
277
|
-
<button type="button" data-demo-button data-demo-focus="nav" data-ui-kit="button">Navigation action</button>
|
|
278
|
-
</nav>
|
|
279
|
-
<main class="demo-region" data-ly-area="main" data-demo-sequence="main">
|
|
280
|
-
<strong>Main</strong>
|
|
281
|
-
<button type="button" data-demo-button data-demo-focus="main" data-ui-kit="button">Main action</button>
|
|
282
|
-
</main>
|
|
283
|
-
<aside class="demo-region" data-ly-area="aside" data-demo-sequence="aside">
|
|
284
|
-
<strong>Aside</strong>
|
|
285
|
-
<button type="button" data-demo-button data-demo-focus="aside" data-ui-kit="button">Aside action</button>
|
|
286
|
-
</aside>
|
|
287
|
-
<footer class="demo-region" data-ly-area="footer" data-demo-sequence="footer">
|
|
288
|
-
<strong>Footer</strong>
|
|
289
|
-
<button type="button" data-demo-button data-demo-focus="footer" data-ui-kit="button">Footer action</button>
|
|
290
|
-
</footer>
|
|
291
|
-
</div>
|
|
292
|
-
</div>
|
|
293
|
-
</div>
|
|
294
|
-
</div>
|
|
295
|
-
</section>
|
|
296
|
-
|
|
297
|
-
<section class="demo-code-grid" aria-labelledby="codeTitle">
|
|
298
|
-
<div class="demo-section-heading demo-code-heading">
|
|
299
|
-
<div>
|
|
300
|
-
<span class="demo-kicker">Copy-ready</span>
|
|
301
|
-
<h2 id="codeTitle">Imports and semantic markup</h2>
|
|
302
|
-
</div>
|
|
303
|
-
<p id="copyStatus" class="demo-copy-status" role="status" aria-live="polite">Ready to copy.</p>
|
|
304
|
-
</div>
|
|
305
|
-
|
|
306
|
-
<article class="demo-code-card" data-ui-kit="card">
|
|
307
|
-
<div class="demo-code-card-heading">
|
|
308
|
-
<h3>Imports</h3>
|
|
309
|
-
<button type="button" id="copyImports" data-copy-target="importsSnippet" data-demo-button data-ui-kit="button button-secondary">Copy imports</button>
|
|
310
|
-
</div>
|
|
311
|
-
<pre><code id="importsSnippet"></code></pre>
|
|
312
|
-
</article>
|
|
313
|
-
|
|
314
|
-
<article class="demo-code-card" data-ui-kit="card">
|
|
315
|
-
<div class="demo-code-card-heading">
|
|
316
|
-
<h3>Markup</h3>
|
|
317
|
-
<button type="button" id="copyMarkup" data-copy-target="markupSnippet" data-demo-button data-ui-kit="button button-secondary">Copy markup</button>
|
|
318
|
-
</div>
|
|
319
|
-
<pre><code id="markupSnippet"></code></pre>
|
|
320
|
-
</article>
|
|
321
|
-
</section>
|
|
322
|
-
</main>
|
|
323
|
-
</div>
|
|
324
|
-
</body>
|
|
325
|
-
</html>
|
package/demo/robots.txt
DELETED
package/demo/site.webmanifest
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "layout-style-css",
|
|
3
|
-
"short_name": "Layout CSS",
|
|
4
|
-
"description": "Container-first layout-style-css 2.1 lab for wrappers, recipes, personalities, and optional ecosystem integrations.",
|
|
5
|
-
"start_url": "./index.html",
|
|
6
|
-
"display": "standalone",
|
|
7
|
-
"background_color": "#111827",
|
|
8
|
-
"theme_color": "#111827",
|
|
9
|
-
"icons": [
|
|
10
|
-
{
|
|
11
|
-
"src": "./assets/favicon.svg",
|
|
12
|
-
"sizes": "64x64",
|
|
13
|
-
"type": "image/svg+xml",
|
|
14
|
-
"purpose": "any"
|
|
15
|
-
},
|
|
16
|
-
{
|
|
17
|
-
"src": "./assets/apple-touch-icon.svg",
|
|
18
|
-
"sizes": "180x180",
|
|
19
|
-
"type": "image/svg+xml",
|
|
20
|
-
"purpose": "any maskable"
|
|
21
|
-
}
|
|
22
|
-
]
|
|
23
|
-
}
|
package/demo/sitemap.xml
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
-
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
|
3
|
-
<url>
|
|
4
|
-
<loc>https://foscat.github.io/layout-style-css/</loc>
|
|
5
|
-
<lastmod>2026-07-20</lastmod>
|
|
6
|
-
<changefreq>weekly</changefreq>
|
|
7
|
-
<priority>0.8</priority>
|
|
8
|
-
</url>
|
|
9
|
-
</urlset>
|
|
@@ -1,175 +0,0 @@
|
|
|
1
|
-
@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
|
|
2
|
-
|
|
3
|
-
/*
|
|
4
|
-
Compatibility bridge for ui-style-kit-css.
|
|
5
|
-
This bridge intentionally does not map color, type, border, or shadow tokens.
|
|
6
|
-
ui-style-kit-css owns those visuals; layout-style-css owns structure.
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
@layer ly.integrations.ui_style_kit {
|
|
10
|
-
:where(.ly-root[data-ui][data-theme][data-mode], [data-ui][data-theme][data-mode] .ly-root) {
|
|
11
|
-
--ly-ui-style-kit-bridge: 1;
|
|
12
|
-
|
|
13
|
-
/*
|
|
14
|
-
Normalize UI kit root background geometry without redefining its paint.
|
|
15
|
-
Patterned theme layers should fill the viewport once instead of tiling.
|
|
16
|
-
*/
|
|
17
|
-
min-block-size: 100svh;
|
|
18
|
-
background-attachment: fixed;
|
|
19
|
-
background-position: center;
|
|
20
|
-
background-repeat: no-repeat;
|
|
21
|
-
background-size: 100% 100%;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
:where(.ly-root[data-ui="minimal-saas"], [data-ui="minimal-saas"] .ly-root) {
|
|
25
|
-
--ly-ui-style-kit-bridge-style: minimal-saas;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
:where(.ly-root[data-ui="bento"], [data-ui="bento"] .ly-root) {
|
|
29
|
-
--ly-ui-style-kit-bridge-style: bento;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
:where(.ly-root[data-ui="maximalist"], [data-ui="maximalist"] .ly-root) {
|
|
33
|
-
--ly-ui-style-kit-bridge-style: maximalist;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
:where(.ly-root[data-ui="bauhaus"], [data-ui="bauhaus"] .ly-root) {
|
|
37
|
-
--ly-ui-style-kit-bridge-style: bauhaus;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
:where(.ly-root[data-ui="tactile"], [data-ui="tactile"] .ly-root) {
|
|
41
|
-
--ly-ui-style-kit-bridge-style: tactile;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
:where(.ly-root[data-ui="neumorphism"], [data-ui="neumorphism"] .ly-root) {
|
|
45
|
-
--ly-ui-style-kit-bridge-style: neumorphism;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
:where(.ly-root[data-ui="retrofuturism"], [data-ui="retrofuturism"] .ly-root) {
|
|
49
|
-
--ly-ui-style-kit-bridge-style: retrofuturism;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
:where(.ly-root[data-ui="brutalism"], [data-ui="brutalism"] .ly-root) {
|
|
53
|
-
--ly-ui-style-kit-bridge-style: brutalism;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
:where(.ly-root[data-ui="cyberpunk"], [data-ui="cyberpunk"] .ly-root) {
|
|
57
|
-
--ly-ui-style-kit-bridge-style: cyberpunk;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
:where(.ly-root[data-ui="y2k"], [data-ui="y2k"] .ly-root) {
|
|
61
|
-
--ly-ui-style-kit-bridge-style: y2k;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
:where(.ly-root[data-ui="retro-glass"], [data-ui="retro-glass"] .ly-root) {
|
|
65
|
-
--ly-ui-style-kit-bridge-style: retro-glass;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
:where(.saas-container, .bento-container, .max-container, .bau-container, .tactile-container, .neo-container, .retro-container, .brutal-container, .cyber-container, .y2k-container, .rg-container) {
|
|
69
|
-
/* UI Style Kit naming can opt into layout sizing without taking over visual paint. */
|
|
70
|
-
container-name: ly-wrapper;
|
|
71
|
-
container-type: inline-size;
|
|
72
|
-
inline-size: min(100%, calc(var(--ly-wrapper-max) + (var(--ly-wrapper-gutter) * 2)));
|
|
73
|
-
margin-inline: auto;
|
|
74
|
-
padding-inline: var(--ly-wrapper-gutter);
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
:where(.saas-section, .bento-section, .max-section, .bau-section, .tactile-section, .neo-section, .retro-section, .brutal-section, .cyber-section, .y2k-section, .rg-section) {
|
|
78
|
-
padding-block: var(--ly-section-padding-block);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
:where(.saas-stack, .bento-stack, .max-stack, .bau-stack, .tactile-stack, .neo-stack, .retro-stack, .brutal-stack, .cyber-stack, .y2k-stack, .rg-stack) {
|
|
82
|
-
display: flex;
|
|
83
|
-
flex-direction: column;
|
|
84
|
-
gap: var(--ly-stack-gap);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
:where(.saas-cluster, .bento-cluster, .max-cluster, .bau-cluster, .tactile-cluster, .neo-cluster, .retro-cluster, .brutal-cluster, .cyber-cluster, .y2k-cluster, .rg-cluster) {
|
|
88
|
-
display: flex;
|
|
89
|
-
flex-wrap: wrap;
|
|
90
|
-
align-items: center;
|
|
91
|
-
gap: var(--ly-cluster-gap);
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
:where(.saas-grid, .bento-grid, .max-grid, .bau-grid, .tactile-grid, .neo-grid, .retro-grid, .brutal-grid, .cyber-grid, .y2k-grid, .rg-grid) {
|
|
95
|
-
display: grid;
|
|
96
|
-
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-grid-min)), 1fr));
|
|
97
|
-
gap: var(--ly-grid-gap);
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
:where(.saas-split, .bento-split, .max-split, .bau-split, .tactile-split, .neo-split, .retro-split, .brutal-split, .cyber-split, .y2k-split, .rg-split) {
|
|
101
|
-
display: grid;
|
|
102
|
-
grid-template-columns: 1fr;
|
|
103
|
-
gap: var(--ly-gap);
|
|
104
|
-
align-items: var(--ly-split-align, center);
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
:where(.saas-split, .bento-split, .max-split, .bau-split, .tactile-split, .neo-split, .retro-split, .brutal-split, .cyber-split, .y2k-split, .rg-split) > * {
|
|
108
|
-
min-width: 0;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
:where(.saas-button-group, .bento-button-group, .max-button-group, .bau-button-group, .tactile-button-group, .neo-button-group, .retro-button-group, .brutal-button-group, .cyber-button-group, .y2k-button-group, .rg-button-group) {
|
|
112
|
-
display: flex;
|
|
113
|
-
flex-wrap: wrap;
|
|
114
|
-
align-items: center;
|
|
115
|
-
gap: var(--ly-cluster-gap);
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
:where(.saas-button-group, .bento-button-group, .max-button-group, .bau-button-group, .tactile-button-group, .neo-button-group, .retro-button-group, .brutal-button-group, .cyber-button-group, .y2k-button-group, .rg-button-group) > * {
|
|
119
|
-
flex: 0 1 auto;
|
|
120
|
-
min-width: min(100%, var(--ly-button-min, 8rem));
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
:where(.saas-card-grid, .bento-card-grid, .max-card-grid, .bau-card-grid, .tactile-card-grid, .neo-card-grid, .retro-card-grid, .brutal-card-grid, .cyber-card-grid, .y2k-card-grid, .rg-card-grid) {
|
|
124
|
-
display: grid;
|
|
125
|
-
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-card-grid-min)), 1fr));
|
|
126
|
-
gap: var(--ly-grid-gap);
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
:where(.saas-card-grid, .bento-card-grid, .max-card-grid, .bau-card-grid, .tactile-card-grid, .neo-card-grid, .retro-card-grid, .brutal-card-grid, .cyber-card-grid, .y2k-card-grid, .rg-card-grid) > * {
|
|
130
|
-
min-width: 0;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
:where(.saas-card-sm, .bento-card-sm, .max-card-sm, .bau-card-sm, .tactile-card-sm, .neo-card-sm, .retro-card-sm, .brutal-card-sm, .cyber-card-sm, .y2k-card-sm, .rg-card-sm) {
|
|
134
|
-
min-block-size: var(--ly-card-size-sm);
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
:where(.saas-card-md, .bento-card-md, .max-card-md, .bau-card-md, .tactile-card-md, .neo-card-md, .retro-card-md, .brutal-card-md, .cyber-card-md, .y2k-card-md, .rg-card-md) {
|
|
138
|
-
min-block-size: var(--ly-card-size-md);
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
:where(.saas-card-lg, .bento-card-lg, .max-card-lg, .bau-card-lg, .tactile-card-lg, .neo-card-lg, .retro-card-lg, .brutal-card-lg, .cyber-card-lg, .y2k-card-lg, .rg-card-lg) {
|
|
142
|
-
min-block-size: var(--ly-card-size-lg);
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
:where(.saas-gallery, .bento-gallery, .max-gallery, .bau-gallery, .tactile-gallery, .neo-gallery, .retro-gallery, .brutal-gallery, .cyber-gallery, .y2k-gallery, .rg-gallery) {
|
|
146
|
-
display: grid;
|
|
147
|
-
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-gallery-min)), 1fr));
|
|
148
|
-
gap: var(--ly-grid-gap);
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
:where(.saas-gallery, .bento-gallery, .max-gallery, .bau-gallery, .tactile-gallery, .neo-gallery, .retro-gallery, .brutal-gallery, .cyber-gallery, .y2k-gallery, .rg-gallery) > * {
|
|
152
|
-
min-width: 0;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
:where(.saas-carousel, .bento-carousel, .max-carousel, .bau-carousel, .tactile-carousel, .neo-carousel, .retro-carousel, .brutal-carousel, .cyber-carousel, .y2k-carousel, .rg-carousel) {
|
|
156
|
-
display: grid;
|
|
157
|
-
grid-auto-flow: column;
|
|
158
|
-
grid-auto-columns: minmax(min(100%, var(--ly-carousel-item-min)), var(--ly-carousel-item-max));
|
|
159
|
-
gap: var(--ly-grid-gap);
|
|
160
|
-
overflow-x: auto;
|
|
161
|
-
overscroll-behavior-inline: contain;
|
|
162
|
-
scroll-snap-type: x proximity;
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
:where(.saas-carousel, .bento-carousel, .max-carousel, .bau-carousel, .tactile-carousel, .neo-carousel, .retro-carousel, .brutal-carousel, .cyber-carousel, .y2k-carousel, .rg-carousel) > * {
|
|
166
|
-
min-width: 0;
|
|
167
|
-
scroll-snap-align: start;
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
@container (min-width: 48rem) {
|
|
171
|
-
:where(.saas-split, .bento-split, .max-split, .bau-split, .tactile-split, .neo-split, .retro-split, .brutal-split, .cyber-split, .y2k-split, .rg-split) {
|
|
172
|
-
grid-template-columns: minmax(0, var(--ly-split-primary, 1fr)) minmax(0, var(--ly-split-secondary, 1fr));
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
}
|