MULTI SOLUSINDO

CSS Framework

www.arkatama.id
MULTI SOLUSINDO

What it is?

www.arkatama.id
 MULTI SOLUSINDO

CSS Framework

Framework CSS sendiri merupakan sebuah kerangka yang digunakan untuk mendesain sebuah
halaman web tanpa harus menulis code dari nol.

Kelebihan menggunakan Framework CSS:

1. Tidak perlu menulis code dari nol

2. Komponen tinggal pakai

3. Code rapi dan struktur

4. Sudah responsive dan mobile friendly

5. Mempercepat proses pengembangan aplikasi

sehingga bisa berfokus kepada proses dan konten

www.arkatama.id
 MULTI SOLUSINDO

CSS Framework: Jenis

Secara umum terdapat dua jenis, component based dan utility based

• Component Based merupakan framework css yang berfokus pada ketersedian komponen
tanpa harus menulis code dari nol

• Utility Based merupakan framework css yang berfokus pada kemudahan styling elemen
menggunanakan utility class dan syntax yang disediakan

www.arkatama.id
MULTI SOLUSINDO

CSS Framework: Framework Populer

www.arkatama.id
MULTI SOLUSINDO

Bootstrap

www.arkatama.id
 MULTI SOLUSINDO

Bootstrap

Merupakan salah satu framework CSS populer, awalnya adalah style guide untuk internal Twitter
sebelum rilis secara public.

Kenapa memilih Bootsrap:

• Bootstrap menyediakan banyak komponen tinggal pakai

• Kompatibel dengan berbagai jenis browser

• Dokumentasi lengkap dan jelas

• Bootstrap menyediakan komponen js sehingga interaktif

• Responsive dan mudah dikustomisasi

• Dukungan komunitas yang luas

www.arkatama.id
 MULTI SOLUSINDO

Bootstrap: Memulai

Sebelum memulai sangat disarankan untuk selalu melihat halaman dokumentasi resmi
bootstap pada https://getbootstrap.com

Untuk menggunakan bootstarp pada projek cukup mudah:

1. Buat file html

2. Tambahkan meta <meta name="viewport" content="width=device-width, initial-scale=1">

pada tag head

3. Sertakan external css bootstrap

4. Sertakan external js bootstrap

www.arkatama.id
MULTI SOLUSINDO

www.arkatama.id
 MULTI SOLUSINDO

Bootstrap: Layout Breakpoint

Breakpoint merupakan sebuah nilai lebar yang menentukan bagaimana sebuah layout
menyesuaikan dengan device atau ukuran layar. Pada bootstrap tersedia beberapa jenis
ukuran breakpoint.

*Class infix adalah akhiran sebuah kelas penulisannya

adalah *-infix

Contoh: col-sm, col-lg, container-sm dan sebagainya

www.arkatama.id
 MULTI SOLUSINDO

Bootstrap: Layout Container

Container sendiri merupakan layout dasar dan memiliki berbagai jenis ukuran

www.arkatama.id
MULTI SOLUSINDO

Bootstrap: Layout Container

www.arkatama.id
 MULTI SOLUSINDO

Bootstrap: Layout Grid

Grid pada bootstarp merupakan gabungan dari container, baris dan kolom untuk membuat
sebuah layout dan menentukan alignment konten di dalamnya. Pada dasarnya layout ini
dibuat menggunakan flexbox dan sudah responsive.

www.arkatama.id
 MULTI SOLUSINDO

Bootstrap: Layout Grid

Grid pada bootstarp juga bisa diatur berdasarkan breakpoint

www.arkatama.id
 MULTI SOLUSINDO

Bootstrap: Layout Column

Dengan bootstarp kita dapat dengan mudah mengontrol kolom

Alignment

1. Vertical Alignment

Kita dapat mengubah alignment secara vertical dengan kelas align-items-*

row align-items-start

www.arkatama.id
 MULTI SOLUSINDO

row align-items-center

row align-items-end

www.arkatama.id
 MULTI SOLUSINDO

Kita juga dapat mengatur masing-masing kolom secara individu dengan kelas .align-self-*

www.arkatama.id
 MULTI SOLUSINDO

Horizontal Alignment

Untuk mengatur alignment secara horizontal dapat menggunakan kelas justify-content-*

www.arkatama.id
 MULTI SOLUSINDO

2. Reordering

Bootstrap juga mendukung ordering posisi urutan kolom dengan kelas .order-

Kita juga bisa mengatur urutan posisi dari 1-5 (.order-1, .order-3, dst). Selain itu kita dapat
mengkombinasikan order dengan breakpoint sehingga kita bisa mengatur urutan posisi
berdasarkan ukuran layer contoh .order-1.order-md-2

Selain nomor order bootstrap juga menyedian first dan last order

www.arkatama.id
 MULTI SOLUSINDO

Bootstrap: Table

Kita dapat mudah membuat table yang menarik dengan bootstarp baik jenis table, responsive,
warna, ukuran, border dan alignment

www.arkatama.id
 MULTI SOLUSINDO

Bootstrap: Form Control

Bootstarp secara default sudah menyediakan styling untuk form. Form control menyediakan
styling untuk tag input dan textarea. Dengan form-control kita juga dapat mengatur ukuran dari
form input.

www.arkatama.id
 MULTI SOLUSINDO

Bootstrap: Komponen

Meskipun bootstrap menyidakan utility class namun pada dasarnya bootstrap termasuk
kedalam framework css berbasis komponen. Bootstarp sendiri menyediakan banyak komponen
seperti:

Alerts Collapse Placeholders

Badge Dropdowns Popovers
Breadcrumb List group Progress
Buttons Modal Scrollspy
Button group Navbar Spinners
Card Navs & tabs Toasts
Carousel Offcanvas Tooltips
Close button Pagination

Secara lengkap tentang bagaimana penggunaan dan nama kelas silahkan cek dokumentasi resmi

www.arkatama.id
 MULTI SOLUSINDO

Bootstrap: Utility Color

Utility color pada bootstrap dapat diterapkan pada .bg-*, .btn-*, .border-*, .text-*

Secara umum terdapat 8 jenis warna: primary, danger, warning, secondary, info, success, light
dan dark

www.arkatama.id
 MULTI SOLUSINDO

Bootstrap: Utility Background

Bootstrap secara default sudah menyediakan background-color dan dapat digunakan dengan
kelas .bg.*

www.arkatama.id
 MULTI SOLUSINDO

Bootstrap: Utility Border

Bootstrap menyediakan utility border. Utility ini memiliki option seperti warna, opacity, lebar, dan
border radius

www.arkatama.id
 MULTI SOLUSINDO

Bootstrap: Utility Display

Bootstrap menyediakan kelas display dengan .d-*

Penaman kelas display pada bootstrap sebgai berikut:

.d-{value} untuk xs

.d-{breakpoint}-{value} untuk sm, md, lg, xl, and xxl

Adapun nilai dari {value} adalah: none, inline, inline-block, block, grid, table, table-cell, table-
row, flex, inline-flex

Jadi dengan utility display ini kita dapat dengan mudah mengatur responsivitas suatu elemen
berdasarkan breakpoint tertentu.

www.arkatama.id
 MULTI SOLUSINDO

Bootstrap: Utility Flex

Seperti materi css flexbox sebelumnya, bootstrap juga menyediakan utility flex yang
mempermudah penulisan code dan penataan elemen. Flex box pada bootstrap juga sudah
responsive, selain itu juga masih mendukung semua fitur dasar flex box seperti alignment
horizontal dan vertical, direction, order dan wrap.

Untuk memberikan suatu elemen display flex dapat menggunakan kelas .d-flex diikuti dengan
option flex box lainnya

www.arkatama.id
 MULTI SOLUSINDO

Bootstrap: Utility Sizing

Bootsrap menyediakan utility untuk styling ukuran lebar (width) dan tinggi (height) dengan
kelas .w-{value} dan .h-{value}

Adapun nilai value adalah

25: 25%

50: 50%

75: 75%

100: 100%

auto: Otomatis menyesuaikan konten

www.arkatama.id
 MULTI SOLUSINDO

Bootstrap: Utility Spacing

Untuk mengatur padding dan margin elemen, bootstrap menyediakan utility yang dapat
diakses dengan {property}{sides}-{size} untuk xs dan {property}{sides}-{breakpoint}-{size} for
sm, md, lg, xl, and xxl.
Dimana property adalah:
•m - margin Dimana size:
•p - padding •0 - menghilangkan padding atau margin
•1 - (by default) mengatur padding dan margin menjadi $spacer * .25
Dimana side adalah: •2 - (by default) mengatur padding dan margin menjadi $spacer * .5
•t - untuk margin-top atau padding-top •3 - (by default) mengatur padding dan margin menjadi $spacer
•b - untuk margin-bottom atau padding-bottom •4 - (by default) mengatur padding dan margin menjadi $spacer * 1.5
•s - (start) untuk margin-left atau padding-left jika LTR, margin- •5 - (by default) mengatur padding dan margin menjadi $spacer * 3
right atau padding-right jika RTL •auto - otomatis menyesuaikan
•e - (end) untuk margin-right atau padding-right jika LTR, margin-
left atau padding-left jika RTL Secara default nilai dari $spacer adalah 1rem
•x - secara horizontal atau kedua sisi*-left dan *-right
•y - secara vertikal atau kedua sisi *-top dan *-bottom
•blank – untuk semua sisi

www.arkatama.id
MULTI SOLUSINDO

Tugas:

1. Melanjutkan repository sebelumnya

2. Implementasikan tugas sebelumnya (pertemuan 10) menggunakan CSS
dari Bootstrap
3. Kumpulkan screenshot dan link repository di aplikasi Sinauo

www.arkatama.id
MULTI SOLUSINDO

www.arkatama.id
TERIMA KASIH