Bulma CSS Framework

Bu yazıda ise, flexbox temelli bir CSS framework olan Bulma’dan bahsedeceğim. Öncelikle, bahsi geçen framework’ün web sayfası¹ ve GitHub sayfasını² incelemekte fayda olacaktır.

Flexbox

Bulma ile ilgili detaylara geçmeden önce flexbox’ın ne olduğuna kısaca bakalım. Flexible Box Module, yaygın adıyla flexbox bir tek boyutlu (one-dimensional) layout CSS grid layout model'dir³. Bir arabirimdeki öğeler arasındaki boşluk (space) dağılımını ve hizalamaları (alignment) kontrol etme yeteneklerine sahiptir. Unutmadan, tek boyutlu nitelendirmesi layout içerisinde yapılan işlemlerde (alignment) tek bir dikey (column) veya yatay kontrolünü (row) ifade etmektedir. Bu nedenle, flexbox ile çalışırken iki eksen - ana eksen (main axis) ve çapraz eksen (cross axis) olarak düşünmeniz gerekir. Flexbox ile ilgili şimdilik bu kadar açıklama yeterli sanırım. Daha detaylı bilgi için aşağıdaki sayfaları inceleyebilirsiniz:

Bulma: Modern CSS Framework

Semantic UI yazısında da paylaştığım grafikte de görüleceği üzere, Bulma son dönemin parlayan yıldızları arasında yer almakta. Elbette, amacım alternatif framework’leri öne çıkartmak olduğu için, bu karşılaştırmada ve grafikte Bootstrap özellikle hariç tutulmuş durumda⁴.

Bulma, flexbox temelli (flexbox-based) özellikler barındıran ve açık kaynaklı bir modern CSS framework. JavaScript gerektirmeyen yapısı, basit ve duyarlı (responsive) grid özellikleri ve ek geliştirmeleriyle kolaylıkla projelere entegre edilebilmekte⁵.

Bulma da, Semantic UI’daki kadar anlamlı olmasa da class adlandırmalarını hatırlamayı ve kullanmayı kolaylaştıracak şekilde sunmakta⁶. Hemen bir örnek oluştalım.

<div class="container is-fluid">
  <div class="buttons is-centered">
    <a class="button is-medium has-text-info is-size-4">
      <span class="icon is-small"><i class="fas fa-image"></i></span>
      <span>Pictures</span>
    </a>
    <a class="button is-medium is-link is-size-4">
      <span class="icon is-small"><i class="fas fa-music"></i></span>
      <span>Music</span>
    </a>
    <a class="button is-medium is-outlined is-info has-text-blue is-size-4">
      <span class="icon is-small"><i class="fas fa-file-alt"></i></span>
      <span>Documents</span>
    </a>
  </div>
</div>

Görüldüğü üzere Bulma CSS içerisinde class'lar is- ve has- prefix'lerini almakta. Bulma içerisinde pek çok modül kullanıma hazır bir şekilde sunulmakta. Özelleştirmeler de yine kolaylıkla (npm/parn, node-sass, webpack, Sass CLI) gerçekleştirilebilmekte. Bulma’nın yapısal olarak JS içermediğinden bahsetmiştim. Bu sayede kolaylıkla Vue, Angular ve React ile entegre edilebilmekte. Vue.js için UI bileşenleri buefy⁷ aracılığıyla kullanılabilmekte⁸.

Bulma Kullanımı

Bulma npm aracılığıyla kolaylıkla edinilebilmekte (tavsiye edilen yöntem), ancak ben örneklerde çoğu zaman framework’ü CDN aracılığıyla çalışmalara entegre edeceğim.

Bulma ile ilk adımı atmak için aşağıdaki şablonu kullanabilirsiniz.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css" />

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" />
    <!-- <link rel="stylesheet" href="styles/debug.css" /> -->
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
  </head>
  <body>
  <section class="section">
    <div class="container">
      <h1 class="title">
        Hello World!
      </h1>
      <p class="subtitle">
        It's my first website with <strong>Bulma</strong>!
      </p>
    </div>
  </section>
  </body>
</html>

Yukarıdaki başlangıcın dışında, debug.css ile Bulma ile oluşturduğunuz arayüzdeki hataları da kontrol altında tutabilirsiniz.

<link rel="stylesheet" href="styles/debug.css" />

İlgili debug.css içeriği ise şu şekilde:

/*! debug.css | MIT License | zaydek.github.com/debug.css */
*:not(path):not(g) {
 color:                    hsla(210, 100%, 100%, 0.9) !important;
 background:               hsla(210, 100%,  50%, 0.5) !important;
 outline:    solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;

 box-shadow: none !important;
}

Bulma Örnekleri

Bulma ile ilgili olarak My Journey into the Bulma CSS Framework, Quick Tip: How to Build a Blog Layout With Bulma ve How To Build A Responsive Tesla Launch Page With Bulma CSS başlıklı yazılara göz atmanızı özellikle tavsiye ediyorum. Ayrıca, Scrimba Bulma eğitim içerisinde de pek çok ek örnek yer almakta. Son olarak, bulmaswatch aracılığıyla da ücretsiz ve hazır şablonlara ulaşabilirsiniz.