CSS | BAB 10 Menggunakan Framework

Tentang Framework CSS

Apa itu Framework CSS?

Framework CSS adalah pustaka kode CSS yang telah dirancang dan dibuat untuk mempermudah dan mempercepat proses pengembangan web. Framework CSS menyediakan berbagai macam komponen UI (User Interface) dan kelas CSS yang siap pakai, sehingga developer tidak perlu menulis kode CSS dari awal.

Manfaat Framework CSS :

Mempercepat proses pengembangan web
Meningkatkan konsistensi desain
Mempermudah kolaborasi antar developer
Menyediakan berbagai macam komponen UI yang siap pakai
Memudahkan maintenance website
Meningkatkan aksesibilitas website
Mendukung responsive design
Memperkaya SEO website

Jenis-jenis Framework CSS :

Bootstrap
Framework CSS paling populer dengan komunitas yang besar dan banyak dokumentasi. Bootstrap menawarkan berbagai macam komponen UI, seperti tombol, formulir, modal, dan navigasi.
Materialize
Framework CSS yang terinspirasi dari Material Design Google. Materialize menawarkan desain yang modern dan responsif, serta animasi yang halus.
Foundation
Framework CSS yang responsif dan mudah digunakan. Foundation menawarkan berbagai macam komponen UI, seperti grid, typography, dan media queries.
emantic UI
Framework CSS yang fokus pada semantik HTML. Semantic UI memudahkan developer untuk membuat website yang mudah diakses oleh pengguna dengan disabilities.
Bulma
Framework CSS yang ringan dan modern. Bulma menawarkan desain yang minimalis dan mudah dikustomisasi.

Memilih Framework CSS :

Saat memilih framework CSS, perhatikan beberapa faktor berikut :

Kebutuhan project :
Apakah project membutuhkan banyak komponen UI? Apakah project membutuhkan desain yang responsif?
Kompleksitas project :
Apakah project sederhana atau kompleks?
Ukuran framework :
Apakah framework besar atau kecil?
Kemudahan penggunaan :
Apakah framework mudah dipelajari dan digunakan?
Komunitas dan dokumentasi :
Apakah framework memiliki komunitas yang besar dan dokumentasi yang lengkap?

Cara menggunakan Framework CSS :

Pilih framework CSS yang sesuai dengan kebutuhan project.
Instal framework CSS melalui CDN (Content Delivery Network) atau package manager.
Pelajari dokumentasi framework CSS untuk memahami cara menggunakannya.
Gunakan komponen dan kelas CSS yang disediakan oleh framework CSS.
Kustomisasi framework CSS sesuai dengan kebutuhan project.

Framework boostrap

Bootstrap merupakan framework CSS populer yang mempercepat pengembangan web dengan menyediakan komponen UI dan kelas CSS siap pakai.

Tutorial Menggunakan Bootstrap dengan CDN

CDN (Content Delivery Network) adalah jaringan server yang terdistribusi secara global yang memungkinkan website memuat file statis dengan cepat dan efisien.

Pilih Versi Bootstrap
Kunjungi situs web resmi Bootstrap

Pilih versi Bootstrap yang ingin Anda gunakan. Versi terbaru biasanya direkomendasikan, namun Anda dapat memilih versi yang sesuai dengan project Anda. Sebagai contoh, kita gunakan versi 5.2.0.
Dapatkan Link CDN
Setelah memilih versi, scroll ke bawah pada bagian "Download". Di sana Anda akan menemukan tiga link CDN:

CSS : Ini adalah link untuk file CSS Bootstrap yang berisi styling dasar.
```
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
```
JavaScript : Link ini akan memuat file JavaScript Bootstrap yang berisi fungsi dan interaktivitas.
```
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
```
JavaScript (Popper) : Bootstrap menggunakan library Popper.js untuk penempatan komponen tertentu. Link ini akan memuat file JavaScript Popper.js.
```
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous">
```
Salin ketiga link tersebut.

catatan :
bisa copy CDN link CSS dan JavaScript saja, terkecuali Jika menggunakan JavaScript terkompilasi disarankan lebih memilih untuk menyertakan JS Popper atau 3 Link CDN tersebut, tambahan dalam penggunaanya letakkan link JS Popper sebelum JS link.

Buat File HTML
Buat sebuah file HTML baru atau project anda (misalnya, `index.html`).

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>   
  </head>
  <body>
    <h1>Hello, world!</h1>   
</html>

Tambahkan Link CDN
Buka file HTML Anda (project anda) dan tambahkan link CDN yang telah disalin di Bagian '<head>' dan sebelum penutup '</body>'

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />
    <title>Document</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
      integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
      integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Gunakan Komponen dan Kelas Bootstrap
Setelah link CDN ditambahkan, Anda dapat mulai berkreasi menggunakan komponen dan class Bootstrap di dalam konten website Anda.

berikut Contoh Penggunaan Komponen Button:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />
    <title>Document</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>
    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
      integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
      integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

claas "btn-primary" menghasilkan button berwarna biru, class "btn-secondary" menghasilkan button warna grey, class "btn-success" menghasilkan button warna hijau dan lain-lain.

kalo masih bingung tentang class dan komponennya silahkan cek website resmi boostrapnya disana sudah disediakan tinggal dipahami dan COPAS

Simpan dan Jalankan
Simpan file HTML Anda dan buka di browser. Anda akan melihat elemen Bootstrap diterapkan pada halaman web.

Tutorial Menggunakan Bootstrap dengan package manager

Cara ini tidak disarankan untuk pemula karna butuh pemahaman lebih lanjut mengenai stuktur cara kerja package manager dan ekosistem yang digunakan atau dijalankan

Instal Package Manager
seperti Node.js atau Composser:

catatan :
Didalam tutorial ini saya memilih untuk menggunakan node.js
silahkan Unduh dan instal Node.js dari situs web resmi

Buka terminal command prompt dan jalankan perintah berikut untuk memastikan Node.js terinstal :
```
node -v   // cek versi 
```
Instal Bootstrap dengan Package Manager
Buka terminal atau command prompt dan navigasi ke folder project Anda.
Jalankan perintah berikut untuk menginstal Bootstrap:
```
npm install bootstrap@5.3.3
```
Import Bootstrap ke dalam Project Anda

catatan :
karna ini sekedar contoh jadi saya pakai cara kotor saja agar lebih mudah dipahami

Cara ini cuma meload data boostrap pada folder CSS dan JavaScript nya heheee

Gunakan Komponen dan class Bootstrap
Silahkan dikreasikan sesuai dengan project anda.

kalau contoh diatas saya menggunakan class dan komponen dari :

    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>

untuk menghasilkan button (tombol) berwarna sesuai dengan color componennya.

Memulai/simpan dan Menjalankan Project

catatan :
karna ini sekedar contoh project sederhana dalam menjalankan projectnya cukup di live server (localhost)

Mungkin cukup untuk pembahasan tentang boostrap, next akan di update kembali !!!
disarankan RAJIN-RAJIN MEMBACA DOKUMENTASI YANG TELAH DISEDIAKAN OLEH BOOSTRAP !

framework tailwind

Tailwind CSS adalah framework CSS yang berbasis "utility-first". Artinya, Tailwind menyediakan banyak sekali class utility yang bisa langsung diterapkan pada kode HTML untuk mengatur tampilan elemen. Dengan kata lain, Anda tidak perlu lagi menulis kode CSS secara terpisah, melainkan cukup menambahkan class yang sesuai dari Tailwind.

Beberapa keuntungan menggunakan Tailwind CSS:

Membangun UI dengan cepat : Karena class utility mudah digunakan, pengembangan antarmuka website menjadi lebih efisien.
Lebih ringkas : Kode CSS menjadi lebih ringkas dan terorganisir karena tidak perlu ditulis secara terpisah.
Responsif secara default : Tailwind menyediakan class utility untuk mengatur tampilan elemen pada berbagai ukuran layar.
Dapat disesuaikan : Meskipun menggunakan class utility, Anda tetap bisa membuat komponen UI yang bisa digunakan kembali.

Singkatnya, Tailwind CSS cocok untuk developer yang ingin membangun antarmuka website dengan cepat dan fleksibel

Tutorial Menggunakan Tailwind CSS dengan CDN

Langkah 1: Menambahkan Script Play CDN

Buka file HTML project Anda.

Di dalam tag <head>, tambahkan script Play CDN Tailwind berikut:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- CDN --> 
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">Hello world!</h1>
  </body>
</html>

Langkah 2: Menambahkan Class Tailwind ke Elemen HTML

Pada elemen HTML yang ingin Anda gaya, tambahkan Class Tailwind yang sesuai.

Class Tailwind terdiri dari nama-nama utility yang dipisahkan dengan spasi.

Contoh :
untuk heading dengan ukuran teks 3xl, font tebal, dan garis bawah, gunakan:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body> 
    <h1 class="text-3xl font-bold underline">Hello world!</h1> 
  </body>
</html>

Langkah 3: Menyesuaikan Konfigurasi (Opsional)

Anda dapat menyesuaikan konfigurasi Tailwind dengan menambahkan script di bawah script Play CDN.

Buat objek 'tailwind.config' dan atur properti 'theme' dan 'plugins' sesuai kebutuhan.

Contoh:
menambah warna custom dan plugin formulir:

   <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script> 
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              clifford: "#da373d",
            },
          },
        },
        plugins: ["forms"],
      };
    </script>
  </head>
  <body>
    <h1 class="text-3xl font-bold underline text-clifford">Hello world!</h1>
  </body>
</html>

Langkah 4: Menambahkan CSS Custom (Opsional)

Tambahkan CSS custom yang mendukung Tailwind dengan tag <style> dan atribut type="text/tailwindcss" .

Contoh:
menambah kelas '.content-auto' yang mengatur 'content-visibility: auto;':

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script> 
    <style type="text/tailwindcss">
      @layer utilities {
        .content-auto {
          content-visibility: auto;
        }
      }
    </style> 
  </head>
  <body>
    <div class="lg:content-auto">
      <!-- ... -->
    </div>
  </body>
</html>

Langkah 5: Menjalankan dan Melihat Hasil
Simpan file HTML Anda.
Jalankan server development.
Buka halaman web di browser.
Anda akan melihat gaya Tailwind diterapkan pada elemen HTML.

Tutorial Menggunakan Tailwind CSS dengan CLI

Langkah 1 | Instal Tailwind CSS dan Node.js (jika belum ada)

Pastikan Anda memiliki Node.js dan npm (atau yarn) terinstal di sistem Anda.
Jalankan perintah berikut di terminal project Anda:

npm install -D tailwindcss postcss autoprefixer

Langkah 2 | Konfigurasi Tailwind CSS (tailwind.config.js)

Buat file 'tailwind.config.js' di root project Anda.

Konfigurasikan file tersebut sesuai kebutuhan project Anda.
contoh

/** @type {import('tailwindcss').Config} */
module.exports = {
   content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Referensi lengkap properti konfigurasi bisa dilihat di halaman resmi tailwindcss.

Langkah 3 | Buat File CSS (tailwind.css)

Buat file 'tailwind.css' di project Anda (biasanya di dalam folder 'css' atau 'styles').
Tambahkan directive berikut di file 'tailwind.css':
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Langkah 4 | Integrasi ke Build Process

Tambahkan plugin Tailwind CSS ke PostCSS di file konfigurasi build process Anda (misalnya 'postcss.config')
Contoh konfigurasi PostCSS dengan PostCSS Loader di Webpack:
```
 //javascript
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};
```

Langkah 5 | Menjalankan Build Process

Jalankan build process project Anda untuk menghasilkan file CSS final yang telah terintegrasi dengan Tailwind.

Langkah 6 | Menambahkan File CSS ke HTML

Tambahkan link ke file CSS final yang telah terintegrasi dengan Tailwind di tag <head> file HTML Anda.

Catatan:

Penggunaan Play CDN direkomendasikan untuk pengembangan dan pengujian.
Untuk produksi, disarankan untuk melakukan instalasi lokal Tailwind CSS.

The My Project