Popüler CSS Kütüphaneleri

Published in

ÇSTech

10 min readJul 6, 2023

Selamlar, bu yazımda sizlere CSS’i daha kolay ve verimli bir şekilde yazmak için kullanılan Popüler CSS kütüphanelerinden bahsedeceğim.

Oluşturduğunuz bir siteyi özelleştirmek, sitenizin ön plana çıkması, kullanıcının ilgisini çekmesi ve kullanılabilirliğinin artması için CSS bir web sitesinin en güçlü araçlarından biridir. “Nedir bu CSS?”, “Nasıl kullanılır?” gibi temel bilgilere bir önceki makalemden ulaşabilirsiniz.

CSS yazma konusunda büyük kolaylık sağlayan CSS kütüphaneleri, sizlere önceden oluşturulmuş stiller ve bileşenler sunarak kod tekrarını azaltmayı ve düzenli bir görünüm elde etmeyi amaçlar. Makalemde Bootstrap, Tailwind CSS, Material-UI, Foundation ve Semantic UI kütüphanelerinden bahsedeceğim. Bu kütüphanelerin bize sağladığı kolaylıklar, kurulum aşamaları, grid sistemi ve bize sundukları hazır bileşenler hakkında bilgiler paylaşacağım. Bootstrap ile başlayalım.🙌

Bootstrap

Bootstrap en popüler CSS kütüphanelerinden biridir. CSS kütüphanelerinden ilk akla gelen kütüphane Bootstrap olduğu için bu kütüphaneden başlamayı seçtim.🤓 Bootstrap, Twitter tarafından geliştirilmiş ve ücretsiz olarak bizlere sunulmuştur. Responsive (duyarlı) web tasarımını destekler ve hızlı prototipler oluşturmak için kullanıcı dostu bileşenler sunar. Grid sistemi, butonlar, formlar, tablolar, navigasyon çubukları gibi bir çok hazır bileşen içerir.

Kurulum işlemleri

Eğer cdn linki ile kurulum yapmak istiyorsanız, bir HTML dosyası oluşturabilir ve oluşturmuş olduğunuz dosyada <head> bölümüne aşağıdaki cdn linkini ekleyebilirsiniz.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

Direkt Bootstrap indirmek ya da npm veya yarn ile kurulum yapmak istiyorsanız detaylı kurulum bilgisine https://getbootstrap.com/docs/5.3/getting-started/download/ linkinden ulaşabilirsiniz.

Grid Sistemi

Bootstrap bizlere 12 sütundan oluşan bir grid sistemi sunar.

<div class="container"> 
  <div class="row"> 
    <div class="col-4">İçerik 1</div> 
    <div class="col-4">İçerik 2</div>
    <div class="col-4">İçerik 3</div> 
  </div> 
</div>

Yukarıdaki kod bloğunda col-4 class’ındaki sayı, bileşenin kapladığı sütun sayısını belirtir. Kodun çıktısı aşağıdaki gibi olacaktır. Yan yana 3 içerik ve her bir içerik 4 sütunluk alan kaplayacaktır.

Grid sisteminde responsive bir yapı kurmak için aşağıdaki etiketleri kullanabilirsiniz.
- xs: 768px ekran altında (telefonlar için)
- sm: 768px ile 992px arasında (tabletler için)
- md: 992px ile 1200px arasında
- lg: 1200px ve üstü ekran boyutlarında kullanılır.
Ekran boyutu etiketini col-xs-4,col-md-3şeklinde kullanabilirsiniz.

Hazır Bileşenler

Bootstrap bizlere Button, Form, Navigation, Tables gibi bir çok hazır bileşen sunmaktadır. Örnek olarak yeşil bir success butonu oluşturalım.

<button type="button" class="btn btn-success">Success</button>

Diğer buton tiplerini de aşağıdaki görselden inceleyebilirsiniz.
Sırasıyla class isimlendirmeleri btn, btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger, btn-link şeklindedir.

https://www.w3schools.com/bootstrap/bootstrap_buttons.asp

Özelleştirme

Bootstrap’de özelleştirme yapmanın bir kaç yöntemi vardır. Bunlardan ilki tema özelleştirmesidir. Projenin içerisindeki sass dosyası üzerinden ya da yeni bir sass dosyası oluşturarak renkleri, tipografi ve diğer bileşenlerin css’lerini dilediğiniz gibi değiştirebilirsiniz. Örneğin temanın primary-color rengini aşağıdaki gibi değiştirebilirsiniz.

$primary-color: #ff0000;

Diğer bir yöntem ise kullandığınız elemente ekstra class eklemek olacaktır. Örneğin buton elementine custom-button class’ı ekleyerek sass dosyasında class’a özel css yazabilirsiniz.

<button type="button" class="btn custom-button">Custom</button>

.btn.custom-button {
  background-color: #ff0000;
}

Tailwind CSS

Tailwind CSS, özelleştirilebilir ve yüksek performanslı, son zamanlarda en çok tercih edilen CSS kütüphanelerinden biridir. HTML elementlerinize stil vermek için kısa ve öz CSS sınıfları kullanarak, stilinizi hızlı bir şekilde uygulayabilir ve tekrar eden kodları en aza indirebilirsiniz.

Kurulum işlemleri

# with npm
npm install -D tailwindcss

# with yarn
yarn add tailwindcss

Tailwind CSS yapılandırma dosyasını oluşturmak için npx tailwindcss init komutunu kullanabilirsiniz. Bu komut sonrasında tailwind.config.js adında yapılandırma dosyanız oluşmuş olur. Eğer css’lerinize özelleştirme yapmak istiyorsanız bu dosya içerisinde güncelleme yapabilirsiniz. Detaylı bilgiye https://tailwindcss.com/docs/installation linkinden ulaşabilirsiniz.

Grid Sistemi

Tailwind CSS bizlere güçlü bir grid sistemi sunar.

<div class="grid grid-cols-3">
  <div>İçerik 1</div>
  <div>İçerik 2</div>
  <div>İçerik 3</div>  
</div>

Yukarıdaki kod bloğunun çıktısı yan yana eşit bir şekilde bölünmüş 3 içeriktir.
İçerikler arasında boşluk olmasını istediğiniz takdirde kapsayıcı div’e gap-x class’ını ekleyebilirsiniz. Örneğin gap-4 class’ı eklediğinizde içerikler arasına 1rem boşluk eklenecektir.
Bootstrap’de olduğu gibi burada da responsive bir görünüm elde etmek için sm, md gibi etiketleri kullanabilirsiniz. Kapsayıcı div’e grid grid-cols-4 md:grid-cols-6 class’ını eklediğinizde 992px ile 1200 px arası ekran boyutlarında div’i 6ya bölmüş olursunuz.
“hover, focus, active, first, last” gibi CSS işlemlerini de direkt class olarak yazabilirsiniz. Örneğin kapsayıcı div’in üstüne gelip hover özelliği devreye girdiğinde alanın 3 yerine 2 ye bölünmesini istiyorsunuz. Bunun için div’e hover:grid-cols-2 classını ekleyebilirsiniz.

Hazır Bileşenler

Button, Navigation, Form gibi elementlere kolay bir şekilde css vermek için Tailwind CSS kullanabilirsiniz. Örneğin yeşil bir success butonunu aşağıdaki gibi oluşturabilirsiniz.

<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4"> Success </button>

Butonun üzerine geldiğinizde rengin biraz daha koyu olması için hover özelliğini ekleyebilirsiniz. text-white ile butonun yazı renginin beyaz olmasını sağlayarak, font-bold ile de yazının fontunu kalınlaştırabilirsiniz. py ve px ise padding-y ve padding-x’in kısaltmasıdır.

Özelleştirme

Yukarıda tailwind.config.js dosyası içerisinde özelleştirme yapabileceğinizden bahsetmiştim. Bununla ilgili aşağıdaki örneği inceleyebilirsiniz.

module.exports = { 
  theme: { 
    spacing: { 
      '1': '8px', 
      '2': '12px', 
      '3': '16px', 
      '4': '24px', 
      '5': '32px', 
      '6': '48px'
    } 
  } 
}

Bu şekilde bir özelleştirme yaptıktan sonra, p-1 class’ını div’e eklediğinizde div’in padding’i 8px olacaktır.

Material-UI

Material-UI, Google’ın Material Design konseptine dayanan bir CSS kütüphanesidir, React tabanlı bir kütüphanedir. React dünyasında oldukça popülerlerdir. Şık ve modern bir görünüm sağlar ve zengin bir bileşen setine sahiptir. Diğer kütüphanelerde olduğu gibi özel stil isimlendirmeleri ile ekstra css yazmadan, görünüm olarak isteğinizi karşılayacak elementler yaratabilirsiniz.

Kurulum işlemleri

# with npm
npm install @mui/material @emotion/react @emotion/styled

#with yarn
yarn add @mui/material @emotion/react @emotion/styled

Kurulum hakkında detaylı bilgiye https://mui.com/material-ui/getting-started/installation/ linkinden ulaşabilirsiniz.

Grid Sistemi

Material-UI, Bootstrap’de olduğu gibi kapsayıcı div’i 12ye bölmektedir.

<Grid container>
   <Grid item md={4}>
     <Item>İçerik 1</Item>
   </Grid>
   <Grid item md={4}>
     <Item>İçerik 2</Item>
   </Grid>
   <Grid item md={4}>
     <Item>İçerik 3</Item>
   </Grid>
</Grid>

Yukarıdaki örnekte her bir item, dört sütunluk bir alan kaplayacak ve yan yana üç item görünümü oluşacaktır.
Responsive görünüm için xs, sm, md, lg etiketlerini kullanabilirsiniz. md={4} etiketinin yanına xs={2} etiketini eklerseniz, en küçük ekran boyutunda 4 sütunluk bir alan kaplamak yerine 2 sütunluk bir alan kaplayacaktır.
İtem’lar arası boşluk eklemek için kapsayıcı div’e spacing etiketini ekleyebilirsiniz. spacing etiketi CSS’deki padding yerine geçmektedir. spacing={1} etiketini eklediğinizde item’ların arasına 8px padding eklenecektir. padding-x ve padding-y stillendirmesi yapmak isterseniz rowSpacing ve columnSpacing etiketlerini kullanabilirsiniz. rowSpacing={1} columnSpacing={2} yazdığınız takdirde item’a alt ve üstten 8px, sağ ve soldan 16px boşluk eklemiş olursunuz. Ek olarak boşlukları da ekran boyutlarına göre değiştirmek isterseniz spacing={{xs:1, sm:2, md:3}} şeklinde bir etiket kullanabilirsiniz.

Hazır Bileşenler

Material-UI, Button, TextField, AppBar, Card, Dialog gibi bir dizi hazır bileşen sunar. Bu hazır bileşenler, uygulamanızda hızlı ve kolay bir şekilde kullanılabilir. Aşağıda butonlar ile ilgili küçük bir örnek görebilirsiniz.

import React from 'react'; import { Button } from '@mui/material'; 

function App() { 
  return (
    <>
      <Button color="secondary">Secondary</Button>
      <Button variant="contained" color="success">
       Success
      </Button>
      <Button variant="outlined" color="error">
       Error
      </Button>
    </>
  ); 
} 

export default App;

color butonun rengini, variant ise butonun görünümünü ifade etmektedir. Butonun default variant’ı “text”tir. Eğer variant belirtmezseniz butonun görünümü text olacaktır.

Özelleştirme

Material-UI ile bileşenlerin stillerini ve temasını değiştirebilir, özel CSS sınıfları ekleyebilir ve bileşenleri ihtiyaçlarınıza göre yapılandırabilirsiniz. Özelleştirme yapmak için bir kaç yöntem vardır.

“sx” prop’unu kullanarak bileşenlerinizi özelleştirebilirsiniz.

<Slider
  defaultValue={30}
  sx={{
   width: 300,
   color: 'success.main',
   }}
/>

Sınıf isimlerini alıp direkt CSS ile güncelleme yapabilirsiniz.

<MenuItem selected className="MenuItem">

.MenuItem {
  color: black;
}
/* Increase the specificity */
.MenuItem.Mui-selected {
  color: blue;
}

Temanın içindeki bileşen anahtarını kullanarak bir bileşenin stillerini, varsayılan donanımlarını ve daha fazlasını özelleştirebilirsiniz.

const theme = createTheme({
  typography: {
    button: {
      fontSize: '1rem',
    },
  },
});

<ThemeProvider theme={theme}>
  <Button>Button</Button>
</ThemeProvider>

Foundation

Foundation, modern ve duyarlı web siteleri oluşturmak için kullanılan bir CSS kütüphanesidir. Geniş bir bileşen koleksiyonu ve esnek bir grid sistemi sunar. Özelleştirilebilir bileşenler, sitenin ihtiyaçlarına uyacak şekilde kolayca ayarlanabilir.

Kurulum işlemleri

# with npm
npm install foundation-sites

#with yarn
yarn add foundation-sites

Detaylı bilgiye https://get.foundation/sites/docs/installation.html linkinden ulaşabilirsiniz.

Grid Sistemi

Çoğu kütüphanede olduğu gibi Foundation kütüphanesi de kapsayıcı div’i 12'ye bölmektedir. columns class’ı ve ekran boyutu class’ının yanına içeriğin kaç sütunluk alan kaplamasını istiyorsanız o değeri yazabilirsiniz.

<div class="row"> 
  <div class="columns small-2 medium-3 large-4">İçerik 1</div> 
  <div class="columns small-4 medium-3 large-4">İçerik 2</div> 
  <div class="columns small-6 medium-6 large-4">İçerik </div>
</div>

small: 640px altı ekranlar için.
medium: 640 ve üstü ekranlar için
large: 1024px ve üstü ekranlar için kullanılır.

Hazır Bileşenler

Foundation, Button, Navigation, Typography, Dropdown gibi yaygın kullanılan bileşenlerin yanı sıra, daha spesifik gereksinimlere yönelik bileşenler de sağlar. Aşağıdaki gibi yeşil bir success butonu oluşturabilirsiniz.

<button class="submit success button">Success</button>

Buton boyutunda değişiklik yapmak için “tiny”, “small” ve“large” classlarını, buton genişliğinin kapsayıcı div ile aynı olmasını istiyorsanız “expanded” classını ekleyebilirsiniz. Yalnızca büyük ekran boyutlarında expanded özelliğini kullanmak isterseniz large-only-expanded classını eklemeniz yeterli olacaktır.
Buton renklerini değiştirmek için Bootstrap’de olduğu gibi primary, secondary, success, alert ve warning classlarını kullanabilirsiniz.

Özelleştirme

Foundation, bir dizi değişken kullanarak bileşenlerin ve stil özelliklerinin görünümünü özelleştirmenize olanak tanır. Bu değişkenler, _settings.scss dosyasında bulunur. Bu dosyada güncelleme yapabilirsiniz.

Örneğin, primary-color rengini aşağıdaki gibi değiştirebilirsiniz.
$primary-color: #ff0000;

Ya da kullandığınız element’e yeni bir class ismi daha ekleyip, kendi CSS kurallarınızı yazabilirsiniz.

<button class="button custom-button">Custom</button>

.custom-button {
  background-color: aliceblue;
}

Semantic UI

Semantic UI, estetik, işlevsel ve responsive arayüzler geliştirmenize yardımcı olur. Bileşenler için anlamlı class isimlendirmeleri kullanır ve HTML yapılarını daha okunabilir ve anlaşılabilir hale getirir.

Kurulum işlemleri

# with npm
npm install semantic-ui - save

#with yarn
yarn add semantic-ui

Yukarıdaki komutlardan birini kullandıktan sonra projenizde semantic isimli bir klasör oluşacaktır. Bu klasöre geçip gulp build çalıştırmanız gerekmektedir.

Grid Sistemi

Semantic UI’ın grid sistemiyle basit bir sayfa yapısı oluşturabilirsiniz.

<div class="ui four column grid">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

Yukarıdaki kod bloğunun çıktısı ekran görüntüsündeki gibi olacaktır.

Kapsayıcı div’e ui grid class’ını ekledikten sonra bir satırda kaç tane div’in görünmesini istiyorsanız onu yazabilir. Alt div’lere de column class’ını ekleyebilirsiniz.

Ya da kapsayıcı div yerine alt div’lere direkt kaplayacağı alanın değerini verebilirsiniz. Semantic UI diğer kütüphanelerden farklı olarak kapsayıcı div’i 16'ya böler.
Örneğin üstteki görünümü elde etmek için aşağıdaki kodu da kullanabiliriz.

<div class="ui grid">
  <div class="four wide column"></div>
  <div class="four wide column"></div> 
  <div class="four wide column"></div> 
  <div class="four wide column"></div>
</div>

Responsive görünüm için önce div’in kaplamasını istediğiniz sütun sayısını, ardından da ekran boyutunu belirtmeniz gerekmektedir. Aşağıdaki kod bloğunu incelediğinizde, div’in büyük ekran boyutlarında 4, tablet ekranlarında 6, mobil ekranlarda ise 8 sütunluk bir alan kaplayacağını görebilirsiniz.

<div class="eight wide mobile six wide tablet four wide computer column"></div>

Hazır Bileşenler

Semantic UI, Button, Container, Header, Input gibi yaygın kullanılan bir dizi bileşen sunar. Aşağıdaki kod bloğu ile yeşil bir success butonu oluşturabilirsiniz.

<button class="ui green button">Success</button>

Butonu renklendirmek için primary, secondary, positive, negative classlarını ekleyebilirsiniz. Bunun dışında diğer renkleri de red, yellow gibi direkt ismini yazarak ekleyebilirsiniz. basic classını eklediğiniz takdirde butonun yazısı ve çerçevesi verilen renk, arka planı ise renksiz olacaktır.

Özelleştirme

Semantic UI, özelleştirilebilir bir yapıya sahiptir. theme.config dosyasında güncelleme yaparak, genel stil ve davranışları özelleştirebilirsiniz.
Ya da oluşturduğunuz bileşene yeni bir class ismi ekleyip, o class’a özel CSS yazabilirsiniz.

<button class="ui button custom-button">Custom</button>

.ui.button.custom-button { 
  background-color: #ff0000; 
  color: #fff; 
}

Son olarak, anlatmış olduğum kütüphanelerin farklıları ve popülerliklerinden bahsedeceğim. Aşağıdaki tabloda kütüphanelerin yaklaşımları, özelliklerini ve boyutlarını inceleyebilirsiniz.

Her bir kütüphanenin benzersiz avantajları ve kullanım senaryoları vardır, bu nedenle proje gereksinimlerinize göre en uygun kütüphaneyi seçebilirsiniz.
Bir de kullanım oranlarına göz atalım.🧐 Önceki yıllarda en popüler ve kullanım oranı en yüksek olan kütüphane Bootstrap idi, fakat çıkan yeni kütüphaneler ile birlikte 2023 verilerinde bu sırayı Tailwind CSS aldı. Güncel verilere göre 6 milyonluk bir indirmeye sahip. Benim de sıklıkla kullanmış olduğum Tailwind CSS küçük boyuta sahip olması ve kullanım kolaylığı açısında tercih ettiğim bir kütüphane.

Tailwind CSS den sonra bahsetmiş olduğum kütüphanelerde 2.sırayı Bootstrap alıyor. Popülerliğini korumaya devam ediyor.😊 Yaklaşık 5.5 milyonluk bir indirmeye sahip. Her dilde sıklıkla kullanıldığını gördüğüm ve kullandığım bir kütüphane.

React tarafında sıklıkla kullanılan Material-UI kütüphanesi 3.sırayı alıyor. Haftalık 2.8 milyon indirmeye sahip. React’ın popülerliği ile birlikte oluşturulan bu kütüphane pek çok olumlu geri bildirim topladı. Benim de React projelerimde kullanım ve özelleştirme kolaylıklarından dolayı sıklıkla kullandığım bir kütüphane. Modern görünümünden dolayı severek kullanıyorum.

Bir sonraki kütüphane ise Semantic UI. Haftalık 6 bin indirmeye sahip. Minimal ve kullanımı kolay olduğu için React, Angular gibi teknolojilerle sıklıkla kullanılan bir kütüphane.

Semantic UI’i Foundation takip ediyor. Haftalık 3 bin indirmeye sahip. Foundation kolay kullanımından ve çok büyük bir kütüphane olmamasından dolayı sıklıkla tercih edilen kütüphanelerden biri.

Özet olarak bu yazımda CSS yazma konusunda sizlere çok büyük kolaylık ve düzen sağlayan bazı popüler CSS Kütüphanelerinden bahsetmiş oldum. Sizler de proje gereksinimlerinize göre en uygun kütüphaneyi seçip bu kütüphanelerde bulunan hazır stiller ve bileşenlerden faydalanarak hızlı ve etkileyici web siteleri oluşturabilsiniz. Umarım faydalı olmuştur.🤗 Sevgiler.