Daftar 5 Alternatif Twitter Bootstrap

Namun apakah ada alternatif lain selain Bootstrap yang bisa saya gunakan, kamu bisa gunakan Frame...
Penulis
Admin
Kategori
Website
Estimasi
5 menit baca
Dilihat
1.4K
Posting
25 Jun 2022
Daftar 5 Alternatif Twitter Bootstrap Namun apakah ada alternatif lain selain Bootstrap yang bisa saya gunakan, kamu bisa gunakan Framework CSS lainnya seperti Tailwind CSS, Pure CSS, Materialize CSS dan lainnya, mari kita bahas satu persatu. Daftar 5 Alternatif Twitter Bootstrap
2022-11-25

Seiring berkembangnya dunia teknologi terutama website, telah lahir banyak tools yang memudahkan developer untuk membuat project sesuai dengan apa yang diinginkan, website itu yang tersusun dari banyak aspek dari back end atau front end yang membuat website kita menjadi powerful, kali ini saya akan membahas front-end tentang framework CSS.

CSS atau Cascading Style Sheet adalah sekumpulkan code program yang berfungsi untuk mengatur elemen dalam bahasa markup, CSS sendiri dipakai untuk mendesain tampilan Frontend kita agar menarik dari membuat section, form, column, button dll.

Dalam basic pengenalan website, pasti kita akan berhadapan langsung dengan CSS ini, ketika akan membuat tampilan depan website kita menarik, kita sendiri membuat code markup sesuai yang diinginkan, namun terkadang dengan membuat sendiri code CSS nya, waktu kita semakin banyak yang tersita, dimana waktu tersebut bisa kita pakai untuk keperluan lain seperti membuat back-end misalnya.

Semakin bertumbuhnya industri ini, Framework CSS sangat dibutuhkan untuk menghemat waktu developer, admin sudah meringkas beberapa Framework CSS yang bisa kamu coba untuk membuat tampilan website kamu menarik dan modern.

Namun apakah ada alternatif lain selain Bootstrap yang bisa saya gunakan, kamu bisa gunakan Framework CSS lainnya seperti Tailwind CSS, Pure CSS, Materialize CSS dan lainnya, mari kita bahas satu persatu.

 

 

Framework CSS Alternatif Bootstrap

 

1. Materialize CSS

Ditengah banyaknya Framework CSS yang bermunculan, salah satunya yang menarik perhatian para developer adalah rilisnya Materialize CSS pada tahun 2014 oleh Google, awalnya Materialize hanya ditujukan untuk Android saja, namun seiring berjalannya waktu, banyak developer lain yang mengunakan Framework CSS ini karena tampilannya yang modern dan pengunaannya yang mudah.

Dengan Framework Materialize ini, kamu bisa membuat web responsive atau membuat parallax, dalam website resmi mereka materializecss.com, sudah disiapkan dokumentasi yang lengkap serta download untuk dipakai secara offline, disana terdapat fitur-fitur atau code yang terdapat pada materialize design, kamu cukup copy paste code tersebut untuk bisa digunakan kedalam website kamu.

Disana juga terdapat showcase website yang mengunakan Framework CSS ini, kamu bisa manfaatkan itu sebagai referensi, dan dalam dokumentasinya dijelaskan bagaimana cara untuk mengunakan materialize dijelaskan step by stepnya.

Materialize sendiri sudah include SASS mixin, dalam kasus untuk pengunaan animasi, contoh dalam syntax SASS

-webkit-animation: 0.5s;
-moz-animation: 0.5s;
-o-animation: 0.5s;
-ms-animation: 0.5s;
animaton: 0.5s;

Dalam SASS Mixin yang dapat dipanggil dengan satu line saja.

@include animation(.5s);

Untuk mengunakan Materialize kamu bisa mengunakan CSS ataupun SASS.

 

Framework CSS Alternatif Bootstrap

 

2. Tailwind CSS

Pada website resminya, Tailwind CSS merupakan framework CSS yang bersifat utility-first untuk membuat design website dengan cepat, tailwind CSS menawarkan fitur sederhana namun powerful, terkadang ada Framework CSS lain menyediakan komponen yang berlebihan seperti card, alert, form, dll. Awalnya dalam pembuatan desain komponen-komponen tersebut sangat membantu diawal.

Dalam kasus yang ada, masalah muncul ketika kita ingin membuat desain khusus sesuai keinginan kita, tentu saja dengan melakukan perubahan yang besar pada komponen-komponen yang sangat banyak berdampak pada effort yang tinggi serta waktu yang banyak tersita.

Tailwind CSS sangat berbeda, tailwind menyediakan komponen yang sudah didesain sebelumnya dan juga menyediakan low-level utility dimana dapat kita gunakan untuk mendesain secara keseluruhan. Tailwind menyediakan class-class kecil yang sangat fleksibel untuk membuat tampilan sesuai keinginan tanpa perlu override styles seperti framework kebanyakan.

Apa kelebihan framework tailwind CSS? jika dibandingkan dengan framework CSS lainnya, tailwind termasuk framework yang sederhana, kebanyakan framework lain sudah menyediakan komponen yang telah didesain sebelumnya, dalam mengunakan tailwind kamu hanya fokus pada satu HTML tanpa perlu melakukan perpindahan ke file lain, yang membedakan tailwind dengan framework lainnya adalah pengunaan classnya

Framework lain:

<button class="button">button</button>

Framework Tailwind CSS

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">button</button>

Class pada tailwind CSS memiliki propertynya sendiri-sendiri, dimana bg-blue-500 merupakan nilai dari warna background yang digunakan, text-white merupakan warna text yang memiliki nilai color: white; font-bold yang berisi nilai property font-weight, py-2 dan px-4 merupakan padding vertical dan horizontal dan rounded merupakan property border-radius.

Selain itu, fitur Tailwind CSS ini responsif dan customable, utility yang terdapat pada tailwind memiliki jenis responsive yang memudahkan developer untuk membuat front-end yang responsive tanpa membutuhkan code CSS khusus dan juga tailwind dapat di customisasi, dapat menyesuaikan berbagai warna, ukuran, ukuran font dan lainnya. Untuk menghindari konflik pada nama class, tailwind menyediakan file konfigurasi yang dapat menentukan utility class yang dipakai.

 

Framework CSS Alternatif Bootstrap

 

3. Pure CSS

Diantara dari kamu mungkin sudah ada yang tahu atau belum tahu tentang framework CSS satu ini, yaitu Pure CSS, Pure CSS adalah framework responsive yahoo yang menawarkan tampilan minimalis, alternatif yang flexible dan dokumentasi yang baik. Pure CSS menawarkan fitur-fitur dalam frameworknya, apa saja itu?

  • Dapat dicustom, responsif
  • Form flexible
  • Menu built-in (vertical, horizontal)
  • Clean, minimalis
  • Memiliki Optimasi SEO tingkat lanjut
  • Gratis

Dalam pengunaanya kedalam website kamu, kamu bisa mengunakannya melalui CDN Yahoo

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">

Kelebihan dari framework Pure CSS ini adalah ukuran filenya yang sangat kecil hanya kurang dari 4,5kb untuk versi minified, Pure CSS sudah diuji dalam berbagai browser seperti IE 8+, Firefox, Chrome, Safari, IOS, Android, pure dibuat dalam normalize.css yang mendukung framework standard dalam browser.

 

Framework CSS Alternatif Bootstrap

 

4. Semantic UI

Semantic UI merupakan salah satu Framework CSS yang berfokus pada penggunaan desain front-end yang modern, fitur Semantic yang lengkap dan juga responsif banyak komponen UI serta tema, yang dapat kamu gunakan dan kembangkan kedalam website kamu.

Fitur yang disediakan diantaranya pengunaan class yang mudah dimana developer dapat mengingat class yang digunakan dengan mudah dan juga kaya akan tema dan komponen yang dibutuhkan, secara default komponen dari semantic terlihat sangat rapih dibanding framework css lainnya. framework yang di buat oleh Jack Lukic ini menjadi sangat populer karena kostumisasi dan tema melimpah didalamnya.

Semantic UI membuat kode class yang dapat disesuaikan serta penulisannya pun dapat dibuat dengan bahasa yang biasa kamu gunakan sehingga ketika akan dicustomisasi akan lebih mudah.

Untuk menghubungkannya kedalam website kamu, download file yang dibutuhkan di semantic-ui.com/introduction/getting-started.html dan tambahkan kode pendukung JQuery

<link rel="stylesheet" type="text/css" href="semantic/semantic.min.css">
<script src="semantic/semantic.min.js"></script>

 

Framework CSS Alternatif Bootstrap

 

5. Foundation CSS

Framework Foundation CSS bisa menjadi pilihan kamu lainnya, dirilis sekitar tahun 1998 dibawah naungan lisensi MIT, Framework Foundation CSS merupakan open source berbasis SASS, fitur yang ditawarkan Foundation menghadirkan komponen atau elemen yang modern, responsive design dan mudah digunakan untuk kamu customisasi.

Foundation CSS menyediakan berbagai template dengan desain yang apik, beberapa perusahaan besar seperti Adobe, Amazon mengunakan foundation CSS dalam beberapa produk digital mereka.

  • Compitable dalam berbagai browser

Framework Foundation sangat baik jika dijalankan dalam berbagai macam browser, developer yang mengunakan Framework tidak perlu khawatir ketika user mengakses dengan browser versi lama karena dapat bekerja dengan baik.

  • Performa prima

Dalam performa, Framework CSS ini memiliki performa yang baik, masalah yang terjadi dapat diminimalisir dengan adanya update secara berkala.

  • Responsive design dan design e-mail

Foundation sudah mendukung responsive dalam desain mereka dalam website, email, dll dengan optimasi yang baik dimasing-masing perangkat. Foundation juga menawarkan Framework Email yang cukup apik, dapat membuat desain email dengan tampilan yang modern dan berkelas.

Cara mengunakan Framework Foundation ada 2 cara, bisa mengunakan dengan metode offline dan CDN, untuk offline kamu bisa download Foundation "get.foundation/" extract lalu panggil kedalam HTML kamu dengan memasukan code:

<link rel="stylesheet" href="css/foundation.css" />
<script src="foundation.min.js"></script>

Ataupun dengan mengunakan metode CDN, kamu bisa menambahkan code berikut:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" integrity="sha256-itWEYdFWzZPBG78bJOOiQIn06QCgN/F0wMDcC4nOhxY=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js" integrity="sha256-Nd2xznOkrE9HkrAMi4xWy/hXkQraXioBg9iYsBrcFrs=" crossorigin="anonymous"></script>

 

Kesimpulan

Banyak framework CSS lainnya selain Bootstrap yang menawarkan banyak fitur atau desain modern dan mudah dalam pengunaanya untuk kemudahan front-end developer yang bisa kamu coba dan pelajari.

Share