Foundation 6 Tipografi

Foundation 6’da tipografi, kodlarımızı yazarken daha düzeli ve hızlı bir şekilde yazmak ve varsayılan stiller oluşturmak içindir.

Yazıları Hizalama

text-right, text-left, text,center ve text-justify ile yazıları hizalayabiliriz.

  • text-right ile sağa hizalanır.
  • text-center ile ortalanır
  • text-left ile sola hizalanır.
  • text-justift ile her iki yönden hizalanır.
<p class="text-left">TEXT</p>

<p class="text-right">TEXT</p>

<p class="text-center">TEXT</p>

<p class="text-justify">TEXT</p>

subheader kullanımı

subheader sınıfını ekleyerek herhangi bir başlık etiketinin rengini aydınlatabiliriz. Kullanımı aşağıdaki gibidir.

<h1 class="subheader">h1.subheader</h1>

<h2 class="subheader">h2.subheader</h2>

<h3 class="subheader">h3.subheader</h3>

<h4 class="subheader">h4.subheader</h4>

<h5 class="subheader">h5.subheader</h5>

<h6 class="subheader">h6.subheader</h6>
Foundation subheader sınıfı

lead kullanımı

lead Türkçe’ye önde gelen/önemli olan şeklinde çevirilebilir. Bu class ile vurgulamak istediğimiz yani önemli olan kısmı belirtebiliriz.

<p class="lead">Projenin teslim tarihini<em>gerçekten</em>unuttun mu?</p>

no-bullet kullanımı

CSS’de listeleme madde işaretlerini kaldırmak için list-style-type: none özelliğini kullanabiliriz. Foundation 6’da ise <ul> ve <ol> etiketlerine no-bullet class’ı ekleyerek aynı işlemi yapabiliriz.

<ol class="no-bullet">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>
<ul class="no-bullet">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

Başlık etiketlerini class olarak vermek

Başlık etiketikeri h1, h2, h3, h4, h5 ve h6 şeklindedir. Her bir başlık etiketi farklı boyuta sahiptir. Foundation ile birlikte başlık etiketlerini class olarak vererek yazının o boyutta tanımalanmasını sağlayabiliriz.

<p class="h1">Lorem Ipsum Dolor</p>

<p class="h2">Lorem Ipsum Dolor</p>

<p class="h3">Lorem Ipsum Dolor</p>

<p class="h4">Lorem Ipsum Dolor</p>

<p class="h5">Lorem Ipsum Dolor</p>

<p class="h6">Lorem Ipsum Dolor</p>

stat kullanımı

stat classı, tanımladığımız rakam veya istatistiklerin önemli olanlarının daha büyük şekilde tanımlanmasını sağlar. Kullanımı aşağıdaki gibidir.

<p>Kpps'ye kalan gün</p>
<div class="stat">25</div>
285 Views
42020cookie-checkFoundation 6 Tipografi

Leave a Reply

Your email address will not be published. Required fields are marked *