generated from ztimson/template
Improved demo
This commit is contained in:
155
index.html
155
index.html
@@ -417,8 +417,7 @@
|
||||
<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 bs-2 be-2 h-100 w-50 start-0 top-0"></div>
|
||||
<div class="pos-abs b-danger be-2 h-100 w-50 start-50 top-0"></div>
|
||||
<div class="pos-abs b-danger be-2 h-100 w-50 start-0 top-0"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -580,30 +579,30 @@
|
||||
|
||||
<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-lighter p-2 br-2 fs-1 b-1 fg-text">.bg-primary-lighter</div>
|
||||
<div class="bg-primary p-2 br-2 fs-1 b-1 fg-text">.bg-primary</div>
|
||||
<div class="bg-primary-darker p-2 br-2 fs-1 b-1 fg-text">.bg-primary-darker</div>
|
||||
<div class="bg-success-lighter p-2 br-2 fs-1 b-1 fg-text">.bg-success-lighter</div>
|
||||
<div class="bg-success p-2 br-2 fs-1 b-1 fg-text">.bg-success</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-danger-lighter p-2 br-2 fs-1 b-1 fg-text">.bg-danger-lighter</div>
|
||||
<div class="bg-danger p-2 br-2 fs-1 b-1 fg-text">.bg-danger</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-warn-lighter p-2 br-2 fs-1 b-1 fg-text">.bg-warn-lighter</div>
|
||||
<div class="bg-warn p-2 br-2 fs-1 b-1 fg-text">.bg-warn</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-accent-lighter p-2 br-2 fs-1 b-1 fg-text">.bg-accent-lighter</div>
|
||||
<div class="bg-accent p-2 br-2 fs-1 b-1 fg-text">.bg-accent</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-info-lighter p-2 br-2 fs-1 b-1 fg-text">.bg-info-lighter</div>
|
||||
<div class="bg-info p-2 br-2 fs-1 b-1 fg-text">.bg-info</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-muted-lighter p-2 br-2 fs-1 b-1 fg-text">.bg-muted-lighter</div>
|
||||
<div class="bg-muted p-2 br-2 fs-1 b-1 fg-text">.bg-muted</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-surface-lighter p-2 br-2 fs-1 b-1 fg-text">.bg-surface-lighter</div>
|
||||
<div class="bg-surface p-2 br-2 fs-1 b-1 fg-text">.bg-surface</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>
|
||||
|
||||
@@ -749,24 +748,42 @@
|
||||
</div>
|
||||
|
||||
<div class="sub-section">
|
||||
<div class="sub-label">Justify — <span class="chip">.justify-[start|center|end|between|around|evenly]</span></div>
|
||||
<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 justify-start gap-1 bg-darker p-2 br-2"><span class="fg-muted fs-1 ms-3">.justify-start</span><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 class="flex-r justify-center gap-1 bg-darker p-2 br-2"><span class="fg-muted fs-1 ms-3">.justify-center</span><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 class="flex-r justify-end gap-1 bg-darker p-2 br-2"><span class="fg-muted fs-1">.justify-end</span><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 class="flex-r justify-between bg-darker p-2 br-2"><span class="fg-muted fs-1">.justify-between</span><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 class="flex-r justify-around bg-darker p-2 br-2"><span class="fg-muted fs-1">.justify-around</span><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 class="flex-r justify-evenly bg-darker p-2 br-2"><span class="fg-muted fs-1">.justify-evenly</span><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 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-start</div>
|
||||
<div class="align-self-center bg-accent fg-white p-1 br-1 fs-1">.align-self-center</div>
|
||||
<div class="align-self-end bg-info fg-white p-1 br-1 fs-1">.align-self-end</div>
|
||||
<div class="align-self-stretch bg-success fg-white p-1 br-1 fs-1 flex-r align-items-center">.align-self-stretch</div>
|
||||
<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>
|
||||
|
||||
@@ -774,19 +791,19 @@
|
||||
<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-grow-1</div>
|
||||
<div class="flex-grow-2 bg-accent fg-white p-2 br-2 fs-1 align-x">.flex-grow-2</div>
|
||||
<div class="flex-grow-3 bg-info fg-white p-2 br-2 fs-1 align-x">.flex-grow-3</div>
|
||||
<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-fill</div>
|
||||
<div class="flex-fill bg-success fg-white p-2 br-2 fs-1 align-x">.flex-fill</div>
|
||||
<div class="flex-fill-even bg-warn fg-white p-2 br-2 fs-1 align-x">.flex-fill-even</div>
|
||||
<div class="flex-fill-even bg-warn fg-white p-2 br-2 fs-1 align-x">.flex-fill-even</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 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-shrink-0</div>
|
||||
<div class="flex-shrink-1 bg-muted fg-white p-2 br-2 fs-1">.flex-shrink-1</div>
|
||||
<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>
|
||||
@@ -795,7 +812,7 @@
|
||||
<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-nowrap</div>
|
||||
<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>
|
||||
@@ -803,7 +820,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1">
|
||||
<div class="fg-muted fs-1 mb-2">.flex-wrap</div>
|
||||
<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>
|
||||
@@ -814,7 +831,7 @@
|
||||
</div>
|
||||
|
||||
<div class="sub-section">
|
||||
<div class="sub-label">Order — <span class="chip">.order-[0–5]</span></div>
|
||||
<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>
|
||||
@@ -824,7 +841,7 @@
|
||||
</div>
|
||||
|
||||
<div class="sub-section">
|
||||
<div class="sub-label">Gap — <span class="chip">.gap-[0–5]</span></div>
|
||||
<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>
|
||||
@@ -1152,10 +1169,10 @@
|
||||
<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-warn 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-warn 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-warn 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-warn 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 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>
|
||||
|
||||
@@ -1199,26 +1216,28 @@
|
||||
|
||||
<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 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 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 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>
|
||||
<p class="fg-muted fs-1" style="max-width:240px">Unlike <span class="fg-accent">box-shadow</span>, filter drop-shadow follows the actual shape of irregular elements.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1304,14 +1323,14 @@
|
||||
<h2>Visibility</h2><span class="section-id">utility</span>
|
||||
</div>
|
||||
<div class="syntax">.[hidden|visible]-[bp]</div>
|
||||
<div class="demo-card flex-r gap-3 align-items-center">
|
||||
<div class="b-1 br-2 p-2">
|
||||
<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>
|
||||
<p class="fg-muted fs-1 ms-2">Note: <span class="fg-accent">.hidden</span> uses <span class="fg-accent">visibility:hidden</span> — it preserves layout space. Use <span class="fg-accent">.d-none</span> to remove from flow entirely.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user