thePR0M3TH3AN/bitvid
1
0 Fork 0
mirror of https://github.com/PR0M3TH3AN/bitvid.git synced 2026-11-05 12:22:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refine layout tokens and utilities

Browse Source
This commit is contained in:
thePR0M3TH3AN committed 2025-10-10 13:48:39 -04:00
1 parent 036412c601
commit 13cb9c44c1
11 files changed
+240 -115
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/design-system.md
+6
View File
@@ -68,6 +68,12 @@ Compose them together when mounting new modal portals. If you need a drawer or s
`.grid-stack` offers gap tokens for dense layouts. Add `data-variant="cards"` for responsive card grids (`grid-cols-1` → `sm:grid-cols-2` → `xl:grid-cols-3`). Switch to `data-orientation="vertical"` for stacked flex columns that reuse the same spacing tokens.
### Layout Helpers
- `.bv-stack` creates a vertical flex stack with the default large gap (`var(--space-lg)`). Use it for page sections such as the watch-history summary blocks.
- `.bv-stack--tight` reduces the gap to `var(--space-md)` while inheriting the `.bv-stack` flex behaviour. Combine the modifier when stacking smaller card fragments or form controls inside profile templates.
- `.bv-grid-video` centralises the responsive video grid (`repeat(auto-fill, minmax(20rem, 1fr))`) with the standard gutter (`gap-xl`) and vertical padding (`py-lg`). Apply it to feed, subscriptions, and channel views instead of repeating inline grid rules.
## Legacy Compatibility Shims
During migration we keep existing selectors alive by layering `@apply` calls in `css/style.css`. Notable shims:
docs/kitchen-sink.html
+73
View File
@@ -134,6 +134,79 @@
</div>
</section>
<section class="space-y-md">
<div class="space-y-xs">
<h2 class="text-xl font-semibold text-text-strong">
Layout Helpers
</h2>
<p class="text-sm text-muted">
`.bv-stack` and `.bv-grid-video` consolidate our common feed and
profile layouts.
</p>
</div>
<div class="grid gap-lg lg:grid-cols-2">
<div class="space-y-sm">
<h3 class="text-lg font-semibold">Stack (.bv-stack)</h3>
<div class="bv-stack">
<article class="card p-md">
<h4 class="text-base font-semibold">Default spacing</h4>
<p class="text-sm text-muted">
Use `.bv-stack` for page-level groupings such as the watch
history header and banners.
</p>
</article>
<article class="card p-md">
<h4 class="text-base font-semibold">Nested card</h4>
<p class="text-sm text-muted">
The helper keeps consistent gaps without repeating
`space-y-*` utilities.
</p>
</article>
</div>
<div class="bv-stack bv-stack--tight">
<article class="card p-md">
<h4 class="text-base font-semibold">Tight stack</h4>
<p class="text-sm text-muted">
Apply `.bv-stack--tight` when stacking compact forms or
metadata blocks in profile views.
</p>
</article>
<article class="card p-md">
<h4 class="text-base font-semibold">Form footer</h4>
<p class="text-sm text-muted">
The modifier inherits flex behaviour from `.bv-stack` while
reducing the gap to `var(--space-md)`.
</p>
</article>
</div>
</div>
<div class="space-y-sm">
<h3 class="text-lg font-semibold">Video Grid (.bv-grid-video)</h3>
<div class="bv-grid-video">
<article class="card p-md">
<h4 class="text-base font-semibold">Feed Tile</h4>
<p class="text-sm text-muted">
Auto-fills with a 20rem minimum column size on desktop.
</p>
</article>
<article class="card p-md">
<h4 class="text-base font-semibold">Subscription Tile</h4>
<p class="text-sm text-muted">
The grid collapses to a single column below 40rem.
</p>
</article>
<article class="card p-md">
<h4 class="text-base font-semibold">Channel Tile</h4>
<p class="text-sm text-muted">
Reuse the same helper instead of duplicating inline grid
declarations.
</p>
</article>
</div>
</div>
</div>
</section>
<section class="space-y-md">
<div class="space-y-xs">
<h2 class="text-xl font-semibold text-text-strong">Form Inputs</h2>