Apa itu CSS Framework?
Bagi anda yang belum paham apa itu CSS Framework, sebelumnya kita bahas dulu apa itu CSS, dan apa itu Framework.
CSS singkatan dari Cascading Style Sheets, yaitu bahasa pemrograman untuk mengontrol penampilan, style atau desain dari dokumen HTML atau halaman website. Jika diibaratkan HTML itu manusia, maka CSS adalah pakaiannya, make up, dan aksesoris lainnya. Tanpa pakaian, manusia akan telanjang. Begitu juga dengan HTML, tanpa CSS, dokumen HTML (halaman web) akan tampil sebagai teks polos biasa. Sebelum CSS ditemukan pada tahun 1996, dan sebelum populer, desain halaman web dikontrol oleh table. Misalnya untuk membagi halaman web menjadi header, konten, sidebar, footer, itu dipisah dengan beberapa table, makanya tampilan web tempo doeloe sangat sederhana, karna tidak se-fleksibel CSS. Silahkan anda pelajari pengetahuan dasar tentang CSS di situs w3schools.com
Sedangkan Framework secara bahasa artinya kerangka kerja, yaitu sekumpulan instruksi atau fungsi yang mengatur aturan tertentu yang saling berinteraksi dalam sebuah pekerjaan. Maksudnya bagaimana ya saya masih bingung? Gampangnya begini, orang kalau mengerjakan sesuai dengan kerangka yang sudah disiapkan pasti akan lebih mudah, tinggal mengaplikasikannya saja, iya kan?
Jadi CSS Framework adalah sekumpulan kode CSS siap pakai yang berisi property atau fungsi untuk mengatur layout, background, warna, huruf, menu, navigasi, dan lain sebagainya yang siap digunakan untuk mendesain sebuah halaman web. CSS Framework juga pada umumnya, berisi teknologi/bahasa pemrograman lain seperti SASS dan JavaScript untuk mendukung dan memperluas pengembangan web.
Dengan CSS Framework, desainer web sudah memiliki code CSS lengkap, tinggal mengaplikasikannya saja pada elemen HTML dengan class dan id yang diperlukan. Misalnya, property untuk mengatur layout mulai dari 1 kolom, 2 kolom dan seterusnya yang lebarnya akan menyesuaikan dengan layar laptop/gadget.
.one.column,
.one.columns { width: 4.66666666667%; }
.two.columns { width: 13.3333333333%; }
.three.columns { width: 22%; }
.four.columns { width: 30.6666666667%; }
.five.columns { width: 39.3333333333%; }
.six.columns { width: 48%; }
.seven.columns { width: 56.6666666667%; }
.eight.columns { width: 65.3333333333%; }
.nine.columns { width: 74.0%; }
.ten.columns { width: 82.6666666667%; }
.eleven.columns { width: 91.3333333333%; }
.twelve.columns { width: 100%; margin-left: 0; }
Jadi, jika anda ingin membuat halaman web dengan 2 kolom, sebelah kiri untuk artikel sebelah kanan untuk widget, kolom kiri lebih lebar daripada kolom kanan, contohnya pakai yang EIGHT dan FOUR, maka tinggal memanggil CLASS dari property tersebut di elemen HTML nya.
Property di CSS :
.four.columns { width: 30.6666666667%; }
.eight.columns { width: 65.3333333333%; }
Artinya class four columns lebarnya 30% dan class eight columns lebarnya 65%.
Maka elemen HTML untuk menggunakan class tersebut adalah :
<div class="eight column">Ini kolom kiri, semua konten dan elemen HTML lain yang terdapat di kolom kiri harus berada di antara elemen div ini</div>
<div class="four columns">Ini kolom kanan, semua konten dan elemen HTML lain yang terdapat di kolom kanan harus berada di antara elemen div ini</div>
Itu hanya bagian kecil dari property css, yang dalam contoh ini untuk mengatur layout halaman web. Intinya dengan CSS Framework, kita tidak perlu menyusun stylesheet dari nol, karna sudah disediakan mulai dari pengaturan layout, typography, link, tombol, formulir, list, table, dan lain sebagainya.
Keuntungan menggunakan CSS Framework
Keuntungan menggunakan CSS Framework yang paling terasa adalah waktu untuk membuat desain web menjadi lebih cepat. Bayangkan saja, jika anda harus menulis property css satu persatu mulai dari layout dan elemen lain sampai finishing. Apa sudah dibayangkan?
Dikarenakan CSS Framework memiliki stylesheet yang siap digunakan, maka pembuatan desain web akan lebih cepat dan nyaman. Anda tidak perlu menulis semua kode CSS untuk membuat desain website. Anda bisa bisa menghasilkan desain UI (user interface) yang ramah pengguna dan menarik secara visual yang dapat dimodifikasi tanpa memulai dari awal.
Membuat desain web dengan CSS Framework juga bisa menghasilkan desain website yang kompatibel dengan banyak browser populer, karna pengembang CSS Framework dalam pembuatan frameworknya sudah melakukan uji lintas browser.
Tips Memilih CSS Framework
Di internet ada banyak CSS Framework yang bisa didownload dan dipakai secara gratis, lalu yang mana yang harus kita pilih? Ketika mengevaluasi dan memilih CSS Framework terbaik, anda dapat mempertimbangkan kriteria sebagai berikut.
Fitur dan komponen
Yang pertama adalah seberapa lengkap fitur dan komponen yang terdapat dalam CSS Framework tersebut, dan seberapa kompleks projek desain web yang akan anda buat. Sebagai contoh, kalau untuk membuat desain website yang tidak terlalu kompleks, maka saran saya pakai CSS Framework yang sederhana seperti skeleton.
Skeleton bisa dikatakan framework yang sangat ringan, hanya menggunakan 400 baris stylesheet, tetapi sudah cukup untuk membuat desain website yang bagus. Sangat cocok untuk anda yang sedang membuat desain web sederhana, dimana anda merasa tidak membutuhkan terlalu banyak fitur dan komponen.
Tetapi jika anda ingin membuat desain website yang lebih kompleks, yang memerlukan lebih banyak pilihan fitur dan komponen seperti panel, modal, alert, card, anda bisa menggunakan bootstrap. Intinya pakailah CSS Framework dengan kelengkapan fitur dan komponen yang sesuai dengan kebutuhan proyek anda.
Kemudahan kustomisasi
Selanjutnya adalah mempertimbangkan apakah stylesheet yang disediakan dapat dimodifikasi atau dikustomisasi dengan mudah, misalnya untuk memodifikasi gaya, warna, tata letak dan lain sebagainya.
Responsive
Ini adalah standar desain web modern, responsive berarti layout halaman web akan menyesuaikan dengan lebar layar gadget pengunjung web. Seharusnya semua CSS Framework sudah menyediakan rule atau property untuk membuat desain web responsif. Tetapi mungkin perlu dicek apakah ada fitur seperti grid responsive, breakpoint, dan class utility yang mendukung pembuatan layout web responsive.
Performa
Pertimbangkan pula dampak CSS Framework terhadap kinerja website anda. Apakah justru akan memperlambat loading website atau sebaliknya. Pilihlah framework yang memprioritaskan CSS yang dioptimalkan dengan ukuran file yang kecil untuk mempercepat loading website.
Kompatibilitas browser
Pastikan CSS Framework yang anda pakai sudah kompatibel, dapat ditampilkan dengan baik di berbagai web browser utama dan versi terbarunya. Kompatibilitas dengan browser lama mungkin diperlukan, tergantung target audiens anda.
Cara menggunakan CSS Framework
Untuk menggunakan CSS Framework atau kerangka CSS, biasanya sudah ada panduan atau dokumentasi di masing-masing situs penyedia framework tersebut, yang secara umum melibatkan tiga aspek utama.
Mendownload dan menautkan (me-link-kan) file CSS dalam dokumen HTML
Anda dapat mengunduh file CSS lalu letakan di folder projek web anda. Kemudian membuat link tautan yang mengarah ke file CSS tersebut di bagian HEAD pada file HTML web tersebut.
<link href="css/style.css" rel="stylesheet">Anda juga bisa membuat tautan css dari sumber eksternal, cek apakah CSS Framework yang anda pakai tersedia di situs eksternal atau CDN seperti jsdelivr.com. Misalnya url tautan seperti di bawah ini.
<link href="
https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css
" rel="stylesheet">
Menerapkan class property CSS yang diperlukan ke elemen HTML
Pada tahap ini, anda perlu mempelajari panduan penerapan yang telah disediakan oleh penyedia CSS Framework. Fitur atau rule/aturan apa saja yang tersedia, nanti tinggal menerapkan class dari setiap rule atau property CSS yang diperlukan ke elemen HTML halaman web anda. Sebagai contoh, anda ingin membuat tombol (bahasa inggrisnya button) dengan desain yang dikontrol oleh rule/aturan/property css pada framework, maka class apa yang dipakai untuk property tersebut? Cek di panduan atau langsung lihat code yang terdapat di file CSS, contohnya seperti di bawah ini.
Elemen HTML untuk membuat tombol adalah :
<button type="button">Ini tombol</button>
Dengan kode di atas, tombol akan tampil tanpa desain. Untuk membuat tombol menjadi lebih menarik dengan desain yang dikontrol oleh css, maka perlu ditambah class pada elemen HTML tersebut.
<button type="button" class=" ">Ini tombol</button>
Code di atas, class nya masih kosong, maka perlu memanggil class yang terdapat di file css yang sudah disediakan atau disusun oleh CSS Framework, seperti di bawah ini.
.btn {
display: inline-block;
height: 38px;
padding: 0 30px;
color: #555;
text-align: center;
font-size: 11px;
font-weight: 600;
line-height: 38px;
letter-spacing: .1rem;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border-radius: 4px;
border: 1px solid #bbb;
cursor: pointer;
box-sizing: border-box;
}
Class dari rule css di atas adalah btn, jadi untuk membuat class css adalah dengan membuat nama class yang diawali tanda titik (.) seperti contoh kode di atas. Tetapi saat diterapkan pada elemen HTML, titiknya tidak diikutkan, jadilah seperti di bawah ini.
<button type="button" class="btn">Ini tombol</button>
Dengan code di atas, maka tombolnya sudah tampil dengan desain yang dikontrol oleh rule CSS. Itu hanya sebagai contoh saja, intinya anda perlu mengetahui class apa saja yang diperlukan untuk diterapkan pada elemen HTML halaman web anda.
Tanpa menerapkan class css, elemen HTML akan tampil tanpa desain, kecuali terdapat base css yang otomatis akan mendesain elemen-elemen dasar HTML tanpa class.
Menyesuaikan atau memodifikasi rule atau property CSS sesuai kebutuhan
Sebagaimana yang sudah dijelaskan di atas, rule atau property css berfungsi untuk mengontrol atau menentukan tampilan sebuah elemen HTML. Mungkin tidak semua rule atau fitur dari CSS Framework memenuhi selera anda dalam mendesain sebuah website, maka tentu saja anda bisa mengganti rule CSS dengan kode CSS anda sendiri untuk menyesuaikan dengan desain yang diinginkan.
Syarat untuk bisa memodifikasi rule css adalah memahami code css yang ditulis dalam bahasa inggris. Akan lebih mudah mempelajari css jika anda paham bahasa inggris. Ketika anda belum hafal atau mahir dengan aturan-aturan css, paling tidak anda nyontek di situs tutorial css https://www.w3schools.com/css/. Di situ dijelaskan secara lengkap aturan-aturan css beserta fungsinya.
Sebagai contoh, rule css di bawah ini akan membuat huruf menjadi tebal dan berwarna merah
.nama-class, #nama-id {
font-weight: bold;
color : red;
}
Jika anda ingin mengubahnya agar warna menjadi biru, maka tinggal mengganti nilai dari property color (warna) yaitu red (merah), diubah menjadi blue (biru). Untuk warna yang lebih lengkap bisa pakai HEX misalnya #ff0000.
Itu hanya contoh kecil untuk mengubah penampilan atau penampakan atau bahasa kerennya desain, dengan cara mengubah rule css atau mengubah nilai property css dari class css yang diterapkan pada elemen HTML tertentu.
Intinya tentukan dulu bagian mana atau elemen HTML mana yang akan diubah, lalu kemudian ketahui elemen HTML itu pakai class atau id apa (cek code class=”nama-class”, atau id=”nama-id”).
Selanjutnya cek nama class (yang diawali tanda titik) atau id (yang diawali tanda pagar) tersebut pada file atau code CSSnya (cek kode .nama-class, atau #nama-id), lalu ubah nilai propertynya (contoh property color (warna), nilainya bisa blue, red, yellow, atau HEX #f0f0f0).
Selanjutnya jika anda ingin praktek mebuat desain website dengan css framework, silahkan klik tutorial mari belajar desain website dengan framework css.
