Merhaba arkadaşlar bu yazımda skeleton (iskelet) adlı responsive css framework ‘ü hakkında bilgi vereceğim. Öncelikle Skeleton Responsive CSS Boilerplate’ı indirmek için buraya tıklayın. Bu framework’ün kendi sitesine gitmek için buraya tıklayın. Her şey tamam ise başlayalım.

 

İlk olarak Skeleton adlı framework’ün grid sisteminde bahsedelim.

Grid sistemi 12 parçadan oluşuyor. Ve bu 12 parçanın toplamı 960px’dir. Tabi ki css dosyasından buna müdahale etmeniz mümkündür.

1

<!-- .container sınıfını kullandığınız zaman içeriğiniz ortalanır-->
<div class="container">
<!-- .row sınıfı tasarımı satır satır yani daha düzenli olmasını sağlar-->
<div class="row">
<div class="one column">One</div>
<div class="eleven columns">Eleven</div>
</div>
<!-- eğer 1 sütun (grid) kullanacaksak one column şeklinde fakat birden fazla ise two columns veya five columns gibi kullanılırcolumn-->
<div class="row">
<div class="two columns">Two</div>
<div class="ten columns">Ten</div>
</div>
<!-- bir satırı 3'e eşit bölebilmek için aşağıdaki gibi yapıyoruz-->
<div class="row">
<div class="one-third column">1/3</div>
<div class="two-thirds column">2/3</div>
</div>
<!-- bir satırı 2'ye eşit bölebilmek için aşağıdaki gibi yapıyoruz-->
<div class="row">
<div class="one-half column">1/2</div>
<div class="one-half column">1/2</div>
</div>
</div>

YAZI (TİPOGRAFİ)
Bu framework’te başlık tiplerinin hepsi responsive olması sebebiyle rems ile ölçeklendirilmiştir. Font olarak ise Raleway kullanılmıştır.

2.fw

<!-- Başlıklar -->
<h1>Başlık</h1>
<h2>Başlık</h2>
<h3>Başlık</h3>
<h4>Başlık</h4>
<h5>Başlık</h5>
<h6>Başlık</h6>
<!-- Diğer Yazı Tipleri -->
<strong>Kalın</strong>
<em>Eğik</em>
<a>Renkli</a>
<u>Altı Çizili</u>

Butonlar

Skleton’da buton olarak html5 ile gelen <button> tagını (etiketini) kullanmamızı öneriliyor. Eğer bu tagı (etiketi) kullanmayacaksan sıradan <input> ile işimizi göreceksek type kısmına button yazmamız gerekir. Bu taglarda (etiketlerde) kullanacağınız sınıflar 2 adettir; Bunlardan biri .button-primary diğeri .button ‘dur.

3.fw

<!-- Standard butonlar -->
<a class="button" href="#">Link butonu</a>
<button>Buton etiketi</button>
<input type="submit" value="Gönder input">
<input type="button" value="Buton input">
<!-- Birincil butonlar -->
<a class="button button-primary" href="#">Link butonu</a>
<button class="button-primary">Buton etiketi</button>
<input class="button-primary" type="submit" value="Gönder input">
<input class="button-primary" type="button" value="Buton input">