Top 5 alternative Bootstrap

Bootstrap este peste tot, dar nu este întotdeauna instrumentul potrivit pentru muncă. Iată câteva alternative grozave!

Dacă verificați la întâmplare codul sursă al front-end-ului unui site web în aceste zile, probabil că veți găsi Bootstrap dedesubt. Cu toții ne-am obișnuit atât de mult cu concepte precum container-fluid, row, col-sm-6 etc., încât este greu de imaginat că orice alt stil de dezvoltare front end este chiar posibil. Și atunci când trebuie să construim următorul proiect, ajungem la Bootstrap în mod inconștient. Acestea fiind spuse, popularitatea nu face ca Bootstrap să fie potrivit pentru toate proiectele și nevoile.

De fapt, pentru front-end-uri cu adevărat lean, încărcarea tuturor Bootstrap CSS și JS poate provoca balonare majoră.

Acest articol are două scopuri:

Furnizați alternative live la Bootstrap care nu sunt asemănătoare Bootstrap

Explicați de ce ați putea dori să luați în considerare aceste alternative peste Bootstrap

Cred că partea de explicație este foarte importantă pentru că, în cele mai multe cazuri, oamenii nici nu își dau seama că au o problemă sau că își îngreunează munca prin ridicarea Bootstrap. În cele din urmă, vă rugăm să rețineți că aceasta nu este în niciun caz o postare anti-Bootstrap. Îmi place Bootstrap 4 și îl folosesc ori de câte ori pot. Dar, atunci, sunt un dezvoltator individual care trebuie să se gândească să folosească cea mai populară soluție; de asemenea, nu sunt un dezvoltator de UI în sine, așa că nu îmi fac griji pentru prea multe lucruri când îmi construiesc front-end-urile.

Și cu asta, să aruncăm o privire la ce alternative avem.

Cuprins

Flexbox Grid

Gândiți-vă un minut: cel mai mare motiv pentru care ați început să utilizați Bootstrap și încă îl utilizați este sistemul său de rețea. Sigur, a fost nevoie de ceva pentru a te obișnui cu clasele rând, col-md-6 etc., dar acum este a doua natură să te gândești la un aspect în termeni de rânduri, coloane, decalaje etc.

Și dacă ești sincer cu tine însuți, vei descoperi că totul în Bootstrap este o corvoadă de lucru. Există o mulțime de clase de reținut, indiferent dacă faci formulare, navigare, butoane, tabele sau orice altceva. Dacă ești ca mine, încă nu te-ai obișnuit cu toate clasele și cu ceea ce fac ele, și adesea folosești Bootstrap doar pentru grilă și scrii singur toate celelalte CSS.

Dacă da, ai putea face mult mai bine cu Flexbox Grid.

Flexbox Grid, așa cum sugerează și numele, este un sistem de grilă bazat pe CSS Flexbox proprietăți. Cu toate acestea, spre deosebire de tehnica CSS, toată complexitatea este abstractă, astfel încât să vă concentrați doar pe plasarea elementelor așa cum doriți. Cea mai bună parte este că toate codurile și numele claselor imită ceea ce ți-ai dori în Bootstrap 4, ceea ce înseamnă că comutarea între aceste două instrumente necesită zero frecare mentală. De exemplu, iată cum arată codul pentru „spațiul din jur” în 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>

Fișierul CSS minimizat pentru acest sistem de grilă este de doar 10,7 KB, economisind câteva sute de KB în dimensiunea finală de descărcare. În aceste zile, Flexbox Grid este preferatul meu, deoarece nu vreau să mă lupt cu Bootstrap pentru a-l personaliza pe deplin. Îmi place să încep cu elemente de vanilie și să le modelez eu, folosind Flexbox Grid oriunde am nevoie.

Razer BlackWidow V4 Pro: rapid și bogat în funcții

Învăța Flexbox aici, online.

PureCSS

Nu ar fi frumos dacă Bootstrap ar fi împărțit în module și ați putea importa doar modulul de care aveți nevoie?

Bine, PureCSS a mers înainte și a făcut exact asta – este un set de module care acoperă diferite zone funcționale ale unui site web. Puteți alege să descărcați unul sau pe toate, dar dimensiunea de descărcare nu va depăși 3,7 KB!

Da, ai citit bine.

Toate modulele, atunci când sunt împachetate împreună și comprimate prin gzip, au 3,7 KB, deși individual sunt mai multe. Modulul grilă are doar 0,8 KB, în timp ce modulul de bază este de 1,0 KB. Echipa din spatele PureCSS spune că a fost construit în întregime având în vedere dispozitivele mobile și, astfel, fiecare linie de CSS a fost analizată cu atenție pentru eficiență înainte de a fi inclusă.

Deci, să presupunem că aveți nevoie doar de modulul grilă și formulare. Ei bine, pur și simplu descărcați aceste două (împreună cu modulul de bază) și ați terminat în mai puțin de 3,4 KB! Nu este nevoie să includeți CSS-ul din modulele Butoane, Tabele și Meniuri dacă nu le veți folosi.

PureCSS are clasele sale, totuși, iar codul rezultat nu imită Bootstrap-ul cu care ați putea fi foarte obișnuit:

<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>

Veți observa că nu mai există grilă cu 12 coloane. PureCSS are sistemul său de grilă care specifică câtă lățime ar trebui să aibă o coloană. Deci, pure-u-lg-1-4 înseamnă că acest element ar trebui să ia 1/4 sau 25% din lățimea disponibilă pe ecranele mari. Sunt disponibile și lățimi ca multipli de 1/5.

Cum se instalează RAM pe placa de bază în computerul dvs

Una peste alta, PureCSS este un instrument CSS eliberator și uimitor (cadru?) din care puteți alege și alege după cum este necesar. Acestea fiind spuse, vine cu o cantitate destul de mare de acceptare și curbă de învățare, deoarece trebuie să înveți un mod nou (puțin diferit) de a face lucrurile.

PureCSS are, de asemenea, propriile clase și stilul implicit, așa că nu este prea diferit de Bootstrap.

Zimit

The Zimit framework-ul este un fel de ciudat în această listă. Da, este un cadru pentru construirea de interfețe de utilizare, dar se adresează anumitor tipuri de interfețe de utilizare: machete.

Există momente când trebuie să dezvoltați front-end-ul pentru a afișa funcționarea produsului. Modul ideal de a face acest lucru, desigur, ar fi să implicați un designer/dezvoltator de UI și să creați machetele pe unul dintre instrumentele avansate de wireframing (Îmi vin în minte Moqups, Blasmic etc.). Paginile ar fi pixeli perfecte, schema de culori elegantă și bine aleasă, iar paginile ar fi deschise pentru participare, recenzii, comentarii etc.

Dar viața reală nu este ideală și, de multe ori, ești singurul om la serviciu și trebuie să porți toate pălăriile și să-ți duci treaba la bun sfârșit. În acele momente, doriți un cadru care:

Vă permite să codificați în HTML/CSS
Este ușor
Are o colecție extinsă de componente fundamentale
Are un limbaj de stil decent și consistent
Dacă este posibil, seamănă cu tonul „cenușiu” al designului wireframe
Este ușor de învățat
Are un preprocesor CSS încorporat

Zimit bifează toate aceste casete. Are doar 84 KB și are o gamă largă de componente din care să alegeți. Iată câteva exemple pe care le-am găsit cu adevărat atrăgătoare, deoarece codificarea lor pe cont propriu va dura mult timp.

Vedere în copac

Pesmet

Filele

Există multe alte bunătăți de explorat. Verifică-i Aici.

Să ne uităm la cum arată codul. Iată cum ați utiliza sistemul de rețea în 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” aici înseamnă „coloană”, deci „c4” înseamnă o coloană care se întinde pe patru unități (grila având dimensiunea de 12, la fel ca cea a lui Bootstrap). Foarte asemănător cu Bootstrap și foarte intuitiv, după părerea mea.

Una peste alta, Zimit este un cadru complet și ușor pentru a dezvolta prototipuri de interfață de utilizator care sunt receptive și arată bine rapid. Este mai bun decât Bootstrap (când vine vorba de prototipuri), deoarece Bootstrap este o descărcare mult mai mare, iar designul rezultat este, ei bine, lipicios.

Ce înseamnă „AMA” și cum îl folosești?

HTML KickStart

În majoritatea proiectelor pe care le construiți, viteza este critică. Cel mai mare obstacol în calea dezvoltării web este partea front-end, iar cea mai mare „întârziere” în dezvoltarea front-end este necesitatea de a codifica componente interactive cu aspect elegant. Deoarece există multe moduri în care o componentă se poate comporta și există multe dimensiuni de ecran de gestionat, codarea și gestionarea componentelor poate deveni un coșmar pentru dezvoltator.

HTML KickStart oferă o alternativă.

Pune simplu; este o colecție de componente cu adevărat elegante pe care le puteți pur și simplu introduceți în proiectele dvs. și reduceți drastic timpul de dezvoltare. Iată câteva componente frumoase pe care le-am găsit:

Scapă jos

Butoane

File (centrate și cu pictograme)

Materializa

Dacă vă place Bootstrap pentru faptul că are o soluție gata făcută pentru toate problemele comune de web design, dar sunteți un fan al stilului Material design, ar trebui să încercați Materializa.

Materialize este în mare parte la fel ca Bootstrap – sistem de grilă în 12 puncte, decalaje și componente familiare precum formulare, carduri etc. Cu toate acestea, are anumite bunătăți care pot atrage mulți.

Împingeți-trageți

Caracteristica push/pull a Materialize CSS vă permite să reordonați coloanele. Acest lucru amintește de noul standard CSS Grid, unde aspectul este diferit de ordinea elementelor.

<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>

Acest lucru are ca rezultat următoarele:

Veți observa că coloanele și-au schimbat locurile, ceea ce este ceva de nerealizat în CSS tradițional bazat pe Bootstrap.

Bunătăți JavaScript

Există destul de multe caracteristici și efecte JavaScript care sunt livrate cu Materialize. Tooltips, Toasts (notificări efemere asemănătoare Android), Parallex, Pushpin etc., sunt câteva dintre ele. Un efect cu adevărat uimitor care mi-a plăcut este FeatureDiscovery, care vă permite practic să evidențiați un element de pe pagină la un eveniment (să zicem, apăsarea unui buton) pentru a atrage atenția utilizatorului asupra acelui element. Este greu să-l descrii în cuvinte pe deplin, așa că mergi la https://materializecss.com/feature-discovery.html pentru a vedea ce vreau să spun.

Una peste alta, Materialise este o alternativă excelentă la Bootstrap sau pentru cei care doresc să adopte un cadru Material CSS complet cu funcții.

Concluzie

Bootstrap este sinonim cu design responsive. Bootstrap a fost cel care a popularizat termenul „design-ul pe mobil” și a arătat cum se poate face. Dar, în timp ce Bootstrap își face treaba de cele mai multe ori, nu este întotdeauna suficient să faci treaba. Dacă simțiți că Bootstrap vă limitează și că nevoile dvs. sunt speciale, una dintre opțiunile enumerate aici vă va ajuta. 🙂