Bootstrap 3 ile hızlı ve tutarlı arayüz kurmak

Ben bir arka uç (back-end) geliştiriciyim. CSS yazmaktan kaçınmıyorum ama saatler geçirerek bir düzenin piksel mükemmelliğini ayarlamak benim güçlü yönüm değil. Müşteri projelerinde çoğu zaman yanımda bir tasarımcı yok; arayüzü de ben kuruyorum.

Bu denklemde Bootstrap 3 ciddi bir zaman kazandırıcı oldu. Ne yaptığını, nasıl kullandığımı kısaca anlatmak istiyorum.

Bootstrap nedir?

Bootstrap, Twitter tarafından geliştirilip 2013’te sürüm 3 ile güçlü bir taban kazanan, HTML ve CSS bileşen kütüphanesidir. Hazır bir ızgara sistemi (grid system), tipografi, form stilleri, düğmeler, gezinme çubuğu ve onlarca UI bileşeni içeriyor.

Herhangi bir proje için CDN üzerinden hemen kullanılabiliyor:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Ya da Composer/Bower ile yönetilmiş paket olarak indirilebiliyor.

Izgara sistemi (Grid System)

Bootstrap’in temelini 12 sütunluk ızgara oluşturuyor. Sayfayı sütunlara bölmek için CSS sınıfları kullanıyorsunuz:

<div class="container">
    <div class="row">
        <div class="col-md-8">
            Ana içerik (12'de 8 sütun)
        </div>
        <div class="col-md-4">
            Yan panel (12'de 4 sütun)
        </div>
    </div>
</div>

col-md-8 ve col-md-4 toplamı 12’ye eşit; bu şekilde yan yana oturuyorlar. md öneki “medium” anlamında; tablet ve üstü ekranlar için geçerli. col-sm-* küçük ekranlar, col-xs-* telefon boyutları için.

Ekran küçüldüğünde sütunlar otomatik olarak alt alta geliyor. Elle @media sorgusu yazmadan duyarlı (responsive) bir düzen hazır.

Duyarlı tasarım

Bootstrap 3 mobil öncelikli (mobile-first). Sınıfları iç içe kullanarak farklı ekran boyutları için farklı düzenler tanımlayabiliyorsunuz:

<div class="col-xs-12 col-sm-6 col-md-4">
    <!-- Telefonda tam genişlik, tablette yarı genişlik, masaüstünde üçte bir -->
</div>

Bu üç sınıfı bir arada yazmak farklı kırılma noktaları (breakpoints) için farklı davranış sağlıyor. Mobil uyumluluk için ayrıca bir iş yapmıyorsunuz.

Hazır bileşenler

Izgara sisteminin yanı sıra sık kullanılan arayüz öğeleri için hazır bileşenler var:

Navigasyon çubuğu:

<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="/">Logo</a>
        </div>
        <ul class="nav navbar-nav">
            <li><a href="/hakkimda">Hakkımda</a></li>
            <li><a href="/iletisim">İletişim</a></li>
        </ul>
    </div>
</nav>

Mobilde hamburger menüye otomatik dönüşüyor; JavaScript zaten Bootstrap’te dahil.

Formlar:

<div class="form-group">
    <label for="email">E-posta</label>
    <input type="email" class="form-control" id="email" placeholder="ornek@site.com">
</div>
<button type="submit" class="btn btn-primary">Gönder</button>

form-control ve btn btn-primary sınıfları alanları ve düğmeyi hemen stilliyor. Ön tanımlı renkler, kenarlıklar ve odaklanma (focus) durumları geliyor.

Uyarı kutuları:

<div class="alert alert-success">İşlem başarıyla tamamlandı.</div>
<div class="alert alert-danger">Bir hata oluştu.</div>

Bunlar küçük şeyler gibi görünse de her projede tekrarlanıyor. Sıfırdan yazmak yerine hazır bir sınıf yazmak iyi zaman kazandırıyor.

Özelleştirme

Bootstrap’in varsayılan stili tanıdık geliyor; çok siteyi aynı görünümle yapar. Bunu aşmak için:

• Renk paletini değiştirmek istiyorsanız Bootstrap’in LESS değişkenlerini override edebilirsiniz.
• Ya da Bootstrap CSS’i indirip üstüne kendi CSS dosyanızda değişiklikler yapıyorsunuz.

Ben çoğu projede Bootstrap’i temel alıp müşteriye özgü renk ve font ayarlarını ayrı bir CSS dosyasında tutuyorum. Sıfırdan tasarlamak yerine bu şablon üzerinden hızla ilerlemek mümkün.

Bir tuzak noktası: Bootstrap’in bazı bileşenlerine özel CSS yazmaya çalışırken özgüllük (specificity) sorunuyla karşılaşabilirsiniz. .navbar için yazdığınız bir stil bazen framework’ün kendi kuralı tarafından ezilir. Bu durumda tarayıcı geliştirici araçlarından hangi kuralın kazandığını kontrol etmek gerekiyor. Kendi stillerimi ayrı bir dosyada ve Bootstrap’ten sonra yükleyerek bu sorunu en aza indiriyorum.

Arka uç geliştirici için değeri

Tasarım konusunda sınırlı bir arka uç geliştirici olarak Bootstrap, arayüzde “en azından tutarlı ve çalışan bir şey” garantisi veriyor. Müşteriye göstereceğim bir prototipi yarım günde kurabilirim; tasarımcı bulana kadar geçerli bir arayüz ayakta durur.

İşlevsel bir form, bir tablo, bir listeleme ekranı — bunlar Bootstrap ile çok hızlı çıkıyor. Özellikle müşteriye “şöyle bir akış olacak” demek için prototipi hızlı görmek istediğinizde bu sürat büyük değer taşıyor. Sıfırdan CSS yazmak ayrı bir uzmanlık gerektirirken Bootstrap ile o uzmanlığa gerek kalmadan kabul edilebilir bir arayüz elde edebiliyorsunuz.

Tüm projelerde uygun olmayabilir; tasarım odaklı, özgün görsel kimlik isteyen projelerde Bootstrap kısıtlayıcı olabilir. Ama hızlı hareket edilmesi gereken, işlevselliğin önce geldiği projelerde şu an tercihim bu.