Typography

Gralig uses rem unit for the font size. The html element has 62.5% font size which means 10px = 1rem and the main font size defined as 1.6rem(16px). You don't need complex calculation for px to rem.

As a font family we used Catamaran while developing but we didn't include it inside library.

If you want to use this font, you can import to

html

<link href="https://fonts.googleapis.com/css2?family=Catamaran:wght@300;400;600&display=swap" rel="stylesheet">

or scss

@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@300;400;600&display=swap')

or you can use whatever font you like.

Headings and Subheadings

There are two type headings. Main .heading and .subheading

heading

H14.4rem (44px)

heading

H23.6rem (36px)

heading

H32.8rem (28px)

heading

H42.4rem (24px)
heading
H51.8rem (18px)
heading
H61.6rem (16px)
<h1 class="heading">heading</h1>
<h2 class="heading">heading</h2>
<h3 class="heading">heading</h3>
<h4 class="heading">heading</h4>
<h5 class="heading">heading</h5>
<h6 class="heading">heading</h6>

subheading

H14.4rem (44px)

subheading

H23.6rem (36px)

subheading

H32.8rem (28px)

subheading

H42.4rem (24px)
subheading
H51.8rem (18px)
subheading
H61.6rem (16px)
<h1 class="subheading">subheading</h1>
<h2 class="subheading">subheading</h2>
<h3 class="subheading">subheading</h3>
<h4 class="subheading">subheading</h4>
<h5 class="subheading">subheading</h5>
<h6 class="subheading">subheading</h6>

Paragraphs

You can use three different sizes of paragraphs. You can use a normal paragraph without class, for large font use .p-large, for small font use .p-small

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita tenetur dolore debitis nostrum rem inventore dicta quidem eaque delectus

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita tenetur dolore debitis nostrum rem inventore dicta quidem eaque delectus

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita tenetur dolore debitis nostrum rem inventore dicta quidem eaque delectus

<p class="p-large">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita tenetur
  dolore debitis nostrum rem inventore dicta quidem eaque delectus
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita tenetur
  dolore debitis nostrum rem inventore dicta quidem eaque delectus
</p>
<p class="p-small">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita tenetur
  dolore debitis nostrum rem inventore dicta quidem eaque delectus
</p>

Texts

You can use multiple text types below.

Gralig
Gralig
Gralig
Gralig
Gralig
Gralig
Gralig
Gralig
Gralig
Gralig
Gralig
Gralig
Gralig
Gralig
<span class="text-secondary">Gralig</span>
<span class="text-green">Gralig</span>
<span class="text-yellow">Gralig</span>
<span class="text-blue">Gralig</span>
<span class="text-red">Gralig</span>
<span class="text-muted">Gralig</span>
<mark class="text-marked">Gralig</mark>
<u>Gralig</u>
<em>Gralig</em>
<del>Gralig</del>
<strong>Gralig</strong>
<code>Gralig</code>
© 2019, Built with  🎧☕️❤️& Gralig.