CSS Grid (Izgara) ve UI (Kullanıcı Arayüzü) Framework Sistemi
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
LICENSE
README.md
index.html

README.md

Mozaik CSS

Grid ve UI Framework Sistemi

  • Yazar: Emre Aydın
  • Tarih: 05.02.2017
  • Son Güncelleme: 10.02.2017

1. Kurulum

Grid(Izgara) yapısı ve UI(Kullanıcı Arayüzü) dahil Mozaik'in tamamını 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">

2. Grid(Izgara) Sistemi

Mozaik grid(ızgara) sistemi responsive(esnek) ve Türkçe olarak hazırlandı. 12 Sütunlu ızgara sisteminin kullanımı oldukça basittir.

Sütunları kapsayan div .sira , sütunların prefix'i(öneki) .sutun-'dur. Yani sütun eklemek için .sira kapsayan div'inin içine .sutun-1 ile .sutun-12 arasında bir class vermelisiniz.

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

<div class="sira">
  <div class="sutun-12">header</div>
  <div class="sutun-4">sidebar</div>
  <div class="sutun-8">content</div>
  <div class="sutun-12">footer</div>
</div>

Sütunları .moz-merkez class'ı ile ortalayabilirsiniz

.moz-sag class'ı ile sağa yaslayabilirsiniz

2.1.Eşitlemeler(offset)

Eşitlemeler, sütunları soldan ittirmenize olanak sağlar. Eşitlemeler esit- prefix(öneki)'i ile kullanılır. Örnek kullanım;

<div class="sira">
  <div class="sutun-3">.sutun-3</div>
  <div class="sutun-6 esit-3">Eşitlenmiş Div (.sutun-6 .esit-3)</div>
</div>

2.2.Responsive(Esnek) Sütunlar

Mozaik grid sistemini responsive çalışmalarınızda kullanabilirsiniz. Responsive boyutları şöyledir;

  • max-width: 1000px > Küçük Ekran Bilgisayarlar, Laptop, yatay tablet vb.
  • max-width: 750px > Tablet bilgisayarlar vb.
  • max-width: 550px > Büyük ekranlı telefonlar vb.
  • max-width: 480px > Telefonlar
Class İsmi Boyutları
.sutun-* 1000px'den sonrası
.sutun-*-lap maksimum 1000px
.sutun-*-tab maksimum 750px
.sutun-*-btel maksimum 550px
.sutun-*-tel maksimum 480px
/* Küçük Ekran Bilgisayarlar, Laptop, yatay tablet vb. */
@media only screen and (max-width: 1000px) {
  /* Kodlar Buraya */
}
/* Tablet bilgisayarlar vb. */
@media only screen and (max-width: 750px) {
  /* Kodlar Buraya */
}
/* Büyük ekranlı telefonlar vb. */
@media only screen and (max-width: 550px) {
  /* Kodlar Buraya */
}
/* Telefonlar */
@media only screen and (max-width: 480px) {
  /* Kodlar Buraya */
}

2.2.1.Küçük Bilgisayarlar

Küçük bilgisayarlar veya laptoplar için düşünülmüştür. Class ismi .sutun-*-lap'dır. Pencere boyutu 1000px'den düşük olduğunda .sutun-6-lab devreye girecektir.

<div class="sira">
  <div class="sutun-3 sutun-6-lap"> .sutun-4 .sutun-6-lap </div>
  <div class="sutun-3 sutun-6-lap"> .sutun-4 .sutun-6-lap </div>
  <div class="sutun-3 sutun-6-lap"> .sutun-4 .sutun-6-lap </div>
  <div class="sutun-3 sutun-6-lap"> .sutun-4 .sutun-6-lap </div>
</div>

2.2.2.Tablet Bilgisayarlar

Class ismi .sutun-*-tab'dır.

2.2.3.Büyük Ekranlı Telefonlar

Class ismi .sutun-*-btel'dır.

2.2.4.Telefonlar

Class ismi .sutun-*-tel'dır.

2.3.Responsive Gizleme

.moz-gizle-* Yardımcı class'ları ile div katmanlarını gizleyebilirsiniz.

Class İsmi Boyutları
.moz-gizle 1000px'den sonrası
.moz-gizle-lap maksimum 1000px
.moz-gizle-tab maksimum 750px
.moz-gizle-btel maksimum 550px
.moz-gizle-tel maksimum 480px

2.3.Boşluk Kaldırma

Sütunlara standart olarak padding:10px değeri verilmiştir. Buda .sira divinin başında ve sonunda boşluklar oluşmasına neden oluyor. Boşlukları ilk ve son elemandan kaldırmak first-child ve last-child ile mümkün olsada .sira kapsayanının içinde tek sütun olduğunda ux hatalarına neden oluyor.

Bunun önüne geçmek, paddingi kaldırma için .sira divine .moz-bosluk divini ilave edin.

Diğer örnekleri ve detaylı bilgiyi döküman (index.html) dosyasından inceleyebilirsiniz.