CSS

Bulma CSS Framework

Güncelleme:
Responsive Web Design ve CSS Framework Kullanımı yazılarının ardından, kullandığım CSS framework’lerden biri olan Semantic UI‘dan bahsetmiştim. Bu yazıda ise, flexbox temelli bir CSS framework ...
GÖRSEL
Responsive Web Design ve CSS Framework Kullanımı yazılarının ardından, kullandığım CSS framework’lerden biri olan Semantic UI‘dan bahsetmiştim. 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 Nedir?

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 modelidir. Bir arabirimdeki öğeler arasındaki boşluk (sapce) 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 Flexbox-based Frameworks

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.

CSS Frameworks

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 özellikler is- ve has- ile tanımlanmaktalar. 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 Nasıl Kullanılır?

Bulma npm aracılığıyla kolaylıkla edinilebilmekte (tavsiye edilen yöntem), ancak ben örneklerde çoğu zaman framework’ü CDN (cdnjs) aracılığıyla çalışmalara entegre edeceğim.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css" />
Bulma ile ilk adımı atmak için aşağıdaki şablonu kullanabilirsiniz.
<!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>
Bulma - Debug CSSYukarı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.
Ceyhun Enki Aksan

Kullanıcı Davranışları Analizi (User Behavior Analysis) ve Kullanıcı Deneyim Tasarımı (UX Design) üzerine çalışmalar yürütmekte, bu süreçte edindiğim teknik ve pratik bilgileri fayda sağlamak motivasyonuyla (afaik / as far as i know) paylaşmaktayım.

HABERDAR OL

Yeni eklenen projeler, eğitimler, içerikler ve yayınlanan videolar e-posta adresine gelsin.