tarihinde Fatih Hayrioğlu

ilk web sitesi

İlk kodlanan web sitelerinde içerik herhangi bir işlemden geçmeden direk kullanıcıya sunuluyordu. Düz metin ve resimlerin olduğu bir doküman gibi. Zamanla düz dokümanlardan farklı olarak web sayfaları (kullanıcının gördüğü alan değerli bir alan olduğu için) kullanıcıya bilgi verirken içeriği önceliklendirmeye başladık. Önemli içerikler sayfa ilk açıldığında yüklenirken önem sırasında arkada kalanlar. Sonrandan yüklendi veya kullanıcının istemesi halinde gösterildi.

Öncelikler ve ikinci sıraya düşenler için farklı çözümler oluşturuldu. Ben burada size daha önce bu işlemler için javascript ile yaptığımız çözümleri CSS ile yapmayı göstereceğim.

CSS bize kullanıcı etkileşimini yakalamakta yardımcı oluyor. CSS3 öncesinde :hover ile kullanıcının faresinin imleci ile belirlediğimiz elemanın üzerine geldiğinde bir iş yapabiliyoruz. CSS3 sonrasında :checked veya :target ile kullanıcının tıklamlarında bir işlem yapabiliyoruz artık. CSS3 Javascript’ten Rol (Ç)alıyor yazımda bahsetmiştim.

Normal mantık olarak CSS ile gizle-göster işini yapmak için ilk akla gelen display veya visibility özelliği yardımı ile bu işi yapmak. Ancak her iki özelliği de kullanamıyoruz. Çünkü CSS bu elemanlara erişemiyorum diyor. Bizde bu nedenle başka çözümlere yöneliyoruz. opacity özelliğini kullanabiliriz. Veyahut height değerini kullanabiliriz. height değerinin şöyle bir dezavantajı var bir elemana height atadığınızda o elemanın yüksekliği o değere sabitlenir. Halbuki biz değişik içerikteki alanları gizle-göster yapabiliriz. Bunun için yardımımıza max-height özelliği yetişiyor.

max-height özelliği içeriğimizin ne kadar olabileceği tahminine göre atarız. İçerik belirlediğimiz alanlar içinde dinamik olarak değişmesinden etkilenmez. Bir örnek yaparak durumu görelim.

HTML;

<input type="checkbox" name="gizleGoster" id="gizleGoster" />
<label for="gizleGoster"></label>
<div class="icerik">
  <h2>M. Serdar Kuzuloğlu</h2>
  <p>Küfür etmeden yapabildiğimiz her eleştiri...</p>
</div>

HTML İki alandan oluşuyor. Tıklamayı yakalamak için input ve label, Gizle-göster yapacağımız içerik alanı.

CSS;

input[type="checkbox"] {
  display:none;
  
  &:checked ~ {
    .icerik {
      max-height: 500px;
    } 
  }
}
.....
.icerik {
  max-height: 0;
  transition: all 500ms ease;
  overflow: hidden;
}

CSS kodunun önemli alanlarını yukarıya yazdım. Tüm kodu görmek için codepen.io’daki kodu inceleyiniz. Önemli olan kısım ilk halinde max-height: 0 ile gizleyip, göster dendiğinde max-height: 500px; tahmini yükseklik değerinin olduğu kısımdır. Eğer içerik daha fazla geliyorsa tahmini değer arttırılabilir.

Ayrıca gizle-göster yapılacak alana padding, margin ve border tanımlarsak animasyonda takılmalar olabiliyor. Bunun yerine bu kapsayıcının içindeki elemanlara bu değerleri vererek bu sorunu çözebiliyoruz.

Kaynaklar

tarihinde Fatih Hayrioğlu

Twiiter’da bu gönderiyi görünce font-face tanımını yenileyelim yazısında yenilediğim font-face tanımını acaba iki satıra indirebilirmiyim dedim içimden.

Woff formatı özel yazı tiplerinin kullanımının yayılması için güzel bir adımdı. 2. sürümü daha küçük yazı tipi dosyaları sağlayarak bunu bir adım daha ileri attı.

enter image description here

Woff2 formatı bir önceki sürümüne nazaran %50’ye varan kazanım sağladı. Diğer yazı tiplerinden kat ve kat kazanımı olduğu resimde görünüyor.

Özel yazı tipi için mevcutta kullandığım kod;

@font-face {
font-family: 'Open Sans';
src: local('Open Sans'), local('OpenSans'),
     url('open-sans.woff2') format('woff2'),
     url('open-sans.woff') format('woff'),
     url('open-sans.ttf') format('truetype'); /* Safari, Android, iOS */
}

Safari’nin yakın zamanda woff2 desteğini sunmasıyla birlikte tek sıkıntı Internet Explorer Edge 14’ün öncesi ve Android Browser desteğinin küçülmesini beklemek olacak. Büyük sorun ie değil Android Browser.

Nihai kod aşağıdaki gib olacak inşallah;

@font-face {
font-family: 'Open Sans';
src: local('Open Sans'), local('OpenSans'),
     url('open-sans.woff2') format('woff2');
}

Temiz.

Kaynaklar

tarihinde Fatih Hayrioğlu

İlk makalede genel ızgara yapısı ve bootstrap ızgara yapısının ana elemanlarından bahsettim. Bu makalede bootstrap ızgara yapısının detaylarına değineceğim.

Farklı yükseklikte kutular için satır yapısını koruma

Kutular float:left ile yan yana dizildiğinde kutulardan birinin yüksekliği fazla ise satır yapısı bozulur. Aşağıdaki örneği büyük pencere açınız.

Görüldüğü gibi yüksekliği fazla olan 2. kutu satır dizilimini bozuyor. Bootstrap’in bunun için çözümü çok kolay.

<div class="clearfix visible-md-block"></div>

Yukarıdaki kod bloğunu kodumuza eklediğimizde satır yapımız korunacaktır. visible-md-block kısmı hangi ekran boyutunda bu satırın işlevsel hale geleceğini gösterir.

İç içe kolon kullanımı

Bootstrap ızgara yapısı iç içe kolon kullanımını destekler. Genelde sitelerimiz tek kolonlu yapılarından oluşmaz. İç içe kolonların olduğu daha karışık planlardan oluşur. Bu durumda nasıl bir yol izlemeliyiz?

Yukarıdaki örnekte görüldüğü gibi iç içe kullanımda aynı ızgara elemanları kullanılıyor. Sadece daha önce container tanımı yapıldığı için tekrar yapılmıyor. İçerideki kolon tanımına başlarken direk row tanımı ile başlıyoruz.

Kolonları denkleştirme (Offsetting)

Bootstrap’in .col-md-offset-* sınıflarını kullanarak kolonları sağa doğru atabiliriz. Izgara yapısından kolonları soldan hizalamak veya denkleştirmek için margin kullanmak yerine .col-md-offset-* sınıfını kullanırız.

Yukarıdaki örnekte görüldüğü gibi ikinci satırdaki kolon soldan 4 kolonluk sağa doğru atıldı. Bunun için col-sm-offset-4 kullandık.

Kolon sıralama

Uyumlu web uygulamalarında can sıkan durumlardan bir tanesi büyük ekranlarda sağda olan bir kutu küçük ekranlarda sola yaslanması durumudur. Tabi bu tip anaçatıların avantajı tüm bu sorunlara bir çözüm oluşturmalarıdır.

Çözüm yine bir sınıf tanımlamak kadar kolay. Boostrap class yapılarından bildiğimiz .col-xs-#, .col-sm-#, .col-md-#, and .col-lg-# kullanımlarının sonuna soldan sağa ötelemek için push, sağdan sola çekmek için pull eklemelerini kullanıyoruz. Örneğin cep telefonlarında bir yer değiştirme yapacaksak .col-xs-push-# or .col-xs-pull-# diyelerine yerine ise kaç kolon öteleneceğini yazmamız yeterli.

Bir örnek ile konuyu pekiştirelim. Örneğin cep telefonu ekranında üstte iki kutu altında bir kutu şeklinde olan bir sayfa yapımız olsun. Geniş ekranlara bu üç kutuyu yan yana koyalım ve alttaki 3. kutuyu iki kutu arasına koyalım.

Örneği geniş ekran ve küçük ekranlarda deneyelim. Süper. Mobile öncelik vermeyi unutmayalım.

Kullanışlı sınıf tanımları

Boostrap uyumlu web için bazı hazır CSS sınıfları bize sunar. Bazı durumlarda bazı elemanları göstermek veya gizlemek isteriz. Bun işi yapmak için boostrap yine bize kullanışlı sınıflar sağlar.

Sadece bir ekran boyutunda göstermek için .visible-xs-#, .visible-sm-#, .visible-md-# ve .visible-lg-# sınıflarını bize sunar. Buradaki diyez (#) yerine göstereceğimiz elemanın display özelliğine göre inline, block ve inline-block değerine göre değişir. Örnek olarak farklı kutu yükseklikleri bölümünde ki kullanımı gösterebiliriz.

<div class="clearfix visible-md-block visible-lg-block"></div>

Aynı şekilde gizlemek için de sınıflar mevcuttur. .hidden-xs, .hidden-sm, .hidden-md ve .hidden-lg Farklılık dikkatinizi çekmiştir. Göstermenin aksine gizlemede elemanın blok veya inline-blok olmasının bir önemi olmadığı için bu kısım kaldırılmıştır.

Son olarak yazıcı görünümünde gizleme ve gösterme içinde sınıflar vardır. .visible-print-block, .visible-print-inline, .visible-print-inline-block ve .hidden-print sınıflarıda kullanışlı sınıflardır.

Anlamlı kodlama

Buraya kadar boostrap’in genel kullanımını gösterdik. Okunabilir kodlama için anlamlı sınıflar tanımlamak bize avantajlar sağlar. Örneğin Bir sayfayı kodlarken “Neden Zingat Enerji” bölümüm var. Boostrap genel kullanımı ile burayı kodlamak istesem kodlarım aşağıdaki gibi olacaktı.

<div class="container">
<div class="row">
  <h3>NEDEN ZİNGAT ÜST SIRA ENERJİSİ?</h3>
  <div class="col-md-4">
    <h4>ÜSTE ÇIKSIN</h4>
    <p>İlanınız diğer ilanların üstünde...</p>
  </div>
  <div class="col-md-4">
    <h4>DİKKAT ÇEKSİN</h4>
    <p>İlanınız daha fazla ziyaretçinin...</p
  </div>
  <div class="col-md-4">
    <h4>KOLAY ULAŞILSIN</h4>
    <p>Gayrimenkul arayanlar hem...</p>
  </div>
</div>
</div>

Bunun yerine

<div class="container">
<div class="neden-zingat-enerji">
  <h3>NEDEN ZİNGAT ÜST SIRA ENERJİSİ?</h3>
  <div class="ustte-ciksin">
    <h4>ÜSTE ÇIKSIN</h4>
    <p>İlanınız diğer ilanların üstünde...</p>
  </div>
  <div class="dikkat-ceksin">
    <h4>DİKKAT ÇEKSİN</h4>
    <p>İlanınız daha fazla ziyaretçinin...</p
  </div>
  <div class="kolay-ulasilsin">
    <h4>KOLAY ULAŞILSIN</h4>
    <p>Gayrimenkul arayanlar hem...</p>
  </div>
</div>
</div>

Şeklinde sınıfları anlaşılır yaptığımda kodu okurken daha hızlı anlıyorum. Less dosyasında kodlama yaparken anlamlı sınıf isimleri kod hızımı arttırıyor. Tabi tercih meselesi. Ama çok fazla kod yığınının olduğu yerlerde kodlama yaparken anlamlı kodlama yapmak şart.

Bootstrap 4 ızgara sistemi

Şimdiye kadar anlattığım Bootstrap 3.x kullanımıydı. Bootstrap geliştiricileri 4. alfa sürümünü çıkardılar. Genel itibari ile bütün kısımlar oturmuş gibi. Beta ve yayın sürüçlerinde değişiklikler olsa da genel olarak bu yapı korunur.

Bootstrap 4 birçok yenilik barındırıyor. En çarpıcı yeniliklerden birisi de ızgara yapısını artık sadece float ile değil de flexbox üzerinden yapmayada imkan sağlıyor olmaları. CSS3 ile gelen bu güzel özelliğin seçilmesi doğru karar.

Flexbox kullanmak için _variables.scss dosyasında;

$enable-flex: true !default;

yapmak yeterli.

Ayrıca CSS önderleyici olarak artık LESS değil SASS kullanma kararı almışlar.

Bootstrap 4 ızgara yapısı hakkında daha fazla deneyimim oldukça bu konuda da yazı yazarım.

Kalın sağlıcakla.

Kaynaklar