generated from ztimson/template
1457 lines
72 KiB
HTML
1457 lines
72 KiB
HTML
<!DOCTYPE html>
|
||
<html class="fix animate" lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
||
<title>@ztimson/css-utils</title>
|
||
<link href="/favicon.webp" rel="icon">
|
||
|
||
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
|
||
<link href="./dist/css-utils.min.css" rel="stylesheet">
|
||
|
||
<style>
|
||
/* ── Page chrome (not utility classes) ── */
|
||
:root {
|
||
--mono: 'JetBrains Mono', monospace;
|
||
--page-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
|
||
}
|
||
|
||
:root .theme-dark {
|
||
--theme-background: #1a1a1a !important;
|
||
--theme-background-contrast: white !important;
|
||
}
|
||
|
||
* { box-sizing: border-box; transition: var(--page-transition); }
|
||
|
||
html, body {
|
||
margin: 0; padding: 0; min-height: 100%;
|
||
font-family: 'Arial', sans-serif;
|
||
}
|
||
|
||
code {
|
||
background: transparent !important;
|
||
}
|
||
|
||
.theme-dark code {
|
||
filter: invert(1);
|
||
}
|
||
|
||
/* Sidebar layout */
|
||
.page-layout { display: flex; min-height: 100vh; }
|
||
|
||
.sidebar {
|
||
width: 220px; flex-shrink: 0;
|
||
position: sticky;
|
||
top: 0;
|
||
height: 100vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.sidebar-logo {
|
||
padding: 20px 16px 14px;
|
||
}
|
||
|
||
.wordmark {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 0.72rem; font-weight: 600;
|
||
color: var(--theme-primary); letter-spacing: 0.05em; display: block;
|
||
}
|
||
|
||
.tagline {
|
||
font-size: 0.68rem;
|
||
color: var(--theme-muted);
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.nav-group { padding: 14px 10px 6px; }
|
||
|
||
.nav-label {
|
||
font-size: 0.58rem; font-weight: 700; letter-spacing: 0.13em;
|
||
text-transform: uppercase; color: var(--theme-muted);
|
||
padding: 0 6px; margin-bottom: 4px;
|
||
}
|
||
|
||
.nav-link {
|
||
display: block; padding: 5px 6px; font-size: 0.78rem;
|
||
color: var(--theme-muted); text-decoration: none;
|
||
border-radius: 5px; transition: all 0.15s ease;
|
||
}
|
||
|
||
.nav-link:hover, .nav-link.active {
|
||
background-color: var(--theme-primary);
|
||
color: var(--theme-primary-contrast, #fff) !important;
|
||
}
|
||
|
||
/* Main */
|
||
.main { flex: 1; overflow-x: hidden; }
|
||
|
||
/* Hero */
|
||
.hero {
|
||
background-color: var(--theme-surface);
|
||
border-bottom: 1px solid var(--theme-border);
|
||
padding: 56px 48px 44px; position: relative; overflow: hidden;
|
||
}
|
||
|
||
.hero::before {
|
||
content: ''; position: absolute; top: -100px; left: -60px;
|
||
width: 420px; height: 420px;
|
||
background: radial-gradient(circle, rgba(79,126,248,0.1) 0%, transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.hero-eyebrow {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 0.68rem; color: var(--theme-primary);
|
||
letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: 2.6rem; font-weight: 300; letter-spacing: -0.03em;
|
||
color: var(--theme-text); margin: 0 0 8px; line-height: 1.1;
|
||
}
|
||
|
||
.hero h1 strong { font-weight: 700; color: var(--theme-primary); }
|
||
.hero-sub { font-size: 0.95rem; color: var(--theme-muted); max-width: 460px; line-height: 1.6; margin-top: 10px; }
|
||
|
||
.hero-stats { display: flex; gap: 24px; margin-top: 28px; align-items: center; }
|
||
.hero-stat { display: flex; flex-direction: column; }
|
||
.hero-stat .num { font-family: 'JetBrains Mono', monospace; font-size: 1.3rem; font-weight: 600; color: var(--theme-text); }
|
||
.hero-stat .lbl { font-size: 0.66rem; color: var(--theme-muted); letter-spacing: 0.06em; text-transform: uppercase; }
|
||
.stat-div { width: 1px; height: 36px; background-color: var(--theme-border); }
|
||
|
||
/* Theme toggle */
|
||
.theme-toggle {
|
||
position: absolute; top: 20px; right: 24px;
|
||
display: flex; align-items: center; gap: 8px;
|
||
font-size: 0.72rem; color: var(--theme-muted);
|
||
}
|
||
|
||
.toggle-track {
|
||
width: 40px; height: 22px; border-radius: 11px; cursor: pointer;
|
||
background-color: var(--theme-border); position: relative;
|
||
transition: background-color 0.2s ease; border: 1px solid var(--theme-border);
|
||
}
|
||
|
||
.toggle-track.on { background-color: var(--theme-primary); }
|
||
|
||
.toggle-thumb {
|
||
position: absolute; top: 2px; left: 2px;
|
||
width: 16px; height: 16px; border-radius: 50%;
|
||
background: #fff; transition: transform 0.2s ease;
|
||
}
|
||
|
||
.toggle-track.on .toggle-thumb { transform: translateX(18px); }
|
||
|
||
/* Sections */
|
||
.section { padding: 44px 48px 0; }
|
||
.section:last-of-type { padding-bottom: 80px; }
|
||
|
||
.section-header {
|
||
display: flex; align-items: baseline; gap: 10px;
|
||
margin-bottom: 24px; padding-bottom: 14px;
|
||
border-bottom: 1px solid var(--theme-border);
|
||
}
|
||
|
||
.section-header h2 {
|
||
font-size: 1.05rem; font-weight: 600; color: var(--theme-text); margin: 0;
|
||
}
|
||
|
||
.section-id {
|
||
font-family: 'JetBrains Mono', monospace; font-size: 0.66rem;
|
||
color: var(--theme-primary);
|
||
background-color: var(--theme-surface);
|
||
border: 1px solid var(--theme-border);
|
||
padding: 2px 6px; border-radius: 4px;
|
||
}
|
||
|
||
.sub-section { margin-bottom: 32px; }
|
||
|
||
.sub-label {
|
||
font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em;
|
||
text-transform: uppercase; color: var(--theme-muted); margin-bottom: 12px;
|
||
}
|
||
|
||
/* Demo card */
|
||
.demo-card {
|
||
background-color: var(--theme-surface);
|
||
border: 1px solid var(--theme-border);
|
||
border-radius: 10px; padding: 20px; margin-bottom: 14px;
|
||
}
|
||
|
||
/* Syntax pill */
|
||
.syntax {
|
||
font-family: 'JetBrains Mono', monospace; font-size: 0.74rem;
|
||
background-color: var(--theme-surface);
|
||
border: 1px solid var(--theme-primary);
|
||
border-radius: 6px; padding: 7px 12px;
|
||
color: var(--theme-primary); margin-bottom: 14px; display: inline-block;
|
||
}
|
||
|
||
/* chip — the inline code label */
|
||
.chip {
|
||
display: inline-flex; align-items: center;
|
||
font-family: 'JetBrains Mono', monospace; font-size: 0.7rem;
|
||
background-color: var(--theme-surface);
|
||
border: 1px solid var(--theme-border);
|
||
border-radius: 5px; padding: 3px 8px;
|
||
color: var(--theme-muted); white-space: nowrap; margin: 2px;
|
||
}
|
||
|
||
/* Anim track */
|
||
.anim-track {
|
||
background-color: var(--theme-surface);
|
||
border: 1px solid var(--theme-border);
|
||
border-radius: 8px; height: 44px; position: relative; overflow: hidden; flex: 1;
|
||
}
|
||
|
||
.anim-ball {
|
||
width: 26px; height: 26px; border-radius: 50%;
|
||
background-color: var(--theme-primary);
|
||
position: absolute; top: 50%; transform: translateY(-50%);
|
||
left: 14px;
|
||
}
|
||
|
||
/* Mobile */
|
||
@media (max-width: 768px) {
|
||
.sidebar { display: none; }
|
||
.hero { padding: 40px 20px 28px; }
|
||
.section { padding: 28px 20px 0; }
|
||
.hero h1 { font-size: 1.8rem; }
|
||
}
|
||
|
||
/* Animation demo states */
|
||
.anim-ball.moved-all { left: calc(100% - 40px); opacity: 0.2; background-color: var(--theme-info); }
|
||
.anim-ball.moved-color { background-color: var(--theme-info); }
|
||
.anim-ball.moved-opacity{ opacity: 0.15; }
|
||
.anim-ball.moved-pos { left: calc(100% - 40px); }
|
||
.anim-ball.moved-trans { transform: translateY(-50%) translateX(200px); }
|
||
</style>
|
||
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/js.min.js"></script>
|
||
<script>hljs.highlightAll();</script>
|
||
</head>
|
||
<body>
|
||
<div class="page-layout" id="root">
|
||
|
||
<!-- ── Sidebar ── -->
|
||
<nav class="sidebar bg-surface br-1">
|
||
<div class="bg-darker h-100">
|
||
<div class="sidebar-logo bb-1">
|
||
<span class="wordmark fs-1">@ztimson/css-utils</span>
|
||
<div class="tagline">Utility-first CSS library • <a href="SKILL.md" target="_blank">SKILL.md</a></div>
|
||
|
||
</div>
|
||
<div class="nav-group">
|
||
<div class="nav-label">Getting Started</div>
|
||
<a href="#install" class="nav-link">Install</a>
|
||
<a href="#theming" class="nav-link">Theming</a>
|
||
<a href="#fixes" class="nav-link">Fixes</a>
|
||
</div>
|
||
<div class="nav-group">
|
||
<div class="nav-label">Utilities</div>
|
||
<a href="#misc" class="nav-link">Misc</a>
|
||
<a href="#animate" class="nav-link">Animate</a>
|
||
<a href="#borders" class="nav-link">Borders</a>
|
||
<a href="#colors" class="nav-link">Colors</a>
|
||
<a href="#cursors" class="nav-link">Cursors</a>
|
||
<a href="#display" class="nav-link">Display</a>
|
||
<a href="#flex" class="nav-link">Flex</a>
|
||
<a href="#float" class="nav-link">Float</a>
|
||
<a href="#font" class="nav-link">Font Style</a>
|
||
<a href="#hover" class="nav-link">Hover</a>
|
||
<a href="#object-fit" class="nav-link">Object Fit</a>
|
||
<a href="#opacity" class="nav-link">Opacity</a>
|
||
<a href="#overflow" class="nav-link">Overflow</a>
|
||
<a href="#position" class="nav-link">Position</a>
|
||
<a href="#shadows" class="nav-link">Shadows</a>
|
||
<a href="#select" class="nav-link">User Select</a>
|
||
<a href="#size" class="nav-link">Size</a>
|
||
<a href="#spacing" class="nav-link">Spacing</a>
|
||
<a href="#visibility" class="nav-link">Visibility</a>
|
||
<a href="#z-index" class="nav-link">Z-Index</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- ── Main ── -->
|
||
<main class="main pb-5">
|
||
|
||
<!-- Hero -->
|
||
<div class="hero" id="top">
|
||
<div class="theme-toggle">
|
||
☀︎
|
||
<div class="toggle-track" id="themeToggle" onclick="toggleTheme()">
|
||
<div class="toggle-thumb"></div>
|
||
</div>
|
||
☽
|
||
</div>
|
||
<div class="hero-eyebrow fs-1">CSS Utility Library</div>
|
||
<h1>@ztimson/<strong>css-utils</strong></h1>
|
||
<p class="hero-sub">Bootstrap-inspired utilities at half the size. All theming through CSS variables — no build step required.</p>
|
||
<a href="SKILL.md" target="_blank">SKILL.md</a>
|
||
<div class="hero-stats">
|
||
<div class="hero-stat"><span class="num">< 100 KB</span><span class="lbl">Uncompressed</span></div>
|
||
<div class="stat-div"></div>
|
||
<div class="hero-stat"><span class="num">20+</span><span class="lbl">Utility Groups</span></div>
|
||
<div class="stat-div"></div>
|
||
<div class="hero-stat"><span class="num">CSS vars</span><span class="lbl">Runtime Theming</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ Install ══ -->
|
||
<div class="section" id="install">
|
||
<div class="section-header">
|
||
<h2>Install</h2><span class="section-id">setup</span>
|
||
</div>
|
||
<div class="demo-card">
|
||
<div class="sub-label">NPM</div>
|
||
<pre class="bg-darker p-3 br-2 fg-success fs-1 mb-3"><code>npm install @ztimson/css-utils</code></pre>
|
||
<div class="sub-label">Import (pick one)</div>
|
||
<pre class="bg-darker p-3 br-2 fg-success fs-1 mb-3"><code>@import url("@ztimson/css-utils/dist/css-utils.min.css");
|
||
@import url("@ztimson/css-utils/dist/css-utils.css");
|
||
@import url("@ztimson/css-utils/src/main.scss");</code></pre>
|
||
<div class="sub-label">CDN</div>
|
||
<pre class="bg-darker p-3 br-2 fg-success fs-1"><code><link rel="stylesheet" href="https://css.zakscode.com/dist/css-utils.css">
|
||
<link rel="stylesheet" href="https://css.zakscode.com/dist/css-utils.min.css"></code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ Theming ══ -->
|
||
<div class="section" id="theming">
|
||
<div class="section-header">
|
||
<h2>Theming</h2><span class="section-id">setup</span>
|
||
</div>
|
||
<div class="demo-card">
|
||
<p class="fg-muted fs-1 mb-3">All theming through CSS variables — swap them at runtime without recompiling.</p>
|
||
<pre class="bg-darker p-3 br-2 fg-success fs-1"><code>:root {
|
||
--theme-primary: #4979de;
|
||
--theme-primary-contrast: black;
|
||
--theme-accent: #2caec0;
|
||
--theme-accent-contrast: black;
|
||
|
||
--theme-info: #6157cc;
|
||
--theme-success: #65c147;
|
||
--theme-warn: #d88750;
|
||
--theme-danger: #bf4f4f;
|
||
--theme-black: black;
|
||
--theme-white: white;
|
||
|
||
--theme-animation: 0.2s linear;
|
||
--theme-content-width: 1100px;
|
||
--theme-font: 'Arial', sans-serif;
|
||
}
|
||
|
||
.theme-light {
|
||
--theme-background: #fafafa;
|
||
--theme-background-contrast: white;
|
||
|
||
--theme-surface: #ffffff;
|
||
--theme-border: #E5E7EB;
|
||
--theme-muted: #6c757d;
|
||
--theme-text: #000000;
|
||
|
||
--theme-lighter: rgba(255, 255, 255, 0.05);
|
||
--theme-darker: rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.theme-dark {
|
||
--theme-background: #1a1a1a;
|
||
--theme-background-contrast: black;
|
||
|
||
--theme-surface: #2e2e2e;
|
||
--theme-border: #374151;
|
||
--theme-muted: #cccccc;
|
||
--theme-text: #ffffff;
|
||
|
||
--theme-lighter: rgba(255, 255, 255, 0.1);
|
||
--theme-darker: rgba(0, 0, 0, 0.1);
|
||
}</code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ Fixes ══ -->
|
||
<div class="section" id="fixes">
|
||
<div class="section-header">
|
||
<h2>Fixes</h2><span class="section-id">utility</span>
|
||
</div>
|
||
<p class="fg-muted fs-1 mb-3">Opt-in opinionated resets. Apply <span class="chip">.fix</span> to enable all, or use granular classes.</p>
|
||
<div class="demo-card flex-r flex-wrap gap-2">
|
||
<span class="chip">.fix</span>
|
||
<span class="chip">.fix-anchor</span>
|
||
<span class="chip">.fix-button</span>
|
||
<span class="chip">.fix-dom</span>
|
||
<span class="chip">.fix-focus</span>
|
||
<span class="chip">.fix-font</span>
|
||
<span class="chip">.fix-scrollbar</span>
|
||
<span class="chip">.reset</span>
|
||
</div>
|
||
<div class="demo-card mt-3">
|
||
<div class="sub-label">Anchor fix example</div>
|
||
<div class="fix-anchor mb-3">
|
||
<a>This link uses .fix-anchor — styled with theme color, underlines on hover with cursor</a>
|
||
</div>
|
||
<div>
|
||
<a class="reset">Use <span class="fg-accent">.reset</span> to remove fixes & styling</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ Misc ══ -->
|
||
<div class="section" id="misc">
|
||
<div class="section-header">
|
||
<h2>Misc</h2><span class="section-id">utility</span>
|
||
</div>
|
||
|
||
<div class="sub-section">
|
||
<div class="sub-label">Center — <span class="chip">.center</span></div>
|
||
<div class="demo-card pos-rel" style="height:100px">
|
||
<div class="center bg-primary fg-white br-2 p-2 fs-1">
|
||
.center
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sub-section">
|
||
<div class="sub-label">Clamp — <span class="chip">.clamp</span></div>
|
||
<div class="demo-card">
|
||
<div class="clamp bg-primary p-2 br-2 fs-1 align-x">
|
||
.clamp — restricted to <span class="fg-accent">--theme-content-width</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sub-section">
|
||
<div class="sub-label">Anchor — <span class="chip">.anchor-c</span> <span class="chip">.anchor-e</span> <span class="chip">.anchor-s</span></div>
|
||
<div class="demo-card pos-rel" style="height:110px">
|
||
<div class="pos-abs anchor-s bg-info fg-white p-2 br-2 fs-1" style="left:50%; top:25%">.anchor-s</div>
|
||
<div class="pos-abs anchor-c bg-primary fg-white p-2 br-2 fs-1" style="left:50%; top:55%">.anchor-c</div>
|
||
<div class="pos-abs anchor-e bg-accent fg-white p-2 br-2 fs-1" style="left:50%; top:85%">.anchor-e</div>
|
||
<div class="pos-abs b-danger be-2 h-100 w-50 start-0 top-0"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ Animate ══ -->
|
||
<div class="section" id="animate">
|
||
<div class="section-header">
|
||
<h2>Animate</h2><span class="section-id">utility</span>
|
||
</div>
|
||
<div class="syntax">.animate-[color|none|opacity|pos|trans]</div>
|
||
<p class="fg-muted fs-1 mb-3">Controlled by <span class="chip">--theme-animation</span>. Each variant limits which CSS properties transition.</p>
|
||
<div class="demo-card flex-c gap-2">
|
||
<div class="flex-r align-items-center gap-3">
|
||
<span class="chip" style="width:140px;flex-shrink:0">.animate</span>
|
||
<div class="anim-track"><div class="anim-ball animate" id="a-all"></div></div>
|
||
</div>
|
||
<div class="flex-r align-items-center gap-3">
|
||
<span class="chip" style="width:140px;flex-shrink:0">.animate-color</span>
|
||
<div class="anim-track"><div class="anim-ball animate-color" id="a-color"></div></div>
|
||
</div>
|
||
<div class="flex-r align-items-center gap-3">
|
||
<span class="chip" style="width:140px;flex-shrink:0">.animate-opacity</span>
|
||
<div class="anim-track"><div class="anim-ball animate-opacity" id="a-opacity"></div></div>
|
||
</div>
|
||
<div class="flex-r align-items-center gap-3">
|
||
<span class="chip" style="width:140px;flex-shrink:0">.animate-pos</span>
|
||
<div class="anim-track"><div class="anim-ball animate-pos" id="a-pos"></div></div>
|
||
</div>
|
||
<div class="flex-r align-items-center gap-3">
|
||
<span class="chip" style="width:140px;flex-shrink:0">.animate-trans</span>
|
||
<div class="anim-track"><div class="anim-ball animate-trans" id="a-trans"></div></div>
|
||
</div>
|
||
<div class="flex-r align-items-center gap-3">
|
||
<span class="chip" style="width:140px;flex-shrink:0">.animate-none</span>
|
||
<div class="anim-track"><div class="anim-ball animate-none" id="a-none"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ Borders ══ -->
|
||
<div class="section" id="borders">
|
||
<div class="section-header">
|
||
<h2>Borders</h2><span class="section-id">utility</span>
|
||
</div>
|
||
|
||
<!-- Width -->
|
||
<div class="sub-section">
|
||
<div class="sub-label">Width — <span class="chip">.b[b|e|s|t]-[bp]-[0–5]</span></div>
|
||
<div class="demo-card flex-r flex-wrap gap-3 align-items-center">
|
||
<div class="b-0 p-3 br-2 align-x fg-muted fs-1" style="min-width:70px">.b-0</div>
|
||
<div class="b-1 p-3 br-2 align-x fg-muted fs-1" style="min-width:70px">.b-1</div>
|
||
<div class="b-2 p-3 br-2 align-x fg-muted fs-1" style="min-width:70px">.b-2</div>
|
||
<div class="b-3 p-3 br-2 align-x fg-muted fs-1" style="min-width:70px">.b-3</div>
|
||
<div class="b-4 p-3 br-2 align-x fg-muted fs-1" style="min-width:70px">.b-4</div>
|
||
<div class="b-5 p-3 br-2 align-x fg-muted fs-1" style="min-width:70px">.b-5</div>
|
||
</div>
|
||
<div class="demo-card flex-r flex-wrap gap-3 align-items-center">
|
||
<div class="bt-3 p-3 br-2 align-x fg-muted fs-1" style="min-width:70px">.bt-3</div>
|
||
<div class="bb-3 p-3 br-2 align-x fg-muted fs-1" style="min-width:70px">.bb-3</div>
|
||
<div class="bs-3 p-3 br-2 align-x fg-muted fs-1" style="min-width:70px">.bs-3</div>
|
||
<div class="be-3 p-3 br-2 align-x fg-muted fs-1" style="min-width:70px">.be-3</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Radius -->
|
||
<div class="sub-section">
|
||
<div class="sub-label">Radius — <span class="chip">.br-[0–5|circle|pill]</span> + corners <span class="chip">.brt- .brb- .brs- .bre-</span></div>
|
||
<div class="demo-card flex-r flex-wrap gap-3 align-items-center">
|
||
<div class="b-1 p-3 br-0 align-x fg-muted fs-1" style="min-width:70px;height:70px;display:flex;align-items:center;justify-content:center">.br-0</div>
|
||
<div class="b-1 p-3 br-1 align-x fg-muted fs-1" style="min-width:70px;height:70px;display:flex;align-items:center;justify-content:center">.br-1</div>
|
||
<div class="b-1 p-3 br-2 align-x fg-muted fs-1" style="min-width:70px;height:70px;display:flex;align-items:center;justify-content:center">.br-2</div>
|
||
<div class="b-1 p-3 br-3 align-x fg-muted fs-1" style="min-width:70px;height:70px;display:flex;align-items:center;justify-content:center">.br-3</div>
|
||
<div class="b-1 p-3 br-4 align-x fg-muted fs-1" style="min-width:70px;height:70px;display:flex;align-items:center;justify-content:center">.br-4</div>
|
||
<div class="b-1 p-3 br-5 align-x fg-muted fs-1" style="min-width:70px;height:70px;display:flex;align-items:center;justify-content:center">.br-5</div>
|
||
<div class="b-1 p-3 br-pill align-x fg-muted fs-1" style="width:120px;height:44px;display:flex;align-items:center;justify-content:center">.br-pill</div>
|
||
<div class="b-1 br-circle align-x fg-muted fs-1" style="width:70px;height:70px;display:flex;align-items:center;justify-content:center">.br-circle</div>
|
||
</div>
|
||
<div class="demo-card flex-r flex-wrap gap-3 align-items-center">
|
||
<div class="b-1 p-3 brt-3 align-x fg-muted fs-1" style="min-width:80px;height:60px;display:flex;align-items:center;justify-content:center">.brt-3</div>
|
||
<div class="b-1 p-3 brb-3 align-x fg-muted fs-1" style="min-width:80px;height:60px;display:flex;align-items:center;justify-content:center">.brb-3</div>
|
||
<div class="b-1 p-3 brs-3 align-x fg-muted fs-1" style="min-width:80px;height:60px;display:flex;align-items:center;justify-content:center">.brs-3</div>
|
||
<div class="b-1 p-3 bre-3 align-x fg-muted fs-1" style="min-width:80px;height:60px;display:flex;align-items:center;justify-content:center">.bre-3</div>
|
||
<div class="b-1 p-3 brtl-3 align-x fg-muted fs-1" style="min-width:80px;height:60px;display:flex;align-items:center;justify-content:center">.brtl-3</div>
|
||
<div class="b-1 p-3 brtr-3 align-x fg-muted fs-1" style="min-width:80px;height:60px;display:flex;align-items:center;justify-content:center">.brtr-3</div>
|
||
<div class="b-1 p-3 brbl-3 align-x fg-muted fs-1" style="min-width:80px;height:60px;display:flex;align-items:center;justify-content:center">.brbl-3</div>
|
||
<div class="b-1 p-3 brbr-3 align-x fg-muted fs-1" style="min-width:80px;height:60px;display:flex;align-items:center;justify-content:center">.brbr-3</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Style -->
|
||
<div class="sub-section">
|
||
<div class="sub-label">Style — <span class="chip">.b-[dash|dot|double|none|solid]</span></div>
|
||
<div class="demo-card flex-r flex-wrap gap-3">
|
||
<div class="b-2 b-dash p-3 br-2 align-x fg-muted fs-1" style="min-width:90px">.b-dash</div>
|
||
<div class="b-2 b-dot p-3 br-2 align-x fg-muted fs-1" style="min-width:90px">.b-dot</div>
|
||
<div class="b-3 b-double p-3 br-2 align-x fg-muted fs-1" style="min-width:90px">.b-double</div>
|
||
<div class="b-2 b-solid p-3 br-2 align-x fg-muted fs-1" style="min-width:90px">.b-solid</div>
|
||
<div class="b-2 b-none p-3 br-2 align-x fg-muted fs-1" style="min-width:90px">.b-none</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Border color -->
|
||
<div class="sub-section">
|
||
<div class="sub-label">Color — <span class="chip">.b-[color]</span></div>
|
||
<div class="demo-card flex-r flex-wrap gap-2">
|
||
<div class="b-2 b-primary p-2 br-2 fs-1 fg-muted">.b-primary</div>
|
||
<div class="b-2 b-accent p-2 br-2 fs-1 fg-muted">.b-accent</div>
|
||
<div class="b-2 b-info p-2 br-2 fs-1 fg-muted">.b-info</div>
|
||
<div class="b-2 b-success p-2 br-2 fs-1 fg-muted">.b-success</div>
|
||
<div class="b-2 b-warn p-2 br-2 fs-1 fg-muted">.b-warn</div>
|
||
<div class="b-2 b-danger p-2 br-2 fs-1 fg-muted">.b-danger</div>
|
||
<div class="b-2 b-muted p-2 br-2 fs-1 fg-muted">.b-muted</div>
|
||
<div class="b-2 b-text p-2 br-2 fs-1 fg-muted">.b-text</div>
|
||
<div class="b-2 b-surface p-2 br-2 fs-1 fg-muted">.b-surface</div>
|
||
<div class="b-2 b-border p-2 br-2 fs-1 fg-muted">.b-border</div>
|
||
<div class="b-2 b-background p-2 br-2 fs-1 fg-muted">.b-background</div>
|
||
<div class="b-2 b-background-contrast p-2 br-2 fs-1 fg-muted">.b-background-contrast</div>
|
||
<div class="b-2 b-primary-contrast p-2 br-2 fs-1 fg-muted">.b-primary-contrast</div>
|
||
<div class="b-2 b-accent-contrast p-2 br-2 fs-1 fg-muted">.b-accent-contrast</div>
|
||
<div class="b-2 b-lighter p-2 br-2 fs-1 fg-muted">.b-lighter</div>
|
||
<div class="b-2 b-darker p-2 br-2 fs-1 fg-muted">.b-darker</div>
|
||
<div class="b-2 b-black p-2 br-2 fs-1 fg-muted">.b-black</div>
|
||
<div class="b-2 b-white p-2 br-2 fs-1 fg-muted">.b-white</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ Colors ══ -->
|
||
<div class="section" id="colors">
|
||
<div class="section-header">
|
||
<h2>Colors</h2><span class="section-id">utility</span>
|
||
</div>
|
||
|
||
<!-- Background -->
|
||
<div class="sub-section">
|
||
<div class="sub-label">Background — <span class="chip">.bg-[color]</span></div>
|
||
<div class="demo-card flex-r flex-wrap gap-2">
|
||
<div class="bg-primary p-2 br-2 fs-1 b-1">.bg-primary</div>
|
||
<div class="bg-primary-contrast p-2 br-2 fs-1 b-1">.bg-primary-contrast</div>
|
||
<div class="bg-accent p-2 br-2 fs-1 b-1">.bg-accent</div>
|
||
<div class="bg-accent-contrast p-2 br-2 fs-1 b-1">.bg-accent-contrast</div>
|
||
<div class="bg-info p-2 br-2 fs-1 b-1">.bg-info</div>
|
||
<div class="bg-success p-2 br-2 fs-1 b-1">.bg-success</div>
|
||
<div class="bg-warn p-2 br-2 fs-1 b-1">.bg-warn</div>
|
||
<div class="bg-danger p-2 br-2 fs-1 b-1">.bg-danger</div>
|
||
<div class="bg-surface p-2 br-2 fs-1 b-1">.bg-surface</div>
|
||
<div class="bg-background p-2 br-2 fs-1 b-1">.bg-background</div>
|
||
<div class="bg-background-contrast p-2 br-2 fs-1 b-1">.bg-background-contrast</div>
|
||
<div class="bg-muted p-2 br-2 fs-1 b-1">.bg-muted</div>
|
||
<div class="bg-text p-2 br-2 fs-1 b-1">.bg-text</div>
|
||
<div class="bg-border p-2 br-2 fs-1 b-1">.bg-border</div>
|
||
<div class="bg-lighter p-2 br-2 fs-1 b-1">.bg-lighter</div>
|
||
<div class="bg-darker p-2 br-2 fs-1 b-1">.bg-darker</div>
|
||
<div class="bg-black fg-white p-2 br-2 fs-1 b-1">.bg-black</div>
|
||
<div class="bg-white fg-black p-2 br-2 fs-1 b-1">.bg-white</div>
|
||
<div class="bg-transparent p-2 br-2 fs-1 b-1">.bg-transparent</div>
|
||
<div class="bg-container p-2 br-2 fs-1 b-1">.bg-container</div>
|
||
</div>
|
||
|
||
<div class="sub-label mt-3">Lighter / Darker variants — <span class="chip">.bg-[color]-lighter</span> <span class="chip">.bg-[color]-darker</span></div>
|
||
<div class="demo-card flex-r flex-wrap gap-2">
|
||
<div class="bg-primary-darker p-2 br-2 fs-1 b-1 fg-text">.bg-primary-darker</div>
|
||
<div class="bg-primary p-2 br-2 fs-1 b-1 fg-text">.bg-primary</div>
|
||
<div class="bg-primary-lighter p-2 br-2 fs-1 b-1 fg-text">.bg-primary-lighter</div>
|
||
<div class="bg-success-darker p-2 br-2 fs-1 b-1 fg-text">.bg-success-darker</div>
|
||
<div class="bg-success p-2 br-2 fs-1 b-1 fg-text">.bg-success</div>
|
||
<div class="bg-success-lighter p-2 br-2 fs-1 b-1 fg-text">.bg-success-lighter</div>
|
||
<div class="bg-danger-darker p-2 br-2 fs-1 b-1 fg-text">.bg-danger-darker</div>
|
||
<div class="bg-danger p-2 br-2 fs-1 b-1 fg-text">.bg-danger</div>
|
||
<div class="bg-danger-lighter p-2 br-2 fs-1 b-1 fg-text">.bg-danger-lighter</div>
|
||
<div class="bg-warn-darker p-2 br-2 fs-1 b-1 fg-text">.bg-warn-darker</div>
|
||
<div class="bg-warn p-2 br-2 fs-1 b-1 fg-text">.bg-warn</div>
|
||
<div class="bg-warn-lighter p-2 br-2 fs-1 b-1 fg-text">.bg-warn-lighter</div>
|
||
<div class="bg-accent-darker p-2 br-2 fs-1 b-1 fg-text">.bg-accent-darker</div>
|
||
<div class="bg-accent p-2 br-2 fs-1 b-1 fg-text">.bg-accent</div>
|
||
<div class="bg-accent-lighter p-2 br-2 fs-1 b-1 fg-text">.bg-accent-lighter</div>
|
||
<div class="bg-info-darker p-2 br-2 fs-1 b-1 fg-text">.bg-info-darker</div>
|
||
<div class="bg-info p-2 br-2 fs-1 b-1 fg-text">.bg-info</div>
|
||
<div class="bg-info-lighter p-2 br-2 fs-1 b-1 fg-text">.bg-info-lighter</div>
|
||
<div class="bg-muted-darker p-2 br-2 fs-1 b-1 fg-text">.bg-muted-darker</div>
|
||
<div class="bg-muted p-2 br-2 fs-1 b-1 fg-text">.bg-muted</div>
|
||
<div class="bg-muted-lighter p-2 br-2 fs-1 b-1 fg-text">.bg-muted-lighter</div>
|
||
<div class="bg-surface-darker p-2 br-2 fs-1 b-1 fg-text">.bg-surface-darker</div>
|
||
<div class="bg-surface p-2 br-2 fs-1 b-1 fg-text">.bg-surface</div>
|
||
<div class="bg-surface-lighter p-2 br-2 fs-1 b-1 fg-text">.bg-surface-lighter</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Foreground -->
|
||
<div class="sub-section">
|
||
<div class="sub-label">Foreground — <span class="chip">.fg-[color]</span></div>
|
||
<div class="demo-card flex-r flex-wrap gap-2">
|
||
<span class="fg-primary b-1 p-2 br-2 fs-1">.fg-primary</span>
|
||
<span class="fg-primary-contrast b-1 p-2 br-2 fs-1">.fg-primary-contrast</span>
|
||
<span class="fg-accent b-1 p-2 br-2 fs-1">.fg-accent</span>
|
||
<span class="fg-accent-contrast b-1 p-2 br-2 fs-1">.fg-accent-contrast</span>
|
||
<span class="fg-info b-1 p-2 br-2 fs-1">.fg-info</span>
|
||
<span class="fg-success b-1 p-2 br-2 fs-1">.fg-success</span>
|
||
<span class="fg-warn b-1 p-2 br-2 fs-1">.fg-warn</span>
|
||
<span class="fg-danger b-1 p-2 br-2 fs-1">.fg-danger</span>
|
||
<span class="fg-muted b-1 p-2 br-2 fs-1">.fg-muted</span>
|
||
<span class="fg-text b-1 p-2 br-2 fs-1">.fg-text</span>
|
||
<span class="fg-surface b-1 p-2 br-2 fs-1">.fg-surface</span>
|
||
<span class="fg-border b-1 p-2 br-2 fs-1">.fg-border</span>
|
||
<span class="fg-background b-1 p-2 br-2 fs-1">.fg-background</span>
|
||
<span class="fg-background-contrast b-1 p-2 br-2 fs-1">.fg-background-contrast</span>
|
||
<span class="fg-lighter b-1 p-2 br-2 fs-1">.fg-lighter</span>
|
||
<span class="fg-darker b-1 p-2 br-2 fs-1">.fg-darker</span>
|
||
<span class="fg-black b-1 p-2 br-2 fs-1">.fg-black</span>
|
||
<span class="fg-white b-1 p-2 br-2 fs-1">.fg-white</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Alignment -->
|
||
<div class="sub-section">
|
||
<div class="sub-label">Alignment — <span class="chip">.align-x[-start|-end]</span> <span class="chip">.align-y[-start|-end]</span></div>
|
||
<div class="demo-card">
|
||
<div class="b-1 br-2 p-2 mb-2 align-x-start fs-1 fg-muted">.align-x-start</div>
|
||
<div class="b-1 br-2 p-2 mb-2 align-x fs-1 fg-muted">.align-x (center)</div>
|
||
<div class="b-1 br-2 p-2 mb-2 align-x-end fs-1 fg-muted">.align-x-end</div>
|
||
<table class="b-1 w-100" style="border-collapse:collapse">
|
||
<tr style="height:60px">
|
||
<td class="b-1 align-y-start p-2 fs-1 fg-muted">.align-y-start</td>
|
||
<td class="b-1 align-y p-2 fs-1 fg-muted">.align-y</td>
|
||
<td class="b-1 align-y-end p-2 fs-1 fg-muted">.align-y-end</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ Cursors ══ -->
|
||
<div class="section" id="cursors">
|
||
<div class="section-header">
|
||
<h2>Cursors</h2><span class="section-id">utility</span>
|
||
</div>
|
||
<div class="syntax">.curs-[alias|auto|cell|col-resize|copy|crosshair|default|grab|grabbing|help|move|not-allowed|pointer|progress|row-resize|text|none|wait|vertical-text|zoom-in|zoom-out]</div>
|
||
<div class="demo-card flex-r flex-wrap gap-2">
|
||
<div class="curs-alias b-1 p-2 br-2 fs-1 fg-muted">.curs-alias</div>
|
||
<div class="curs-auto b-1 p-2 br-2 fs-1 fg-muted">.curs-auto</div>
|
||
<div class="curs-cell b-1 p-2 br-2 fs-1 fg-muted">.curs-cell</div>
|
||
<div class="curs-col-resize b-1 p-2 br-2 fs-1 fg-muted">.curs-col-resize</div>
|
||
<div class="curs-copy b-1 p-2 br-2 fs-1 fg-muted">.curs-copy</div>
|
||
<div class="curs-crosshair b-1 p-2 br-2 fs-1 fg-muted">.curs-crosshair</div>
|
||
<div class="curs-default b-1 p-2 br-2 fs-1 fg-muted">.curs-default</div>
|
||
<div class="curs-grab b-1 p-2 br-2 fs-1 fg-muted">.curs-grab</div>
|
||
<div class="curs-grabbing b-1 p-2 br-2 fs-1 fg-muted">.curs-grabbing</div>
|
||
<div class="curs-help b-1 p-2 br-2 fs-1 fg-muted">.curs-help</div>
|
||
<div class="curs-move b-1 p-2 br-2 fs-1 fg-muted">.curs-move</div>
|
||
<div class="curs-not-allowed b-1 p-2 br-2 fs-1 fg-muted">.curs-not-allowed</div>
|
||
<div class="curs-pointer b-1 p-2 br-2 fs-1 fg-muted">.curs-pointer</div>
|
||
<div class="curs-progress b-1 p-2 br-2 fs-1 fg-muted">.curs-progress</div>
|
||
<div class="curs-row-resize b-1 p-2 br-2 fs-1 fg-muted">.curs-row-resize</div>
|
||
<div class="curs-text b-1 p-2 br-2 fs-1 fg-muted">.curs-text</div>
|
||
<div class="curs-none b-1 p-2 br-2 fs-1 fg-muted">.curs-none</div>
|
||
<div class="curs-wait b-1 p-2 br-2 fs-1 fg-muted">.curs-wait</div>
|
||
<div class="curs-vertical-text b-1 p-2 br-2 fs-1 fg-muted">.curs-vertical-text</div>
|
||
<div class="curs-zoom-in b-1 p-2 br-2 fs-1 fg-muted">.curs-zoom-in</div>
|
||
<div class="curs-zoom-out b-1 p-2 br-2 fs-1 fg-muted">.curs-zoom-out</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ Display ══ -->
|
||
<div class="section" id="display">
|
||
<div class="section-header">
|
||
<h2>Display</h2><span class="section-id">utility</span>
|
||
</div>
|
||
<div class="syntax">.d-[bp]-[block|inline|inline-block|flex|inline-flex|grid|inline-grid|table|table-row|table-cell|none]</div>
|
||
<div class="demo-card flex-r flex-wrap gap-2">
|
||
<span class="chip">.d-block</span>
|
||
<span class="chip">.d-inline</span>
|
||
<span class="chip">.d-inline-block</span>
|
||
<span class="chip">.d-flex</span>
|
||
<span class="chip">.d-inline-flex</span>
|
||
<span class="chip">.d-grid</span>
|
||
<span class="chip">.d-inline-grid</span>
|
||
<span class="chip">.d-table</span>
|
||
<span class="chip">.d-table-row</span>
|
||
<span class="chip">.d-table-cell</span>
|
||
<span class="chip">.d-none</span>
|
||
<span class="chip">.d-md-none</span>
|
||
<span class="chip">.d-lg-flex</span>
|
||
</div>
|
||
<div class="demo-card flex-r flex-wrap gap-2 align-items-center">
|
||
<div class="d-inline-block bg-primary fg-white p-2 br-2 fs-1">.d-inline-block</div>
|
||
<div class="d-inline bg-info fg-white p-2 fs-1">.d-inline</div>
|
||
<div class="b-dash" style="height: 32px; width: 75px;">
|
||
<div class="d-none bg-danger p-2 br-2 fs-1">.d-none (hidden)</div>
|
||
</div>
|
||
<span class="fg-muted fs-1">← .d-none is not rendered</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ Flex ══ -->
|
||
<div class="section" id="flex">
|
||
<div class="section-header">
|
||
<h2>Flex</h2><span class="section-id">utility</span>
|
||
</div>
|
||
|
||
<div class="sub-section">
|
||
<div class="sub-label">Direction — <span class="chip">.flex-[bp]-[c|cr|r|rr]</span> <span class="chip">.flex-inline-[bp]-[c|cr|r|rr]</span></div>
|
||
<div class="demo-card flex-r gap-3 flex-wrap">
|
||
<div class="flex-c gap-1 b-1 p-3 br-2" style="flex:1;min-width:120px">
|
||
<span class="fg-muted fs-1 mb-2">.flex-c</span>
|
||
<div class="bg-primary fg-white p-1 br-1 align-x fs-1">1</div>
|
||
<div class="bg-primary fg-white p-1 br-1 align-x fs-1">2</div>
|
||
<div class="bg-primary fg-white p-1 br-1 align-x fs-1">3</div>
|
||
</div>
|
||
<div class="flex-cr gap-1 b-1 p-3 br-2" style="flex:1;min-width:120px">
|
||
<div class="bg-accent fg-white p-1 br-1 align-x fs-1">1</div>
|
||
<div class="bg-accent fg-white p-1 br-1 align-x fs-1">2</div>
|
||
<div class="bg-accent fg-white p-1 br-1 align-x fs-1">3</div>
|
||
<span class="fg-muted fs-1 mb-2">.flex-cr</span>
|
||
</div>
|
||
<div class="flex-r gap-1 b-1 p-3 br-2 flex-wrap" style="flex:1;min-width:200px">
|
||
<span class="fg-muted fs-1 w-100 mb-2">.flex-r</span>
|
||
<div class="bg-info fg-white p-1 br-1 fs-1">1</div>
|
||
<div class="bg-info fg-white p-1 br-1 fs-1">2</div>
|
||
<div class="bg-info fg-white p-1 br-1 fs-1">3</div>
|
||
</div>
|
||
<div class="flex-rr gap-1 b-1 p-3 br-2 flex-wrap" style="flex:1;min-width:200px">
|
||
<span class="fg-muted fs-1 w-100 mb-2">.flex-rr</span>
|
||
<div class="bg-success fg-white p-1 br-1 fs-1">1</div>
|
||
<div class="bg-success fg-white p-1 br-1 fs-1">2</div>
|
||
<div class="bg-success fg-white p-1 br-1 fs-1">3</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sub-section">
|
||
<div class="sub-label">Justify — <span class="chip">.justify-[bp]-[start|center|end|between|around|evenly]</span></div>
|
||
<div class="demo-card flex-c gap-2">
|
||
<div class="flex-r gap-3 align-items-center">
|
||
<div class="fg-muted" style="width: 125px">.justify-start</div>
|
||
<div class="flex-fill flex-r justify-start gap-1 bg-darker p-2 br-2"><div class="bg-primary p-1 br-1 fs-1 fg-white">A</div><div class="bg-primary p-1 br-1 fs-1 fg-white">B</div><div class="bg-primary p-1 br-1 fs-1 fg-white">C</div></div>
|
||
</div>
|
||
<div class="flex-r gap-3 align-items-center">
|
||
<div class="fg-muted" style="width: 125px">.justify-end</div>
|
||
<div class="flex-fill flex-r justify-end gap-1 bg-darker p-2 br-2"><div class="bg-primary p-1 br-1 fs-1 fg-white">A</div><div class="bg-primary p-1 br-1 fs-1 fg-white">B</div><div class="bg-primary p-1 br-1 fs-1 fg-white">C</div></div>
|
||
</div>
|
||
<div class="flex-r gap-3 align-items-center">
|
||
<div class="fg-muted" style="width: 125px">.justify-center</div>
|
||
<div class="flex-fill flex-r justify-center gap-1 bg-darker p-2 br-2"><div class="bg-primary p-1 br-1 fs-1 fg-white">A</div><div class="bg-primary p-1 br-1 fs-1 fg-white">B</div><div class="bg-primary p-1 br-1 fs-1 fg-white">C</div></div>
|
||
</div>
|
||
<div class="flex-r gap-3 align-items-center">
|
||
<div class="fg-muted" style="width: 125px">.justify-evenly</div>
|
||
<div class="flex-fill flex-r justify-evenly bg-darker p-2 br-2"><div class="bg-primary p-1 br-1 fs-1 fg-white">A</div><div class="bg-primary p-1 br-1 fs-1 fg-white">B</div><div class="bg-primary p-1 br-1 fs-1 fg-white">C</div></div>
|
||
</div>
|
||
<div class="flex-r gap-3 align-items-center">
|
||
<div class="fg-muted" style="width: 125px">.justify-around</div>
|
||
<div class="flex-fill flex-r justify-around bg-darker p-2 br-2"><div class="bg-primary p-1 br-1 fs-1 fg-white">A</div><div class="bg-primary p-1 br-1 fs-1 fg-white">B</div><div class="bg-primary p-1 br-1 fs-1 fg-white">C</div></div>
|
||
</div>
|
||
<div class="flex-r gap-3 align-items-center">
|
||
<div class="fg-muted" style="width: 125px">.justify-between</div>
|
||
<div class="flex-fill flex-r justify-between bg-darker p-2 br-2"><div class="bg-primary p-1 br-1 fs-1 fg-white">A</div><div class="bg-primary p-1 br-1 fs-1 fg-white">B</div><div class="bg-primary p-1 br-1 fs-1 fg-white">C</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sub-section">
|
||
<div class="sub-label">Align Items / Self / Content</div>
|
||
<div class="demo-card flex-r gap-2 b-1" style="height:90px">
|
||
<div class="align-self-start bg-primary fg-white p-1 br-1 fs-1">.align-self-[bp]-start</div>
|
||
<div class="align-self-center bg-accent fg-white p-1 br-1 fs-1">.align-self-[bp]-center</div>
|
||
<div class="align-self-end bg-info fg-white p-1 br-1 fs-1">.align-self-[bp]-end</div>
|
||
<div class="align-self-stretch bg-success fg-white p-1 br-1 fs-1 flex-r align-items-center">.align-self-[bp]-stretch</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sub-section">
|
||
<div class="sub-label">Grow / Shrink / Fill</div>
|
||
<div class="demo-card flex-c gap-2">
|
||
<div class="flex-r gap-2">
|
||
<div class="flex-grow-1 bg-primary fg-white p-2 br-2 fs-1 align-x">.flex-[bp]-grow-1</div>
|
||
<div class="flex-grow-2 bg-accent fg-white p-2 br-2 fs-1 align-x">.flex-[bp]-grow-2</div>
|
||
<div class="flex-grow-3 bg-info fg-white p-2 br-2 fs-1 align-x">.flex-[bp]-grow-3</div>
|
||
</div>
|
||
<div class="flex-r gap-2">
|
||
<div class="flex-fill bg-success fg-white p-2 br-2 fs-1 align-x">.flex-[bp]-fill</div>
|
||
<div class="flex-fill bg-success fg-white p-2 br-2 fs-1 align-x">.flex-[bp]-fill</div>
|
||
<div class="flex-fill-even bg-warn fg-white p-2 br-2 fs-1 align-x">.flex-[bp]-fill-even</div>
|
||
<div class="flex-fill-even bg-warn fg-white p-2 br-2 fs-1 align-x">.flex-[bp]-fill-even</div>
|
||
</div>
|
||
<div class="flex-r gap-2 align-items-center">
|
||
<div class="flex-shrink-0 bg-danger fg-white p-2 br-2 fs-1">.flex-[bp]-shrink-0</div>
|
||
<div class="flex-shrink-1 bg-muted fg-white p-2 br-2 fs-1">.flex-[bp]-shrink-1</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sub-section">
|
||
<div class="sub-label">Wrap</div>
|
||
<div class="demo-card flex-r gap-3">
|
||
<div style="flex:1">
|
||
<div class="fg-muted fs-1 mb-2">.flex-[bp]-nowrap</div>
|
||
<div class="flex-r flex-nowrap gap-1 bg-darker p-2 br-2 overflow-hidden">
|
||
<div class="bg-primary fg-white p-1 br-1 fs-1 align-x w-40">Item 1</div>
|
||
<div class="bg-primary fg-white p-1 br-1 fs-1 align-x w-40">Item 2</div>
|
||
<div class="bg-primary fg-white p-1 br-1 fs-1 align-x w-40">Item 3</div>
|
||
</div>
|
||
</div>
|
||
<div style="flex:1">
|
||
<div class="fg-muted fs-1 mb-2">.flex-[bp]-wrap</div>
|
||
<div class="flex-r flex-wrap gap-1 bg-darker p-2 br-2">
|
||
<div class="bg-primary fg-white p-1 br-1 fs-1 align-x w-40">Item 1</div>
|
||
<div class="bg-primary fg-white p-1 br-1 fs-1 align-x w-40">Item 2</div>
|
||
<div class="bg-primary fg-white p-1 br-1 fs-1 align-x w-40">Item 3</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sub-section">
|
||
<div class="sub-label">Order — <span class="chip">.order-[bp]-[0–5]</span></div>
|
||
<div class="demo-card flex-r gap-2">
|
||
<div class="order-5 bg-danger fg-white p-2 br-2 fs-1">#1 / .order-5</div>
|
||
<div class="order-1 bg-success fg-white p-2 br-2 fs-1">#2 / .order-1</div>
|
||
<div class="order-3 bg-warn fg-white p-2 br-2 fs-1">#3 / .order-3</div>
|
||
<div class="order-2 bg-info fg-white p-2 br-2 fs-1">#4 / .order-2</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sub-section">
|
||
<div class="sub-label">Gap — <span class="chip">.gap-[bp]-[0–5]</span></div>
|
||
<div class="demo-card flex-c gap-2">
|
||
<div class="flex-r gap-3 bg-darker p-2 br-2 align-items-center">
|
||
<span class="fg-muted fs-1">.gap-0</span>
|
||
<div class="flex-r gap-0">
|
||
<div class="bg-primary fg-white p-1 br-1 fs-1">A</div><div class="bg-primary fg-white p-1 br-1 fs-1">B</div><div class="bg-primary fg-white p-1 br-1 fs-1">C</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex-r gap-3 bg-darker p-2 br-2 align-items-center">
|
||
<span class="fg-muted fs-1">.gap-1</span>
|
||
<div class="flex-r gap-1 align-items-center">
|
||
<div class="bg-primary fg-white p-1 br-1 fs-1">A</div><div class="bg-primary fg-white p-1 br-1 fs-1">B</div><div class="bg-primary fg-white p-1 br-1 fs-1">C</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex-r gap-3 bg-darker p-2 br-2 align-items-center">
|
||
<span class="fg-muted fs-1">.gap-2</span>
|
||
<div class="flex-r gap-2 align-items-center">
|
||
<div class="bg-primary fg-white p-1 br-1 fs-1">A</div><div class="bg-primary fg-white p-1 br-1 fs-1">B</div><div class="bg-primary fg-white p-1 br-1 fs-1">C</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex-r gap-3 bg-darker p-2 br-2 align-items-center">
|
||
<span class="fg-muted fs-1">.gap-3</span>
|
||
<div class="flex-r gap-3 align-items-center">
|
||
<div class="bg-primary fg-white p-1 br-1 fs-1">A</div><div class="bg-primary fg-white p-1 br-1 fs-1">B</div><div class="bg-primary fg-white p-1 br-1 fs-1">C</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex-r gap-3 bg-darker p-2 br-2 align-items-center">
|
||
<span class="fg-muted fs-1">.gap-4</span>
|
||
<div class="flex-r gap-4 align-items-center">
|
||
<div class="bg-primary fg-white p-1 br-1 fs-1">A</div><div class="bg-primary fg-white p-1 br-1 fs-1">B</div><div class="bg-primary fg-white p-1 br-1 fs-1">C</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex-r gap-3 bg-darker p-2 br-2 align-items-center">
|
||
<span class="fg-muted fs-1">.gap-5</span>
|
||
<div class="flex-r gap-5 align-items-center">
|
||
<div class="bg-primary fg-white p-1 br-1 fs-1">A</div><div class="bg-primary fg-white p-1 br-1 fs-1">B</div><div class="bg-primary fg-white p-1 br-1 fs-1">C</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ Float ══ -->
|
||
<div class="section" id="float">
|
||
<div class="section-header">
|
||
<h2>Float</h2><span class="section-id">utility</span>
|
||
</div>
|
||
<div class="syntax">.float-[bp]-[start|end|none]</div>
|
||
<div class="demo-card overflow-hidden">
|
||
<div class="float-end bg-info fg-white p-2 br-2 fs-1 ms-3">.float-end</div>
|
||
<div class="float-start bg-primary fg-white p-2 br-2 fs-1 me-3">.float-start</div>
|
||
<div class="fg-muted fs-1 p-2">.float-none — stays in flow</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ Font ══ -->
|
||
<div class="section" id="font">
|
||
<div class="section-header">
|
||
<h2>Font Style</h2><span class="section-id">utility</span>
|
||
</div>
|
||
|
||
<div class="sub-section">
|
||
<div class="sub-label">Size — <span class="chip">.fs-[1–7]</span></div>
|
||
<div class="demo-card flex-c gap-1">
|
||
<span class="fs-1 fg-text">.fs-1 — 1rem</span>
|
||
<span class="fs-2 fg-text">.fs-2 — 1.25rem</span>
|
||
<span class="fs-3 fg-text">.fs-3 — 1.5rem</span>
|
||
<span class="fs-4 fg-text">.fs-4 — 1.75rem</span>
|
||
<span class="fs-5 fg-text">.fs-5 — 2rem</span>
|
||
<span class="fs-6 fg-text">.fs-6 — 2.25rem</span>
|
||
<span class="fs-7 fg-text">.fs-7 — 2.5rem</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sub-section">
|
||
<div class="sub-label">Weight</div>
|
||
<div class="demo-card flex-r flex-wrap gap-3 align-items-baseline">
|
||
<span class="fs-lighter fg-text fs-3">.fs-lighter</span>
|
||
<span class="fs-normal fg-text fs-3">.fs-normal</span>
|
||
<span class="fs-bold fg-text fs-3">.fs-bold</span>
|
||
<span class="fs-bolder fg-text fs-3">.fs-bolder</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sub-section">
|
||
<div class="sub-label">Style & Decoration</div>
|
||
<div class="demo-card flex-r flex-wrap gap-3 align-items-baseline">
|
||
<span class="fs-italic fg-text fs-2">.fs-italic</span>
|
||
<span class="fs-norm fg-text fs-2">.fs-norm (normal)</span>
|
||
<span class="fs-underline fg-text fs-2">.fs-underline</span>
|
||
<span class="fs-strike fg-text fs-2">.fs-strike</span>
|
||
<span class="fs-strike fs-underline fg-text fs-2">.fs-strike.fs-underline</span>
|
||
<span class="fs-none fg-text fs-2">.fs-none</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sub-section">
|
||
<div class="sub-label">Transform</div>
|
||
<div class="demo-card flex-r flex-wrap gap-3 align-items-baseline">
|
||
<span class="fs-lowercase fg-text fs-2">.fs-lowercase EXAMPLE</span>
|
||
<span class="fs-uppercase fg-text fs-2">.fs-uppercase example</span>
|
||
<span class="fs-capitalize fg-text fs-2">.fs-capitalize example text</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sub-section">
|
||
<div class="sub-label">Wrapping</div>
|
||
<div class="demo-card flex-c gap-3">
|
||
<div class="flex-r gap-3 align-items-start">
|
||
<span class="chip" style="flex-shrink:0;width:110px">.fs-truncate</span>
|
||
<div class="fs-truncate fg-muted fs-1" style="max-width:340px">Lorem ipsum dolor sit amet consetetur sadipscing elitr sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat</div>
|
||
</div>
|
||
<div class="flex-r gap-3 align-items-start">
|
||
<span class="chip" style="flex-shrink:0;width:110px">.fs-nowrap</span>
|
||
<div class="fs-nowrap fg-muted fs-1 overflow-hidden" style="max-width:340px">Lorem ipsum dolor sit amet consetetur sadipscing elitr sed diam nonumy eirmod tempor.</div>
|
||
</div>
|
||
<div class="flex-r gap-3 align-items-start">
|
||
<span class="chip" style="flex-shrink:0;width:110px">.fs-wrap</span>
|
||
<div class="fs-wrap fg-muted fs-1" style="max-width:340px">Lorem ipsum dolor sit amet consetetur sadipscing elitr sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</div>
|
||
</div>
|
||
<div class="flex-r gap-3 align-items-start">
|
||
<span class="chip" style="flex-shrink:0;width:110px">.fs-break</span>
|
||
<div class="fs-break fg-muted fs-1" style="max-width:340px">Superlongwordthatwouldnormallyoverflowbutbreakswithfsbreakclassapplied.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ Hover ══ -->
|
||
<div class="section" id="hover">
|
||
<div class="section-header">
|
||
<h2>Hover</h2><span class="section-id">utility</span>
|
||
</div>
|
||
<div class="syntax">.hover .curs-hover</div>
|
||
<div class="demo-card flex-r gap-3 flex-wrap">
|
||
<div class="hover bg-primary fg-white p-3 br-2 fs-1 curs-pointer flex-fill-even align-x">.hover — hover me (brightness)</div>
|
||
<div class="curs-hover bg-accent fg-white p-3 br-2 fs-1 flex-fill-even align-x">.curs-hover — pointer + brightness</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ Object Fit ══ -->
|
||
<div class="section" id="object-fit">
|
||
<div class="section-header">
|
||
<h2>Object Fit</h2><span class="section-id">utility</span>
|
||
</div>
|
||
<div class="syntax">.fit-[bp]-[contain|cover|fill|scale|none]</div>
|
||
<div class="demo-card flex-r gap-3 flex-wrap">
|
||
<div class="flex-c align-items-center gap-2">
|
||
<div class="b-1 br-2 overflow-hidden" style="width:200px;height:160px">
|
||
<img src="./wave.webp" alt="wave" class="w-100 h-100 fit-contain">
|
||
</div>
|
||
<span class="fs-1 fg-muted">.fit-contain</span>
|
||
</div>
|
||
<div class="flex-c align-items-center gap-2">
|
||
<div class="b-1 br-2 overflow-hidden" style="width:200px;height:160px">
|
||
<img src="./wave.webp" alt="wave" class="w-100 h-100 fit-cover">
|
||
</div>
|
||
<span class="fs-1 fg-muted">.fit-cover</span>
|
||
</div>
|
||
<div class="flex-c align-items-center gap-2">
|
||
<div class="b-1 br-2 overflow-hidden" style="width:200px;height:160px">
|
||
<img src="./wave.webp" alt="wave" class="w-100 h-100 fit-fill">
|
||
</div>
|
||
<span class="fs-1 fg-muted">.fit-fill</span>
|
||
</div>
|
||
<div class="flex-c align-items-center gap-2">
|
||
<div class="b-1 br-2 overflow-hidden" style="width:200px;height:160px">
|
||
<img src="./wave.webp" alt="wave" class="w-100 h-100 fit-scale">
|
||
</div>
|
||
<span class="fs-1 fg-muted">.fit-scale</span>
|
||
</div>
|
||
<div class="flex-c align-items-center gap-2">
|
||
<div class="b-1 br-2 overflow-hidden" style="width:200px;height:160px">
|
||
<img src="./wave.webp" alt="wave" class="w-100 h-100 fit-none">
|
||
</div>
|
||
<span class="fs-1 fg-muted">.fit-none</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ Opacity ══ -->
|
||
<div class="section" id="opacity">
|
||
<div class="section-header">
|
||
<h2>Opacity</h2><span class="section-id">utility</span>
|
||
</div>
|
||
<div class="syntax">.o-[0|10|20|25|30|33|34|40|50|60|66|70|75|80|90|100]</div>
|
||
<div class="demo-card flex-r flex-wrap gap-2 align-items-center">
|
||
<div class="o-0 bg-primary p-2 br-2 fs-1 fg-white align-x" style="min-width:44px">0</div>
|
||
<div class="o-10 bg-primary p-2 br-2 fs-1 fg-white align-x" style="min-width:44px">10</div>
|
||
<div class="o-20 bg-primary p-2 br-2 fs-1 fg-white align-x" style="min-width:44px">20</div>
|
||
<div class="o-25 bg-primary p-2 br-2 fs-1 fg-white align-x" style="min-width:44px">25</div>
|
||
<div class="o-30 bg-primary p-2 br-2 fs-1 fg-white align-x" style="min-width:44px">30</div>
|
||
<div class="o-33 bg-primary p-2 br-2 fs-1 fg-white align-x" style="min-width:44px">33</div>
|
||
<div class="o-34 bg-primary p-2 br-2 fs-1 fg-white align-x" style="min-width:44px">34</div>
|
||
<div class="o-40 bg-primary p-2 br-2 fs-1 fg-white align-x" style="min-width:44px">40</div>
|
||
<div class="o-50 bg-primary p-2 br-2 fs-1 fg-white align-x" style="min-width:44px">50</div>
|
||
<div class="o-60 bg-primary p-2 br-2 fs-1 fg-white align-x" style="min-width:44px">60</div>
|
||
<div class="o-66 bg-primary p-2 br-2 fs-1 fg-white align-x" style="min-width:44px">66</div>
|
||
<div class="o-70 bg-primary p-2 br-2 fs-1 fg-white align-x" style="min-width:44px">70</div>
|
||
<div class="o-75 bg-primary p-2 br-2 fs-1 fg-white align-x" style="min-width:44px">75</div>
|
||
<div class="o-80 bg-primary p-2 br-2 fs-1 fg-white align-x" style="min-width:44px">80</div>
|
||
<div class="o-90 bg-primary p-2 br-2 fs-1 fg-white align-x" style="min-width:44px">90</div>
|
||
<div class="o-100 bg-primary p-2 br-2 fs-1 fg-white align-x" style="min-width:44px">100</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ Overflow ══ -->
|
||
<div class="section" id="overflow">
|
||
<div class="section-header">
|
||
<h2>Overflow</h2><span class="section-id">utility</span>
|
||
</div>
|
||
<div class="syntax">.overflow-[x|y]-[auto|hidden|scroll|visible]</div>
|
||
<div class="demo-card flex-r flex-wrap gap-3">
|
||
<div class="flex-c align-items-center gap-2">
|
||
<div class="overflow-auto b-1 br-2" style="width:130px;height:100px">
|
||
<div class="bg-primary-darker p-2 align-x fg-muted fs-1" style="width:220px;height:160px">.overflow-auto</div>
|
||
</div>
|
||
<span class="chip">.overflow-auto</span>
|
||
</div>
|
||
<div class="flex-c align-items-center gap-2">
|
||
<div class="overflow-hidden b-1 br-2" style="width:130px;height:100px">
|
||
<div class="bg-info-darker p-2 align-x fg-muted fs-1" style="width:220px;height:160px">.overflow-hidden</div>
|
||
</div>
|
||
<span class="chip">.overflow-hidden</span>
|
||
</div>
|
||
<div class="flex-c align-items-center gap-2">
|
||
<div class="overflow-scroll b-1 br-2" style="width:130px;height:100px">
|
||
<div class="bg-success-darker p-2 align-x fg-muted fs-1" style="width:220px;height:160px">.overflow-scroll</div>
|
||
</div>
|
||
<span class="chip">.overflow-scroll</span>
|
||
</div>
|
||
<div class="flex-c align-items-center gap-2">
|
||
<div class="overflow-x-auto b-1 br-2" style="width:130px;height:60px">
|
||
<div class="bg-warn-darker p-2 fg-muted fs-1" style="width:300px;white-space:nowrap">.overflow-x-auto — scrolls horizontally</div>
|
||
</div>
|
||
<span class="chip">.overflow-x-auto</span>
|
||
</div>
|
||
<div class="flex-c align-items-center gap-2">
|
||
<div class="overflow-y-auto b-1 br-2" style="width:130px;height:60px">
|
||
<div class="bg-danger-darker p-2 fg-muted fs-1">.overflow-y-auto<br>scrolls<br>vertically<br>here</div>
|
||
</div>
|
||
<span class="chip">.overflow-y-auto</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ Position ══ -->
|
||
<div class="section" id="position">
|
||
<div class="section-header">
|
||
<h2>Position</h2><span class="section-id">utility</span>
|
||
</div>
|
||
|
||
<div class="sub-section">
|
||
<div class="sub-label">Type — <span class="chip">.pos-[abs|fix|rel|static|stick]</span></div>
|
||
<div class="demo-card flex-r flex-wrap gap-2">
|
||
<span class="chip">.pos-abs (absolute)</span>
|
||
<span class="chip">.pos-fix (fixed)</span>
|
||
<span class="chip">.pos-rel (relative)</span>
|
||
<span class="chip">.pos-static</span>
|
||
<span class="chip">.pos-stick (sticky)</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sub-section">
|
||
<div class="sub-label">Coordinates — <span class="chip">.[top|bottom|start|end]-[0–100]</span></div>
|
||
<div class="demo-card pos-rel b-1 br-2" style="height:150px">
|
||
<div class="pos-abs top-0 start-0 bg-primary fg-white p-1 br-1 fs-1">.top-0 .start-0</div>
|
||
<div class="pos-abs top-0 end-0 bg-accent fg-white p-1 br-1 fs-1">.top-0 .end-0</div>
|
||
<div class="center bg-info fg-white p-1 br-1 fs-1">.center</div>
|
||
<div class="pos-abs bottom-0 start-0 bg-success fg-white p-1 br-1 fs-1">.bottom-0 .start-0</div>
|
||
<div class="pos-abs bottom-0 end-0 bg-warn fg-white p-1 br-1 fs-1">.bottom-0 .end-0</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sub-section">
|
||
<div class="sub-label">Anchor — <span class="chip">.anchor-[c|e|s]</span></div>
|
||
<div class="demo-card pos-rel b-primary" style="height: 100px">
|
||
<div class="pos-abs anchor-s bg-primary fg-white p-1 br-1 fs-1" style="left:50%;top:20%">.anchor-s</div>
|
||
<div class="pos-abs anchor-c bg-accent fg-white p-1 br-1 fs-1" style="left:50%;top:50%">.anchor-c</div>
|
||
<div class="pos-abs anchor-e bg-info fg-white p-1 br-1 fs-1" style="left:50%;top:80%">.anchor-e</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ Shadows ══ -->
|
||
<div class="section" id="shadows">
|
||
<div class="section-header">
|
||
<h2>Shadows</h2><span class="section-id">utility</span>
|
||
</div>
|
||
|
||
<div class="sub-section">
|
||
<div class="sub-label">Elevation — <span class="chip">.shadow</span> <span class="chip">.shadow-[1–5]</span> <span class="chip">.shadow-none</span></div>
|
||
<div class="demo-card flex-r flex-wrap gap-4 align-items-end">
|
||
<div class="shadow-1 bg-surface p-4 br-2 flex-c align-items-center gap-2">
|
||
<div class="bg-border br-2 p-3" style="width:40px;height:40px"></div>
|
||
<span class="fs-1 fg-muted">.shadow-1</span>
|
||
<span class="fs-1 fg-muted" style="font-size:0.62rem">inputs</span>
|
||
</div>
|
||
<div class="shadow-2 bg-surface p-4 br-2 flex-c align-items-center gap-2">
|
||
<div class="bg-border br-2 p-3" style="width:40px;height:40px"></div>
|
||
<span class="fs-1 fg-muted">.shadow-2</span>
|
||
<span class="fs-1 fg-muted" style="font-size:0.62rem">cards</span>
|
||
</div>
|
||
<div class="shadow bg-surface p-4 br-2 flex-c align-items-center gap-2">
|
||
<div class="bg-border br-2 p-3" style="width:40px;height:40px"></div>
|
||
<span class="fs-1 fg-muted">.shadow / .shadow-3</span>
|
||
<span class="fs-1 fg-muted" style="font-size:0.62rem">dropdowns</span>
|
||
</div>
|
||
<div class="shadow-4 bg-surface p-4 br-2 flex-c align-items-center gap-2">
|
||
<div class="bg-border br-2 p-3" style="width:40px;height:40px"></div>
|
||
<span class="fs-1 fg-muted">.shadow-4</span>
|
||
<span class="fs-1 fg-muted" style="font-size:0.62rem">modals</span>
|
||
</div>
|
||
<div class="shadow-5 bg-surface p-4 br-2 flex-c align-items-center gap-2">
|
||
<div class="bg-border br-2 p-3" style="width:40px;height:40px"></div>
|
||
<span class="fs-1 fg-muted">.shadow-5</span>
|
||
<span class="fs-1 fg-muted" style="font-size:0.62rem">drawers</span>
|
||
</div>
|
||
<div class="shadow-none bg-surface p-4 br-2 b-1 flex-c align-items-center gap-2">
|
||
<div class="bg-border br-2 p-3" style="width:40px;height:40px"></div>
|
||
<span class="fs-1 fg-muted">.shadow-none</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sub-section">
|
||
<div class="sub-label">Directional — <span class="chip">.shadow-[top|bottom|start|end]</span></div>
|
||
<div class="demo-card flex-r flex-wrap gap-4">
|
||
<div class="shadow-top bg-surface p-4 br-2 flex-c align-items-center gap-2"><span class="fs-1 fg-muted">.shadow-top</span></div>
|
||
<div class="shadow-bottom bg-surface p-4 br-2 flex-c align-items-center gap-2"><span class="fs-1 fg-muted">.shadow-bottom</span></div>
|
||
<div class="shadow-start bg-surface p-4 br-2 flex-c align-items-center gap-2"><span class="fs-1 fg-muted">.shadow-start</span></div>
|
||
<div class="shadow-end bg-surface p-4 br-2 flex-c align-items-center gap-2"><span class="fs-1 fg-muted">.shadow-end</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sub-section">
|
||
<div class="sub-label">Colored — <span class="chip">.shadow-[primary|accent|info|success|warn|danger]</span></div>
|
||
<div class="demo-card flex-r flex-wrap gap-4">
|
||
<div class="shadow-primary bg-surface p-4 br-2 flex-c align-items-center gap-2">
|
||
<div class="bg-primary p-2 br-2" style="width:36px;height:36px"></div>
|
||
<span class="fs-1 fg-primary">.shadow-primary</span>
|
||
</div>
|
||
<div class="shadow-accent bg-surface p-4 br-2 flex-c align-items-center gap-2">
|
||
<div class="bg-accent p-2 br-2" style="width:36px;height:36px"></div>
|
||
<span class="fs-1 fg-accent">.shadow-accent</span>
|
||
</div>
|
||
<div class="shadow-info bg-surface p-4 br-2 flex-c align-items-center gap-2">
|
||
<div class="bg-info p-2 br-2" style="width:36px;height:36px"></div>
|
||
<span class="fs-1 fg-info">.shadow-info</span>
|
||
</div>
|
||
<div class="shadow-success bg-surface p-4 br-2 flex-c align-items-center gap-2">
|
||
<div class="bg-success p-2 br-2" style="width:36px;height:36px"></div>
|
||
<span class="fs-1 fg-success">.shadow-success</span>
|
||
</div>
|
||
<div class="shadow-warn bg-surface p-4 br-2 flex-c align-items-center gap-2">
|
||
<div class="bg-warn p-2 br-2" style="width:36px;height:36px"></div>
|
||
<span class="fs-1 fg-warn">.shadow-warn</span>
|
||
</div>
|
||
<div class="shadow-danger bg-surface p-4 br-2 flex-c align-items-center gap-2">
|
||
<div class="bg-danger p-2 br-2" style="width:36px;height:36px"></div>
|
||
<span class="fs-1 fg-danger">.shadow-danger</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sub-section">
|
||
<div class="sub-label">Inset — <span class="chip">.shadow-inset-[1|2]</span></div>
|
||
<div class="demo-card flex-r gap-4">
|
||
<div class="shadow-inset-1 bg-surface b-1 p-4 br-2 flex-c align-items-center gap-2"><span class="fs-1 fg-muted">.shadow-inset-1</span></div>
|
||
<div class="shadow-inset-2 bg-surface b-1 p-4 br-2 flex-c align-items-center gap-2"><span class="fs-1 fg-muted">.shadow-inset-2</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sub-section">
|
||
<div class="sub-label">Drop (filter-based, respects SVG/PNG shape) — <span class="chip">.shadow-drop-sm</span> <span class="chip">.shadow-drop</span> <span class="chip">.shadow-drop-lg</span></div>
|
||
<div class="demo-card">
|
||
<p class="fg-muted fs-1 mb-3">Unlike <span class="fg-accent">box-shadow</span>, filter drop-shadow respects transparency</p>
|
||
<div class="flex-r gap-5 align-items-center">
|
||
<div class="flex-c align-items-center gap-2">
|
||
<svg width="60" height="60" viewBox="0 0 60 60" class="shadow-drop-sm">
|
||
<polygon points="30,4 56,52 4,52" fill="var(--theme-primary)"/>
|
||
</svg>
|
||
<span class="fs-1 fg-muted">.shadow-drop-sm</span>
|
||
</div>
|
||
<div class="flex-c align-items-center gap-2">
|
||
<svg width="60" height="60" viewBox="0 0 60 60" class="shadow-drop">
|
||
<polygon points="30,4 56,52 4,52" fill="var(--theme-accent)"/>
|
||
</svg>
|
||
<span class="fs-1 fg-muted">.shadow-drop</span>
|
||
</div>
|
||
<div class="flex-c align-items-center gap-2">
|
||
<svg width="60" height="60" viewBox="0 0 60 60" class="shadow-drop-lg">
|
||
<polygon points="30,4 56,52 4,52" fill="var(--theme-info)"/>
|
||
</svg>
|
||
<span class="fs-1 fg-muted">.shadow-drop-lg</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ User Select ══ -->
|
||
<div class="section" id="select">
|
||
<div class="section-header">
|
||
<h2>User Select</h2><span class="section-id">utility</span>
|
||
</div>
|
||
<div class="syntax">.select-[all|auto|none|text]</div>
|
||
<div class="demo-card flex-r flex-wrap gap-3">
|
||
<div class="select-all b-1 p-3 br-2 fg-muted fs-1">.select-all — click to select all</div>
|
||
<div class="select-auto b-1 p-3 br-2 fg-muted fs-1">.select-auto — default behavior</div>
|
||
<div class="select-none b-1 p-3 br-2 fg-muted fs-1">.select-none — cannot select this</div>
|
||
<div class="select-text b-1 p-3 br-2 fg-muted fs-1">.select-text — text only selection</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ Size ══ -->
|
||
<div class="section" id="size">
|
||
<div class="section-header">
|
||
<h2>Size</h2><span class="section-id">utility</span>
|
||
</div>
|
||
<div class="syntax">.w-[0|10|20|25|30|33|34|40|50|60|66|70|75|80|90|100|auto]</div>
|
||
<div class="syntax">.h-[0|10|20|25|30|33|34|40|50|60|66|70|75|80|90|100|auto]</div>
|
||
<div class="demo-card flex-c gap-1">
|
||
<div class="w-25 bg-primary p-1 br-1 fg-white fs-1">.w-25</div>
|
||
<div class="w-50 bg-accent p-1 br-1 fg-white fs-1">.w-50</div>
|
||
<div class="w-75 bg-info p-1 br-1 fg-white fs-1">.w-75</div>
|
||
<div class="w-100 bg-success p-1 br-1 fg-white fs-1">.w-100</div>
|
||
</div>
|
||
<div class="demo-card flex-r gap-2 align-items-end" style="height:160px">
|
||
<div class="h-25 bg-primary br-1 fg-white fs-1 align-x p-1" style="width:60px">.h-25</div>
|
||
<div class="h-50 bg-accent br-1 fg-white fs-1 align-x p-1" style="width:60px">.h-50</div>
|
||
<div class="h-75 bg-info br-1 fg-white fs-1 align-x p-1" style="width:60px">.h-75</div>
|
||
<div class="h-100 bg-success br-1 fg-white fs-1 align-x p-1" style="width:60px">.h-100</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ Spacing ══ -->
|
||
<div class="section" id="spacing">
|
||
<div class="section-header">
|
||
<h2>Spacing</h2><span class="section-id">utility</span>
|
||
</div>
|
||
<div class="syntax">Margin: .m[b|e|s|t|x|y]-[bp]-[0–5|auto]</div>
|
||
<div class="syntax">Padding: .p[b|e|s|t|x|y]-[bp]-[0–5]</div>
|
||
<div class="demo-card flex-c flex-wrap gap-1 align-items-start mt-3">
|
||
<div class="flex-r flex-wrap gap-2">
|
||
<div class="bg-warn b-1 b-warn w-100"><div class="bg-success mx-auto p-2 b-1 b-success fg-white fs-1 align-x" style="width:120px">.mx-auto</div></div>
|
||
<div>
|
||
<div class="bg-warn b-1 b-warn"><div class="bg-success my-3 py-3 b-1 b-success fg-white fs-1">.my-3 .py-3</div></div>
|
||
</div>
|
||
<div>
|
||
<div class="bg-warn b-1 b-warn"><div class="bg-success mt-3 pt-3 b-1 b-success fg-white fs-1">.mt-3 .pt-3</div></div>
|
||
</div>
|
||
<div>
|
||
<div class="bg-warn b-1 b-warn"><div class="bg-success mb-3 pb-3 b-1 b-success fg-white fs-1">.mb-3 .pb-3</div></div>
|
||
</div>
|
||
<div>
|
||
<div class="bg-warn b-1 b-warn"><div class="bg-success ms-3 ps-3 b-1 b-success fg-white fs-1">.ms-3 .ps-3</div></div>
|
||
</div>
|
||
<div>
|
||
<div class="bg-warn b-1 b-warn"><div class="bg-success me-3 pe-3 b-1 b-success fg-white fs-1">.me-3 .pe-3</div></div>
|
||
</div>
|
||
<div>
|
||
<div class="bg-warn b-1 b-warn"><div class="bg-success mx-3 px-3 b-1 b-success fg-white fs-1">.mx-3 .px-3</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="flex-r flex-wrap gap-1 align-items-center">
|
||
<div class="bg-warn m-0 b-1 b-warn"><div class="bg-success p-0 b-1 b-success fg-white fs-1">.m-0 .p-0</div></div>
|
||
<div class="bg-warn m-1 b-1 b-warn"><div class="bg-success p-1 b-1 b-success fg-white fs-1">.m-1 .p-1</div></div>
|
||
<div class="bg-warn m-2 b-1 b-warn"><div class="bg-success p-2 b-1 b-success fg-white fs-1">.m-2 .p-2</div></div>
|
||
<div class="bg-warn m-3 b-1 b-warn"><div class="bg-success p-3 b-1 b-success fg-white fs-1">.m-3 .p-3</div></div>
|
||
<div class="bg-warn m-4 b-1 b-warn"><div class="bg-success p-4 b-1 b-success fg-white fs-1">.m-4 .p-4</div></div>
|
||
<div class="bg-warn m-5 b-1 b-warn"><div class="bg-success p-5 b-1 b-success fg-white fs-1">.m-5 .p-5</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ Visibility ══ -->
|
||
<div class="section" id="visibility">
|
||
<div class="section-header">
|
||
<h2>Visibility</h2><span class="section-id">utility</span>
|
||
</div>
|
||
<div class="syntax">.[hidden|visible]-[bp]</div>
|
||
<div class="demo-card">
|
||
<p class="fg-muted fs-1 mb-3"><span class="fg-accent">.hidden</span> preserves layout space. Use <span class="fg-accent">.d-none</span> to remove from flow entirely.</p>
|
||
<div class="flex-r gap-3 align-items-center">
|
||
<div class="b-dash mb-2">
|
||
<div class="hidden b-1 p-2 br-2 fg-muted fs-1">.hidden</div>
|
||
</div>
|
||
<div class="visible bg-primary fg-white p-2 br-2 fs-1">.visible</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ Z-Index ══ -->
|
||
<div class="section" id="z-index">
|
||
<div class="section-header">
|
||
<h2>Z-Index</h2><span class="section-id">utility</span>
|
||
</div>
|
||
<div class="syntax">.z-[0–5]</div>
|
||
<div class="pos-rel">
|
||
<div class="pos-abs z-5 bg-surface shadow-2 b-1 br-2 flex-r align-items-end justify-end p-2" style="width:80px;height:80px;left:0"><span class="fs-1 fg-muted">z-5</span></div>
|
||
<div class="pos-abs z-4 bg-surface shadow-2 b-1 br-2 flex-r align-items-end justify-end p-2" style="width:80px;height:80px;left:30px"><span class="fs-1 fg-muted">z-4</span></div>
|
||
<div class="pos-abs z-3 bg-surface shadow-2 b-1 br-2 flex-r align-items-end justify-end p-2" style="width:80px;height:80px;left:60px"><span class="fs-1 fg-muted">z-3</span></div>
|
||
<div class="pos-abs z-2 bg-surface shadow-2 b-1 br-2 flex-r align-items-end justify-end p-2" style="width:80px;height:80px;left:90px"><span class="fs-1 fg-muted">z-2</span></div>
|
||
<div class="pos-abs z-1 bg-surface shadow-2 b-1 br-2 flex-r align-items-end justify-end p-2" style="width:80px;height:80px;left:120px"><span class="fs-1 fg-muted">z-1</span></div>
|
||
<div class="pos-abs z-0 bg-surface shadow-2 b-1 br-2 flex-r align-items-end justify-end p-2" style="width:80px;height:80px;left:150px"><span class="fs-1 fg-muted">z-0</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="height:80px"></div>
|
||
</main>
|
||
</div>
|
||
|
||
<script>
|
||
// ── Theme ──
|
||
const root = document.getElementById('root');
|
||
const toggle = document.getElementById('themeToggle');
|
||
let dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||
|
||
function applyTheme() {
|
||
document.body.classList.toggle('theme-dark', dark);
|
||
document.body.classList.toggle('theme-light', !dark);
|
||
toggle.classList.toggle('on', dark);
|
||
}
|
||
|
||
function toggleTheme() { dark = !dark; applyTheme(); }
|
||
|
||
// Listen for system preference changes
|
||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||
dark = e.matches; applyTheme();
|
||
});
|
||
|
||
applyTheme();
|
||
|
||
// ── Sidebar active link on scroll ──
|
||
const sections = document.querySelectorAll('[id]');
|
||
const links = document.querySelectorAll('.nav-link');
|
||
const obs = new IntersectionObserver(entries => {
|
||
entries.forEach(e => {
|
||
if (e.isIntersecting) {
|
||
links.forEach(l => l.classList.remove('active'));
|
||
const a = document.querySelector(`.nav-link[href="#${e.target.id}"]`);
|
||
if (a) a.classList.add('active');
|
||
}
|
||
});
|
||
}, { rootMargin: '-10% 0px -80% 0px' });
|
||
sections.forEach(s => obs.observe(s));
|
||
|
||
// ── Animation demo ──
|
||
const balls = {
|
||
all: document.getElementById('a-all'),
|
||
color: document.getElementById('a-color'),
|
||
opacity: document.getElementById('a-opacity'),
|
||
pos: document.getElementById('a-pos'),
|
||
trans: document.getElementById('a-trans'),
|
||
none: document.getElementById('a-none'),
|
||
};
|
||
|
||
let moved = false;
|
||
setInterval(() => {
|
||
moved = !moved;
|
||
// .animate — all properties
|
||
if (balls.all) {
|
||
balls.all.style.setProperty('--theme-animation', '1.5s ease');
|
||
balls.all.style.transition = 'left 1.5s ease, opacity 1.5s ease, background-color 1.5s ease';
|
||
balls.all.style.left = moved ? 'calc(100% - 40px)' : '14px';
|
||
balls.all.style.opacity = moved ? '0.2' : '1';
|
||
balls.all.style.backgroundColor = moved ? 'var(--theme-info)' : 'var(--theme-primary)';
|
||
}
|
||
// .animate-color
|
||
if (balls.color) {
|
||
balls.color.style.transition = 'background-color 1.5s ease';
|
||
balls.color.style.backgroundColor = moved ? 'var(--theme-info)' : 'var(--theme-primary)';
|
||
}
|
||
// .animate-opacity
|
||
if (balls.opacity) {
|
||
balls.opacity.style.transition = 'opacity 1.5s ease';
|
||
balls.opacity.style.opacity = moved ? '0.1' : '1';
|
||
}
|
||
// .animate-pos
|
||
if (balls.pos) {
|
||
balls.pos.style.transition = 'left 1.5s ease';
|
||
balls.pos.style.left = moved ? 'calc(100% - 40px)' : '14px';
|
||
}
|
||
// .animate-trans
|
||
if (balls.trans) {
|
||
balls.trans.style.transition = 'transform 1.5s ease';
|
||
balls.trans.style.transform = moved
|
||
? `translateY(-50%) translateX(${balls.trans.parentElement.offsetWidth - 60}px)`
|
||
: 'translateY(-50%)';
|
||
}
|
||
// .animate-none — instant
|
||
if (balls.none) {
|
||
balls.none.style.transition = 'none';
|
||
balls.none.style.left = moved ? 'calc(100% - 40px)' : '14px';
|
||
balls.none.style.backgroundColor = moved ? 'var(--theme-info)' : 'var(--theme-primary)';
|
||
}
|
||
}, 2500);
|
||
</script>
|
||
</body>
|
||
</html>
|