The Semantic Grid System, Yarının Sayfa Düzeni

HTML5 bildiğiniz gibi semantik etiketlerle birlikte geldi ama hala tam anlamıyla kullanmıyoruz. başlayacağımız nokta tam olarak grid sistemleri olacak 960.gs vs.. tam olarak bu akıma uymadıklarını düşünüyordum ki başkası daha önce düşünmüş less ve sass mixin kütüphanesi olarak semantic grid sistemi oluşturmuş. son zamanlarda pek güncellenmemiş olsada halen kullanılabilir durumda.

Kullanabileceğiniz 4 adet değişken $column-width, $gutter-width, $columns, $total-width

4 adetde mixin var row, column, pull, push

En basit olarak şöyle bir sass kodundan

$column-width: 60px
$gutter-width: 20px
$columns: 12
$total-width: 100%
header
    +column(12)
nav
    +column(12)
section
    +column(9)
aside
    +column(3)
article
    +column(12)
footer
    +column(12)

Şöyle Bir haml kodundan

%header
  %h2 Header
%nav
  %h2 Menu
%section
  %h2 Main
%aside
  %article
    %h2 aside
  %article
    %h2 aisde
%footer
  %h2
    Copyright © 2013

Hem fixed hem fluid olarak bu düzene ulaşabilirsiniz.

semantic html5

Gelelim asıl konuya yeni bourbon adlı bie mixin kütüphanesi çıktı aynı şekilde bu kütüphanenin neat adında şirinmi şirin mixinler içeren Semantik grid sistemi var üstteki konuyla ilgilendiyseniz bakmanızı (kullanmanızı) tavsiye ederiz.

comments powered by Disqus