santycss/dist/santy-sizing.css

Plain-English utility-first CSS framework — no build step, just classes

/* SantyCSS — sizing module
   Import individually to reduce bundle size.
   https://santycss.santy.in */

/* ── Width ── */
.set-width-0 { width: 0px; }
.set-width-1 { width: 1px; }
.set-width-2 { width: 2px; }
.set-width-3 { width: 3px; }
.set-width-4 { width: 4px; }
.set-width-5 { width: 5px; }
.set-width-6 { width: 6px; }
.set-width-8 { width: 8px; }
.set-width-10 { width: 10px; }
.set-width-12 { width: 12px; }
.set-width-14 { width: 14px; }
.set-width-16 { width: 16px; }
.set-width-18 { width: 18px; }
.set-width-20 { width: 20px; }
.set-width-24 { width: 24px; }
.set-width-28 { width: 28px; }
.set-width-32 { width: 32px; }
.set-width-40 { width: 40px; }
.set-width-48 { width: 48px; }
.set-width-56 { width: 56px; }
.set-width-64 { width: 64px; }
.set-width-80 { width: 80px; }
.set-width-96 { width: 96px; }
.set-width-128 { width: 128px; }
.set-width-160 { width: 160px; }
.set-width-192 { width: 192px; }
.set-width-256 { width: 256px; }
.set-width-320 { width: 320px; }
.set-width-384 { width: 384px; }
.set-width-512 { width: 512px; }
.set-width-640 { width: 640px; }
.set-width-768 { width: 768px; }
.set-width-1024 { width: 1024px; }
.set-width-1-of-2 { width: 50%; }
.set-width-1-of-3 { width: 33.333333%; }
.set-width-1-of-4 { width: 25%; }
.set-width-1-of-5 { width: 20%; }
.set-width-1-of-6 { width: 16.666667%; }
.set-width-1-of-12 { width: 8.333333%; }
.set-width-2-of-3 { width: 66.666667%; }
.set-width-2-of-4 { width: 50%; }
.set-width-2-of-5 { width: 40%; }
.set-width-2-of-6 { width: 33.333333%; }
.set-width-2-of-12 { width: 16.666667%; }
.set-width-3-of-4 { width: 75%; }
.set-width-3-of-5 { width: 60%; }
.set-width-3-of-6 { width: 50%; }
.set-width-3-of-12 { width: 25%; }
.set-width-4-of-5 { width: 80%; }
.set-width-4-of-6 { width: 66.666667%; }
.set-width-4-of-12 { width: 33.333333%; }
.set-width-5-of-6 { width: 83.333333%; }
.set-width-5-of-12 { width: 41.666667%; }
.set-width-6-of-12 { width: 50%; }
.set-width-7-of-12 { width: 58.333333%; }
.set-width-8-of-12 { width: 66.666667%; }
.set-width-9-of-12 { width: 75%; }
.set-width-10-of-12 { width: 83.333333%; }
.set-width-11-of-12 { width: 91.666667%; }
.set-width-full   { width: 100%; }
.set-width-screen { width: 100vw; }
.set-width-auto   { width: auto; }
.set-width-min    { width: min-content; }
.set-width-max    { width: max-content; }
.set-width-fit    { width: fit-content; }

/* ── Height ── */
.set-height-0 { height: 0px; }
.set-height-1 { height: 1px; }
.set-height-2 { height: 2px; }
.set-height-3 { height: 3px; }
.set-height-4 { height: 4px; }
.set-height-5 { height: 5px; }
.set-height-6 { height: 6px; }
.set-height-8 { height: 8px; }
.set-height-10 { height: 10px; }
.set-height-12 { height: 12px; }
.set-height-14 { height: 14px; }
.set-height-16 { height: 16px; }
.set-height-18 { height: 18px; }
.set-height-20 { height: 20px; }
.set-height-24 { height: 24px; }
.set-height-28 { height: 28px; }
.set-height-32 { height: 32px; }
.set-height-40 { height: 40px; }
.set-height-48 { height: 48px; }
.set-height-56 { height: 56px; }
.set-height-64 { height: 64px; }
.set-height-80 { height: 80px; }
.set-height-96 { height: 96px; }
.set-height-128 { height: 128px; }
.set-height-160 { height: 160px; }
.set-height-192 { height: 192px; }
.set-height-256 { height: 256px; }
.set-height-320 { height: 320px; }
.set-height-384 { height: 384px; }
.set-height-512 { height: 512px; }
.set-height-640 { height: 640px; }
.set-height-768 { height: 768px; }
.set-height-1024 { height: 1024px; }
.set-height-full   { height: 100%; }
.set-height-screen { height: 100vh; }
.set-height-auto   { height: auto; }
.set-height-min    { height: min-content; }
.set-height-max    { height: max-content; }
.set-height-fit    { height: fit-content; }

/* ── Min/Max Width/Height ── */
.min-width-0  { min-width: 0px; }
.max-width-0  { max-width: 0px; }
.min-height-0 { min-height: 0px; }
.max-height-0 { max-height: 0px; }
.min-width-1  { min-width: 1px; }
.max-width-1  { max-width: 1px; }
.min-height-1 { min-height: 1px; }
.max-height-1 { max-height: 1px; }
.min-width-2  { min-width: 2px; }
.max-width-2  { max-width: 2px; }
.min-height-2 { min-height: 2px; }
.max-height-2 { max-height: 2px; }
.min-width-3  { min-width: 3px; }
.max-width-3  { max-width: 3px; }
.min-height-3 { min-height: 3px; }
.max-height-3 { max-height: 3px; }
.min-width-4  { min-width: 4px; }
.max-width-4  { max-width: 4px; }
.min-height-4 { min-height: 4px; }
.max-height-4 { max-height: 4px; }
.min-width-5  { min-width: 5px; }
.max-width-5  { max-width: 5px; }
.min-height-5 { min-height: 5px; }
.max-height-5 { max-height: 5px; }
.min-width-6  { min-width: 6px; }
.max-width-6  { max-width: 6px; }
.min-height-6 { min-height: 6px; }
.max-height-6 { max-height: 6px; }
.min-width-8  { min-width: 8px; }
.max-width-8  { max-width: 8px; }
.min-height-8 { min-height: 8px; }
.max-height-8 { max-height: 8px; }
.min-width-10  { min-width: 10px; }
.max-width-10  { max-width: 10px; }
.min-height-10 { min-height: 10px; }
.max-height-10 { max-height: 10px; }
.min-width-12  { min-width: 12px; }
.max-width-12  { max-width: 12px; }
.min-height-12 { min-height: 12px; }
.max-height-12 { max-height: 12px; }
.min-width-14  { min-width: 14px; }
.max-width-14  { max-width: 14px; }
.min-height-14 { min-height: 14px; }
.max-height-14 { max-height: 14px; }
.min-width-16  { min-width: 16px; }
.max-width-16  { max-width: 16px; }
.min-height-16 { min-height: 16px; }
.max-height-16 { max-height: 16px; }
.min-width-18  { min-width: 18px; }
.max-width-18  { max-width: 18px; }
.min-height-18 { min-height: 18px; }
.max-height-18 { max-height: 18px; }
.min-width-20  { min-width: 20px; }
.max-width-20  { max-width: 20px; }
.min-height-20 { min-height: 20px; }
.max-height-20 { max-height: 20px; }
.min-width-24  { min-width: 24px; }
.max-width-24  { max-width: 24px; }
.min-height-24 { min-height: 24px; }
.max-height-24 { max-height: 24px; }
.min-width-28  { min-width: 28px; }
.max-width-28  { max-width: 28px; }
.min-height-28 { min-height: 28px; }
.max-height-28 { max-height: 28px; }
.min-width-32  { min-width: 32px; }
.max-width-32  { max-width: 32px; }
.min-height-32 { min-height: 32px; }
.max-height-32 { max-height: 32px; }
.min-width-40  { min-width: 40px; }
.max-width-40  { max-width: 40px; }
.min-height-40 { min-height: 40px; }
.max-height-40 { max-height: 40px; }
.min-width-48  { min-width: 48px; }
.max-width-48  { max-width: 48px; }
.min-height-48 { min-height: 48px; }
.max-height-48 { max-height: 48px; }
.min-width-56  { min-width: 56px; }
.max-width-56  { max-width: 56px; }
.min-height-56 { min-height: 56px; }
.max-height-56 { max-height: 56px; }
.min-width-64  { min-width: 64px; }
.max-width-64  { max-width: 64px; }
.min-height-64 { min-height: 64px; }
.max-height-64 { max-height: 64px; }
.min-width-80  { min-width: 80px; }
.max-width-80  { max-width: 80px; }
.min-height-80 { min-height: 80px; }
.max-height-80 { max-height: 80px; }
.min-width-96  { min-width: 96px; }
.max-width-96  { max-width: 96px; }
.min-height-96 { min-height: 96px; }
.max-height-96 { max-height: 96px; }
.min-width-128  { min-width: 128px; }
.max-width-128  { max-width: 128px; }
.min-height-128 { min-height: 128px; }
.max-height-128 { max-height: 128px; }
.min-width-160  { min-width: 160px; }
.max-width-160  { max-width: 160px; }
.min-height-160 { min-height: 160px; }
.max-height-160 { max-height: 160px; }
.min-width-192  { min-width: 192px; }
.max-width-192  { max-width: 192px; }
.min-height-192 { min-height: 192px; }
.max-height-192 { max-height: 192px; }
.min-width-256  { min-width: 256px; }
.max-width-256  { max-width: 256px; }
.min-height-256 { min-height: 256px; }
.max-height-256 { max-height: 256px; }
.min-width-320  { min-width: 320px; }
.max-width-320  { max-width: 320px; }
.min-height-320 { min-height: 320px; }
.max-height-320 { max-height: 320px; }
.min-width-384  { min-width: 384px; }
.max-width-384  { max-width: 384px; }
.min-height-384 { min-height: 384px; }
.max-height-384 { max-height: 384px; }
.min-width-512  { min-width: 512px; }
.max-width-512  { max-width: 512px; }
.min-height-512 { min-height: 512px; }
.max-height-512 { max-height: 512px; }
.min-width-full   { min-width: 100%; }
.max-width-full   { max-width: 100%; }
.min-width-screen { min-width: 100vw; }
.max-width-screen { max-width: 100vw; }
.min-height-full   { min-height: 100%; }
.max-height-full   { max-height: 100%; }
.min-height-screen { min-height: 100vh; }
.max-height-screen { max-height: 100vh; }
.min-width-none    { min-width: none; }
.max-width-none    { max-width: none; }