5 Alternatif Bootstrap Teratas

Bootstrap ada di mana-mana, tetapi itu tidak selalu merupakan alat yang tepat untuk pekerjaan itu. Berikut ini beberapa alternatif bagus!


Jika Anda memeriksa kode sumber front-end situs web secara acak hari ini, kemungkinan Anda akan menemukan Bootstrap di bawahnya. Kita semua sudah terbiasa dengan konsep-konsep seperti container-fluid, row, col-sm-6, dll, sehingga sulit untuk membayangkan bahwa gaya pengembangan ujung depan lainnya bahkan mungkin. Jadi ketika kita harus membangun proyek selanjutnya, kita meraih Bootstrap tanpa sadar. Yang mengatakan, popularitas tidak membuat Bootstrap cocok untuk semua proyek dan kebutuhan.

Bahkan, untuk frontend yang benar-benar ramping, memuat semua Bootstrap CSS dan JS dapat menyebabkan gembung besar.

Artikel ini memiliki dua tujuan:

  1. Berikan alternatif langsung yang tidak seperti Bootstrap ke Bootstrap
  2. Jelaskan mengapa Anda mungkin ingin mempertimbangkan alternatif ini di atas Bootstrap

Saya pikir bagian penjelasannya sangat penting karena dalam kebanyakan kasus, orang bahkan tidak menyadari bahwa mereka memiliki masalah atau bahwa mereka membuat pekerjaan mereka lebih sulit dengan mengambil Bootstrap. Akhirnya, harap dicatat bahwa ini bukan posting anti-Bootstrap dengan cara apa pun. Saya suka Bootstrap 4 dan menggunakannya kapan pun saya bisa. Tetapi, kemudian, saya adalah pengembang individu yang harus memikirkan untuk menggunakan solusi yang paling populer; juga, saya bukan pengembang UI semata, jadi saya tidak khawatir tentang terlalu banyak hal ketika membangun front-end saya.

Dan dengan itu, mari kita lihat alternatif apa yang kita miliki.

Kotak Flexbox

Pikirkan sebentar: alasan terbesar Anda mulai menggunakan Bootstrap dan masih menggunakannya adalah sistem grid-nya. Tentu, perlu beberapa waktu untuk membiasakan diri dengan kelas, col-md-6, dll., Tapi sekarang sudah merupakan sifat kedua untuk memikirkan tata letak dalam hal baris, kolom, offset, dll..

Dan jika Anda jujur ​​pada diri sendiri, Anda akan menemukan bahwa segala hal lain di Bootstrap adalah pekerjaan yang sulit. Ada banyak kelas yang perlu diingat, apakah Anda melakukan formulir, navigasi, tombol, tabel, atau apa pun. Jika Anda menyukai saya, Anda masih belum terbiasa dengan semua kelas dan apa yang mereka lakukan, dan Anda sering menggunakan Bootstrap hanya untuk grid dan menulis sendiri semua CSS lainnya.

Jika ya, Anda bisa melakukan banyak hal dengan lebih baik Kotak Flexbox.

Kisi Kotak Flexbox, seperti namanya, adalah sistem kisi berdasarkan CSS Flexbox properti. Namun, tidak seperti teknik CSS, semua kompleksitas disarikan dengan baik sehingga Anda hanya fokus pada penempatan elemen seperti yang Anda inginkan. Bagian terbaiknya adalah bahwa semua kode dan nama kelas meniru apa yang Anda inginkan di Bootstrap 4, yang berarti beralih di antara kedua alat ini membutuhkan nol gesekan mental. Misalnya, inilah kode untuk “ruang sekitar” yang terlihat di Kotak Flexbox:

sekitar

sekitar

sekitar

File CSS yang diperkecil untuk sistem kisi ini hanya 10,7 KB yang menghemat beberapa ratus KB untuk ukuran unduhan akhir. Saat ini Flexbox Grid adalah favorit saya karena saya tidak ingin melawan Bootstrap untuk menyesuaikannya sepenuhnya. Saya suka memulai dengan elemen vanilla dan menatanya sendiri, menggunakan Kotak Flexbox di mana pun saya perlu.

Belajar Flexbox di sini, online.

PureCSS

Bukankah lebih baik jika Bootstrap dibagi menjadi beberapa modul dan Anda hanya dapat mengimpor modul yang Anda butuhkan?

Baik, PureCSS telah maju dan melakukan hal itu – itu adalah satu set modul yang mencakup area fungsional yang berbeda dari suatu situs web. Anda dapat memilih untuk mengunduh satu atau semua, namun ukuran unduhan tidak akan melebihi 3,7 KB!

Ya, Anda membacanya dengan benar.

Semua modul ketika dibundel bersama dan di-gzip adalah 3,7 KB, meskipun secara individual jumlahnya lebih banyak. Modul grid hanya 0,8 KB, sedangkan modul Base adalah 1,0 KB. Tim di belakang PureCSS mengatakan bahwa itu dibangun sepenuhnya dengan perangkat seluler dalam pikiran, dan setiap baris CSS dengan cermat diteliti untuk efisiensi sebelum dimasukkan.

Jadi katakanlah Anda hanya perlu modul grid dan form. Nah, unduh saja keduanya (bersama dengan modul Base), dan Anda akan selesai dalam waktu kurang dari 3,4 KB! Tidak perlu menyertakan CSS dari modul Buttons, Tables, dan Menu jika Anda tidak akan menggunakannya.

PureCSS memiliki kelas-kelasnya, dan kode yang dihasilkan tidak meniru Bootstrap yang mungkin Anda gunakan untuk:

Lorem Ipsum

Dolor Sit Amet

Proum laborum

Consesetur terpuji

Anda akan melihat bahwa tidak ada lagi kisi 12 kolom. PureCSS memiliki sistem kisi yang menentukan berapa lebar kolom yang harus diambil. Jadi, pure-u-lg-1-4 berarti bahwa elemen ini harus mengambil 1/4 atau 25% dari lebar yang tersedia di layar besar. Lebar sebagai kelipatan 1/5 juga tersedia.

Secara keseluruhan, PureCSS adalah alat CSS (kerangka kerja?) Yang membebaskan dan menakjubkan yang dapat Anda pilih dan pilih sesuai kebutuhan. Yang mengatakan, itu datang dengan cukup banyak buy-in dan kurva belajar karena Anda perlu mempelajari cara baru (sedikit berbeda) dalam melakukan sesuatu.

PureCSS juga memiliki kelasnya sendiri dan penataan standar, sehingga tidak terlalu berbeda dari Bootstrap.

Zimit

Itu Zimit Kerangka kerja semacam aneh-keluar dalam daftar ini. Ya, ini merupakan kerangka kerja untuk membangun UI, tetapi ditujukan untuk jenis UI tertentu: maket.

Ada kalanya Anda harus mengembangkan front-end untuk menunjukkan fungsi produk. Cara ideal untuk melakukan ini, tentu saja, adalah dengan melibatkan perancang / pengembang UI dan membuat maket di salah satu alat wireframing canggih (Moqup, ​​Blasmic, dll., Terlintas dalam pikiran). Halaman-halaman akan sempurna pixel, skema warna ramping dan dipilih dengan baik, dan halaman akan terbuka untuk partisipasi, ulasan, komentar, dll.

Tetapi kehidupan nyata tidak ideal, dan seringkali Anda adalah satu-satunya orang yang bekerja dan harus mengenakan semua topi dan menyelesaikan pekerjaan. Pada saat itu, Anda menginginkan kerangka kerja yang:

  • Memungkinkan Anda membuat kode dalam HTML / CSS
  • Ringan
  • Memiliki koleksi komponen fundamental yang luas
  • Memiliki gaya bahasa yang layak dan konsisten
  • Jika memungkinkan, menyerupai nada “keabu-abuan” dari desain rangka gambar
  • Mudah dipelajari
  • Memiliki beberapa preprocessor CSS bawaan

Zimit memeriksa semua kotak ini. Ukurannya hanya 84 KB dan memiliki berbagai komponen untuk dipilih. Berikut adalah beberapa contoh yang menurut saya sangat menarik, karena mengkodekannya sendiri akan membutuhkan banyak waktu.

Tampilan pohon

Remah roti

Tab

Ada banyak lagi barang untuk dijelajahi. Periksa mereka sini.

Mari kita lihat seperti apa kode itu. Inilah cara Anda menggunakan sistem kisi di Zimit:

4 kolom
4 kolom

4 kolom
4 kolom

“C” di sini adalah singkatan dari “kolom,” jadi “c4” berarti kolom yang membentang empat unit (kotak berukuran 12, seperti Bootstrap). Sangat mirip dengan Bootstrap, dan sangat intuitif, menurut saya.

Secara keseluruhan, Zimit adalah kerangka kerja yang lengkap dan mudah untuk mengembangkan prototipe UI yang responsif dan terlihat bagus dengan cepat. Ini lebih baik daripada Bootstrap (ketika datang ke prototyping) karena Bootstrap adalah unduhan yang jauh lebih besar dan desain yang dihasilkan, well, norak.

HTML KickStart

Di sebagian besar proyek yang Anda bangun, kecepatan sangat penting. Rintangan terbesar untuk mempercepat dalam pengembangan web adalah bagian front-end, dan “delayer” terbesar dalam pengembangan front-end adalah kebutuhan untuk mengkodekan komponen interaktif yang tampak elegan. Karena ada banyak cara di mana komponen dapat berperilaku, dan ada banyak ukuran layar untuk mengelola, mengkode, dan mengelola komponen dapat menjadi mimpi buruk bagi pengembang..

HTML KickStart menawarkan alternatif.

Sederhananya; itu adalah kumpulan komponen yang benar-benar ramping yang bisa Anda masukkan ke dalam proyek dan mengurangi waktu pengembangan secara drastis. Berikut adalah beberapa komponen bagus yang saya temukan:

Dropdown

Tombol

Tab (di tengah dan dengan ikon)

Mewujudkan

Jika Anda menyukai Bootstrap karena memiliki solusi readymade untuk semua masalah desain web umum, tetapi Anda penggemar gaya desain Material, Anda harus mencoba Mewujudkan.

Terwujud sebagian besar seperti Bootstrap – sistem grid 12-point, offset, dan komponen yang sudah dikenal seperti formulir, kartu, dll. Namun, ia memiliki barang tertentu yang dapat menarik banyak orang..

Dorong tarik

Fitur push / pull dari Materialize CSS memungkinkan Anda untuk menyusun ulang kolom. Ini mengingatkan pada standar Grid CSS baru, di mana tata letak berbeda dari urutan elemen.

Lebar div ini 7-kolom pada didorong ke kanan oleh 5-kolom.
Lebar 5 kolom ditarik ke kiri sebanyak 7 kolom.

Ini menghasilkan sebagai berikut:

Anda akan melihat bahwa kolom telah berpindah tempat, yang mungkin merupakan sesuatu yang tidak dapat dicapai dalam CSS berbasis Bootstrap tradisional.

Barang JavaScript

Ada beberapa fitur dan efek JavaScript yang disertakan bersama Materialize. Tooltips, Toasts (notifikasi singkat seperti Android), Parallex, Pushpin, dll., Adalah beberapa di antaranya. Satu efek yang sangat menakjubkan yang saya sukai adalah FeatureDiscovery, yang pada dasarnya memungkinkan Anda untuk menyorot elemen pada halaman pada beberapa acara (misalnya, tekan tombol) untuk membawa perhatian pengguna ke elemen tersebut. Sulit untuk menggambarkannya dengan kata-kata sepenuhnya, jadi kunjungi https://materializecss.com/feature-discovery.html untuk melihat apa yang saya maksud.

Secara keseluruhan, Materialize adalah alternatif yang bagus untuk Bootstrap atau bagi mereka yang ingin mengadopsi kerangka kerja Material CSS berfitur lengkap.

Kesimpulan

Bootstrap identik dengan desain responsif. Bootstrap-lah yang mempopulerkan istilah “desain mobile-first” dan menunjukkan bagaimana itu bisa dilakukan. Tetapi sementara Bootstrap menyelesaikan pekerjaan hampir sepanjang waktu, hanya menyelesaikan pekerjaan tidak selalu cukup. Jika Anda merasa Bootstrap membatasi Anda dan kebutuhan Anda spesial, salah satu opsi yang tercantum di sini akan membantu. ��

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map