Bootstrap Utility

Bootstrap Utility kullanmak için bir Sass Compiler’ a ihtiyaç duyuyoruz. Bu özelliğin temeli Sass kullanılarak dinamik olarak css haritaları oluşturmaya dayanıyor. Visual Studio Code için Live Sass Compiler kullanabilirsiniz. Bu eklentiyi kurduktan sonra Utility için gerekli olan Bootstrap dosyalarını import etmemiz gerekiyor. Bunlar;

@import "./node_modules/bootstrap/scss/functions";
@import "./node_modules/bootstrap/scss/variables";
@import "./node_modules/bootstrap/scss/utilities";

sayfamıza import edildikten sonra, gerekli Utility tanımlamalarını yapıyoruz. Tanımlamaların ardından sayfanın en altında bir import işlemi daha gerçekleştirmemiz gerekiyor.

@import "./node_modules/bootstrap/scss/bootstrap.scss";

Bu iki import işleminin ortasına artık Utility tanımlamalarını yapabiliriz.

Bootstrap Utility, özelliğini kullanmak için iki tane zorunlu alan tanımlaması yapmamız gerekiyor. Bunlar property ve values. Şimdi aşağıdaki örneği inceleyelim.

$utilities: (
  "custom-width": (
    property: width,
    values: (
      10: 10%,
      20: 20%,
      30: 30%,
      40: 40%,
      50: 50%,
      60: 60%,
      70: 70%,
      80: 80%,
      90: 90%,
      100: 100%,
    ),
   ),
 );

Bu kod bloğunda görüldü üzere Utility $utility:() şeklinde başlatılıyor. sonrasında oluşturulan sınıf için bir isim tanımlaması yapıyoruz. “custom-width” şeklinde tanımlamayı yaptıktan sonra, oluşturulan bu class’ ın css’ in hangi özelliğini etkileyeceğini property bölümünde belirtiyoruz. values bölümünde ise isim:değer şeklinde tanımlalarımızı yapıyoruz.

Tanımlamalarımızı yaptıktan sonra Sass otomatik olarak çalışarak bize aşağıdaki gibi bir css dosyası üretiyor.

.width-10 {
 width: 10% !important;
}
.width-20 {
 width: 20% !important;
}
.width-30 {
 width: 30% !important;
}
.width-40 {
 width: 40% !important;
}
.width-50 {
 width: 50% !important;
}
.width-60 {
 width: 60% !important;
}

Örnekte gördüğümüz üzere Bootstrap Utility hızlaca custom temamız için yeni sınıflar üretmemizi sağlıyor. Artık width ile ilgili sınıfa .width-”values değeri” şeklinde erişebiliriz. Bununla birlikte istersek sınıflara class özelliğini kullanarak bir ön ad ekleyebiliriz.

 "custom-border": (
       property: border,
       responsive: true,
       class:c-border,
       values: (
         slim: 3px solid #852929,
         medium: 5px solid #852929,
         bold: 7px solid #852929,
       ),
     ),

Bu kod bloğunda belirtildiği şekilde class tanımlaması yapılırsa aşağıdaki şekilde classlarımıza erişip kullanabiliyoruz.

.c-border-slim {
 border: 3px solid #852929 !important;
}
.c-border-medium {
 border: 5px solid #852929 !important;
}
.c-border-bold {
 border: 7px solid #852929 !important;
}

Bootstrap Utility ile opsiyonel olarak kullanabileceğimiz bir özellikte Responsive özelliği. Bu özellik sayesinde Bootstrap bizim için responsive classları kolayca oluşturabiliyor. Bir önce ki kod bloğunda bulunan responsive:true, ifadesi bu özelliği aktif ediyor. Yukarıda ki kod bloğunda gösterilen 3 class ile birlikte 15 class da responsive tasarımlar için oluşturuldu. Aşağıdaki kod bloklarında responsive-md ekranlar için oluşturulan class tanımlamalarını inceleyebilirsiniz.

.c-border-md-slim {
   border: 3px solid #852929 !important;
 }
 .c-border-md-medium {
   border: 5px solid #852929 !important;
 }
 .c-border-md-bold {
   border: 7px solid #852929 !important;
 }

Utility ile gelen kullanışlı özelliklerden bir tanesi de Rfs. Bu kısaltmayı Responsive Font Size olarak çevirebiliriz. Rfs sayesinde Bootstrap mobildeki font yüksekliğini otomatik olarak hesaplayabiliyor.

 "font-size": (
   rfs: true,
   property: font-size,
   class: mfs,
   values: $font-size,
 ),

Yukarıda ki kod bloğunda values:$font-sizes şeklinde bir tanımlama yapıldığını görüyoruz. Bu tanımlama daha önce import ettiğimiz _variables.scss dosyasında ki $font-sizes  tanımından gelmektedir. Bu sayede values kısmına herhangi bir değer girmeden daha öncesinde hazırlamış olduğumuz global tanımlamaları kullanabiliyoruz. 

.mfs-1 {
 font-size: calc(1.375rem + 1.5vw) !important;
}
.mfs-2 {
 font-size: calc(1.325rem + 0.9vw) !important;
}
.mfs-3 {
 font-size: calc(1.3rem + 0.6vw) !important;
}
.mfs-4 {
 font-size: calc(1.275rem + 0.3vw) !important;
}
.mfs-5 {
 font-size: 1.25rem !important;
}
.mfs-6 {
 font-size: 1rem !important;
}

Bootstrap Utility konusunu genel olarak özetleyecek olursak; hızlı bir şekilde custom tema oluşturmak için gayet kullanışlı bir özellik. Bu özellik sayesinde globalde tanımlı değişkenleri de kullanarak class tanımları oluşturabiliyoruz. Responsive  uyumluluk için ekstra satırlarca kod yazmamıza gerek kalmıyor, Utility içerisinde responsive:true tanımı yapmamız yeterli oluyor. Temanın mobil tarafında ki font tanımlamaları için de ayrıca bir özellik düşünülmüş, Rfs ile mobil uyumlu font-size oluşturulabiliyor ve custom temamızı daha kullanışlı hale getirebiliyoruz.