Tipografi

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. .heading ve .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>

Paragraflar

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

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

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

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>
🎧☕️❤️& Gralig ile yapıldı. © 2019