trentuna/asw
8
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

T3: flexbox layout system — data-layout row/col/stack/spread/center with 640px responsive

Browse source
This commit is contained in:
Templeton Peck 2026-06-07 10:48:06 +02:00
parent 292a492d05
commit 8ba401ad5e
Signed by: face
GPG key ID: 8696A18EFB764ADE
4 changed files with 109 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

54
dist/asw.css vendored
View file

@ -25,6 +25,7 @@
/* Project-specific custom media */ /* Project-specific custom media */
@custom-media --docs-toc-hidden (width < 1100px); @custom-media --docs-toc-hidden (width < 1100px);
@custom-media --nav-compact (width < 991px); @custom-media --nav-compact (width < 991px);
@custom-media --compact (width < 640px);
/* ════════════════════════════════════════════════════════════════════════════ /* ════════════════════════════════════════════════════════════════════════════
ANIMATIONS — replaced open-props @keyframes ANIMATIONS — replaced open-props @keyframes
@ -4445,6 +4446,59 @@ dl[data-layout="inline"] dd {
* Part of: Agentic Semantic Web * Part of: Agentic Semantic Web
*/ */
/* ══════════════════════════════════════════════════════════════════════════
Flexbox primitives — data-layout attributes for layout composition
══════════════════════════════════════════════════════════════════════════ */
/* Row: horizontal flex with wrap — nav bars, action rows, inline groups */
[data-layout="row"] {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--space-4);
}
/* Column: vertical flex with standard gap */
[data-layout="col"] {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
/* Stack: vertical flex with larger gap for section-level content spacing */
[data-layout="stack"] {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
/* Spread: space-between — stat bars, toolbar items, distributed nav */
[data-layout="spread"] {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--space-4);
}
/* Center: centred flex — hero content, empty states, modals */
[data-layout="center"] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-4);
}
/* ── Responsive: collapse horizontal layouts to stacked at 640px ──── */
@media (--compact) {
[data-layout="spread"],
[data-layout="row"] {
flex-direction: column;
align-items: stretch;
}
}
/* ── Container ─────────────────────────────────────────────────────── */ /* ── Container ─────────────────────────────────────────────────────── */
.container { .container {

2
dist/asw.min.css vendored
View file

File diff suppressed because one or more lines are too long

53
src/layers/11-layout.css
View file

@ -4,6 +4,59 @@
* Part of: Agentic Semantic Web * Part of: Agentic Semantic Web
*/ */
/* ══════════════════════════════════════════════════════════════════════════
Flexbox primitives — data-layout attributes for layout composition
══════════════════════════════════════════════════════════════════════════ */
/* Row: horizontal flex with wrap — nav bars, action rows, inline groups */
[data-layout="row"] {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--space-4);
}
/* Column: vertical flex with standard gap */
[data-layout="col"] {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
/* Stack: vertical flex with larger gap for section-level content spacing */
[data-layout="stack"] {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
/* Spread: space-between — stat bars, toolbar items, distributed nav */
[data-layout="spread"] {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--space-4);
}
/* Center: centred flex — hero content, empty states, modals */
[data-layout="center"] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-4);
}
/* ── Responsive: collapse horizontal layouts to stacked at 640px ──── */
@media (--compact) {
[data-layout="spread"],
[data-layout="row"] {
flex-direction: column;
align-items: stretch;
}
}
/* ── Container ─────────────────────────────────────────────────────── */ /* ── Container ─────────────────────────────────────────────────────── */
.container { .container {

1
src/tokens.css
View file

@ -25,6 +25,7 @@
/* Project-specific custom media */ /* Project-specific custom media */
@custom-media --docs-toc-hidden (width < 1100px); @custom-media --docs-toc-hidden (width < 1100px);
@custom-media --nav-compact (width < 991px); @custom-media --nav-compact (width < 991px);
@custom-media --compact (width < 640px);
/* ════════════════════════════════════════════════════════════════════════════ /* ════════════════════════════════════════════════════════════════════════════
ANIMATIONS — replaced open-props @keyframes ANIMATIONS — replaced open-props @keyframes