Langsung ke konten utama

7 Framework atau Library CSS yang Bisa Kamu Coba

 

Para Developer Website khusunya yang bekerja khusus sebagai Front-end seringkali terkendala di masalah CSS, bukan karena pembuatannya melainkan produktivitas. Terkadang pembuatan Aplikasi Web menjadi ribet bila harus membangun CSS dari awal setiap ada project.

Hal ini bisa saja di atasi dengan membuat CSS sendiri, akan tetapi hal ini memerlukan waktu lagi. Belum lagi jika CSS yang dibuat terlalu banyak kadang kita lupa apa nama kelasnya.

Untuk meminimalisir atau mempermudah, developer dapat menggunakan Framework atau Library yang telah ada. Library ini biasanya sudah menyediakan documentasi sehingga, hanya tinggal mencari nama kelas yang ingin digunakan.



1. Bootstrap

Bootstrap merupakan library paling banyak digunakan saat ini. Hal ini tidak lepas dari bootstrap yang memiliki banyak documentasi dan komunitas. Banyak website yang telah menggunakan library ini dalam pembuatannya.

Tidak hanya menyediakan Library CSS, bootstrap juga menyediakan Library JS seperti bootstrap Validator yang dapat digunakan untuk memvalidasi sebuah form sebelum akhirnya data disimpan ke database.

Hingga postingan ini dirilis Boostrap telah sampai pada versi 4.5. Selain itu versi sebelumnya seperti v3.x, v2.x, dan v1.x masih bisa digunakan.

Untuk menggunakan boostrap silahkan kunjungi website resminya https://getbootstrap.com/.

2. Semantic UI

Semantic UI hadir dengan tampilan yang elegan, serta tentunya responsif. Selain itu framework ini mengusung konsep HTML yang ringkas dan ramah manusia.

Beberapa situs mengatakan bahwa Semantic memiliki struktur class yang bagus dan mudah dipelajari bagi pemula. Semantic UI disebut-sebut sebagai pesaing terberat dari Bootstrap. Jika anda sudah terbiasa dengan boostrap akan sangat mudah menggunakan Semantic sebab keduanya memiliki konsep yang hampir sama.

Untuk menggunakan Semantic UI silahkan kunjungi website resminya https://semantic-ui.com/.

3. Foundation

Sesuai dengan slogannya "responsive design gets a whole lot faster", Foundation membuat desain responsif menjadi lebih cepat.

Framework yang dikembangka oleh ZURB ini bersifat Open Source atau garatis. Hingga postingan ini di rilis Foundation telah sampai pada versi 6.

Beberapa website yang menggunaka Foundation seperti www.polar.com, projection.pixar.com, www.amazon.jobs, home.barclays serta masih banyak lagi.

Untuk menggunakan Foundation silahkan kunjungi website resminya https://get.foundation/.

4. Materialize

Materialize merupakan framework CSS yang dirancang oleh Google. Tujuan google membuat framework ini adalah mengembangkan sistem desain yang memungkinkan pengalaman pengguna terpadu di dalam semua produk mereka pada platform apa pun.

Untuk mengetahui lebih jauh tentang Materialize silahkan kunjungi website resminya https://materializecss.com/.

5. Skeleton

Skeleton cocok untuk membangun website skala kecil yang tidak memerlukan semua utilitas kerangka kerja yang lebih besar. Skaleton menggunakan penamaan grid yang mudah dimengerti oleh orang awam. Grid ini terbagi menjadi 11 mulai dari "one" sampai "eleven". Contoh untuk membuat grid dengan panjang "2/11" dituliskan : 

<div class="two columns">
	//body
</div>

Untuk mengetahui lebih jauh tentang Skeleton silahkan kunjungi website resminya getskeleton.com.

6. Bulma

Bulma adalah framework CSS bersifat open source sehingga bebas digunakan developer manapun. Framework ini telah digunakan lebih dari 200.000 developer (sesuai yang tertulis di halaman resminya).

Berbeda dengan framework CSS lainnya yang biasanya menyertakan JavaScript, bulma hanya berupa CSS.

Ingin mempelajari Bulma lebih jauh kunjungi https://bulma.io/

7. Metro UI

Metro UI atau sekarang lebih dikenal dengan Metro 4 merupakan framework CSS yang dibuat di Ukraina. Framework ini tidak memerlukan pengetahuan Javascript untuk menggunakannya.

Metro UI dapat diakses atau di download dari NPM, Nuget, GitHub, dan Gitlab

Untuk mempelajari lebih jauh tentang Metro UI dapat diakses melalui https://metroui.org.ua/
Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Mengatasi Blank Hitam Pada Photoshop

Saat ini mungkin anda sedang mengalami hal yang pernah saya alami, dimana ketika mengedit gambar di Photoshop tiba-tiba screen layer project berubah menjadi hitam. Apalagi pas menambahkan atau mengedit tulisan, blank ini kerap kali muncul. Kurang lebih akan tampak seperti gambar berikut. Teman-teman jangan khawatir karena saya telah menemukan solusinya dan berhasil saya terapkan. Berikut Cara Mengatasi Blank Hitam Pada Photoshop. 1. Masuk ke menu preferences dengan menekan menu Edit -> Preferences -> Performance . 2. Pada layar Preferences klik tombol Advanced Settings 3. Pada layar Advanced Graphics Processor Settings pada pilihan Drawing Mode silahkan ganti menjadi basic kemudian klik Ok , anda akan kembali ke layar Preferences silahkan klik lagi OK . 4. Selanjutnya tutup Photoshop anda dengan klik menu File -> exit . 5. Terakhir buka kembali Photoshop dan lihat hasilnya.
Posting Komentar
Baca selengkapnya

Inilah Kelebihan dan Kekurangan Ruby

Ruby merupakan salah satu bahasa pemrograman berorientasi objek berbasis skrip yang dikembangkan oleh Yukihiro Matsumoto yaitu seorang programer asal Jepang. Untuk mengetahui lebih jauh tentang bahasa Ruby silahkan baca postingan sebelumnya : Mengenal Bahasa Pemrograman Ruby  Sesuai judul postingan kali ini kita hanya akan membahas mengenai Kelebihan serta Kekurangan Bahasa Pemrograman Ruby. Berikut beberapa point yang telah kami jabarkan. Kelebihan Bahasa Pemrograman Ruby 1. Kode sederhana  Dibandingkan dengan bahasa pemrograman lainnya, yang kebanyakan untuk menulis kode dibutuhkan sekitar 10 baris, pada Ruby hanya butuh 1 atau 2 baris. Inilah kenapa Ruby dikatakan memiliki kode yang sederhana. Karena kesederhanaan dalam kodenya, akan mengurangi jam kerja programmer. 2. Multi-platform Ruby dapat berjalan di berbagai sistem operasi seperti Mac, Windows, hingga Linux. 3. Tingkat kebebasan yang tinggi Salah satu bentuk kebebasan programer dalam menuliska kode Ruby seperti tidak...
Posting Komentar
Baca selengkapnya

Mengenal Sejarah JavaScript

Para programer berbasis web tentunya sangat ingin mengetehui lebih dalam tentang JavaScript. Hal ini tidak lepas dari fitur yang disediakan oleh JavaScript yang memudahkan dalam mengontrol, memanipulasi sebuah website. Selain itu bahasa pemrograman ini juga digunakan di hampir 90% web diseluruh dunia. Sejarah Bahasa Pemrograman JavaScript JavaScript merupakan salah satu bahasa pemrograman berbasis website yang dikembangkan oleh Netscape, sebuah perusahaan telekomunikasi yang juga mengembangkan browser Netscape Navigator. JavaScript sendiri mulai dibuat pada tahun 1995 yang mana ditangani oleh programer Netscape bernama Brendan Eich. Pada awal kemunculannya bahasa pemrograman ini bernama LiveScript. Nama ini kemudian dirubah menjadi JavaScript dikarenakan pada saat itu Java yang dirilis oleh Sun Microsystem (sekarang Oracle)sedang menjadi sorotan. Bisa dikatakan bahwa tujuan penamaan JavaScript tidak lain untuk menarik perhatian para programan pada waktu itu, jadi JavaScript tidak ada...
Posting Komentar
Baca selengkapnya