MicronCSS

Typography

Font Size

Class
Property
font-xsfont-size: 0.5rem;
font-smfont-size: 0.75rem;
font-basefont-size: 1rem;
font-mdfont-size: 1.25rem;
font-lgfont-size: 1.5rem;
font-xlfont-size: 2rem;
font-2xlfont-size: 2.5rem;
font-3xlfont-size: 3rem;
font-4xlfont-size: 4rem;
font-5xlfont-size: 5rem;
font-6xlfont-size: 6rem;
font-7xlfont-size: 7rem;
font-8xlfont-size: 8rem;

Usage 

<h2 class="font-2xl">Subtitle</h2>
<!-- This will set the font size to 2.5rem. -->

Font Weight

Class
Property
font-regfont-weight: 400;
font-medfont-weight: 500;
font-bldfont-weight: 700;

Usage 

<i class="font-bld">
  The greatest victory is that which requires no battle. - Sun Tzu
</i>

Text Align

Class
Property
text-lefttext-align: left;
text-righttext-align: right;
text-centertext-align: center;

Usage 

<h1 class="text-center font-8xl">Title</h1>

Text Transform

Class
Property
uppercasetext-transform: uppercase
lowercasetext-transform: lowercase
capitalizetext-transform: capitalize

Usage 

<p class="uppercase">boom!</p>

Text Decoration

Class
Property
decor-nonetext-decoration: none;
decor-underlinetext-decoration: underline;
decor-line-throughtext-decoration: line-through;

Usage 

<p>
  And visit
  <a class="decor-none" href="mycoolwebsite.com" target="_blank">
    my cool website
  </a>
  for more info.
</p>
<!-- This will remove the text decoration from the link. -->

Text Decoration Thickness

Class
Property
decor-0text-decoration-thickness: 0;
decor-1text-decoration-thickness: 1px;
decor-2text-decoration-thickness: 2px;
decor-4text-decoration-thickness: 4px;
decor-6text-decoration-thickness: 6px;
decor-8text-decoration-thickness: 8px;

List Style Type

Class
Property
list-nonelist-style-type: none;
list-disclist-style-type: disc;
list-decimallist-style-type: decimal;
list-circlelist-style-type: circle;

Usage 

<ul class="list-none">
  <li>Eggs</li>
  <li class="decor-line-through decor-2">Milk</li>
  <li>Grapes</li>
  <li>Bananas</li>
  <li>Cheese</li>
</ul>
<!--
This will remove the dots beside the list, 
and put a 2px line through milk.
-->