CSS Library

Font sizes

Font-xs: extra small font

Font-s: small font

Font-m: medium font

Font-l: large font

Font-xl: extra large font

Font-xxl: extra extra large font

          <p class="font-xs">Font-xs: extra small font</p>
<p class="font-s">Font-s: small font</p>
<p class="font-m">Font-m: medium font</p>
<p class="font-l">Font-l: large font</p>
<p class="font-xl">Font-xl: extra large font</p>
<p class="font-xxl">Font-xxl: extra extra large font</p>

Padding & Margin

Notation

( property ) ( side(s) * ) - ( size )

* Optional. If omitted, style will be applied to all sides of the element.

Property

p	padding
m	margin

Side(s)

t	top
r	right
b	bottom
l	left
rl	right & left
tb	top & bottom

Size

0	0rem
xs	0.3rem
s	0.6rem
m	0.75rem
l	1.5rem
xl	3rem
xl	4,5rem
auto	auto

            // Examples:

.p-s {
  padding: 0.6rem;
}

.mtb-xs {
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
}

Padding Examples

In the following examples padding is set to the wrapper div.

p-0

p-xs

p-s

p-m

p-l

p-xl

p-xxl

          <div class="p-0 mr-m mb-m">
  <div>
    <p>p-0</p>
  </div>
</div>
<div class="p-xs mr-m mb-m">
  <div>
    <p>p-xs</p>
  </div>
</div>
<div class="p-s mr-m mb-m">
  <div>
    <p>p-s</p>
  </div>
</div>
<div class="p-m mr-m mb-m">
  <div>
    <p>p-m</p>
  </div>
</div>
<div class="p-l mr-m mb-m">
  <div>
    <p>p-l</p>
  </div>
</div>
<div class="p-xl mr-m mb-m">
  <div>
    <p>p-xl</p>
  </div>
</div>
<div class="p-xxl mr-m mb-m">
  <div>
    <p>p-xxl</p>
  </div>
</div>

pt-l

pr-l

pb-l

pl-l

ptb-l

prl-l

            <div class="pt-l mr-m mb-m">
  <div>
    <p>pt-l</p>
  </div>
</div>
<div class="pr-l mr-m mb-m">
  <div>
    <p>pr-l</p>
  </div>
</div>
<div class="pb-l mr-m mb-m">
  <div>
    <p>pb-l</p>
  </div>
</div>
<div class="pl-l mr-m mb-m">
  <div>
    <p>pl-l</p>
  </div>
</div>
<div class="ptb-l mr-m mb-m">
  <div>
    <p>ptb-l</p>
  </div>
</div>
<div class="prl-l mr-m mb-m">
  <div>
    <p>prl-l</p>
  </div>
</div>

Margin Examples

In the following examples margin is set to the inner div.

m-0

m-xs

m-s

m-m

m-l

m-xl

m-xxl

            <div class="mr-m mb-m">
  <div class="m-0">
    <p>m-0</p>
  </div>
</div>
<div class="mr-m mb-m">
  <div class="m-xs">
    <p>m-xs</p>
  </div>
</div>
<div class="mr-m mb-m">
  <div class="m-s">
    <p>m-s</p>
  </div>
</div>
<div class="mr-m mb-m">
  <div class="m-m">
    <p>m-m</p>
  </div>
</div>
<div class="mr-m mb-m">
  <div class="m-l">
    <p>m-l</p>
  </div>
</div>
<div class="mr-m mb-m">
  <div class="m-xl">
    <p>m-xl</p>
  </div>
</div>
<div class="mr-m mb-m">
  <div class="m-xxl">
    <p>m-xxl</p>
  </div>
</div>