CSS Frameworks | Goodpixelpro Tutorial

Goodpixelpro Tutorial – Hallo teman-teman semua, Semangat Pagi!!
Kali ini saya akan sharing sedikit tentang CSS Framework..

Apa itu CSS Framework??
CSS Framework adalah suatu kerangka kerja atau juga sebuah software untuk membantu para programmer dalam mengerjakan tampilan diprojectnya.
Dengan adanya framework ini project akan lebih cepat untuk diselesaikan dan lebih terstruktur, tapi bukan berarti kita bebas / tidak perlu untuk coding. dengan adanya framework kita bisa menggunakan suatu class yang sudah mempunyai tampilan / fungsinya tanpa kita perlu mengaturnya. sebagai contoh pengaturan layout header, body, footer.

nah udah jelas kan apa itu CSS Framework.
Sekarang kita akan membahas beberapa CSS Framework yang ada saat ini, apa sih kelebihannya dan kekurangannya, manakah yang lebih baik?

Twitter Bootstrap
GITHUB Stars : 122.798


Framework satu ini pasti kalian pernah dengar kan? yap, bootstrap adalah salah satu CSS Framework paling populer saat ini, banyak programmer khususnya Frontend yang menggunakan framework ini untuk membantu mengerjakan projectnya. Bootstrap sangat mudah digunakan dan gratis. bootstrap juga menerakan dibanyak template seperti tabel, input form dan juga membantu dalam plugin javascript.

Kelebihan:

  1. Siapa saja yang memiliki pengetahuan dasar tentang CSS bisa menggunakan
  2. Respons Serba bisa
  3. Responsive – Cocok untuk mobile styling
  4. Komunitas Besar

Kekurangan :

  1. Menyesuiakan struktur bootstrap membutuhkan banyak penulisan ulang file
  2. Karena pengulangan menyebabkan file menjadi besar
Semnatic-UI
GITHUB Stars : 40.122

Yang kedua ada Semnatic-UI yang fungsinya sebenarnya sama dengan bootstrap dan frameworks lainnya yaitu untuk membantu pengerjaan tampilan dan layout di sisi client dan penggunaannya gratis.

Kelebihan:

  1. Mengimplementasi penggunaan bahasa Inggris reguler, sehingga sangat mudah diingat untuk penulisan class.
  2. Menawarkan berbagai tema lebih dari 3k.
  3. Debugging cenderung lebih mudah dalam semantik-ui.
Kekurangan
  1. Deployment prosess sedikit lebih besar.
  2. Tidak memiliki dukungan untuk Internet Explorer.
  3. Semantik Package sangat besar.
Material-UI
GITHUB Stars :34.067
Materi-UI adalah yang paling mudah untuk diikuti kalau kita menggunakan desain material Google dan penggunaannya gratis.
Kelebihan:
  1. Mudah untuk menyesuaikan
  2. Banyak komponen yang sesuai dengan material design-compliant.
  3. Terbaik untuk mematuhi pedoman desain material Google.
Kekurangan:
  1. Tidak menawarkan keuntungan untuk memulai sebuah proyek dari awal.
  2. Kita membutuhkan pengetahuan awal tentang React.
Foundation
GITHUB Stars : 27.134

Foundation adalah framework css front end yang dikelola oleh zurb. Gratis dan Open Source,
Foundation adalah framework responsif pertama lho untuk mobile. Foundation juga hadir dengan tata letak grid yang responsif dengan berbagai jenis mobile dengan format potrait dan landscape.

Kelebihan:

  1. Foundation memiliki seperangkat besar style sheet.
  2. Selain style dasar foundation juga menyediakan tombol dengan fitur canggih termasuk pengelompokan tombol atau tombol dengan pilihan drop-down, pull up.
  3. Foundation memungkinkan halaman web untuk menyesuaikan secara dinamis.
Kekurangan:
  1. Foundation tidak mendukung Internet explorer 8 karena beberapa properti grid yang digunakannya.
  2. Kustomisasi cenderung sedikit laggy process.
Nah itu dia beberapa contoh CSS Frameworks dengan keunggulannya masing2. masih ada beberapa lagi CSS Frameworks seperti

Sekarang tinggal teman-teman bisa memilih sendiri manakah CSS Frameworks yang akan dipakai dan menurut kalian mana yang lebih cocok dan lebih powerfull untuk projek kalian.

Semoga artikel ini dapat membantu kalian semua.. Terimakasih.

Refrensi :

  1. https://codeburst.io/evaluating-css-frameworks-bulma-vs-foundation-vs-milligram-vs-pure-vs-semantic-vs-uikit-503883bd25a3
  2. https://en.wikipedia.org/wiki/CSS_framework
  3. https://usablica.github.io/front-end-frameworks/compare.html?v=2.0
Terimakasih telah berkunjung ke website Goodpixelpro. Semoga bermanfaat.!

There are no comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Start typing and press Enter to search

Shopping Cart