CSS Framework Populer

Framework CSS menyediakan kumpulan komponen dan utilitas siap pakai untuk mempercepat pengembangan.

Bootstrap

Framework paling populer dengan komponen UI lengkap dan sistem grid yang kuat.

<!-- CSS Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Contoh komponen -->
<div class="container">
    <button class="btn btn-primary">Primary Button</button>
    
    <div class="row">
        <div class="col-md-4">Kolom 1</div>
        <div class="col-md-4">Kolom 2</div>
        <div class="col-md-4">Kolom 3</div>
    </div>
    
    <div class="alert alert-success">
        Ini adalah alert sukses
    </div>
</div>

Fitur Utama Bootstrap

Sistem grid 12 kolom responsif
Komponen UI siap pakai (navbar, card, modal, dll)
Utility classes untuk spacing, warna, typography
Dukungan untuk tema dan kustomisasi

Tailwind CSS

Framework utility-first yang memungkinkan desain langsung di markup.

<!-- Contoh dengan Tailwind -->
<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
    <div class="md:flex">
        <div class="md:shrink-0">
            <img class="h-48 w-full object-cover md:h-full md:w-48" src="/img.jpg" alt="Gambar">
        </div>
        <div class="p-8">
            <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Kategori</div>
            <a href="#" class="block mt-1 text-lg font-medium text-black hover:underline">Judul Konten</a>
            <p class="mt-2 text-gray-500">Deskripsi konten...</p>
        </div>
    </div>
</div>

Keunggulan Tailwind

Utility-first: desain tanpa meninggalkan HTML
Highly customizable dengan konfigurasi
Tidak ada komponen bawaan (murni utility classes)
Ukuran file akhir bisa lebih kecil dengan PurgeCSS

Bulma

Framework modern berbasis Flexbox dengan sintaks yang sederhana.

<!-- Navbar dengan Bulma -->
<nav class="navbar is-primary">
    <div class="navbar-brand">
        <a class="navbar-item" href="#">
            <strong>Logo</strong>
        </a>
    </div>
    
    <div class="navbar-menu">
        <div class="navbar-start">
            <a class="navbar-item">Beranda</a>
            <a class="navbar-item">Tentang</a>
        </div>
    </div>
</nav>

<!-- Columns -->
<div class="columns">
    <div class="column">Kolom 1</div>
    <div class="column">Kolom 2</div>
    <div class="column">Kolom 3</div>
</div>

Perbandingan Framework

Framework	Pendekatan	Ukuran	Kustomisasi	Kurva Belajar
Bootstrap	Komponen	Besar	Sass variables	Mudah
Tailwind	Utility-first	Bisa kecil dengan Purge	Tailwind config	Sedang
Bulma	Modular	Menengah	Sass variables	Mudah

Praktik: Buat Card dengan Framework

Pilih framework dan buat card berikut:

<div class="card" style="width: 18rem;">
    <img src="https://via.placeholder.com/300" class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">Judul Card</h5>
        <p class="card-text">Deskripsi singkat card dengan beberapa konten contoh.</p>
        <a href="#" class="btn btn-primary">Tombol</a>
    </div>
</div>

<div class="max-w-sm rounded overflow-hidden shadow-lg">
    <img class="w-full" src="https://via.placeholder.com/300" alt="...">
    <div class="px-6 py-4">
        <div class="font-bold text-xl mb-2">Judul Card</div>
        <p class="text-gray-700 text-base">
            Deskripsi singkat card dengan beberapa konten contoh.
        </p>
    </div>
    <div class="px-6 pt-4 pb-2">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
            Tombol
        </button>
    </div>
</div>

<div class="card" style="width: 18rem;">
    <div class="card-image">
        <figure class="image is-4by3">
            <img src="https://via.placeholder.com/300" alt="...">
        </figure>
    </div>
    <div class="card-content">
        <div class="content">
            <h4>Judul Card</h4>
            <p>Deskripsi singkat card dengan beberapa konten contoh.</p>
            <button class="button is-primary">Tombol</button>
        </div>
    </div>
</div>