ztimson/css-utils
1
0
Fork 0
generated from ztimson/template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: ztimson:cbab6e920fbd9ab0fec97df8b45e2c46c5e55ead
Branches Tags
ztimson:master
ztimson:2.1.0 ztimson:2.0.4 ztimson:2.0.3 ztimson:2.0.2 ztimson:2.0.1 ztimson:2.0.0 ztimson:1.3.5 ztimson:1.3.4 ztimson:1.3.3 ztimson:1.3.2 ztimson:1.3.1 ztimson:1.3.0 ztimson:1.2.1 ztimson:1.2.0 ztimson:1.1.5 ztimson:1.1.4 ztimson:1.1.3 ztimson:1.1.2 ztimson:1.1.1 ztimson:1.1.0 ztimson:1.0.6 ztimson:1.0.5 ztimson:1.0.4 ztimson:1.0.3 ztimson:1.0.2 ztimson:1.0.1
..
compare: ztimson:76638997594ab4f144b74b812c7160f82d0eb22b
Branches Tags
ztimson:master
ztimson:2.1.0 ztimson:2.0.4 ztimson:2.0.3 ztimson:2.0.2 ztimson:2.0.1 ztimson:2.0.0 ztimson:1.3.5 ztimson:1.3.4 ztimson:1.3.3 ztimson:1.3.2 ztimson:1.3.1 ztimson:1.3.0 ztimson:1.2.1 ztimson:1.2.0 ztimson:1.1.5 ztimson:1.1.4 ztimson:1.1.3 ztimson:1.1.2 ztimson:1.1.1 ztimson:1.1.0 ztimson:1.0.6 ztimson:1.0.5 ztimson:1.0.4 ztimson:1.0.3 ztimson:1.0.2 ztimson:1.0.1

3 Commits
cbab6e920f ... 7663899759

Author SHA1 Message Date
ztimson
7663899759 Added missing cdn link
All checks were successful
Publish Library / Build Container (push) Successful in 12s
Details
Publish Library / Build NPM Project (push) Successful in 17s
Details
Publish Library / Tag Version (push) Successful in 8s
Details
2026-07-25 09:23:17 -04:00
ztimson
8daa9be629 Improved demo
All checks were successful
Publish Library / Build Container (push) Successful in 13s
Details
Publish Library / Build NPM Project (push) Successful in 17s
Details
Publish Library / Tag Version (push) Successful in 7s
Details
2026-07-25 09:19:37 -04:00
ztimson
3c946514d7 More demo cleanup
All checks were successful
Publish Library / Build Container (push) Successful in 13s
Details
Publish Library / Build NPM Project (push) Successful in 16s
Details
Publish Library / Tag Version (push) Successful in 9s
Details
2026-07-25 03:55:04 -04:00
3 changed files with 131 additions and 110 deletions
Expand all files Collapse all files

227
index.html
View File

@@ -303,7 +303,8 @@
@import url("@ztimson/css-utils/dist/css-utils.min.css"); @import url("@ztimson/css-utils/dist/css-utils.min.css");
@import url("@ztimson/css-utils/src/main.scss");</code></pre> @import url("@ztimson/css-utils/src/main.scss");</code></pre>
<div class="sub-label">CDN</div> <div class="sub-label">CDN</div>
<pre class="bg-darker p-3 br-2 fg-success fs-1"><code>&lt;link rel="stylesheet" href="https://css.zakscode.com/dist/css-utils.css"&gt;</code></pre> <pre class="bg-darker p-3 br-2 fg-success fs-1"><code>&lt;link rel="stylesheet" href="https://css.zakscode.com/dist/css-utils.css"&gt;
&lt;link rel="stylesheet" href="https://css.zakscode.com/dist/css-utils.min.css"&gt;</code></pre>
</div> </div>
</div> </div>
@@ -367,12 +368,13 @@
</div> </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> <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"> <div class="demo-card flex-r flex-wrap gap-2">
<span class="chip">.[no-]fix</span> <span class="chip">.fix</span>
<span class="chip">.[no-]fix-anchor</span> <span class="chip">.fix-anchor</span>
<span class="chip">.[no-]fix-button</span> <span class="chip">.fix-button</span>
<span class="chip">.[no-]fix-dom</span> <span class="chip">.fix-dom</span>
<span class="chip">.[no-]fix-focus</span> <span class="chip">.fix-focus</span>
<span class="chip">.[no-]fix-font</span> <span class="chip">.fix-font</span>
<span class="chip">.fix-scrollbar</span>
<span class="chip">.reset</span> <span class="chip">.reset</span>
</div> </div>
<div class="demo-card mt-3"> <div class="demo-card mt-3">
@@ -380,8 +382,8 @@
<div class="fix-anchor mb-3"> <div class="fix-anchor mb-3">
<a>This link uses .fix-anchor — styled with theme color, underlines on hover with cursor</a> <a>This link uses .fix-anchor — styled with theme color, underlines on hover with cursor</a>
</div> </div>
<div class="reset"> <div>
<a>This link uses .no-fix / reset — inherits all styles, no decoration</a> <a class="reset">Use <span class="fg-accent">.reset</span> to remove fixes & styling</a>
</div> </div>
</div> </div>
</div> </div>
@@ -416,8 +418,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-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-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 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-0 top-0"></div>
<div class="pos-abs b-danger be-2 h-100 w-50 start-50 top-0"></div>
</div> </div>
</div> </div>
</div> </div>
@@ -579,30 +580,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="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="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-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-primary p-2 br-2 fs-1 b-1 fg-text">.bg-primary</div>
<div class="bg-success p-2 br-2 fs-1 b-1 fg-text">.bg-success</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-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-success p-2 br-2 fs-1 b-1 fg-text">.bg-success</div>
<div class="bg-danger p-2 br-2 fs-1 b-1 fg-text">.bg-danger</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-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-danger p-2 br-2 fs-1 b-1 fg-text">.bg-danger</div>
<div class="bg-warn p-2 br-2 fs-1 b-1 fg-text">.bg-warn</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-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-warn p-2 br-2 fs-1 b-1 fg-text">.bg-warn</div>
<div class="bg-accent p-2 br-2 fs-1 b-1 fg-text">.bg-accent</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-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-accent p-2 br-2 fs-1 b-1 fg-text">.bg-accent</div>
<div class="bg-info p-2 br-2 fs-1 b-1 fg-text">.bg-info</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-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-info p-2 br-2 fs-1 b-1 fg-text">.bg-info</div>
<div class="bg-muted p-2 br-2 fs-1 b-1 fg-text">.bg-muted</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-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-muted p-2 br-2 fs-1 b-1 fg-text">.bg-muted</div>
<div class="bg-surface p-2 br-2 fs-1 b-1 fg-text">.bg-surface</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-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>
</div> </div>
@@ -748,24 +749,42 @@
</div> </div>
<div class="sub-section"> <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="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 gap-3 align-items-center">
<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="fg-muted" style="width: 125px">.justify-start</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-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 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>
<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 gap-3 align-items-center">
<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="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> </div>
<div class="sub-section"> <div class="sub-section">
<div class="sub-label">Align Items / Self / Content</div> <div class="sub-label">Align Items / Self / Content</div>
<div class="demo-card flex-r gap-2 b-1" style="height:90px"> <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-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-center</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-end</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-stretch</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> </div>
@@ -773,19 +792,19 @@
<div class="sub-label">Grow / Shrink / Fill</div> <div class="sub-label">Grow / Shrink / Fill</div>
<div class="demo-card flex-c gap-2"> <div class="demo-card flex-c gap-2">
<div class="flex-r 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-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-grow-2</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-grow-3</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>
<div class="flex-r gap-2"> <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-[bp]-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 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-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 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-[bp]-fill-even</div>
</div> </div>
<div class="flex-r gap-2 align-items-center"> <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-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-shrink-1</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>
</div> </div>
@@ -794,7 +813,7 @@
<div class="sub-label">Wrap</div> <div class="sub-label">Wrap</div>
<div class="demo-card flex-r gap-3"> <div class="demo-card flex-r gap-3">
<div style="flex:1"> <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="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 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 2</div>
@@ -802,7 +821,7 @@
</div> </div>
</div> </div>
<div style="flex:1"> <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="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 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 2</div>
@@ -813,7 +832,7 @@
</div> </div>
<div class="sub-section"> <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="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-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-1 bg-success fg-white p-2 br-2 fs-1">#2 / .order-1</div>
@@ -823,7 +842,7 @@
</div> </div>
<div class="sub-section"> <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="demo-card flex-c gap-2">
<div class="flex-r gap-3 bg-darker p-2 br-2 align-items-center"> <div class="flex-r gap-3 bg-darker p-2 br-2 align-items-center">
<span class="fg-muted fs-1">.gap-0</span> <span class="fg-muted fs-1">.gap-0</span>
@@ -1151,10 +1170,10 @@
<div class="sub-section"> <div class="sub-section">
<div class="sub-label">Directional — <span class="chip">.shadow-[top|bottom|start|end]</span></div> <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="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-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-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-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-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> </div>
@@ -1198,26 +1217,28 @@
<div class="sub-section"> <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="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="demo-card">
<div class="flex-c align-items-center gap-2"> <p class="fg-muted fs-1 mb-3">Unlike <span class="fg-accent">box-shadow</span>, filter drop-shadow respects transparency</p>
<svg width="60" height="60" viewBox="0 0 60 60" class="shadow-drop-sm"> <div class="flex-r gap-5 align-items-center">
<polygon points="30,4 56,52 4,52" fill="var(--theme-primary)"/> <div class="flex-c align-items-center gap-2">
</svg> <svg width="60" height="60" viewBox="0 0 60 60" class="shadow-drop-sm">
<span class="fs-1 fg-muted">.shadow-drop-sm</span> <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 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> </div>
</div> </div>
@@ -1264,31 +1285,35 @@
</div> </div>
<div class="syntax">Margin: .m[b|e|s|t|x|y]-[bp]-[0–5|auto]</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="syntax">Padding: .p[b|e|s|t|x|y]-[bp]-[0–5]</div>
<div class="demo-card flex-r flex-wrap gap-1 align-items-start"> <div class="demo-card flex-c flex-wrap gap-1 align-items-start mt-3">
<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>
<div class="demo-card flex-r flex-wrap gap-1 align-items-start mt-3">
<div class="bg-warn b-1 b-warn"><div class="bg-success mt-3 b-1 b-success fg-white fs-1">.mt-3</div></div>
<div class="bg-warn b-1 b-warn"><div class="bg-success mb-3 b-1 b-success fg-white fs-1">.mb-3</div></div>
<div class="bg-warn b-1 b-warn"><div class="bg-success ms-3 b-1 b-success fg-white fs-1">.ms-3</div></div>
<div class="bg-warn b-1 b-warn"><div class="bg-success me-3 b-1 b-success fg-white fs-1">.me-3</div></div>
<div class="bg-warn b-1 b-warn"><div class="bg-success mx-3 b-1 b-success fg-white fs-1">.mx-3</div></div>
<div class="bg-warn b-1 b-warn"><div class="bg-success my-3 b-1 b-success fg-white fs-1">.my-3</div></div>
<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="demo-card mt-3">
<div class="sub-label">Directional padding</div>
<div class="flex-r flex-wrap gap-2"> <div class="flex-r flex-wrap gap-2">
<div class="bg-success pt-3 b-1 b-success fg-white fs-1">.pt-3</div> <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 class="bg-success pb-3 b-1 b-success fg-white fs-1">.pb-3</div> <div>
<div class="bg-success ps-3 b-1 b-success fg-white fs-1">.ps-3</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 class="bg-success pe-3 b-1 b-success fg-white fs-1">.pe-3</div> </div>
<div class="bg-success px-3 b-1 b-success fg-white fs-1">.px-3</div> <div>
<div class="bg-success py-3 b-1 b-success fg-white fs-1">.py-3</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> </div>
</div> </div>
@@ -1299,14 +1324,14 @@
<h2>Visibility</h2><span class="section-id">utility</span> <h2>Visibility</h2><span class="section-id">utility</span>
</div> </div>
<div class="syntax">.[hidden|visible]-[bp]</div> <div class="syntax">.[hidden|visible]-[bp]</div>
<div class="demo-card flex-r gap-3 align-items-center"> <div class="demo-card">
<div class="b-1 br-2 p-2"> <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="b-dash mb-2">
<div class="hidden b-1 p-2 br-2 fg-muted fs-1">.hidden</div> <div class="hidden b-1 p-2 br-2 fg-muted fs-1">.hidden</div>
</div> </div>
<div class="visible bg-primary fg-white p-2 br-2 fs-1">.visible</div> <div class="visible bg-primary fg-white p-2 br-2 fs-1">.visible</div>
</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>
</div> </div>

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "@ztimson/css-utils", "name": "@ztimson/css-utils",
"version": "2.0.0", "version": "2.0.1",
"description": "CSS Utility Classes", "description": "CSS Utility Classes",
"readme": "README.md", "readme": "README.md",
"scripts": { "scripts": {

12
src/main.scss
View File

@@ -238,10 +238,6 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
@include color-variant('danger', 'danger'); @include color-variant('danger', 'danger');
.bg-transparent { background-color: transparent !important; } .bg-transparent { background-color: transparent !important; }
.bg-container {
background-color: var(--theme-clear) !important;
color: var(--theme-text) !important;
}
// Lighter/Darker pseudo variants // Lighter/Darker pseudo variants
@each $color in ('primary', 'accent', 'background', 'surface', 'info', 'success', 'warn', 'danger', 'muted') { @each $color in ('primary', 'accent', 'background', 'surface', 'info', 'success', 'warn', 'danger', 'muted') {
@@ -349,10 +345,10 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
.shadow,.shadow-3 { box-shadow: 0 4px 6px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.08) !important; } .shadow,.shadow-3 { box-shadow: 0 4px 6px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.08) !important; }
.shadow-4 { box-shadow: 0 10px 15px rgba(0,0,0,0.10), 0 4px 6px rgba(0,0,0,0.06) !important; } .shadow-4 { box-shadow: 0 10px 15px rgba(0,0,0,0.10), 0 4px 6px rgba(0,0,0,0.06) !important; }
.shadow-5 { box-shadow: 0 20px 25px rgba(0,0,0,0.12), 0 10px 10px rgba(0,0,0,0.06) !important; } .shadow-5 { box-shadow: 0 20px 25px rgba(0,0,0,0.12), 0 10px 10px rgba(0,0,0,0.06) !important; }
.shadow-top { box-shadow: 0 -4px 6px rgba(0,0,0,0.08) !important; } .shadow-top { box-shadow: 0 -4px 6px rgba(0,0,0,0.10) !important; }
.shadow-bottom { box-shadow: 0 4px 6px rgba(0,0,0,0.08) !important; } .shadow-bottom { box-shadow: 0 4px 6px rgba(0,0,0,0.10) !important; }
.shadow-start { box-shadow: -4px 0 6px rgba(0,0,0,0.08) !important; } .shadow-start { box-shadow: -4px 0 6px rgba(0,0,0,0.10) !important; }
.shadow-end { box-shadow: 4px 0 6px rgba(0,0,0,0.08) !important; } .shadow-end { box-shadow: 4px 0 6px rgba(0,0,0,0.10) !important; }
.shadow-inset-1 { box-shadow: inset 0 1px 2px rgba(0,0,0,0.10) !important; } .shadow-inset-1 { box-shadow: inset 0 1px 2px rgba(0,0,0,0.10) !important; }
.shadow-inset-2 { box-shadow: inset 0 2px 6px rgba(0,0,0,0.12) !important; } .shadow-inset-2 { box-shadow: inset 0 2px 6px rgba(0,0,0,0.12) !important; }
.shadow-drop-sm { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25)) !important; } .shadow-drop-sm { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25)) !important; }