5 Alternatif Bootstrap Teratas

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

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

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

Artikel ini memiliki dua tujuan:

  • Berikan alternatif langsung yang tidak seperti Bootstrap untuk Bootstrap
  • Jelaskan mengapa Anda mungkin ingin mempertimbangkan alternatif ini daripada Bootstrap
  • Saya pikir bagian penjelasan 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. Tapi, kemudian, saya seorang pengembang individu yang harus berpikir untuk menggunakan solusi yang paling populer; juga, saya bukan pengembang UI, jadi saya tidak khawatir tentang terlalu banyak hal saat membangun front-end saya.

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

    Kotak Flexbox

    Pikirkan sejenak: alasan terbesar Anda mulai menggunakan Bootstrap dan masih menggunakannya adalah sistem gridnya. Tentu, perlu beberapa waktu untuk membiasakan diri dengan baris, col-md-6, dll., Kelas, tetapi sekarang sudah menjadi kebiasaan untuk memikirkan tata letak dalam hal baris, kolom, offset, dll.

    Dan jika Anda jujur ​​dengan diri sendiri, Anda akan menemukan bahwa segala sesuatu yang lain di Bootstrap adalah sedikit tugas untuk dikerjakan. Ada banyak kelas yang perlu diingat, apakah Anda sedang mengerjakan formulir, navigasi, tombol, tabel, atau apa pun. Jika Anda seperti 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 jauh lebih baik dengan Kotak Flexbox.

    Flexbox Grid, seperti namanya, adalah sistem grid berdasarkan CSS kotak fleksibel properti. Namun, tidak seperti teknik CSS, semua kerumitan diabstraksikan dengan baik sehingga Anda hanya fokus pada penempatan elemen seperti yang Anda inginkan. Bagian terbaiknya adalah semua kode dan nama kelas meniru apa yang Anda inginkan di Bootstrap 4, yang berarti beralih di antara kedua alat ini tidak memerlukan gesekan mental. Misalnya, inilah kode untuk “ruang di sekitar” yang terlihat di Flexbox Grid:

    <div class="row around-xs">
        <div class="col-xs-2">
            <div class="box">
                around
            </div>
        </div>
        <div class="col-xs-2">
            <div class="box">
                around
            </div>
        </div>
        <div class="col-xs-2">
            <div class="box">
                around
            </div>
        </div>
    </div>

    File CSS yang diperkecil untuk sistem grid ini hanya 10,7 KB sehingga menghemat beberapa ratus KB dalam 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 Flexbox Grid di mana pun saya perlu.

      Cara Menyegarkan Otomatis Google Chrome

    Mempelajari Flexbox di sini, online.

    PureCSS

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

    Sehat, PureCSS telah maju dan melakukan hal itu — ini adalah satu set modul yang mencakup area fungsional yang berbeda dari sebuah 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 1.0 KB. Tim di belakang PureCSS mengatakan bahwa itu dibangun sepenuhnya dengan mempertimbangkan perangkat seluler, sehingga setiap baris CSS diteliti dengan cermat untuk efisiensi sebelum dimasukkan.

    Jadi katakanlah Anda hanya membutuhkan modul grid dan form. Nah, cukup unduh 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 Menus jika Anda tidak akan menggunakannya.

    PureCSS memiliki kelasnya sendiri, dan kode yang dihasilkan tidak meniru Bootstrap yang mungkin sangat Anda gunakan:

    <div class="pure-g">
        <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
            <div class="l-box">
                <h3>Lorem Ipsum</h3>
            </div>
        </div>
        
        <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
           <div class="l-box">
               <h3>Dolor Sit Amet</h3>
           </div>
        </div>
        
        <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
           <div class="l-box">
               <h3>Proident laborum</h3>
           </div>
        </div>
        
        <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
           <div class="l-box">
               <h3>Praesent consectetur</h3>
           </div>
        </div>
    </div>

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

      Cara Membuat Aturan di Gmail

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

    PureCSS juga memiliki kelas dan gaya default sendiri, sehingga tidak terlalu berbeda dengan Bootstrap.

    Zimit

    Itu Zimit framework agak aneh dalam daftar ini. Ya, ini adalah 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 (Moqups, Blasmic, dll., terlintas dalam pikiran). Halaman akan menjadi pixel-sempurna, 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 banyak koleksi komponen fundamental
    • Memiliki gaya bahasa yang baik dan konsisten
    • Jika memungkinkan, menyerupai nada “keabu-abuan” dari desain wireframe
    • Mudah dipelajari
    • Memiliki beberapa praprosesor CSS bawaan

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

    Pemandangan pohon

    Remah roti

    tab

    Ada lebih banyak barang untuk dijelajahi. Periksa mereka di sini.

    Mari kita lihat seperti apa kodenya. Inilah cara Anda menggunakan sistem grid di Zimit:

    <div class="row">
       <div class="c12">
          <div class="row">
             <div class="c4">4 columns</div>
             <div class="c4">4 columns</div>
          </div>
          <div class="row">
             <div class="c4">4 columns</div>
             <div class="c4">4 columns</div>
          </div>
       </div>
    </div>

    “c” di sini adalah singkatan dari “column”, jadi “c4” berarti kolom yang mencakup empat unit (grid berukuran 12, seperti milik 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 (dalam hal pembuatan prototipe) karena Bootstrap adalah unduhan yang jauh lebih besar dan desain yang dihasilkan, yah, 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 “penundaan” terbesar dalam pengembangan front-end adalah kebutuhan untuk mengkodekan komponen interaktif yang tampak elegan. Karena ada banyak cara di mana suatu komponen dapat berperilaku, dan ada banyak ukuran layar untuk mengelola, mengkode, dan mengelola komponen dapat menjadi mimpi buruk bagi pengembang.

      5 Pengaya Kodi Terbaik untuk Kebugaran dan Latihan

    HTML KickStart menawarkan alternatif.

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

    tarik-turun

    Tombol

    Tab (berpusat dan dengan ikon)

    Mewujudkan

    Jika Anda menyukai Bootstrap karena memiliki solusi siap pakai untuk semua masalah desain web umum, tetapi Anda adalah penggemar gaya desain Material, Anda harus mencobanya Mewujudkan.

    Materialize sebagian besar seperti Bootstrap — sistem grid 12-titik, offset, dan komponen yang sudah dikenal seperti formulir, kartu, dll. Namun, ia memiliki barang tertentu yang dapat menarik bagi 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 letaknya berbeda dari urutan elemen.

    <div class="row">
          <div class="col s7 push-s5"><span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
          <div class="col s5 pull-s7"><span class="flow-text">5-columns wide pulled to the left by 7-columns.</span></div>
    </div>

    Ini menghasilkan hal berikut:

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

    pernak pernik JavaScript

    Ada beberapa fitur dan efek JavaScript yang disertakan dengan Materialize. Tooltips, Toasts (pemberitahuan singkat seperti Android), Parallex, Pushpin, dll., adalah beberapa di antaranya. Salah satu efek luar biasa yang saya suka adalah FeatureDiscovery, yang pada dasarnya memungkinkan Anda untuk menyorot elemen pada halaman pada beberapa acara (misalnya, menekan tombol) untuk menarik 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 hal itu bisa dilakukan. Tetapi sementara Bootstrap menyelesaikan sebagian besar waktu, menyelesaikan pekerjaan saja tidak selalu cukup. Jika Anda merasa Bootstrap membatasi Anda dan kebutuhan Anda khusus, salah satu opsi yang tercantum di sini akan membantu.