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


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

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

Z-index

Class
Property
z-0z-index: 0;
z-100z-index: 100;
z-200z-index: 200;
z-300z-index: 300;
z-400z-index: 400;
z-500z-index: 500;
z-autoz-index: auto;