CSS adalah singkatan dari Cascading Style Sheets . Jika diterjemahkan ke bahasa Indonesia secara harfiah, CSS berarti “lembar penataan menurun”. Namun secara konteks, Cascading Style Sheets adalah kumpulan perintah yang digunakan untuk menjelaskan tampilan sebuah halaman situs web dalam mark-up language . Mark-up language atau bahasa markah adalah bahasa pemrograman yang biasanya digunakan membuat website .
Apa saja Framework CSS yang cocok untuk Ngoding Web ?
Framework CSS untuk Ngoding Web
1. Bootstrap
Bootstrap adalah kerangka kerja CSS yang sumber terbuka dan bebas untuk merancang situs web dan aplikasi web. Kerangkayang ada terdapat templat desain berbasis HTML dan CSS untuk tipografi, formulir, tombol, navigasi, dan komponen antarmuka lainnya, serta juga ekstensi opsional JavaScript. Bootstrap terdiri dari beberapa file yang berisi kumpulan baris kode tersusun dari CSS dan JavaScript yang berbentuk class . Membuat satu tombol dalam tidak perlu menyusun beberapa baris kode karena tinggal memanggil salah satu class saja.
2. Foundation
Foundation, Framework HTML & CSS berfungsi untuk membuat website menjadi Responsive. Framework Foundation digunakan untuk mengembangkan beberapa aplikasi yang sudah terkenal seperti, Facebook, eBay, Samsung, Amazon, Disney, dan masih banyak lagi. Framework Foundation sekarang adalah Foundation versi 6 yang memiliki Kelebihan seperti memiliki 12 Grid System, Komponen dan Fitur lebih banyak, Pengelolaan gambar yang baik. Akan tetapi memiliki kekurangan seperti, dokumentasi terbatas, dan loading template lebih berat dari template Bootstrap.
3. Bulma
Bulma adalah Modern CSS Framework yang berbasis Flex Box. Bulma merupakan salah satu responsive css framework yang kembangkan dengan bahasa Ruby dan Jekyll tool yang dapat memudahkan dalam pembuatan tampilan sebuah web. Bulma CSS dapat digunakan untuk membuat tampilan website yang responsive dengan komponen yang telah disediakan, akan tetapi tidak termasuk JavaScript. Untuk membuat sebuah event untuk sebuah komponen, maka harus membuat fungsi javascript secara manual. Contoh untuk menampilkan yang mengembunyikan modal kita perlu membuat fungsi show hide dengan js, tidak seperti Bootstrap yang hanya perlu set class dan data-target.
FlexBox merupakan salah satu layout mode dimaksudkan untuk mengakomodasi ukuran layar yang berbeda dan perangkat tampilan yang berbeda. Nah konsep Flexible Box lah yang membuat Bulma CSS responsive atau dapat berjalan dengan baik walau ukurang layar berbeda. Untuk lebih jelasnya kalian bisa buka Flexible Box.
[details="Ringkasan"]
https://geekflare.com/best-css-frameworks/
https://www.rumahkomunitas.com/article/bulma-css-bulma-modern-css-framework
[/details]
Materialize
Framework Materialize dibuat oleh google yang mengimplementasikan Google Material Design. Materialize mempunyai tampilan elegan dan sangat konsisten. Kelebihan dari framework materialize adalah komponen-komponen serta class yang mudah untuk dipelajari. Materialize diciptakan oleh empat mahasiswa berbeda di Carnegie Melon University.
SemanticUI
SemanticUI dirilis pada tahun 2013 oleh Jack Lukic. Terdapat banyak tema serta kustomisasi yang bisa digunakan. Ada sekitar 3000 lebih variasi tema untuk framework ini. Semantic UI adalah suatu pustaka CSS Framework yang didesain untuk mempercantik tampilan. Semantic UI ini memiliki kumpulan kode script yang bisa digunakan untuk merancang tampilan website sehingga web programmer tidak perlu membuat kode perintah CSS dari awal. Semantic UI merupakan salah satu CSS Framework yang populer bagi web programmer frontend sekarang, terutama mendalami React JS, React Native, atau Node.js developer. Semantic UI merupakan CSS Framework yang dikhususkan untuk pengguna JavaScript sebagai perancangan tampilan website sekaligus server.
Suzy
Susy adalah kerangka kerja yang sedikit diketahui pada saat ini, tetapi itu adalah ide yang menarik dan menyegarkan. Kerangka tata letak murni lainnya, Susy menghilangkan semua ide float, grid, Flexbox, tabel, atau apa pun yang telah ditentukan sebelumnya, dan memungkinkan Anda menyusun jenis tata letak yang Anda inginkan. “Compose” adalah kata kunci di sini, karena Susy dimaksudkan untuk membuat tata letak yang sangat modular, mengejutkan dengan kebutuhan yang sangat kompleks, tidak biasa, dan tepat.
Pure css
Modul CSS pada pure.css berbeda karena Anda impor sesuai kebutuhan. Jadi, jika Anda hanya membutuhkan sistem kisi, tidak perlu mengimpor seluruh CSS dan menambah waktu muat situs. Grid Murni hadir dalam beberapa rasa: 5-point, 2-point, 24-point, dll. Jadi, ketika membuat kolom, Anda memiliki lebih banyak fleksibilitas. Pure bukan kerangka kerja CSS yang paling cantik secara default, tapi saya bisa melihat bagaimana hal itu menambah nilai bagi mereka yang ingin menyelesaikan masalah kecil CSS di UI mereka dan merasa ngeri pada standar “membantu” kerangka kerja lain yang disertakan.
Skeleton
Skeleton sangat minim sehingga bahkan tidak menyebut dirinya kerangka CSS, pustaka, atau bahkan modul. Ini adalah pelat baja, dan hanya mengandung 400 baris kode sumber! Skeleton dirancang untuk proyek-proyek kecil atau kecil yang membutuhkan sedikit lebih dari tata letak dan penentuan posisi.
CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda(markup laguage. Biasanya CSS digunakan untuk mendesain sebuah halaman HTML dan XHTML, tetapi sekarang CSS bisa diaplikasikan untuk segala dokumenXML, termasuk SVG dan XUL bahkan ANDROID.
CSS dibuat untuk memisahkan konten utama pada dokumen yang meliputi layout, warna dan font. Pemisahan konten utama pada dokumen berfungsi untuk memisahkan daya akses konten pada web, menyediakan lebih banyak fleksibilitas dan kontrol dalam spesifikasi dari sebuah karakteristik dari sebuah tampilan website, membagi halaman untuk sebuah formatting dan mengurangi kerumitan dalam penulisan kode dan struktur dari konten, contohnya teknik tableless pada desain web. Dengan menggunakan CSS sebuah website dapat menampilkan halaman yang lebih menarik, seperti on-screen, in-print, by voice, dan lain-lain. Sementara itu, pemilik konten web bisa menentukan link yang menghubungkan konten dengan file CSS.
Fungsi adanya CSS adalah membedakan konten dari dokumen dan dari tampilan dokumen, dengan itu, pembuatan ataupun pemrograman ulang web akan lebih. Dalam desain web warna , ukuran dan formatting merupakan hal yang penting untuk sebuha tampilan website. Dengan adanya CSS, konten dan desain web akan mudah dalam membuat halaman web yang banyak, yang pada akhirnya dapat memangkas waktu pembuatan web. Selain itu fungsi css adalah merancang, merubah, mendisain, membentuk halaman wesite(blog juga website). dan isi dari halaman website adalah tag-tag html, logikanya css itu dapat merubah tag-tag html(yang sederhana) sehingga menjadi lebih fungsional dan menarik.