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

Apa Sih Itu Svelte Js? Bagaimana Cara Menjalankannya? Yuks Simak Pembahasan Berikut Ini

(Sumber : Website https://svelte.dev/)   Hallo Sahabat Coders, Semoga kita semua selalu diberikan Kesehatan dan keberlimpahan dalam pekerjaan atau usaha kita. Perkembangan dunia pemrograman semakin hari semakin menjadi-jadi. Banyak Bahasa pemrograman maupun framework baru bermunculan akhir-akhir ini. Terutama framework JavaScript yang yang banyak bermunculan. Dan semuanya sangat menarik untuk dicoba.  Framework JavaScript yang terkenal saat ini contohnya Angular JS, Vue JS, React JS dan lain sebagainya dan mungkin banyak orang sudah tahu tentang framework- framework ini. Namun, akhir-akhir ini, ada framework yang baru terkenal yaitu Svelte JS (Website : https://svelte.dev/ ). Framework ini Admin tahu dari seorang JavaScript Developer terkenal di Indonesia yaitu Mas Riza Fahmi ( Curriculum Director di Hacktiv8 Indonesia ). Svelte Js merupakan sebuah framework JavaScript untuk menulis komponen antarmuka ( user interface) yang dibuat oleh Rich Harris . Namun menurut penulisn...
Posting Komentar
Baca selengkapnya

Mengenal Apa itu Android Studio

Android Studio merupakan tools IDE ( Integrated Development Environment ) yang digunakan untuk membuat aplikasi android. Fungsi utamanya adalah sebagai editor yang menyediakan berbagai kebutuhan dalam membangun aplikasi android seperti widget, library, dll. Android Studio versi terbaru telah mendukung 2 bahasa pemrograman yaitu Java dan Kotlin. Sebelumnya hanya mendukung bahasa Java. Android Studio hadir sebagai pengganti Eclipse ADT ( Android Development Tools ) yaitu tools utama sebelumnya. Tools Android Studio ini dibangun di atas aplikasi yang sudah populer sebagai editor programer yaitu JetBrains IntelliJ IDE. Selain itu Android Studio di lengkapi dengan Emulator sendiri. Sama halnya seperti Eclipse, Android Studio juga memerlukan SDK ( Software Development Kit ) untuk membangun aplikasi android. Bedanya Android Studio didukung penuh oleh Google sebagai pengembangnya serta menggunakan grandle dalam melakukan build. Baca juga : Perbedaan Membuat Aplikasi Android Menggunakan Ecli...
Posting Komentar
Baca selengkapnya

Cara Membuat Project Baru dengan Ruby on Rails

    Pada postingan sebelumnya Mengenal dan Menginstall Ruby on Rails kita telah menginstall bahan-bahan yang diperlukan untuk menjalankan Rails atau Ruby on Rails. Tentunya membuat project baru adalah langkah yang perlu di ketahui sebagai dasar membuat web menggunakan Rails ini. Membuat Project baru di Rails Sebagai contoh disini kita akan membuat project baru bernama " hello_world ". Cara membuatnya sangat mudah anda tinggal buka CMD dengan menekan Windows + R kemudian ketikkan CMD. Setelah CMD terbuka, arahkan ke folder tempat anda ingin menyimpan file Rails anda. Disini saya mengarahkannya pada "E:\ruby_on_rails", anda bisa menentukan sesuka hati tempat penyimpanannya. Untuk mengarahkan ketikkan perintah " cd E: " kemudian masuk ke folder " cd ruby_on_rails ", seperti pada gambar.     Setelah berada di folder atau directory yang di inginkan, ketikkan perintah rails new hello_world . Intruksi tersebut mengisyaratkan untuk membuat project ba...
Posting Komentar
Baca selengkapnya