MicronCSS

Layout

Aspect Ratio

Class
Property
aspect-autoaspect-ratio: auto;
aspect-squareaspect-ratio: 1 / 1;
aspect-videoaspect-ratio: 16 / 9;

Box Sizing

Class
Property
box-borderborder-sizing: border-box;
box-contentborder-sizing: content-box;

Usage 

<div class="box-border aspect-video w-full">
  <img src="/heroimage.png" alt="cat drinking milk" class="w-full" />
</div>

Float

Class
Property
float-rightfloat: right;
float-leftfloat: left;
float-nonefloat: none;

Display

Class
Property
flexdisplay: flex;
griddisplay: grid;
blockdisplay: block;
inlinedisplay: inline;
inline-blockdisplay: inline-block;
inline-flexdisplay: inline-flex;
inline-griddisplay: inline-grid;
contentsdisplay: contents;
hiddendisplay: none;

Usage 

<nav class="float-right">
  <ul class="flex">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

Position

Class
Property
fixedposition: fixed;
relativeposition: relative;
absoluteposition: absolute;

Top / Bottom / Left / Right

Top


Class
Property
top-0top: 0;
top-0.5top: 0.0625rem;  /* 1px */
top-1top: 0.125rem;  /* 2px */
top-1.5top: 0.25rem;  /* 4px */
top-2top: 0.375rem;  /* 6px */
top-2.5top: 0.5rem;  /* 8px */
top-3top: 0625rem;  /* 10px */
top-3.5top: 0.75rem;  /* 12px */
top-4top: 0.875rem;  /* 14px */
top-5top: 1rem;  /* 16px */
top-6top: 1.25rem;  /* 20px */
top-7top: 1.5rem;  /* 24px */
top-8top: 1.75rem;  /* 28px */
top-9top: 2rem;  /* 32px */
top-10top: 2.25rem;  /* 36px */
top-11top: 2.5rem;  /* 40px */
top-12top: 2.75rem;  /* 44px */
top-14top: 3rem;  /* 48px */
top-16top: 3.25rem;  /* 52px */
top-20top: 3.5rem;  /* 56px */
top-24top: 3.75rem;  /* 60px */
top-28top: 4rem;  /* 64px */
top-32top: 5rem;  /* 80px */
top-36top: 6rem;  /* 96px */
top-40top: 7rem;  /* 112px */
top-44top: 8rem;  /* 128px */
top-48top: 9rem;  /* 144px */
top-52top: 10rem;  /* 160px */
top-56top: 11rem;  /* 176px */
top-60top: 12rem;  /* 192px */
top-64top: 13rem;  /* 208px */
top-72top: 14rem;  /* 224px */
top-80top: 15rem;  /* 240px */
top-88top: 16rem;  /* 256px */
top-96top: 18rem;  /* 288px */
top-104top: 20rem;  /* 320px */
top-112top: 22rem;  /* 352px */
top-120top: 24rem;  /* 384px */
top-128top: 26rem;  /* 416px */
top-136top: 28rem;  /* 448px */
top-144top: 30rem;  /* 480px */
top-152top: 32rem;  /* 512px */
top-1/2top: 50%;
top-1/3top: 33.33333%;
top-2/3top: 66.66667%;
top-1/4top: 25%;
top-2/4top: 50%);
top-3/4top: 75%;
top-1/5top: 20%;
top-2/5top: 40%;
top-3/5top: 60%;
top-4/5top: 80%;
top-1/6top: 16.66667%;
top-2/6top: 33.33333%;
top-3/6top: 50%;
top-4/6top: 66.66667%;
top-5/6top: 83.33333%;
top-fulltop: 100%;
top-autotop: auto;

Bottom


Class
Property
bottom-0bottom: 0;
bottom-0.5bottom: 0.0625rem;  /* 1px */
bottom-1bottom: 0.125rem;  /* 2px */
bottom-1.5bottom: 0.25rem;  /* 4px */
bottom-2bottom: 0.375rem;  /* 6px */
bottom-2.5bottom: 0.5rem;  /* 8px */
bottom-3bottom: 0625rem;  /* 10px */
bottom-3.5bottom: 0.75rem;  /* 12px */
bottom-4bottom: 0.875rem;  /* 14px */
bottom-5bottom: 1rem;  /* 16px */
bottom-6bottom: 1.25rem;  /* 20px */
bottom-7bottom: 1.5rem;  /* 24px */
bottom-8bottom: 1.75rem;  /* 28px */
bottom-9bottom: 2rem;  /* 32px */
bottom-10bottom: 2.25rem;  /* 36px */
bottom-11bottom: 2.5rem;  /* 40px */
bottom-12bottom: 2.75rem;  /* 44px */
bottom-14bottom: 3rem;  /* 48px */
bottom-16bottom: 3.25rem;  /* 52px */
bottom-20bottom: 3.5rem;  /* 56px */
bottom-24bottom: 3.75rem;  /* 60px */
bottom-28bottom: 4rem;  /* 64px */
bottom-32bottom: 5rem;  /* 80px */
bottom-36bottom: 6rem;  /* 96px */
bottom-40bottom: 7rem;  /* 112px */
bottom-44bottom: 8rem;  /* 128px */
bottom-48bottom: 9rem;  /* 144px */
bottom-52bottom: 10rem;  /* 160px */
bottom-56bottom: 11rem;  /* 176px */
bottom-60bottom: 12rem;  /* 192px */
bottom-64bottom: 13rem;  /* 208px */
bottom-72bottom: 14rem;  /* 224px */
bottom-80bottom: 15rem;  /* 240px */
bottom-88bottom: 16rem;  /* 256px */
bottom-96bottom: 18rem;  /* 288px */
bottom-104bottom: 20rem;  /* 320px */
bottom-112bottom: 22rem;  /* 352px */
bottom-120bottom: 24rem;  /* 384px */
bottom-128bottom: 26rem;  /* 416px */
bottom-136bottom: 28rem;  /* 448px */
bottom-144bottom: 30rem;  /* 480px */
bottom-152bottom: 32rem;  /* 512px */
bottom-1/2bottom: 50%;
bottom-1/3bottom: 33.33333%;
bottom-2/3bottom: 66.66667%;
bottom-1/4bottom: 25%;
bottom-2/4bottom: 50%);
bottom-3/4bottom: 75%;
bottom-1/5bottom: 20%;
bottom-2/5bottom: 40%;
bottom-3/5bottom: 60%;
bottom-4/5bottom: 80%;
bottom-1/6bottom: 16.66667%;
bottom-2/6bottom: 33.33333%;
bottom-3/6bottom: 50%;
bottom-4/6bottom: 66.66667%;
bottom-5/6bottom: 83.33333%;
bottom-fullbottom: 100%;
bottom-autobottom: auto;

Left