MODUL III

FRAMEWORK CSS (BOOTSTRAP & TAILWIND)

1. Tujuan
• Mahasiswa dapat menggunakan Bootstrap untuk meningkatkan proses pengaturan
layout laman web
• Mahasiswa dapat menggunakan Tailwind untuk membangun & memberikan kontrol
penuh atas setiap elemen desain proses pembuatan laman web

2. Tugas Pendahuluan
1. Pada mekanisme pengaplikasian CSS terdapat style yang didefinisikan di file eksternal,
jelaskan maksud tersebut dan berikan contohnya!
2. Sebutkan elemen – elemen pada CSS dan fungsinya!
3. Sebutkan dan jelaskan secara lengkap bagaimana cara menggunkan framework
bootstrap pada website yang kalian buat!
4. Sebutkan manfaat dan alasan utama menggunakan Tailwind CSS!

3. Dasar Teori
A. BOOTSTRAP

Bootstrap adalah framework HTML, CSS, dan JavaScript yang membuat desain situs web
responsif menjadi mudah dan cepat. Selain digunakan untuk mengembangkan situs web lebih
cepat, Bootstrap merupakan kerangka kerja sumber terbuka gratis. Skrip dan sintaks yang
disediakan oleh Bootstrap dapat diterapkan ke beberapa komponen desain web. Framework ini
terdiri dari kumpulan file CSS dan JavaScript dalam bentuk class-class cukup lengkap yang
bisa digunakan.

1. Menggunakan Bootstrap

Menggunakan boostrap dengan CDN merupakan salah satu cara yang paling gampang
dilakukan untuk belajar Bootstrap. Kita cukup copy link CDN Bootstrap, lalu di taruh pada
kode HTML. Dengan syaratnya yaitu harus terhubung dengan internet, karena Bootstrap akan
diambil dari server CDN. CDN adalah singkatan dari Content Delivery Network, semacam
server yang tersebar di seluruh dunia untuk mengantarkan konten secara optimal dan cepat.
1. Buatlah folder baru dengan nama belajar-bootstrap, setelah itu buka dengan VS Code
2. Setelah itu, buatlah file HTML baru dengan nama hello-bootstrap.html
3. Berikut merupakan contoh kode penggunaan Bootstrap sederhana menggunakan layout 1
kolom yang bisa dicoba :

Penjelasan :
• Bris ke-11 menambahkan tautan ke file CSS Bootstrap yang digunakan untuk mengatur
gaya dan tata letak halaman.
• Baris ke-45 tautan ke file JavaScript Bootstrap yang diperlukan untuk fungsi interaktif,
seperti dropdown, modals, dan lainnya.
 • Baris ke-15 menggunakan kelas "container" untuk mengelompokkan elemen header
dan memberikan padding di sekitarnya. Serta kelas "bg-primary" untuk memberikan
warna latar belakang biru pada elemen header & kelas "text-white" untuk memberikan
warna teks putih pada teks di dalam elemen header.
• Baris ke-16 menggunakan kelas "row" untuk membuat baris di dalam elemen header,
yang digunakan untuk menyusun elemen-elemen ke dalam kolom-kolom. Dillanjut
pada baris ke-17 dengan kelas "col-12" untuk membuat satu kolom pada layout grid
Bootstrap di dalam elemen header.
• Menggunakan kelas "py-4" untuk memberikan padding atas dan bawah sebesar 4 unit
(dalam hal ini, unit adalah "rem") & kelas "text-center" untuk membuat teks di dalam
elemen menjadi berada di tengah secara horizontal.
• Baris ke-18 untuk membuat teks judul (heading) dengan ukuran yang besar sesuai gaya
Bootstrap & pemberian kelas "lead" untuk memberikan gaya khusus pada paragraf,
menambahkan ruang dan ukuran huruf yang nyaman.
• Baris ke-24 menggunakan kelas "container" untuk mengelompokkan elemen-elemen
utama dan memberikan padding di sekitarnya & kelas "border" untuk menambahkan
garis tepi pada elemen.

2. Kelas Grid
Bootstrap memiliki beberapa kelas grid:
• none : grid untuk phone portrait
• xs : grid untuk layout di layar ponsel
• sm : grid untuk layout di layar tablet
• md : grid untuk layout di layar laptop/notebook
• lg : grid untuk layout di layar laptop/desktop
 • xl : grid untuk layout di layar desktop besar
Artinya ketika ingin mengatur grid untuk tampilan dilayar ponsel maka gunakan kelas xs,
untuk tablet gunakan kelas sm, dan seterusnya.

Ketika menggunakan sistem grid bootstrap:

• Baris-baris harus berada didalam sebuah kelas container atau container-fluid agar
obyek-obyek dalam laman teratur rapi.
• Gunakan kelas row untuk membuat kelompok kolom
• Tempatkan konten laman dalam kolom
• Setiap kolom memiliki jarak dengan kolom lain

Pada contoh penerapan grid diatas, terdapat 2 baris dengan penggunaan class row serta
pemberian 2 kolom pada baris 1 dan 1 kolom pada baris 2 menggunakan class col dengan
pengaturan untuk layar tablet/laptop. Dimana col memiliki ukuran max 12 dan min 1. Aturan
grid diatas juga memiliki jarak antar kolom dengan ukuran 2 pada pemberian g-2 setelah
penulisan class row.

B. TAILWIND CSS

Tailwind adalah framework CSS yang bersifat utility-first. Artinya, framework ini
menyediakan serangkaian utility classes untuk merancang elemen UI langsung di markup,
tanpa harus meninggalkan HTML dan kembali ke stylesheet untuk menentukan style. Sebagai
contoh, jika ingin menerapkan display: flex pada elemen, kamu tidak perlu
membuat class CSS baru dalam stylesheet-mu. Cukup tambahkan class flex dari Tailwind ke
elemen tersebut dalam HTML dan secara otomatis elemen akan menerapkannya.
 Berbeda dengan framework CSS lainnya yang sering kali membatasi kreativitas
dengan komponen pre-styled, Tailwind CSS memungkinkan 'membangun' dari pada
'menyesuaikan', memberikan kontrol penuh atas setiap elemen desain. Hasilnya, dapat lebih
leluasa dalam mewujudkan ide kreatif dan menghasilkan user interface yang tidak hanya
indah, tetapi juga fungsional.

1. Cara Menggunakan Tailwind CSS

Setelah mempersiapkan semua yang diperlukan, saatnya untuk menggunakan Tailwind CSS.
Berikut langkah-langkah untuk memulai:

• Install Tailwind CSS

Pertama, kamu perlu menginstal Tailwind CSS ke dalam proyek. Instalasi bisa dilakukan
menggunakan NPM (Node Package Manager) atau Yarn. caranya, buka terminal
atau command line, navigasikan ke direktori proyek, kemudian jalankan perintah berikut:

Jika menggunakan Yarn:

• Buat file konfigurasi Tailwind

Setelah instalasi, langkah selanjutnya adalah membuat file konfigurasi Tailwind.

File ini berguna untuk menyesuaikan setting Tailwind sesuai kebutuhan proyek. Untuk
membuat file konfigurasi, jalankan perintah berikut:

Perintah di atas akan menghasilkan file tailwind.config.js yang bisa kamu modifikasi.

• Siapkan file CSS

Kamu perlu membuat file CSS yang berisi direktif khusus untuk Tailwind. Buat file baru
dengan nama apa pun sesuai kebutuhan (misalnya, styles.css) dan tambahkan baris berikut:
Arahan ini memberitahu Tailwind untuk menyertakan style dasar, komponen, dan utility-nya.

• Kompilasi file CSS

Setelah menyiapkan file CSS, kamu harus mengompilasinya menjadi file CSS akhir yang
akan digunakan di website. Jalankan perintah berikut di terminal:

Perintah ini akan mengompilasi file styles.css dan menghasilkan file output yang siap
digunakan (output.css).

• Sertakan CSS ke dalam proyek web

Langkah terakhir adalah menyertakan file CSS yang telah dikompilasi ke dalam
proyek web. Tambahkan tag < link > ke file HTML utama yang mengarah ke file CSS-mu:

Pastikan untuk mengganti /path/to/your/ dengan directory path sesuai tempat file output.css
berada.

• Mulai gunakan Tailwind

Sekarang, kamu sudah bisa mulai menggunakan utility class Tailwind

dalam markup HTML untuk membuat desain UI.

Bila framework pada umumnya yang kamu jumpai terdiri dari banyak pra-desain
komponen, di TailwindCSS ini kamu tidak akan menemukan pra-desain komponen
seperti button, card, alert, carousel atau yang lainnya. Karena TailwindCSS bukan merupakan
sebuah UI kit, melainkan sebuah utility-first framework untuk membangun antarmuka kustom
dengan cepat.

Sederhananya, di dalam TailwindCSS terdapat banyak class-class kecil yang

merepresentasikan CSS declaration. Sehingga, ketika kamu ingin membuat sebuah komponen,
maka kamu perlu menggunakan beberapa class-class kecil tersebut hingga tercipta komponen
yang kamu maksud. Misal, kamu ingin membuat sebuah komponen button.

Pada Bootstrap framework atau framework lain yang memiliki pra-desain komponen, kurang
lebih kamu melakukannya seperti ini :

<button class="btn">Button</button>atau<button
class="button">Button</button>

Sedangkan, pada Tailwind CSS kamu perlu melakukannya seperti ini:

<button class="bg-blue-500 text-white font-bold py-2 px-4

rounded">
Button
</button>

Class-class di atas mewakili property dan value sendiri.

• bg-blue-500 merepresentasikan property background-color: #4299e1;

• text-white merepresentasikan property color: #fff;
• font-bold merepresentasikan property font-weight: 700;
• py-2 maksudnya padding-y atau padding-
vertical merepresentasikan property padding-top: 0.5rem; dan padding-
bottom: 0.5rem;
• px-4 maksudnya padding-x atau padding-
horizontal merepresentasikan property padding-left: 1rem; dan padding-
right: 1rem;
• rounded merepresentasikan border-radius: .25rem;

Kelihatannya ribet, ya?

Tapi, dengan seperti ini, UI yang kamu buat dengan orang lain akan berbeda meski
menggunakan framework yang sama. Berbeda halnya bila menggunakan UI kit, UI yang dibuat
akan cenderung sama, karena di dalam UI kit sudah tersedia pra-desain komponen, meski style-
nya dapat di-override, tetapi hasilnya mungkin tidak berbeda jauh.

Tailwind CSS tidak dapat dibandingkan dengan framework UI kit — seperti Bootstrap,
Bulma atau Spectre — karena pada dasarnya, mereka memiliki konsep yang berbeda. Bila
pada framework UI kit kamu perlu membuat beberapa custom class untuk mengkostumisasi
pra-desain komponen yang digunakan, sedangkan di TailwindCSS kamu akan dapat mereduksi
penggunaan custom class. Karena, untuk membuat komponen kamu perlu melakukannya dari
awal, dengan cara menyusun utility class.

4. Tugas Praktikum
• Buat halaman web dengan tema pendidikan menggunakan framework bootstrap dengan
penggunaan grid didalamnya!
• Buat halaman web dengan tema lingkungan menggunakan Tailwind CSS!