2024-11-12 14:32:22 -05:00
<!Doctype>
2024-11-17 23:53:24 -05:00
< html lang = "en" class = "fix" >
2024-11-12 14:32:22 -05:00
< head >
2024-11-17 23:53:24 -05:00
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta name = "description" class = "momentum-description" content = "Enterprise Resource Planning" / >
2024-11-17 23:59:25 -05:00
< title > @ztimson/css-utils< / title >
< link href = "/favicon.webp" rel = "icon" >
2024-11-12 14:32:22 -05:00
2024-11-17 23:53:24 -05:00
< 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.css" rel = "stylesheet" >
< style >
2024-11-19 19:32:46 -05:00
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-thumb {
width: 6px;
height: 6px;
margin: 0 1px;
border-radius: 3px;
background: #777;
cursor: pointer;
}
::-webkit-scrollbar-corner {
background: rgba(0,0,0,0);
}
2024-11-17 23:53:24 -05:00
* {
font-family: Roboto, sans-serif !important;
scroll-behavior: smooth;
}
ul,li {
text-decoration: none;
list-style: none;
margin: 0;
}
.animate-example {
--theme-animation: 1.5s;
left: 10px;
top: calc(50% - 10px);
opacity: 100%;
}
.animate-example.animated {
background: var(--theme-accent);
transform: rotate(180deg);
opacity: 25%;
}
2024-11-19 19:32:46 -05:00
.animate-example.animated.animate,
.animate-example.animated.animate-pos {
left: 110px;
}
2024-11-17 23:53:24 -05:00
.box {
width: 20px;
height: 20px;
background: var(--theme-primary);
}
.inline-code {
display: inline-block;
padding: 5px;
background: #f3f3f3;
2024-11-19 19:32:46 -05:00
word-break: break-word;
2024-11-17 23:53:24 -05:00
}
< / 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 >
2024-11-12 14:32:22 -05:00
< / head >
2024-11-19 19:32:46 -05:00
< body class = "theme-light p-4 flex-r justify-center" >
2024-11-17 23:53:24 -05:00
< div class = "clamp flex-c z-1" >
< div id = "top" class = "flex-grow-1 bg-clear shadow p-3" >
< h1 class = "mb-0" > @ztimson/css-utils< / h1 >
< hr class = "mb-3" >
< p > CSS Utils is a css library based on bootstrap. At 1/3 the size, its all the utilities without the bloat.< / p >
< p > Some additional utilities have been added & a few have been renamed to conform to convention or remove redundancy.< / p >
< / div >
< h2 id = "setup" class = "mt-4 mb-3" > Setup< / h2 >
< div class = "flex-grow-1 bg-clear shadow p-3" >
< h3 id = "install" > Install< / h3 >
< h4 > NPM< / h4 >
< pre > < code class = "language-scss" >
// Install
npm install @ztimson/css-utils
// Import one of: (CSS/minified/SCSS)
@import url("@ztimson/css-utils/dist/css-utils.css");
@import url("@ztimson/css-utils/dist/css-utils.min.css");
@import url("@ztimson/css-utils/src/main.scss");
< / code > < / pre >
< br >
< h4 > Script Tags< / h4 >
< pre > < code class = "language-html" >
< !-- Include one of -->
< link rel="stylesheet" href="https://css.zakscode.com/dist/css-utils.css" > < /link>
< link rel="stylesheet" href="https://css.zakscode.com/dist/css-utils.min.css" > < /link>
< link rel="stylesheet" href="https://css.zakscode.com/src/main.scss" > < /link>
< / code > < / pre >
< / div >
< div class = "flex-grow-1 bg-clear shadow p-3 mt-4" >
< h3 id = "theming" > Theming< / h3 >
< p > Theming is minimal since its so opinionated. Its all done through CSS variables allowing runtime manipulation without having to recompile.< / p >
< pre > < code class = "language-scss" >
// Theme colors -- what ever you like
--theme-backdrop: #dddddd; // Background color of body, not to be confused with `--theme-clear`
--theme-primary: #ff0000;
--theme-accent: #0000ff;
--theme-info: #6157cc;
--theme-success: #65c147;
--theme-warn: #d88750;
--theme-danger: #bf4f4f;
--theme-black: black;
--theme-white: white;
// Misc
--theme-animation: 0.2s linear; // Animation style
--theme-content-width: 1100px; // Max width of `.clamped` content
--theme-font: Arial, sans-serif; // Forces font globally
// Light theme
.theme-light {
--theme-clear: #ffffff; // Content background (Usually white or off-black which contrasts --theme-text)
--theme-text: #000000; // Text color (Should contrast --theme-clear)
--theme-muted: #6c757d; // Muted text color (Should have less than contrast than --theme-text)
}
// Dark theme
.theme-dark {
--theme-clear: #2e2e2e; // Content background (Usually white or off-black which contrasts --theme-text)
--theme-text: #ffffff; // Text color (Should contrast --theme-clear)
--theme-muted: #cccccc; // Muted text color (Should have less than contrast than --theme-text)
}
// Multiple themes can be toggled via CSS classes
.theme-custom {
...
}
< / code > < / pre >
< p > The generated breakpoints & margin/padding sizes can also be adjusted through SCSS.< / p >
< pre > < code class = "language-scss" >
$breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px); // Device size
$sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5rem); // Padding/Margin, etc...
< / code > < / pre >
< / div >
< h2 id = "utilities" class = "mt-4 mb-3" > Utilities< / h2 >
< div class = "flex-grow-1 bg-clear shadow p-3" >
< h3 id = "alignment" > Alignment< / h3 >
< div class = "inline-code" > .align-[x|y]-[xs|sm|md|lg|xl]-[start|end]< / div >
< br > < br >
< p > < span class = "inline-code" > text-align< / span > & < span class = "inline-code" > vertical-align< / span > are used with < span class = "inline-code" > align-x< / span > & < span class = "inline-code" > align-y< / span > respectively.< / p >
< div class = "flex-r" >
< div class = "flex-fill-even m-1 b-1 p-1" >
< div class = "align-x-start" >
< div class = "b-1 inline-code" > .align-x-start< / div >
< / div >
< div class = "align-x" >
< div class = "b-1 inline-code" > .align-x< / div >
< / div >
< div class = "align-x-end" >
< div class = "b-1 inline-code" > .align-x-end< / div >
< / div >
< / div >
< table class = "flex-fill-even b-1 m-1" >
< tr >
< td class = "align-y-end align-x-start" >
< span class = "b-1 inline-code" > .align-y-end< / span >
< / td >
< td class = "align-y align-x" >
< span class = "b-1 inline-code" > .align-y< / span >
< / td >
< td class = "align-y-start align-x-end" >
< span class = "b-1 inline-code" > .align-y-start< / span >
< / td >
< / tr >
< / table >
< / div >
< / div >
< div class = "mt-4 flex-grow-1 bg-clear shadow p-3" >
< h3 id = "animations" > Animations< / h3 >
< div class = "inline-code" > .animate-[color|none|opacity|pos|trans]< / div >
< br > < br >
< p > Style changes will be animated using the < span class = "inline-code" > --theme-animation< / span > variable< / p >
< div class = "flex-r align-items-center mb-2" >
< div >
< p class = "m-0" > < span class = "inline-code" > .animate< / span > < / p >
< / div >
< div class = "flex-fill-even pos-rel" >
< div class = "box animate animate-example pos-abs" > < / div >
< / div >
< / div >
< div class = "flex-r align-items-center mb-2" >
< div >
< p class = "m-0" > < span class = "inline-code" > .animate-color< / span > < / p >
< / div >
< div class = "flex-fill-even pos-rel" >
< div class = "box animate-color animate-example pos-abs" > < / div >
< / div >
< / div >
< div class = "flex-r align-items-center mb-2" >
< div >
< p class = "m-0" > < span class = "inline-code" > .animate-opacity< / span > < / p >
< / div >
< div class = "flex-fill-even pos-rel" >
< div class = "box animate-opacity animate-example pos-abs" > < / div >
< / div >
< / div >
< div class = "flex-r align-items-center mb-2" >
< div >
< p class = "m-0" > < span class = "inline-code" > .animate-none< / span > < / p >
< / div >
< div class = "flex-fill-even pos-rel" >
< div class = "box animate animate-none animate-example pos-abs" > < / div >
< / div >
< / div >
< div class = "flex-r align-items-center mb-2" >
< div >
< p class = "m-0" > < span class = "inline-code" > .animate-pos< / span > < / p >
< / div >
< div class = "flex-fill-even pos-rel" >
< div class = "box animate-pos animate-example pos-abs" > < / div >
< / div >
< / div >
< div class = "flex-r align-items-center mb-2" >
< div >
< p class = "m-0" > < span class = "inline-code" > .animate-trans< / span > < / p >
< / div >
< div class = "flex-fill-even pos-rel" >
< div class = "box animate-trans animate-example pos-abs" > < / div >
< / div >
< / div >
< script >
const targets = document.querySelectorAll('.animate-example');
let animated = true;
setInterval(() => {
targets.forEach(t => t.classList[animated ? 'remove' : 'add']('animated'))
animated = !animated;
}, 3000);
< / script >
< / div >
< div class = "mt-4 flex-grow-1 bg-clear shadow p-3" >
< h3 id = "borders" > Borders< / h3 >
< h4 class = "fs-3" > Color< / h4 >
< div class = "inline-code" > .b-[accent|black|danger|info|muted|primary|success|text|warn|white]< / div >
< br > < br >
< div class = "flex-r flex-wrap" >
< div class = "b-1 b-accent m-2 p-2 inline-code flex-r align-items-center justify-center" > .b-accent< / div >
< div class = "b-1 b-black m-2 p-2 inline-code flex-r align-items-center justify-center" > .b-black< / div >
< div class = "b-1 b-danger m-2 p-2 inline-code flex-r align-items-center justify-center" > .b-danger< / div >
< div class = "b-1 b-info m-2 p-2 inline-code flex-r align-items-center justify-center" > .b-info< / div >
< div class = "b-1 b-muted m-2 p-2 inline-code flex-r align-items-center justify-center" > .b-muted< / div >
< div class = "b-1 b-primary m-2 p-2 inline-code flex-r align-items-center justify-center" > .b-primary< / div >
< div class = "b-1 b-success m-2 p-2 inline-code flex-r align-items-center justify-center" > .b-success< / div >
< div class = "b-1 b-text m-2 p-2 inline-code flex-r align-items-center justify-center" > .b-text< / div >
< div class = "b-1 b-warn m-2 p-2 inline-code flex-r align-items-center justify-center" > .b-warn< / div >
< div class = "b-1 b-white m-2 p-2 inline-code flex-r align-items-center justify-center" > .b-white< / div >
< / div >
< br >
< h4 class = "fs-3" > Radius< / h4 >
< div class = "inline-code" > .br-[0-5]< / div >
< br > < br >
< div class = "flex-r flex-wrap" >
< div class = "b-1 br-0 m-2 inline-code flex-r align-items-center justify-center" style = "height: 90px; width: 90px" > .br-0< / div >
< div class = "b-1 br-1 m-2 inline-code flex-r align-items-center justify-center" style = "height: 90px; width: 90px" > .br-1< / div >
< div class = "b-1 br-2 m-2 inline-code flex-r align-items-center justify-center" style = "height: 90px; width: 90px" > .br-2< / div >
< div class = "b-1 br-3 m-2 inline-code flex-r align-items-center justify-center" style = "height: 90px; width: 90px" > .br-3< / div >
< div class = "b-1 br-4 m-2 inline-code flex-r align-items-center justify-center" style = "height: 90px; width: 90px" > .br-4< / div >
< div class = "b-1 br-5 m-2 inline-code flex-r align-items-center justify-center" style = "height: 90px; width: 90px" > .br-5< / div >
< div class = "b-1 br-pill m-2 inline-code flex-r align-items-center justify-center" style = "height: 90px; width: 120px" > .br-pill< / div >
< div class = "b-1 br-circle m-2 inline-code flex-r align-items-center justify-center" style = "height: 90px; width: 90px" > .br-circle< / div >
< / div >
< br >
< h4 class = "fs-3" > Style< / h4 >
< div class = "inline-code" > .b-[xs|sm|md|lg|xl]-[dash|dot|double|none|solid]< / div >
< br > < br >
< div class = "flex-r flex-wrap" >
< div class = "b-1 b-dash m-2 inline-code flex-r align-items-center justify-center" style = "height: 90px; width: 90px" > .b-dash< / div >
< div class = "b-1 b-dot m-2 inline-code flex-r align-items-center justify-center" style = "height: 90px; width: 90px" > .b-dot< / div >
< div class = "b-1 b-double m-2 inline-code flex-r align-items-center justify-center" style = "height: 90px; width: 90px" > .b-double< / div >
< div class = "b-1 b-none m-2 inline-code flex-r align-items-center justify-center" style = "height: 90px; width: 90px" > .b-none< / div >
< div class = "b-1 b-solid m-2 inline-code flex-r align-items-center justify-center" style = "height: 90px; width: 90px" > .b-solid< / div >
< / div >
< br >
< h4 class = "fs-3" > Width< / h4 >
< div class = "inline-code" > .b[b|e|s|t]-[xs|sm|md|lg|xl]-[0-5]< / div >
< br > < br >
< div class = "flex-r flex-wrap" >
< div class = "b-0 m-2 inline-code flex-r align-items-center justify-center" style = "height: 90px; width: 90px" > .b-0< / div >
< div class = "b-1 m-2 inline-code flex-r align-items-center justify-center" style = "height: 90px; width: 90px" > .b-1< / div >
< div class = "b-2 m-2 inline-code flex-r align-items-center justify-center" style = "height: 90px; width: 90px" > .b-2< / div >
< div class = "b-3 m-2 inline-code flex-r align-items-center justify-center" style = "height: 90px; width: 90px" > .b-3< / div >
< div class = "b-4 m-2 inline-code flex-r align-items-center justify-center" style = "height: 90px; width: 90px" > .b-4< / div >
< div class = "b-5 m-2 inline-code flex-r align-items-center justify-center" style = "height: 90px; width: 90px" > .b-5< / div >
< / div >
< div class = "flex-r flex-wrap" >
< div class = "bb-5 m-2 inline-code flex-r align-items-center justify-center" style = "height: 90px; width: 90px" > .bb-5< / div >
< div class = "be-5 m-2 inline-code flex-r align-items-center justify-center" style = "height: 90px; width: 90px" > .be-5< / div >
< div class = "bs-5 m-2 inline-code flex-r align-items-center justify-center" style = "height: 90px; width: 90px" > .bs-5< / div >
< div class = "bt-5 m-2 inline-code flex-r align-items-center justify-center" style = "height: 90px; width: 90px" > .bt-5< / div >
< / div >
< / div >
< div class = "mt-4 flex-grow-1 bg-clear shadow p-3" >
< h3 id = "colors" > Colors< / h3 >
< h4 class = "fs-3" > Background< / h4 >
< div class = "inline-code" > .bg-[accent|backdrop|black|clear|danger|info|muted|primary|success|transparent|text|warn|white]< / div >
< br > < br >
< div class = "flex-r flex-wrap" >
< div class = "b-1 bg-accent m-2 p-2 inline-code flex-r align-items-center justify-center" > .bg-accent< / div >
< div class = "b-1 bg-backdrop m-2 p-2 inline-code flex-r align-items-center justify-center" > .bg-backdrop< / div >
< div class = "b-1 bg-black fg-white m-2 p-2 inline-code flex-r align-items-center justify-center" > .bg-black< / div >
< div class = "b-1 bg-clear m-2 p-2 inline-code flex-r align-items-center justify-center" > .bg-clear< / div >
< div class = "b-1 bg-danger m-2 p-2 inline-code flex-r align-items-center justify-center" > .bg-danger< / div >
< div class = "b-1 bg-info m-2 p-2 inline-code flex-r align-items-center justify-center" > .bg-info< / div >
< div class = "b-1 bg-muted m-2 p-2 inline-code flex-r align-items-center justify-center" > .bg-muted< / div >
< div class = "b-1 bg-primary m-2 p-2 inline-code flex-r align-items-center justify-center" > .bg-primary< / div >
< div class = "b-1 bg-success m-2 p-2 inline-code flex-r align-items-center justify-center" > .bg-success< / div >
< div class = "b-1 bg-transparent m-2 p-2 inline-code flex-r align-items-center justify-center" > .bg-transparent< / div >
< div class = "b-1 bg-text fg-clear m-2 p-2 inline-code flex-r align-items-center justify-center" > .bg-text< / div >
< div class = "b-1 bg-warn m-2 p-2 inline-code flex-r align-items-center justify-center" > .bg-warn< / div >
< div class = "b-1 bg-white m-2 p-2 inline-code flex-r align-items-center justify-center" > .bg-white< / div >
< / div >
< br >
< h4 class = "fs-3" > Borders< / h4 >
< div class = "inline-code" > .b-[accent|black|clear|danger|info|muted|primary|success|text|warn|white]< / div >
< br > < br >
< div class = "flex-r flex-wrap" >
< div class = "b-1 b-accent m-2 p-2 inline-code flex-r align-items-center justify-center" > .b-accent< / div >
< div class = "b-1 b-black m-2 p-2 inline-code flex-r align-items-center justify-center" > .b-black< / div >
< div class = "b-1 b-danger m-2 p-2 inline-code flex-r align-items-center justify-center" > .b-danger< / div >
< div class = "b-1 b-info m-2 p-2 inline-code flex-r align-items-center justify-center" > .b-info< / div >
< div class = "b-1 b-muted m-2 p-2 inline-code flex-r align-items-center justify-center" > .b-muted< / div >
< div class = "b-1 b-primary m-2 p-2 inline-code flex-r align-items-center justify-center" > .b-primary< / div >
< div class = "b-1 b-success m-2 p-2 inline-code flex-r align-items-center justify-center" > .b-success< / div >
< div class = "b-1 b-text m-2 p-2 inline-code flex-r align-items-center justify-center" > .b-text< / div >
< div class = "b-1 b-warn m-2 p-2 inline-code flex-r align-items-center justify-center" > .b-warn< / div >
< div class = "b-1 b-white m-2 p-2 inline-code flex-r align-items-center justify-center" > .b-white< / div >
< / div >
< br >
< h4 class = "fs-3" > Foreground< / h4 >
< div class = "inline-code" > .fg-[accent|black|danger|info|muted|primary|success|text|warn|white]< / div >
< br > < br >
< div class = "flex-r flex-wrap" >
< div class = "b-1 fg-accent m-2 p-2 inline-code flex-r align-items-center justify-center" > .fg-accent< / div >
< div class = "b-1 fg-black m-2 p-2 inline-code flex-r align-items-center justify-center" > .fg-black< / div >
< div class = "b-1 fg-clear m-2 p-2 inline-code flex-r align-items-center justify-center" > .fg-clear< / div >
< div class = "b-1 fg-danger m-2 p-2 inline-code flex-r align-items-center justify-center" > .fg-danger< / div >
< div class = "b-1 fg-info m-2 p-2 inline-code flex-r align-items-center justify-center" > .fg-info< / div >
< div class = "b-1 fg-muted m-2 p-2 inline-code flex-r align-items-center justify-center" > .fg-muted< / div >
< div class = "b-1 fg-primary m-2 p-2 inline-code flex-r align-items-center justify-center" > .fg-primary< / div >
< div class = "b-1 fg-success m-2 p-2 inline-code flex-r align-items-center justify-center" > .fg-success< / div >
< div class = "b-1 fg-text m-2 p-2 inline-code flex-r align-items-center justify-center" > .fg-text< / div >
< div class = "b-1 fg-warn m-2 p-2 inline-code flex-r align-items-center justify-center" > .fg-warn< / div >
< div class = "b-1 fg-white m-2 p-2 inline-code flex-r align-items-center justify-center" > .fg-white< / div >
< / div >
< / div >
< div class = "mt-4 flex-grow-1 bg-clear shadow p-3" >
< h3 id = "cursors" > Cursors< / h3 >
< div class = "inline-code" > .curs-[alias|auto|cell|col-resize|copy|crosshair|default|grab|grabbing|help|hover|move|not-allowed|pointer|progress|row-resize|text|none|wait|vertical-text|zoom-in|zoom-out]< / div >
< br > < br >
< div class = "flex-r flex-wrap" >
< div class = "b-1 b-1 b-1 curs-alias m-2 p-2 inline-code flex-r align-items-center justify-center" > .curs-alias< / div >
< div class = "b-1 b-1 b-1 curs-auto m-2 p-2 inline-code flex-r align-items-center justify-center" > .curs-auto< / div >
< div class = "b-1 b-1 b-1 curs-cell m-2 p-2 inline-code flex-r align-items-center justify-center" > .curs-cell< / div >
< div class = "b-1 b-1 b-1 curs-col-resize m-2 p-2 inline-code flex-r align-items-center justify-center" > .curs-col-resize< / div >
< div class = "b-1 b-1 b-1 curs-copy m-2 p-2 inline-code flex-r align-items-center justify-center" > .curs-copy< / div >
< div class = "b-1 b-1 b-1 curs-crosshair m-2 p-2 inline-code flex-r align-items-center justify-center" > .curs-crosshair< / div >
< div class = "b-1 b-1 b-1 curs-default m-2 p-2 inline-code flex-r align-items-center justify-center" > .curs-default< / div >
< div class = "b-1 b-1 b-1 curs-grab m-2 p-2 inline-code flex-r align-items-center justify-center" > .curs-grab< / div >
< div class = "b-1 b-1 b-1 curs-grabbing m-2 p-2 inline-code flex-r align-items-center justify-center" > .curs-grabbing< / div >
< div class = "b-1 b-1 b-1 curs-help m-2 p-2 inline-code flex-r align-items-center justify-center" > .curs-help< / div >
< div class = "b-1 b-1 b-1 curs-hover m-2 p-2 inline-code flex-r align-items-center justify-center" > .curs-hover< / div >
< div class = "b-1 b-1 b-1 curs-move m-2 p-2 inline-code flex-r align-items-center justify-center" > .curs-move< / div >
< div class = "b-1 b-1 b-1 curs-not-allowed m-2 p-2 inline-code flex-r align-items-center justify-center" > .curs-not-allowed< / div >
< div class = "b-1 b-1 b-1 curs-pointer m-2 p-2 inline-code flex-r align-items-center justify-center" > .curs-pointer< / div >
< div class = "b-1 b-1 b-1 curs-progress m-2 p-2 inline-code flex-r align-items-center justify-center" > .curs-progress< / div >
< div class = "b-1 b-1 b-1 curs-row-resize m-2 p-2 inline-code flex-r align-items-center justify-center" > .curs-row-resize< / div >
< div class = "b-1 b-1 b-1 curs-text m-2 p-2 inline-code flex-r align-items-center justify-center" > .curs-text< / div >
< div class = "b-1 b-1 b-1 curs-none m-2 p-2 inline-code flex-r align-items-center justify-center" > .curs-none< / div >
< div class = "b-1 b-1 b-1 curs-wait m-2 p-2 inline-code flex-r align-items-center justify-center" > .curs-wait< / div >
< div class = "b-1 b-1 b-1 curs-vertical-text m-2 p-2 inline-code flex-r align-items-center justify-center" > .curs-vertical-text< / div >
< div class = "b-1 b-1 b-1 curs-zoom-in m-2 p-2 inline-code flex-r align-items-center justify-center" > .curs-zoom-in< / div >
< div class = "b-1 b-1 b-1 curs-zoom-out m-2 p-2 inline-code flex-r align-items-center justify-center" > .curs-zoom-out< / div >
< / div >
< / div >
< div class = "mt-4 flex-grow-1 bg-clear shadow p-3" >
< h3 id = "display" > Display< / h3 >
< div class = "inline-code" > .d-[xs|sm|md|lg|xl]-[block|flex|grid|inline|inline-block|inline-flex|inline-grid|none|table|table-cell|table-row]< / div >
< / div >
< div class = "mt-4 flex-grow-1 bg-clear shadow p-3" >
< h3 id = "flex" > Flex< / h3 >
< h4 > Direction< / h4 >
< div class = "inline-code" > .flex-[xs|sm|md|lg|xl]-[c|r|rc|rr]< / div >
< br > < br >
< div class = "b-1 flex-r" >
< div class = "flex-c be-1 flex-fill-even" >
< div class = "p-2 bb-1" > .flex-c< / div >
< div class = "flex-c p-2" >
< div class = "inline-code b-1" > Item 1< / div >
< div class = "inline-code b-1" > Item 2< / div >
< div class = "inline-code b-1" > Item 3< / div >
< / div >
< / div >
< div class = "flex-c flex-fill-even" >
< div class = "p-2 bb-1" > .flex-cr< / div >
< div class = "flex-cr p-2" >
< div class = "inline-code b-1" > Item 1< / div >
< div class = "inline-code b-1" > Item 2< / div >
< div class = "inline-code b-1" > Item 3< / div >
< / div >
< / div >
< / div >
< br >
< div class = "b-1 flex-r" >
< div class = "flex-c be-1 flex-fill-even" >
< div class = "p-2 bb-1" > .flex-r< / div >
< div class = "flex-r p-2" >
< div class = "inline-code b-1" > Item 1< / div >
< div class = "inline-code b-1" > Item 2< / div >
< div class = "inline-code b-1" > Item 3< / div >
< / div >
< / div >
< div class = "flex-c flex-fill-even" >
< div class = "p-2 bb-1" > .flex-rr< / div >
< div class = "flex-rr p-2" >
< div class = "inline-code b-1" > Item 1< / div >
< div class = "inline-code b-1" > Item 2< / div >
< div class = "inline-code b-1" > Item 3< / div >
< / div >
< / div >
< / div >
< br >
< h4 > Justify / Align< / h4 >
< div class = "inline-code" > .justify-[xs|sm|md|lg|xl]-[around|between|center|end|evenly|start]< / div >
< br > < br >
< div class = "b-1 flex-r" >
< div class = "flex-c be-1 flex-fill-even" >
< div class = "p-2 bb-1" > .justify-start< / div >
< div class = "justify-start flex-r p-2" >
< div class = "inline-code b-1" > Item 1< / div >
< div class = "inline-code b-1" > Item 2< / div >
< div class = "inline-code b-1" > Item 3< / div >
< / div >
< / div >
< div class = "flex-c be-1 flex-fill-even" >
< div class = "p-2 bb-1" > .justify-center< / div >
< div class = "justify-center flex-r p-2" >
< div class = "inline-code b-1" > Item 1< / div >
< div class = "inline-code b-1" > Item 2< / div >
< div class = "inline-code b-1" > Item 3< / div >
< / div >
< / div >
< div class = "flex-c flex-fill-even" >
< div class = "p-2 bb-1" > .justify-end< / div >
< div class = "justify-end flex-r p-2" >
< div class = "inline-code b-1" > Item 1< / div >
< div class = "inline-code b-1" > Item 2< / div >
< div class = "inline-code b-1" > Item 3< / div >
< / div >
< / div >
< / div >
< div class = "b-1 flex-r" >
< div class = "flex-c be-1 flex-fill-even" >
< div class = "p-2 bb-1" > .justify-around< / div >
< div class = "justify-around flex-r p-2" >
< div class = "inline-code b-1" > Item 1< / div >
< div class = "inline-code b-1" > Item 2< / div >
< div class = "inline-code b-1" > Item 3< / div >
< / div >
< / div >
< div class = "flex-c be-1 flex-fill-even" >
< div class = "p-2 bb-1" > .justify-between< / div >
< div class = "justify-between flex-r p-2" >
< div class = "inline-code b-1" > Item 1< / div >
< div class = "inline-code b-1" > Item 2< / div >
< div class = "inline-code b-1" > Item 3< / div >
< / div >
< / div >
< div class = "flex-c flex-fill-even" >
< div class = "p-2 bb-1" > .justify-evenly< / div >
< div class = "justify-evenly flex-r p-2" >
< div class = "inline-code b-1" > Item 1< / div >
< div class = "inline-code b-1" > Item 2< / div >
< div class = "inline-code b-1" > Item 3< / div >
< / div >
< / div >
< / div >
< br >
< div class = "inline-code" > .align-[xs|sm|md|lg|xl]-[content|items|self]-[baseline|center|end|start|stretch]< / div >
< br > < br >
< div class = "flex-r b-1 p-2" style = "height: 100px" >
< div class = "align-self-baseline inline-codeDockerfile b-1" > .align-self-baseline< / div >
< div class = "align-self-center inline-code b-1" > .align-self-center< / div >
< div class = "align-self-end inline-code b-1" > .align-self-end< / div >
< div class = "align-self-start inline-code b-1" > .align-self-start< / div >
< div class = "align-self-stretch inline-code b-1" > .align-self-stretch< / div >
< / div >
< br >
< h4 > Order< / h4 >
< div class = "inline-code" > .order-[xs|sm|md|lg|xl]-[0-5]< / div >
< br > < br >
< div class = "flex-r flex-nowrap" >
< div class = "order-5 inline-code b-1" > .order-5< / div >
< div class = "order-4 inline-code b-1" > .order-4< / div >
< div class = "order-3 inline-code b-1" > .order-3< / div >
< div class = "order-2 inline-code b-1" > .order-2< / div >
< div class = "order-1 inline-code b-1" > .order-1< / div >
< div class = "order-0 inline-code b-1" > .order-0< / div >
< / div >
< br >
< h4 > Size< / h4 >
< div class = "inline-code" > .flex-[xs|sm|md|lg|xl]-[grow|shrink]-[0-3]< / div >
< br > < br >
< div class = "flex-r" >
< div class = "flex-grow-1 b-1 inline-code" > .flex-grow-1< / div >
< div class = "flex-shrink-1 b-1 inline-code" > .flex-shrink-1< / div >
< / div >
< div class = "flex-r" >
< div class = "flex-grow-1 b-1 inline-code" > .flex-grow-1< / div >
< div class = "flex-grow-2 b-1 inline-code" > .flex-grow-2< / div >
< / div >
< br >
< div class = "inline-code" > .flex-fill-[even]< / div >
< br > < br >
< div class = "flex-r" >
< div class = "flex-fill b-1 inline-code" > .flex-fill (Matches content ratio)< / div >
< div class = "flex-fill b-1 inline-code" > .flex-fill< / div >
< div class = "flex-fill b-1 inline-code" > .flex-fill< / div >
< / div >
< div class = "flex-r" >
< div class = "flex-fill-even b-1 inline-code" > .flex-fill-even (Doesn't match content ratio)< / div >
< div class = "flex-fill-even b-1 inline-code" > .flex-fill-even< / div >
< div class = "flex-fill-even b-1 inline-code" > .flex-fill-even< / div >
< / div >
< br >
< h4 > Wrap< / h4 >
< div class = "inline-code" > .flex-[xs|sm|md|lg|xl]-[nowrap|wrap]< / div >
< br > < br >
< div class = "b-1 flex-r" >
< div class = "flex-c flex-fill-even be-1" >
< div class = "p-2 bb-1" > .flex-nowrap< / div >
< div class = "flex-r p-2 flex-nowrap" >
< div class = "inline-code b-1 align-x" style = "width: 50%" > Item 1< / div >
< div class = "inline-code b-1 align-x" style = "width: 50%" > Item 2< / div >
< div class = "inline-code b-1 align-x" style = "width: 50%" > Item 3< / div >
< / div >
< / div >
< div class = "flex-c flex-fill-even" >
< div class = "p-2 bb-1" > .flex-wrap< / div >
< div class = "flex-r p-2 flex-wrap" >
< div class = "inline-code b-1 align-x" style = "width: 50%" > Item 1< / div >
< div class = "inline-code b-1 align-x" style = "width: 50%" > Item 2< / div >
< div class = "inline-code b-1 align-x" style = "width: 50%" > Item 3< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "mt-4 flex-grow-1 bg-clear shadow p-3" >
< h3 id = "float" > Float< / h3 >
< div class = "inline-code" > .float-[xs|sm|md|lg|xl]-[end|none|start]< / div >
< br > < br >
< div class = "b-1 overflow-hidden" >
< div class = "float-none b-1 m-1 mb-0 inline-code p-2 flex-r align-items-center justify-center" > .float-none< / div >
< div class = "float-end b-1 m-1 inline-code p-2 flex-r align-items-center justify-center" > .float-end< / div >
< div class = "float-start b-1 m-1 inline-code p-2 flex-r align-items-center justify-center" > .float-start< / div >
< / div >
< / div >
< div class = "mt-4 flex-grow-1 bg-clear shadow p-3" >
< h3 id = "font" > Font Style< / h3 >
< h4 > Decoration< / h4 >
< div class = "inline-code" > .fs-[italic|line-through|none|underline]< / div >
< br > < br >
< div >
< span class = "fs-italic inline-code b-1 p-2" > .fs-italic< / span >
< span class = "fs-line-through inline-code b-1 p-2" > .fs-line-through< / span >
< span class = "fs-none inline-code b-1 p-2" > .fs-none< / span >
< span class = "fs-underline inline-code b-1 p-2" > .fs-underline< / span >
< / div >
< br >
< h4 > Size< / h4 >
< div class = "inline-code" > .fs-[1-7]< / div >
< br > < br >
< div >
< span class = "fs-1 inline-code b-1 p-2" > .fs-1< / span >
< span class = "fs-2 inline-code b-1 p-2" > .fs-2< / span >
< span class = "fs-3 inline-code b-1 p-2" > .fs-3< / span >
< span class = "fs-4 inline-code b-1 p-2" > .fs-4< / span >
< span class = "fs-5 inline-code b-1 p-2" > .fs-5< / span >
< span class = "fs-6 inline-code b-1 p-2" > .fs-6< / span >
< span class = "fs-7 inline-code b-1 p-2" > .fs-7< / span >
< / div >
< br >
< h4 > Weight< / h4 >
< div class = "inline-code" > .fs-[bold|bolder|lighter|normal]< / div >
< br > < br >
< div >
< span class = "fs-bold inline-code b-1 p-2" > .fs-bold< / span >
< span class = "fs-bolder inline-code b-1 p-2" > .fs-bolder< / span >
< span class = "fs-lighter inline-code b-1 p-2" > .fs-lighter< / span >
< span class = "fs-normal inline-code b-1 p-2" > .fs-normal< / span >
< / div >
< br >
< h4 > Wrapping< / h4 >
< div class = "inline-code" > .fs-[break|nowrap|truncate|wrap]< / div >
< br > < br >
< div class = "overflow-hidden" >
< table >
< tr >
< td class = "b-1 p-2 align-y" > .fs-break< / td >
< td class = "b-1 p-1 fs-break" style = "max-width: 600px" >
Lorem ipsum dolor sit amet elitr sit. Consetetur dolore in ipsum consetetur in voluptua ut accusam consetetur commodo voluptua amet dolore ipsum. Sit amet sit
< / td >
< / tr >
< tr >
< td class = "b-1 p-2 align-y" > .fs-nowrap< / td >
< td class = "b-1 p-1 fs-nowrap" style = "max-width: 600px" >
Lorem ipsum dolor sit amet elitr sit. Consetetur dolore in ipsum consetetur in voluptua ut accusam consetetur commodo voluptua amet dolore ipsum. Sit amet sit
< / td >
< / tr >
< tr >
< td class = "b-1 p-2 align-y" > .fs-truncate< / td >
< td class = "b-1 p-1 fs-truncate" style = "max-width: 600px" >
Lorem ipsum dolor sit amet elitr sit. Consetetur dolore in ipsum consetetur in voluptua ut accusam consetetur commodo voluptua amet dolore ipsum. Sit amet sit
< / td >
< / tr >
< tr >
< td class = "b-1 p-2 align-y" > .fs-wrap< / td >
< td class = "b-1 p-1 fs-wrap" style = "max-width: 600px" >
Lorem ipsum dolor sit amet elitr sit. Consetetur dolore in ipsum consetetur in voluptua ut accusam consetetur commodo voluptua amet dolore ipsum. Sit amet sit
< / td >
< / tr >
< / table >
< / div >
< / div >
< div class = "mt-4 flex-grow-1 bg-clear shadow p-3" >
< h3 id = "hover" > Hover< / h3 >
< div class = "inline-code" > .curs-hover|.hover< / div >
< br > < br >
< div class = "flex-r" >
< div class = "curs-hover b-1 m-1 inline-code p-2 flex-r align-items-center justify-center" > .curs-hover< / div >
< div class = "hover b-1 m-1 inline-code p-2 flex-r align-items-center justify-center" > .hover< / div >
< / div >
< / div >
< div class = "mt-4 flex-grow-1 bg-clear shadow p-3" >
< h3 id = "object-fit" > Object Fit< / h3 >
< div class = "inline-code" > .fit-[contain|cover|fill|scale|none]< / div >
< br > < br >
< div class = "flex-r" >
< div class = "b-1 m-2 flex-r justify-center align-items-center pos-rel fit-contain overflow-hidden" style = "width: 150px; height: 150px;" >
< img class = "fit-contain w-100 h-100" alt = "logo" src = "./wave.webp" / >
< span class = "shadow-white pos-abs center" > .fit-contain< / span >
< / div >
< div class = "b-1 m-2 flex-r justify-center align-items-center pos-rel fit-cover overflow-hidden" style = "width: 150px; height: 150px;" >
< img class = "fit-cover w-100 h-100" alt = "logo" src = "./wave.webp" / >
< span class = "shadow-white pos-abs center" > .fit-cover< / span >
< / div >
< div class = "b-1 m-2 flex-r justify-center align-items-center pos-rel fit-fill overflow-hidden" style = "width: 150px; height: 150px;" >
< img class = "fit-fill w-100 h-100" alt = "logo" src = "./wave.webp" / >
< span class = "shadow-white pos-abs center" > .fit-fill< / span >
< / div >
< div class = "b-1 m-2 flex-r justify-center align-items-center pos-rel fit-scale overflow-hidden" style = "width: 150px; height: 150px;" >
< img class = "fit-scale w-100 h-100" alt = "logo" src = "./wave.webp" / >
< span class = "shadow-white pos-abs center" > .fit-scale< / span >
< / div >
< div class = "b-1 m-2 flex-r justify-center align-items-center pos-rel fit-none overflow-hidden" style = "width: 150px; height: 150px;" >
< img class = "fit-none w-100 h-100" alt = "logo" src = "./wave.webp" / >
< span class = "shadow-white pos-abs center" > .fit-none< / span >
< / div >
< / div >
< / div >
2024-11-19 19:32:46 -05:00
< div class = "mt-4 flex-grow-1 bg-clear shadow" >
< div class = "overflow-hidden p-3" >
< h3 id = "overflow" > Overflow< / h3 >
< div class = "inline-code" > .overflow-[x|y]-[auto|hidden|scroll|visible]< / div >
< br > < br >
< div class = "flex-r" >
< div class = "b-1 m-2 overflow-auto" style = "width: 150px; height: 150px;" >
< div style = "width: 300px; height: 300px;" class = "pos-rel" >
< span class = "pos-abs" style = "left: 50%; top: 25%; transform: translate(-50%, -50%)" > .overflow-auto< / span >
< / div >
2024-11-17 23:53:24 -05:00
< / div >
2024-11-19 19:32:46 -05:00
< div class = "b-1 m-2 overflow-hidden" style = "width: 150px; height: 150px;" >
< div style = "width: 300px; height: 300px;" class = "pos-rel" >
< span class = "pos-abs" style = "left: 50%; top: 25%; transform: translate(-50%, -50%)" > .overflow-hidden< / span >
< / div >
2024-11-17 23:53:24 -05:00
< / div >
2024-11-19 19:32:46 -05:00
< div class = "b-1 m-2 overflow-scroll" style = "width: 150px; height: 150px;" >
< div style = "width: 300px; height: 300px;" class = "pos-rel" >
< span class = "pos-abs" style = "left: 50%; top: 25%; transform: translate(-50%, -50%)" > .overflow-scroll< / span >
< / div >
2024-11-17 23:53:24 -05:00
< / div >
2024-11-19 19:32:46 -05:00
< div class = "b-1 m-2 overflow-visible" style = "width: 150px; height: 150px;" >
< div style = "width: 300px; height: 300px;" class = "pos-rel" >
< span class = "pos-abs" style = "left: 50%; top: 25%; transform: translate(-50%, -50%)" > .overflow-visible< / span >
< / div >
2024-11-17 23:53:24 -05:00
< / div >
< / div >
< / div >
< / div >
< div class = "mt-4 flex-grow-1 bg-clear shadow p-3" >
< h3 id = "opacity" > Opacity< / h3 >
< div class = "inline-code" > .opacity-[0|10|20|25|30|33|34|40|50|60|66|70|75|80|90|100]< / div >
< br > < br >
< div >
< div class = "b-1 inline-code o-0" > .o-0< / div >
< div class = "b-1 inline-code o-10" > .o-10< / div >
< div class = "b-1 inline-code o-20" > .o-20< / div >
< div class = "b-1 inline-code o-30" > .o-30< / div >
< div class = "b-1 inline-code o-40" > .o-40< / div >
< div class = "b-1 inline-code o-50" > .o-50< / div >
< div class = "b-1 inline-code o-60" > .o-60< / div >
< div class = "b-1 inline-code o-70" > .o-70< / div >
< div class = "b-1 inline-code o-80" > .o-80< / div >
< div class = "b-1 inline-code o-80" > .o-90< / div >
< div class = "b-1 inline-code o-100" > .o-100< / div >
< / div >
< / div >
< div class = "mt-4 flex-grow-1 bg-clear shadow p-3" >
< h3 id = "position" > Position< / h3 >
< div class = "inline-code" > .pos-[abs|rel|static|stick]< / div >
< br > < br >
< h4 > Anchor< / h4 >
< div class = "inline-code" > .anchor-[c|e|s]< / div >
< br > < br >
< div class = "b-1 w-100 pos-rel" style = "height: 150px" >
< div class = "anchor-s inline-code b-1 pos-abs top-25 start-50" > .anchor-s< / div >
< div class = "anchor-c inline-code b-1 pos-abs top-50 start-50" > .anchor-c< / div >
< div class = "anchor-e inline-code b-1 pos-abs top-75 start-50" > .anchor-e< / div >
< div class = "bg-transparent b-0 be-2 b-primary w-50 h-100 pos-abs left-0 top-0" > < / div >
< / div >
< br >
< h4 > Position< / h4 >
< div class = "inline-code" > .[bottom|end|start|top]-[0|10|20|25|30|33|34|40|50|60|66|70|75|80|90|100]< / div >
< br > < br >
< div class = "b-1 pos-rel w-100" style = "height: 150px;" >
< div class = "pos-abs top-0 start-0 inline-code b-1" > .top-0 .start-0< / div >
< div class = "pos-abs top-0 end-0 inline-code b-1" > .top-0 .end-0< / div >
< div class = "pos-abs top-50 start-50 inline-code b-1" > .top-50 .start-50< / div >
< div class = "pos-abs bottom-50 end-50 inline-code b-1" > .bottom-50 .end-50< / div >
< div class = "pos-abs bottom-0 start-0 inline-code b-1" > .bottom-0 .start-0< / div >
< div class = "pos-abs bottom-0 end-0 inline-code b-1" > .bottom-0 .end-0< / div >
< div class = "center inline-code b-1" > .center< / div >
< / div >
< / div >
< div class = "mt-4 flex-grow-1 bg-clear shadow p-3" >
< h3 id = "shadows" > Shadows< / h3 >
< div class = "inline-code" > .shadow-[drop|none|white]< / div >
< br > < br >
< div class = "flex-r" >
< div class = "shadow inline-code p-5 m-2 flex-r align-items-center justify-center" > .shadow< / div >
< div class = "pos-rel" >
< img class = "shadow-drop" src = "./wave.webp" alt = "logo" style = "width: 150px; height: auto" >
< span class = "shadow-white pos-abs center w-100 align-x" >
.shadow-drop< br >
.shadow-white
< / span >
< / div >
< div class = "shadow-none inline-code p-5 m-2 flex-r align-items-center justify-center" > .shadow-none< / div >
< / div >
< / div >
< div class = "mt-4 flex-grow-1 bg-clear shadow p-3" >
< h3 id = "size" > Size< / h3 >
< div class = "flex-c flex-md-r" >
< div class = "flex-fill-even" >
< h4 id = "height" > Height< / h4 >
< div class = "inline-code" > .h-[0|10|20|25|30|33|34|40|50|60|66|70|75|80|90|100]< / div >
< br > < br >
< div class = "flex-r" style = "height: 200px" >
< div style = "width: 60px" >
< div class = "h-100 b-1 inline-code flex-r align-items-center justify-content" > .h-100< / div >
< / div >
< div style = "width: 60px" >
< div class = "h-10 b-1 inline-code flex-r align-items-center justify-content" > .h-10< / div >
< div class = "h-90 b-1 inline-code flex-r align-items-center justify-content" > .h-90< / div >
< / div >
< div style = "width: 60px" >
< div class = "h-20 b-1 inline-code flex-r align-items-center justify-content" > .h-20< / div >
< div class = "h-80 b-1 inline-code flex-r align-items-center justify-content" > .h-80< / div >
< / div >
< div style = "width: 60px" >
< div class = "h-25 b-1 inline-code flex-r align-items-center justify-content" > .h-25< / div >
< div class = "h-75 b-1 inline-code flex-r align-items-center justify-content" > .h-75< / div >
< / div >
< div style = "width: 60px" >
< div class = "h-30 b-1 inline-code flex-r align-items-center justify-content" > .h-30< / div >
< div class = "h-70 b-1 inline-code flex-r align-items-center justify-content" > .h-70< / div >
< / div >
< div style = "width: 60px" >
< div class = "h-34 b-1 inline-code flex-r align-items-center justify-content" > .h-34< / div >
< div class = "h-66 b-1 inline-code flex-r align-items-center justify-content" > .h-66< / div >
< / div >
< div style = "width: 60px" >
< div class = "h-40 b-1 inline-code flex-r align-items-center justify-content" > .h-40< / div >
< div class = "h-60 b-1 inline-code flex-r align-items-center justify-content" > .h-60< / div >
< / div >
< div style = "width: 60px" >
< div class = "h-50 b-1 inline-code flex-r align-items-center justify-content" > .h-50< / div >
< div class = "h-50 b-1 inline-code flex-r align-items-center justify-content" > .h-50< / div >
< / div >
< / div >
< / div >
< div class = "flex-fill-even mt-3 mt-md-0" >
< h4 id = "width" > Width< / h4 >
< div class = "inline-code" > .w-[0|10|20|25|30|33|34|40|50|60|66|70|75|80|90|100]< / div >
< br > < br >
< div >
< div class = "flex-r" style = "height: 25px" >
< div class = "w-100 b-1 inline-code flex-r align-items-center justify-content" > .h-100< / div >
< / div >
< div class = "flex-r" style = "height: 25px" >
< div class = "w-10 d-inline-block b-1 inline-code flex-r align-items-center justify-content" > .h-10< / div >
< div class = "w-90 d-inline-block b-1 inline-code flex-r align-items-center justify-content" > .h-90< / div >
< / div >
< div class = "flex-r" style = "height: 25px" >
< div class = "w-20 d-inline-block b-1 inline-code flex-r align-items-center justify-content" > .h-20< / div >
< div class = "w-80 d-inline-block b-1 inline-code flex-r align-items-center justify-content" > .h-80< / div >
< / div >
< div class = "flex-r" style = "height: 25px" >
< div class = "w-25 b-1 inline-code flex-r align-items-center justify-content" > .h-25< / div >
< div class = "w-75 b-1 inline-code flex-r align-items-center justify-content" > .h-75< / div >
< / div >
< div class = "flex-r" style = "height: 25px" >
< div class = "w-30 b-1 inline-code flex-r align-items-center justify-content" > .h-30< / div >
< div class = "w-70 b-1 inline-code flex-r align-items-center justify-content" > .h-70< / div >
< / div >
< div class = "flex-r" style = "height: 25px" >
< div class = "w-34 b-1 inline-code flex-r align-items-center justify-content" > .h-34< / div >
< div class = "w-66 b-1 inline-code flex-r align-items-center justify-content" > .h-66< / div >
< / div >
< div class = "flex-r" style = "height: 25px" >
< div class = "w-40 b-1 inline-code flex-r align-items-center justify-content" > .h-40< / div >
< div class = "w-60 b-1 inline-code flex-r align-items-center justify-content" > .h-60< / div >
< / div >
< div class = "flex-r" style = "height: 25px" >
< div class = "w-50 b-1 inline-code flex-r align-items-center justify-content" > .h-50< / div >
< div class = "w-50 b-1 inline-code flex-r align-items-center justify-content" > .h-50< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "mt-4 flex-grow-1 bg-clear shadow p-3" >
< h3 id = "spacing" > Spacing< / h3 >
< div > Margin: < span class = "inline-code" > .m[b|e|s|t|x|y]-[xs|sm|md|lg|xl]-[0-5|auto]< / span > < / div >
< br >
< div > Padding: < span class = "inline-code" > .p[b|e|s|t|x|y]-[xs|sm|md|lg|xl]-[0-5]< / span > < / div >
< br > < br >
< div >
< div class = "m-2 b-1 bg-warn d-inline-block" >
< div class = "m-0 p-0 b-1 bg-success d-inline-block" > .m-0< br > .p-0< / div >
< / div >
< div class = "m-2 b-1 bg-warn d-inline-block" >
< div class = "m-1 p-1 b-1 bg-success d-inline-block" > .m-1< br > .p-1< / div >
< / div >
< div class = "m-2 b-1 bg-warn d-inline-block" >
< div class = "m-2 p-2 b-1 bg-success d-inline-block" > .m-2< br > .p-2< / div >
< / div >
< div class = "m-2 b-1 bg-warn d-inline-block" >
< div class = "m-3 p-3 b-1 bg-success d-inline-block" > .m-3< br > .p-3< / div >
< / div >
< div class = "m-2 b-1 bg-warn d-inline-block" >
< div class = "m-4 p-4 b-1 bg-success d-inline-block" > .m-4< br > .p-4< / div >
< / div >
< div class = "m-2 b-1 bg-warn d-inline-block" >
< div class = "m-5 p-5 b-1 bg-success d-inline-block" > .m-5< br > .p-5< / div >
< / div >
< / div >
< div >
< div class = "m-2 b-1 bg-warn d-inline-block" >
< div class = "mb-3 pb-3 b-1 bg-success d-inline-block" > .mb-3< br > .pb-3< / div >
< / div >
< div class = "m-2 b-1 bg-warn d-inline-block" >
< div class = "me-3 pe-3 b-1 bg-success d-inline-block" > .me-3< br > .pe-3< / div >
< / div >
< div class = "m-2 b-1 bg-warn d-inline-block" >
< div class = "ms-3 ps-3 b-1 bg-success d-inline-block" > .ms-3< br > .ps-3< / div >
< / div >
< div class = "m-2 b-1 bg-warn d-inline-block" >
< div class = "mt-3 pt-3 b-1 bg-success d-inline-block" > .mt-3< br > .pt-3< / div >
< / div >
< div class = "m-2 b-1 bg-warn d-inline-block" >
< div class = "mx-3 px-3 b-1 bg-success d-inline-block" > .mx-3< br > .px-3< / div >
< / div >
< div class = "m-2 b-1 bg-warn d-inline-block" >
< div class = "my-3 py-3 b-1 bg-success d-inline-block" > .my-3< br > .py-3< / div >
< / div >
< / div >
< div class = "b-1 bg-warn w-100" >
< div class = "mx-auto p-3 b-1 bg-success" style = "width: 100px" > .mx-auto< br > .p-3< / div >
< / div >
< / div >
< div class = "mt-4 flex-grow-1 bg-clear shadow p-3" >
< h3 id = "uer-select" > User Select< / h3 >
< div class = "inline-code" > .select-[all|auto|none|text]< / div >
< br > < br >
< div class = "select-all inline-code b-1 p-2" > .select-all< / div >
< div class = "select-auto inline-code b-1 p-2" > .select-auto< / div >
< div class = "select-none inline-code b-1 p-2" > .select-none< / div >
< div class = "select-text inline-code b-1 p-2" > .select-text< / div >
< / div >
< div class = "mt-4 flex-grow-1 bg-clear shadow p-3" >
< h3 id = "visibility" > Visibility< / h3 >
< div class = "inline-code" > .[hidden|visible]-[xs|sm|md|lg|xl]< / div >
< br > < br >
< div class = "d-inline-block b-1 p-1" >
< div class = "b-1 d-inline-block" >
< div class = "hidden inline-code b-1 p-2" > .hidden< / div >
< / div >
< div class = "visible inline-code b-1 p-2" > .visible< / div >
< / div >
< / div >
< div class = "mt-4 flex-grow-1 bg-clear shadow p-3 mb-3" >
< h3 id = "z-index" > Z-Index< / h3 >
< div class = "inline-code" > .z-[0-5]< / div >
< br > < br >
< div style = "height: 75px" >
< div class = "pos-rel" >
< div class = "z-5 pos-abs b-1 br-3 inline-code flex-r justify-end align-items-end" style = "width: 75px; height: 75px; " > < div class = "p-1" > z-5< / div > < / div >
< div class = "z-4 pos-abs b-1 br-3 inline-code flex-r justify-end align-items-end" style = "width: 75px; height: 75px; transform: translateX(40px)" > < div class = "p-1" > z-4< / div > < / div >
< div class = "z-3 pos-abs b-1 br-3 inline-code flex-r justify-end align-items-end" style = "width: 75px; height: 75px; transform: translateX(80px)" > < div class = "p-1" > z-3< / div > < / div >
< div class = "z-2 pos-abs b-1 br-3 inline-code flex-r justify-end align-items-end" style = "width: 75px; height: 75px; transform: translateX(120px)" > < div class = "p-1" > z-2< / div > < / div >
< div class = "z-1 pos-abs b-1 br-3 inline-code flex-r justify-end align-items-end" style = "width: 75px; height: 75px; transform: translateX(160px)" > < div class = "p-1" > z-1< / div > < / div >
< div class = "z-0 pos-abs b-1 br-3 inline-code flex-r justify-end align-items-end" style = "width: 75px; height: 75px; transform: translateX(200px)" > < div class = "p-1" > z-0< / div > < / div >
< / div >
< / div >
< / div >
< div class = "w-100 p-2" > < / div >
< / div >
2024-11-19 19:32:46 -05:00
< div id = "toc" class = "flex-r shadow bg-clear z-5 pos-fix animate b-1" style = "left: 0; top: 25px; transform: translateX(calc(-100% + 26px))" >
2024-11-17 23:53:24 -05:00
< div class = "p-3 overflow-y-auto" style = "max-height: 50vh;" >
< ul class = "p-0" >
< li >
< a href = "#top" > @ztimson/utils< / a >
< ul class = "fs-no-dec" >
< li >
< a href = "#setup" > Setup< / a >
< ul >
< li > < a href = "#install" > Install< / a > < / li >
< li > < a href = "#theming" > Theming< / a > < / li >
< / ul >
< / li >
< li >
< a href = "#utilities" > Utilities< / a >
< ul >
< li > < a href = "#alignment" > Alignment< / a > < / li >
< li > < a href = "#animations" > Animations< / a > < / li >
< li > < a href = "#borders" > Borders< / a > < / li >
< li > < a href = "#colors" > Colors< / a > < / li >
< li > < a href = "#cursors" > Cursors< / a > < / li >
< li > < a href = "#display" > Display< / a > < / li >
< li > < a href = "#flex" > Flex< / a > < / li >
< li > < a href = "#float" > Float< / a > < / li >
< li > < a href = "#font" > Font Style< / a > < / li >
< li > < a href = "#hover" > Hover< / a > < / li >
< li > < a href = "#object-fit" > Object Fit< / a > < / li >
< li > < a href = "#overflow" > Overflow< / a > < / li >
< li > < a href = "#opacity" > Opacity< / a > < / li >
< li > < a href = "#position" > Position< / a > < / li >
< li > < a href = "#shadows" > Shadows< / a > < / li >
< li > < a href = "#size" > Size< / a > < / li >
< li > < a href = "#spacing" > Spacing< / a > < / li >
< li > < a href = "#uer-select" > User Select< / a > < / li >
< li > < a href = "#visibility" > Visibility< / a > < / li >
< li > < a href = "#z-index" > Z-Index< / a > < / li >
< / ul >
< / li >
< / ul >
< / li >
< / ul >
< / div >
2024-11-19 19:32:46 -05:00
< div id = "toc-toggle" class = "curs-hover b-0 be-1 px-1 py-3 bg-primary fg-white" style = "writing-mode: vertical-rl" >
Table of Contents
< / div >
2024-11-17 23:53:24 -05:00
< / div >
2024-11-12 14:32:22 -05:00
2024-11-17 23:53:24 -05:00
< script >
let open = false;
const toc = document.querySelector('#toc')
document.querySelector('#toc-toggle').onclick = () => {
2024-11-19 19:32:46 -05:00
if(open) toc.style.transform = 'translateX(calc(-100% + 26px))';
2024-11-17 23:53:24 -05:00
else toc.style.transform = 'translateX(0)';
open = !open;
}
< / script >
2024-11-12 14:32:22 -05:00
< / body >
< / html >
