CSS Frameworkleri Tanıyoruz | 3. Bölüm: Bulma

Bu seride amacımız, popüler CSS framework’lerini sade bir dille tanıtmak, nasıl kullanılacaklarını göstermek ve küçük projelerle öğrenmeyi desteklemek. İlk iki bölümde Bootstrap ve Foundation ile temel yapıları öğrendik. Şimdi sırada, sadeliği ve esnekliğiyle öne çıkan Bulma var. Açıkçası ben uzun zamandır Bulma’yı incelemek istiyordum. Bugüne nasip oldu.

Bulma, Flexbox temelli yapısı ve anlaşılır sınıf isimlendirmesiyle hem yeni başlayanlar hem de tecrübeli geliştiriciler için oldukça pratik bir seçenek. Hem hızlı prototipleme hem de üretim için kullanabileceğiniz güçlü bir araç.

Hazırsan, birlikte Bulma’nın dünyasına kısa bir yolculuğa çıkalım

1. Bulma Nedir?

Bulma, modern web arayüzleri tasarlamak için geliştirilmiş, yalnızca CSS içeren ve %100 Flexbox tabanlı bir frontend framework’tür. JavaScript içermez; bu da onu, sade ve kontrolü tamamen geliştiriciye bırakan bir yapı haline getirir. Özellikle kendi sayfalarında da “Javascript” içermediğine sürekli vurgu yapılıyor.

Bulma’nın temel felsefesi, “kodu anlamak kolay olmalı” yaklaşımıdır. Açıkçası bu yaklaşıma oldukça katılıyorum. Sınıf isimlendirmeleri oldukça sezgiseldir ve HTML yazarken tasarımı aynı anda oluşturmak mümkündür. Bu yüzden özellikle hızlı prototipleme için çok tercih edilir.

Öne Çıkan Özellikleri

1.1 - %100 Flexbox Tabanlı Olması

Bulma’nın layout sistemi tamamen Flexbox üzerine kuruludur. Bu sayede hem yatay hem de dikey hizalama işlemleri oldukça esnektir. Karmaşık grid yapıları bile birkaç satır sınıf ile kolayca oluşturulabilir.

1.2 - Kolay Öğrenilebilir Sınıf Sistemi

Sınıf isimleri açık ve anlamlıdır:

• is-primary, is-success, is-warning gibi görsel sınıflar, bir bakışta ne işe yaradığını belli eder.
• has-text-centered, is-fullwidth, is-size-4 gibi yapılar, stil vermek için CSS yazmadan işleri halletmenizi sağlar.

1.3 - Responsive Tasarımlarda Büyük Kolaylık

Mobil öncelikli yaklaşımı benimseyen Bulma, farklı ekran boyutları için özelleştirme yapmayı oldukça kolaylaştırır. Örneğin:

Bu yapı, mobilde tam genişlik, tablette yarım, masaüstünde üçte bir genişlik anlamına gelir.

1.4 - JavaScript Bağımlılığı Yok

Bulma yalnızca CSS içerir. Yani framework içerisinde herhangi bir JS bileşeni bulunmaz. Bu da onu Vue, React, Angular gibi modern frameworklerle kolay entegre edilebilir hale getirir. Dilersen kendi JS kodlarını yazarak veya üçüncü taraf kütüphanelerle destekleyebilirsin.

1.5 - Zengin Hazır Bileşen Desteği

Buton, kart, form, navbar, mesaj kutuları, breadcrumb gibi birçok arayüz bileşeni varsayılan olarak gelir. Örneğin:

2. Bulma Nasıl Kurulur?

Bulma’yı kullanmaya başlamak için birkaç farklı yöntem mevcut. İster bir CDN üzerinden hızlıca yükleyebilir, ister projene npm ile kurulum yaparak daha kontrollü bir entegrasyon gerçekleştirebilirsin.

2.1- CDN ile Hızlı Kurulum

Bulma’yı en hızlı şekilde projene dahil etmek için CDN (Content Delivery Network) kullanabilirsin. Bu yöntem, projene herhangi bir dosya indirmen gerekmeden doğrudan Bulma’nın sunucularından stil dosyalarını yükler.

İhtiyacın olan tek şey HTML dosyanıza şu satırı eklemek:

2.2- npm ile Kurulum

Projenin bir Node.js tabanlı yapısı varsa, npm ile Bulma’yı projenize dahil edebilirsin. Bu, özellikle projeyi daha profesyonel şekilde yönetmek isteyenler için iyi bir seçenek. Adımlar:

1 — Projende npm’i başlat:

npm init -y

2 — Bulma’yı kur:

npm install bulma

3 — node_modules klasöründen Bulma stil dosyasını projene import et:

@import 'node_modules/bulma/css/bulma.min.css';

Bu yöntemle, projenin gereksinimlerine göre daha esnek bir kurulum yapmış olursun. Ayrıca, Bulma’nın özelleştirilmiş sürümleri için Sass kullanabilirsin.

2.3- Sass ile Özelleştirme (İleri Seviye)

Bulma, Sass ile özelleştirilebilirsin. Özellikle tasarımın bazı kısımlarını değiştirmek istiyorsan, Bulma’nın Sass dosyasını projene dahil edip, kendi özel tasarımını oluşturabilirsin. Bulma’nın Sass dosyasına erişmek için npm kurulumunu kullanman gerekecek.

1- Sass dosyasını import et:

@import 'node_modules/bulma/bulma';

2- Bulma’nın sunduğu değişkenleri ve mixin’leri kullanarak renk, yazı tipi, buton boyutları gibi tasarım öğelerini özelleştirebilirsin. Örneğin:

$primary: #ff6347;

Böylece, global tema renklerinizi değiştirmiş olursunuz.

Harika! Şimdi Bulma ile Basit Bir Proje yapalım. Bu projede, Bulma’nın sunduğu temel bileşenleri kullanarak basit bir landing page (karşılama sayfası) tasarımı oluşturacağız. Aslında ne kadar basit ve anlaşılır olduğunu göreceksiniz. Dilerseniz başlayalım.

Basit Bir Proje: Landing Page Tasarımı

Bu projede, temel HTML yapısını kullanarak Bulma framework’ü ile şık bir karşılama sayfası hazırlayacağız. İşte adım adım nasıl yapacağımız:

1. HTML Yapısını Oluşturma

Öncelikle, temel HTML yapısını oluşturalım. Bulma’nın sunduğu hero sınıfını kullanarak bir başlık bölümü ekleyeceğiz ve altında birkaç kart bileşeni olacak.

</body>
</html>

2. Açıklamalar

• Hero Section: Bulma’nın hero sınıfı ile ekranın tamamını kaplayan bir başlık bölümümüz var. Burada is-primary sınıfı, başlık kısmına ana renk tonunu verir
• Feature Section: Bu bölümde üç adet kart kullanıyoruz. Her kart, bir özellik tanıtımı yapacak şekilde tasarlandı. columns sınıfı ile kartları hizalıyoruz.
• Footer Section: Sayfanın alt kısmında, sayfa hakkında kısa bir bilgi veren basit bir footer bulunuyor.

3. CSS Özelleştirmeleri (isteğe bağlı)

Eğer özelleştirmek istersen, Bulma’nın sunduğu renkleri veya tasarım ögelerini değiştirebilirsin. Örneğin, hero kısmının rengini değiştirebilir veya kartların stilini özelleştirebilirsin.

4. Responsive Tasarım

Bulma, mobil öncelikli tasarım sunar. Bu nedenle tasarım, mobil cihazlarda düzgün bir şekilde görüntülenir. columns sınıfı ve is-multiline sayesinde, ekran boyutuna göre kartlar düzgün bir şekilde yerleşir. Küçük ekranlarda her kart bir satıra düşer, büyük ekranlarda ise yan yana yer alırlar.

Sonuç

Bu projede, Bulma’nın kolay kullanımı, responsive özellikleri ve hazır bileşenleri sayesinde hızlı bir şekilde profesyonel görünümlü bir sayfa oluşturduk. Artık, Bulma’yı kullanarak daha büyük projeler geliştirebilirsin.

Daha İleri Gitmek İçin

• Bulma’nın belgelerini (bulma.io) inceleyerek daha fazla bileşen ve özelleştirme hakkında bilgi edinebilirsin.
• Bulma’yı projende Sass ile kullanarak stil dosyalarını daha detaylı şekilde yönetebilirsin.