layered-ui-rails 0.18.1 → 0.18.2
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.
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: b140e481d1660db5080801447a42917679da886a673473d2b6b53446e50c8d24
|
|
4
|
+
data.tar.gz: d838daaf32f4c0cbadffc12b599c6e6bfbcde149ab57296f826ac2ef6cf6423f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: c0eb45b0d7a15313afeefc7b4ce39002c22fdcf8de41cb438865543c3d48926e9e307de14b86609ced6e642557745dcebaa4b60adb002c3fa154c57d8f0b6535
|
|
7
|
+
data.tar.gz: d475623cf9c06a78c0ec1486ace51231a914e7e6751c96aeeaeb653b893375171a23b0170af8258b2255f0d80897556399dfdee027211008a9f6931e32cfe0eb
|
|
@@ -132,6 +132,8 @@ Populate layout regions with `content_for` (always above the render call):
|
|
|
132
132
|
Body class modifiers:
|
|
133
133
|
- `l-ui-body--always-show-navigation` - pins navigation as a sidebar on desktop
|
|
134
134
|
- `l-ui-body--hide-header` - hides the header and collapses its space
|
|
135
|
+
- `l-ui-body--glass-header` - glass header (translucent + blur); content scrolls under it
|
|
136
|
+
- `l-ui-body--flush-top` - zeroes the page's top gutter so a hero sits flush at the top, behind the header (pair with `--glass-header` or `--hide-header`)
|
|
135
137
|
|
|
136
138
|
### Controller instance variables
|
|
137
139
|
|
|
@@ -178,7 +180,7 @@ Key components:
|
|
|
178
180
|
|
|
179
181
|
| Component | Key classes |
|
|
180
182
|
|---|---|
|
|
181
|
-
| Page layout | `.l-ui-page`, `--with-navigation`, `__vertically-centered`, `__narrow` (narrow ~384px column, md:max-w-sm) |
|
|
183
|
+
| Page layout | `.l-ui-page`, `--with-navigation`, `__vertically-centered`, `__narrow` (narrow ~384px column, md:max-w-sm), `__contained` (wide column capped at `--l-ui-contained-width`) |
|
|
182
184
|
| Buttons | `.l-ui-button`, `--primary`, `--outline`, `--outline-danger`, `--full`, `--icon` |
|
|
183
185
|
| Surfaces | `.l-ui-surface`, `--highlighted`, `--sm`, `--collapsible`, `--collapsible-highlighted` |
|
|
184
186
|
| Forms | `.l-ui-form`, `.l-ui-form__group`, `.l-ui-form__field`, `.l-ui-label`, `.l-ui-select` |
|
|
@@ -24,7 +24,9 @@ Applied to `<body>` via the `:l_ui_body_class` yield to toggle layout-level beha
|
|
|
24
24
|
```
|
|
25
25
|
.l-ui-body--always-show-navigation Pin sidebar navigation open on desktop
|
|
26
26
|
.l-ui-body--hide-header Hide the header and collapse its reserved space
|
|
27
|
-
.l-ui-body--header-contained Constrain the header's inner row to
|
|
27
|
+
.l-ui-body--header-contained Constrain the header's inner row to --l-ui-contained-width (landing pages)
|
|
28
|
+
.l-ui-body--glass-header Glass header (translucent + backdrop blur); content scrolls under it
|
|
29
|
+
.l-ui-body--flush-top Zero the page's top gutter so the first section sits flush at the top, behind the header
|
|
28
30
|
```
|
|
29
31
|
|
|
30
32
|
## Page layout
|
|
@@ -34,12 +36,13 @@ Applied to `<body>` via the `:l_ui_body_class` yield to toggle layout-level beha
|
|
|
34
36
|
.l-ui-page--with-navigation Left margin for sidebar on desktop
|
|
35
37
|
.l-ui-page__vertically-centered Centred layout element (e.g. login pages)
|
|
36
38
|
.l-ui-page__narrow Narrow column (md:max-w-sm, ~384px) for any compact, centred content
|
|
39
|
+
.l-ui-page__contained Centred column capped at --l-ui-contained-width; aligns with the contained header
|
|
37
40
|
.l-ui-bleed Breaks a child out to the page edge (full-bleed hero etc.)
|
|
38
41
|
```
|
|
39
42
|
|
|
40
|
-
`.l-ui-page` (and `--with-navigation`) is applied by the engine layout around your view's `yield` - you do not add it yourself. Wrapping your view content in another `.l-ui-page` nests two containers. The `__vertically-centered` and `__narrow` elements are used *inside* views for centred, compact content (the Devise auth pages are one example, but they are general-purpose). `__narrow` caps width at `md:max-w-sm` (~384px). For a wider content area,
|
|
43
|
+
`.l-ui-page` (and `--with-navigation`) is applied by the engine layout around your view's `yield` - you do not add it yourself. Wrapping your view content in another `.l-ui-page` nests two containers. The `__vertically-centered` and `__narrow` elements are used *inside* views for centred, compact content (the Devise auth pages are one example, but they are general-purpose). `__narrow` caps width at `md:max-w-sm` (~384px). For a wider content area, wrap your content in `.l-ui-page__contained`: it caps width at the `--l-ui-contained-width` token (default `80rem`) and centres with `mx-auto`. Because the contained header (`.l-ui-body--header-contained`) reads the same token, the two line up automatically - override `--l-ui-contained-width` once to move both. Left to itself, `.l-ui-page` holds content to the full available width.
|
|
41
44
|
|
|
42
|
-
The page gutter (horizontal and bottom padding) is the `--l-ui-gutter` custom property (default `1rem`), shared by `.l-ui-page` and `.l-ui-header` so they always align. Override it on a container to change the gutter in one place rather than reverse-engineering padding values. To take a single child edge-to-edge (a full-bleed hero, a banner), add `.l-ui-bleed` to it - it cancels exactly the current gutter, so no negative-margin guesswork. Note `.l-ui-bleed` only handles the horizontal edges; content still sits below the page's top padding (header offset + gutter).
|
|
45
|
+
The page gutter (horizontal and bottom padding) is the `--l-ui-gutter` custom property (default `1rem`), shared by `.l-ui-page` and `.l-ui-header` so they always align. Override it on a container to change the gutter in one place rather than reverse-engineering padding values. To take a single child edge-to-edge (a full-bleed hero, a banner), add `.l-ui-bleed` to it - it cancels exactly the current gutter, so no negative-margin guesswork. Note `.l-ui-bleed` only handles the horizontal edges; content still sits below the page's top padding (header offset + gutter). To take the *top* edge too - a hero that starts at the very top of the viewport, behind the header - add `.l-ui-body--flush-top`, which zeroes the page's top padding. On its own over the opaque header that would hide content, so pair it with `.l-ui-body--glass-header` (the header turns translucent and content shows through the blur) or `.l-ui-body--hide-header`. Give the hero its own internal top padding (at least `--header-height`) so its content clears the floating header.
|
|
43
46
|
|
|
44
47
|
`.l-ui-page` is a flex column (`flex flex-1 flex-col`) and uses `overflow-x-clip` to hold its content to the available width: intrinsically wide content (tables, code blocks, long unbroken strings) is clipped rather than expanding the page or adding a horizontal page scrollbar. So make such content scroll internally (e.g. wrap a table in an `overflow-x-auto` element) instead of expecting the page to grow.
|
|
45
48
|
|
|
@@ -392,6 +395,8 @@ Tier 2 - Full palette (override individually as needed):
|
|
|
392
395
|
--error-bg Error background
|
|
393
396
|
--error-text Error text
|
|
394
397
|
--header-height Header height (default 63px)
|
|
398
|
+
--l-ui-gutter Page/header horizontal + bottom padding (default 1rem)
|
|
399
|
+
--l-ui-contained-width Max width of contained content - header + .l-ui-page__contained (default 80rem)
|
|
395
400
|
```
|
|
396
401
|
|
|
397
402
|
Override --button-primary-text when your accent color needs a different text/icon color on buttons (e.g. a pink accent with white button text in dark mode). Override --button-primary-icon instead when only the icon color should change.
|
data/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. This project follows [Semantic Versioning](https://semver.org/).
|
|
4
4
|
|
|
5
|
+
## [0.18.2] - 2026-06-08
|
|
6
|
+
|
|
7
|
+
### Added
|
|
8
|
+
|
|
9
|
+
- `--l-ui-contained-width` token (default `80rem`) and `l-ui-page__contained`, a centred content column capped at that width. The contained header (`l-ui-body--header-contained`) now reads the same token, so header and page content align and can be moved together with a single override.
|
|
10
|
+
- `l-ui-body--glass-header`: glass header (translucent background plus backdrop blur, dropping the solid bottom border) so page content scrolls beneath it.
|
|
11
|
+
- `l-ui-body--flush-top`: zeroes the page's top padding so the first section sits flush at the top of the viewport, behind the header. Pair with `l-ui-body--glass-header` (content shows through the frosted header) or `l-ui-body--hide-header` for full-bleed heroes.
|
|
12
|
+
|
|
5
13
|
## [0.18.1] - 2026-06-07
|
|
6
14
|
|
|
7
15
|
### Added
|
|
@@ -81,6 +81,7 @@
|
|
|
81
81
|
--error-text: oklch(0.2248 0.0874 28.11);
|
|
82
82
|
--header-height: 63px;
|
|
83
83
|
--l-ui-gutter: 1rem;
|
|
84
|
+
--l-ui-contained-width: 80rem;
|
|
84
85
|
}
|
|
85
86
|
|
|
86
87
|
.dark {
|
|
@@ -466,6 +467,13 @@
|
|
|
466
467
|
@apply md:ml-[256px];
|
|
467
468
|
}
|
|
468
469
|
|
|
470
|
+
/* Zero the page's top gutter so the first section sits flush at the viewport top, behind the
|
|
471
|
+
header. Intended with .l-ui-body--glass-header (content shows through the glass header) or
|
|
472
|
+
.l-ui-body--hide-header; over an opaque header it would tuck content out of sight. */
|
|
473
|
+
.l-ui-body--flush-top .l-ui-page {
|
|
474
|
+
@apply pt-0;
|
|
475
|
+
}
|
|
476
|
+
|
|
469
477
|
.l-ui-page__vertically-centered {
|
|
470
478
|
@apply flex flex-1 flex-col items-center justify-center;
|
|
471
479
|
}
|
|
@@ -477,6 +485,12 @@
|
|
|
477
485
|
my-auto;
|
|
478
486
|
}
|
|
479
487
|
|
|
488
|
+
/* Centred content column capped at --l-ui-contained-width; aligns with the contained header. */
|
|
489
|
+
.l-ui-page__contained {
|
|
490
|
+
@apply w-full max-w-[var(--l-ui-contained-width)]
|
|
491
|
+
mx-auto;
|
|
492
|
+
}
|
|
493
|
+
|
|
480
494
|
/* Header */
|
|
481
495
|
|
|
482
496
|
.l-ui-header-container {
|
|
@@ -490,6 +504,12 @@
|
|
|
490
504
|
@apply hidden;
|
|
491
505
|
}
|
|
492
506
|
|
|
507
|
+
.l-ui-body--glass-header .l-ui-header-container {
|
|
508
|
+
@apply bg-background/60
|
|
509
|
+
border-b-transparent
|
|
510
|
+
backdrop-blur-xl;
|
|
511
|
+
}
|
|
512
|
+
|
|
493
513
|
.l-ui-header {
|
|
494
514
|
@apply flex items-center justify-between
|
|
495
515
|
h-[var(--header-height)]
|
|
@@ -497,7 +517,7 @@
|
|
|
497
517
|
}
|
|
498
518
|
|
|
499
519
|
.l-ui-body--header-contained .l-ui-header {
|
|
500
|
-
@apply w-full max-w-
|
|
520
|
+
@apply w-full max-w-[var(--l-ui-contained-width)]
|
|
501
521
|
mx-auto;
|
|
502
522
|
}
|
|
503
523
|
|
data/lib/layered/ui/version.rb
CHANGED