#

Mozaik: CSS Grid ve UI Framework Sistemi

CSS Framework’leri (çatı, çerceve) önceden hazırlanmış CSS kütüphaneleri veya CSS prototipleridir. CSS Framework’leri her yeni işinizde tekrar tekrar yazmanız gereken kodları, tek bir kütüphane dosyası altında toplanmasını hedefler.

CSS Framework’lerinin popülerliğinin artmasının en büyük nedenleri: iş yükünü hafifletmesi, responsive(esnek) web sitelerde grid yapısı bulunan framework’lerin fazlasıyla işe yaraması ve düzenli kod yazmanızı sağlamasıdır.

Benim CSS Framework’lerine bakış açım pek hoş değil. Son zamanlarda framework kullanımının yaygınlaşmasıyla beraber rahatsızlığımda aynı oranda arttı. Özellikle Boostrap’ın CSS üzerinde fazlasıyla etkili olması sebebiyle bi çok kopya site görmeye başladım. Aslında kopya demek abartı olabilir, daha doğrusu tasarımların standartlaşmasından bahsediyorum. Artık bir web sayfasının Boostrap ile kodlandığını anlamak pekte zor olmuyor. Tabii bu durum her zaman geçerli değil yaratıcılığın geçerli olduğu her yerde orjinallik, estetik yaşamaya devam ediyor.

Frameworklerden rahatsız olmam kullanmayacağım anlamınada gelemez. Bende boostrap, materialize, semantic gibi frameworkleri kullanıyorum ve kullanmaya devam edeceğim. Ancak frameworklerin fazla kod yükü, öğrenme güçlüğü, benim için geçerli olmayan, kullanmak istemeyeceğim kodlar ve tasarım çizgimi koruma isteğimle Mozaik.css‘i oluşturdum.

Lafı daha fazla uzatmadan Mozaik.css‘e geçmek istiyorum. Mozaik 12’li grid yapısında oluşan bir frameworktür. Ayrıca içerisinde form, paragraf, başlıklar gibi html standartlarını stillendiren UI yapısıda bulunuyor.

Neden Mozaik.css?

Mozaik.css’i neden hazırladığımı maddeler halinde sunacak olursam;

  • Başkalarının yazdığı kodlarla haşır-neşir olmaktan pek hoşlanmam. Kendi yazdığım kodları tanımak, düzenlemek benim için çok daha kolay.
  • Kod boyutunun hafifliği: Açıklama satırlarıyla beraber mozaik.css: 13kb, mozaikgrid.css: 7kb. Sıkıştırılmış olarak: mozaik.min.css: 9kb, mozaikgrid.min.css: 5kb ve mozaik.css sadece 505 satır, mozaikgrid.css 240 satır.
  • Kendi arayüzüm, kendi çizgilerim.
  • Hazırladığım web sayfasının kodlarını uzun zaman sonra tekrar düzenlediğimde daha anlaşılır olması, daha kolay düzenlemem.
  • Daha hızlı proje geliştirme olanağı.
  • Temiz ve düzenli kodlar.
  • Responsive(esnek) web sayfalarını hazırlama kolaylığı.

Birazda hazırlarken eğleneceğimi düşünerek bu kararı verdim.

Grid yapısı nasıl kullanılır?

Daha önce Boostrap, Semantic, Leaf, Materialize vb. frameworkleri kullanmış olanların anlaması zor olmayacak, ben detaylı olarak her aşamasını anlatmaya çalışacağım.

İlk olarak mozaik.css’i web sayfanıza dahil etmeniz gerekiyor. Aşağıdaki kodları sitenizin <head> etiketleri arasına yerleştirin.

Mozaik.css’i ızgara yapısı ve kullanıcı arayüzü dahil olarak kullanmak isterseniz

<link rel="stylesheet" type="text/css" href="css/mozaik.min.css">

Sadece Grid(Izgara) sistemini kullanmak isterseniz;

<link rel="stylesheet" type="text/css" href="css/mozaikgrid.min.css">

Mozaik web sayfanızı 12 parçaya bölerek sizin tek tek katmanlar açıp stil vermenizin önüne geçerek işinizi kolaylaştırıyor. Mozaik’in sütunları kapsayan class’ının adı .sira , sütun öneki(prefix) olarak .sutun-* class ismini verdim. Örneğin 12 sütunlu bir katman oluşturmanız gerektiğinde .sutun-12 class’ını gireceksiniz.

Mesela ana hatlarıyla header, sidebar, content, footer elemanları içeren bir web sitesi hazırlamamız gerekteğinde aşağıdaki kodları yazmamız yeterli olacaktır.

  <!--
  not: "container", class'ı mozaik.css'in içerisinde bulunan, site kapsayan dividir. boyutu max-width:1180px; 
  olarak ayarlanmıştır. buna artı olarak "container-full" class'ının genişliği 100% olarak hazırlanmıştır. Kullanıp,
  kullanmamak sizin kararınız.
  -->
  <div class="sira container">
    <!-- header -->
    <header class="sutun-12">
      header
    </header>
    <!-- sidebar -->
    <sidebar class="sutun-4">
      sidebar
    </sidebar>
    <!-- content -->
    <section class="sutun-8">
      content
    </section>
    <!-- footer -->
    <footer class="sutun-12">
      footer
    </footer>
  </div>

Yukarıda bulunan kodun çıktısı aşağıdaki gibi olacaktır. (Tüm örnekler için renklendirmeler, borderlar örnek amaçlıdır.)

1, 2, 3, 4 istediğiniz parçaya bölebilirsiniz. Bir ileri aşama header’a logo, menü ve en sağ köşesine arama katmanı ekleyelim.

<header class="sutun-12"> divinin içerisine .sira kapsayan divini ekleyip içine 3 katman yerleştireceğim. Logo için 2 sütun, menü için 7 sütun, arama katmanı için 3 sütun ekleyip 12 sütun’a tamamlayacağım.

<!-- header -->
<header class="sutun-12">
  header .sutun-12
  <div class="sira">
    <div class="sutun-2">logo .sutun-2</div>
    <!-- menu -->
    <div class="sutun-7">menü .sutun-8</div>
    <!-- arama -->
    <div class="sutun-3">arama .sutun-2</div>
  </div>
</header>

Yukarıdaki kodların çıktısı aşağıdaki gibi olacak;

Tek sütunu ortalamak için kullanmanız gereken class .moz-merkez‘dir. Eğer sütunu sağa yaslamanız gerekiyorsa kullanmanız gereken class ise .moz-sag ‘dır. Örnek olarak 6 sutünluk bir katmanı yatayda ortalayalım. Yine 6 sütunluk katmanı sağa yaslayalım.

<div class="sutun-6 moz-merkez">
   .sutun-6 .moz-merkez
</div>
<div class="sutun-6 moz-sag">
   .sutun-6 .moz-sag
</div>

Kaç parçaya böleceğinizi 12’li mantık üzerinden kendiniz yapabilirsiniz. Unutulmaması gerekenleri şöyle sıralayalım;

  1. 12’li sistemin temel mantığı sayfayı 12 parçaya bölmektir. Yani sayfa genişliğini 100 kabul edersek, 100’ü 12’ye bölüyoruz.
  2. Her sütun sayfanın yüzde 8.333333333333333‘ünü kaplar. Katlanarak devam eder. sutun-2’nin yüzdesi 16.66666666666667‘dir.
  3. Standart olarak sütunların 10px padding değeri bulunuyor. Solda ve sağda kalan fazla boşlukları .moz-bosluk class’ı ile silebilirsiniz.
  4. Sütunları .sira class’ının içine almanız clearfix hatasını engelleyecektir. Zira .sira class’ının after değeri clear:both; olarak ayarlı.

Eşitlemeler (offset)

Eşitlemeler katmanlar arasında boşluk vermenize olanak sağlar. Örneğin solda 4 sütunluk bir katmanımız, ortada 3 sütunluk bir diğer katmanımız ve sağda 3 sütunluk bir katman olmak üzere 10 katmanımız var. float:left değeri okunacağından bir birine yapışık sola yaslı şekilde olacak ve sağ alanda 3 sütunluk boşluk kalacaktır. Aralarında 1 sütun boşluk vermemiz gereken durumlarda büyük sıkıntı yaşayacağız. Sağdaki sütuna float:right vermeniz 2 den fazla katman ekleyeceğiniz durumlarda işe yarayacaktır.

Bu durumda yapmamız gereken katmanlara .esit-* değeri vermek olacaktır. Yani kaç satır margin değeri istiyorsak (sadece margin-left için geçerli) .esit-* önekinin önüne giriyoruz. Örneğin 3 katmandan oluşan bir yapı için aralarda 1’er sütun margin istersek esit-1 değerini gireriz.

Örnekleri incelediğinizde ne demek istediğimi daha iyi anlayacaksınız;

<div class="sira">
  <div class="sutun-4">
    .sutun-4
  </div>
  <div class="sutun-3 esit-1">
    .sutun-3 .esit-1
  </div>
  <div class="sutun-3 esit-1">
    .sutun-3 .esit-1
  </div>
</div>

Responsive(Esnek) Sütunlar

Mozaik.css’in grid yapısını responsive olarak hazırladım. Aslında standart sütunlar responsive değil. Tabii ki esnek ancak @media özellikleri bulunmuyor. Standart sütunların sabit olarak responsive olması bir çok çalışmamda veya çalışmanızda spesifik detay sorunlarına neden olacak. Üstelik her site için farklı şekilde düzenlenmesi gerekecekti. Bunun yerine pencere boyutu 1000px‘in altına düştüğünde .sutun-*-lab sütun yapısı devreye girmesi daha özgür ve özelleştirilebilir imkanlar sunuyor.

Sütunların önekleri ve boyutları aşağıdaki gibidir;

Class İsmi Boyutları Cihazlar
.sutun-* 1000px’den sonrası Büyük ekranlı bilgisayarlar, masaüstü bilgisayarlar
.sutun-*-lap maksimum 1000px Laptoplar, yatay tabletler vb.
.sutun-*-tab maksimum 750px Tabletler, büyük ekranlı yatay telefonlar vb.
.sutun-*-btel maksimum 550px Büyük ekranlı telefonlar, yatay telefonlar vb.
.sutun-*-tel maksimum 480px Telefonlar

Esnek kutuların kullanım mantığı oldukça basittir. Kabaca anlatmak gerekirse .sutun-6 class’ı verilmiş bir katmanın pencere boyutu 1000px’in altına düştüğünde 12 sütun olmasını istiyorsunuz. Yapmanız gereken katmana .sutun-6 ‘dan ekstra olarak sutun-12-lap class’ını vermeniz. Yani tarayıcıya .sutun-12 olan katmanım, 1000px’in altına düştüğünde .sutun-12-lap olsun diyorsunuz.

Örnek kullanım aşağıdaki gibidir;

<div class="sutun-6 sutun-12-lap">
  .sutun-12 .sutun-6-lab
</div>

Yukarıdaki kodun çıktısı aşağıdaki gibi olacaktır;

3 sütunluk yanyana 4 katmanı telefonlar için uyumlu hale getirmek, telefon boyutunda 2 yanyana 6 sütunluk katman oluşturmak için ise şöyle bir koda ihtiyacınız var;

<div class="sutun-3 sutun-6-tel">
    .sutun-3 .sutun-6-tel
</div>
<div class="sutun-3 sutun-6-tel">
    .sutun-3 .sutun-6-tel
</div>
<div class="sutun-3 sutun-6-tel">
    .sutun-3 .sutun-6-tel
</div>
<div class="sutun-3 sutun-6-tel">
    .sutun-3 .sutun-6-tel
</div>

Responsive’de Gizlenen Div’ler

Eğer belli cihazlarda kaybolmasını istediğiniz katmanlarınız varsa bunları .moz-gizle-* class’ıyla kolayca yapabilirsiniz. Örneğin telefonlarda gizlemek istediğiniz katmanlarınız varsa .moz-gizle-tel class’ını kullanmanız yeterli olacaktır. Daha fazlası için aşağıdaki tabloya göz gezdirin.

Mozaik.css’in grid yapısını, bu tür konuları anlatmakta zorlansamda anlatmaya çalıştım. Umuyorum yeterince açıklayıcı olmuşumdur. Aşağıda gerekli olan class isimlerini düzenli bir şekilde tabloladım;

Class İsmi Nedir?
.sira Sütunları kapsayan katmandır. :after değerinde clear:both; özelliği taşıyor.
.sutun-* Standart sütun öneki 1 ile 12 arası bir değer alır.
.moz-merkez Sütunu yatay olarak ortalar
.moz-sag Sütunu sağa yaslar
.container Site kapsayan katmanıdır, max-width:1180px değeri taşıyor
.container-full Site kapsayan katmanıdır, width:100% değeri taşıyor
.moz-full-genis width:100% değeri taşıyor
.sutun-*-lap maksimum 1000px’e kadar cihazlarda çalışır
.sutun-*-tab maksimum 750px’e kadar cihazlarda çalışır
.sutun-*-btel maksimum 550px’e kadar cihazlarda çalışır
.sutun-*-tel maksimum 480px’e kadar cihazlarda çalışır
.moz-gizle 1000px’den büyük cihazlarda katmanı gizler
.moz-gizle-lap 1000px’e kadar cihazlarda  katmanı gizler
.moz-gizle-tab 750px’e kadar cihazlarda  katmanı gizler
.moz-gizle-btel 550px’e kadar cihazlarda katmanı gizler
.moz-gizle-tel 480px’e kadar cihazlarda katmanı gizler
.moz-bosluk Sutünlarda bulanan standart 10px padding kodunu kaldırmaya yarar

Bundan sonra anlatılacaklar kullanıcı arayüzünü oluşturan öğeler. Uzun uzun anlatmaya gerek olmadığını düşünüyorum. Sadece gerekli olan class isimlerini paylaşacağım. Daha fazlasına döküman dosyasından ulaşabilirsiniz.

Tipografi

Class İsmi Nedir?
.metin-sutun-2 Metni 2 sütuna böler
.metin-sutun-3 Metni 3 sütuna böler
.moz-dugme Standart button stillendirme
.moz-dugme .moz-dugme-iki İkinci stil button
.moz-dugme .moz-kucuk-dugme Küçük button stillendirme
.moz-dugme .moz-dugme-onay Onay button stillendirme
.moz-dugme .moz-dugme-risk Risk button stillendirme
.moz-dugme .moz-dugme-uyari Uyari button stillendirme
.moz-mesaj Standart mesaj kutusu stillendirme
.moz-mesaj .moz-hata Hata mesaj kutusu stillendirme
.moz-mesaj .moz-uyari Uyarı mesaj kutusu stillendirme
.moz-mesaj .moz-onay Onay mesaj kutusu stillendirme
.moz-mesaj .moz-bilgi Bilgi mesaj kutusu stillendirme

Sonlara geldiğimizde bir kaç şey söylemek istiyorum;

Şuan için mozaik.css ile ciddi bir çalışma hazırlamadım. Bu yüzden ne eksiktir, nerelerde hata vardır tam tahmin edemiyorum. Ancak ilerleyen zamanlar için üzerinde ciddi çalışmalar yapmayı planlıyorum. Kullandıkça hatalarını eksiklerini fark edeceğim. Kullandıkca alışacağım. Kullandıkca, tecrübe ettikçe geliştireceğim.

Mozaik.css’i GitHub üzerinden indirebilirsiniz;

GitHub Proje Sayfası

Döküman Sayfası

Etiketler

Paylaş

Yorumlar