Gralig yazı boyutu için rem birimini kullanır. html elementi varsayılan yazı boyutunun %62.5'i oranında değere sahiptir ve 10px yazı boyutunu 1rem değerine eşitler. Bu şekilde karmaşık rem-px hesaplaması yapmanıza gerek kalmaz. Ana yazı boyutu 1.6rem'dir ve 16px değerine eşittir.

Yazı tipi olarak Catamaran kullanıldı ancak kütüphane içerisine dahil edilmedi.

Siz de bu yazı tipini kullanmak isterseniz

html içerisinde

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

scss içerisinde

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

şeklinde import edebilir ya da istediğiniz herhangi bir yazı tipini projenize dahil edip kullanabilirsiniz.

Başlıklar ve Alt Başlıklar

İki çeşit başlık tipi bulunmakta. .gra-heading ve .gra-subheading

<h1 class="gra-heading">heading</h1>
<h2 class="gra-heading">heading</h2>
<h3 class="gra-heading">heading</h3>
<h4 class="gra-heading">heading</h4>
<h5 class="gra-heading">heading</h5>
<h6 class="gra-heading">heading</h6>

<h1 class="gra-subheading">subheading</h1>
<h2 class="gra-subheading">subheading</h2>
<h3 class="gra-subheading">subheading</h3>
<h4 class="gra-subheading">subheading</h4>
<h5 class="gra-subheading">subheading</h5>
<h6 class="gra-subheading">subheading</h6>

Paragraflar

Üç farklı boyutta paragraf oluşturuldu. Normal boyut için herhangi bir class kullanmanız gerekmez. Büyük paragraf için .gra-p-large , küçük paragraf için .gra-p-small kullanabilirsiniz.

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

Texts

Aşağıda çeşitli metin türleri sunulmuştur.

Gralig
<span class="gra-text-secondary">Gralig</span>
<span class="gra-text-green">Gralig</span>
<span class="gra-text-yellow">Gralig</span>
<span class="gra-text-blue">Gralig</span>
<span class="gra-text-red">Gralig</span>
<span class="gra-text-muted">Gralig</span>
<mark class="gra-text-marked">Gralig</mark>
<u>Gralig</u>
<em>Gralig</em>
<del>Gralig</del>
<strong>Gralig</strong>
<code>Gralig</code>