Bootstrap 5 Alpha ile Gelen Yenilikler

Bir çok frontend geliştiricinin ve tüm websitelerinin içinde %27 kullanım oranına sahip UI kütüphanesi olan Bootstrap köklü bir değişikliğe gidip Bootstrap 5 Alpha'yı duyurdu.

Bu makalede, Bootstrap yeni sürümünde bize neler vaadediyor, başlıca köklü değişiklikler neler ve release tarihinden bahsedeceğim.

Yazı içeriği

Jquery Artik Yok

nojquery

Bir çok eski projede varlığını sürdüren jquery günümüz spa dinamiğine ayak uyduramazken bir hamlede Bootstrap'den geldi ve yeni sürümünde kullanmayı bırakıp Vanilla JavaScript ile devam edeceğini belirtti. Bu sayade developerlar Jquery bağımlılığından kurtulup, pure JavaScript olmasının rahatlığını yaşayacak gibi görünüyor.

Responsive Fontlar

responsive-font-size

Tüm platformlar için tek bir font büyüklüğü kullanmak, kullanıcı açısından iyi bir görsel deneyim olmuyor. Bu gereklilik ile birlikte her cihaz için ya media query'ler yazmalıydık ya da font-size değerinde em, pt, px yerine vw ölçü birimi kullanmalıydık.

@media only screen and (max-width: 767px) {
   h1 {
      font-size: 3em;
   }
}

viewport font size

Bootstrap 5 ile @include font-size(*) mixin'i kullanarak responsive bir font-size elde etmiş oluyoruz. Örneğin .hero-title classına sahip olan bir elementi desktop tarafında 5em olmasını, küçüldükçe de otomatik ayarlamasını istiyoruz.

.hero-title {
  @include font-size(4rem);
}

Yazdığımız scss kodu aşağıdaki css koduna compile edilecektir:

.hero-title {
  font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
  .hero-title {
            font-size: 4rem;
  }
}

Internet Explorer Desteginin Kesilmesi

iestopworking

Internet Explorer, JavaScript ES6 desteklememesi ve bir çok CSS özelliklerini karşı cevapsız kalması bir çok geliştiriciyi zor duruma sokmakta. Postcss, Babel, Autoprefixer ile bir nebze olsun gerçek tasarıma yakın çıktılar elde edebiliyorduk fakat yine de hep bir şeyler eksik kalıyor. Çevrem dahil olmak üzere bir çok önyüz geliştiriciler Internet Explorer için ayrı bir efor harcamak istemiyor. (İstisnalar dışında). Bu nedenler başta olmak üzere Bootstrap ekibi, Bootstrap 5'te artık Internet Explorer 10 ve 11 için desteğini bırakmaya karar verdi. Geliştiriciler bu sayede Internet Explorer tarafına harcayacağı eforu ürüne harcayıp daha proaktif rol oynayabilirler.

SVG icon paketi

Bootstrap-icon

Bootstrap 5 ile birlikte gelen en heyecan verici yeniliklerden biri de geniş bir icon paketi. Bununla birlikte fontawesome ya da material icon gibi icon paketlerini ekstradan dahil etmek zorunda değilsiniz, paketi beğenmezseniz kullanmak zorunda da değilsiniz :)

Class Update

Bootstrap 4, bünyesinde 1500'den fazla class bulunduruyor. Bootstrap 5'de de çıkartılan ve eklenen bazı classlar oldu.

Çıkartılan Classlar:

  • form-row
  • form-inline
  • list-inline
  • card-deck

Eklenen Classlar:

  • gx-* yatay eksende sütun boşluk değerini belirliyor
  • gy-* dikey eksende sütun boşluk değerini belirliyor
  • g-* hem yatay hem de dikeyde sütun boşluk değerini belirliyor.
  • row-cols-auto sütun genişliklerini otomatik yapıyor.

Utility API

Bootstrap 5'le birlikte gelen utility API, bellir bir sytax a göre yardımcı classlar oluşturmaya yarıyor. Bir çok UI kütüphanelerinde bunu m-1, pl-2 olarak hatırlarsınız.

Utility API ile birlikte kendinize ait bir utility oluşturabilirsiniz. Aşağıdaki kod örneğine bir bakalım.

$utilities: () !default;
$utilities: map-merge(
    (
      'input-padding' : (
          property: padding,
          class: ip,  //input padding
          values: (
                   0 : 0,
                   1: 0.4rem,
                   2: 0.5rem,
                   3: 0.6rem,
                   4: 0.7rem,
                   5: 0.8rem
                   6: 0.9rem,
                   7: 1rem,
          )
        )
    ),
    $utilities
);

Prefix'i ip- olan bir utility class oluşturduk, ip- den sonra gelen değer, yukarıdaki oluşturduğumuz değer ile map'lenip karşılığındaki değer ne ise onu padding değeri olarak set edecektir.

<input class="ip-2" type="input">
.ip-2 {
padding:0.5rem;
}

Release Tarihi

Bahsettiklerim dışında card, navbar classlarında bir çok değişikler mevcut. Sadece önemli değişiklikleri kaleme almaya çalıştım. Bootstrap 4'ten Bootstrap 4.1'e geçiş süresini baz alırsak Bootstrap 5 release tarihini yaklaşık üç ay diyebiliriz.

Kaynak:

Bootstrap 5 Alpha-1

İlişkili Yazılar

You can say hello to me below or you can hire me.