Top 5 alternative pentru bootstrap

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


Dacă verificați codul sursă al front-site-ului la întâmplare în aceste zile, este posibil să găsiți Bootstrap dedesubt. Cu toții ne-am obișnuit atât de mult cu concepte precum container-fluid, rând, col-sm-6 etc., încât este greu de imaginat că orice alt stil de dezvoltare frontală este chiar posibil. Așadar, 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 frontenduri cu adevărat slabe, se încarcă toate Bootstrap CSS și JS poate provoca balonări majore.

Acest articol are două scopuri:

  1. Oferă alternative live care nu sunt similare Bootstrap-ului la Bootstrap
  2. Explicați de ce s-ar putea să doriți să luați în considerare aceste alternative cu Bootstrap

Cred că partea de explicații este cu adevărat importantă, deoarece, în majoritatea cazurilor, oamenii nici nu își dau seama că au o problemă sau că își fac munca mai grea alegând Bootstrap. În cele din urmă, vă rugăm să rețineți că aceasta nu este o postare anti-Bootstrap prin orice mijloace. Î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ă la utilizarea celei mai populare soluții; de asemenea, nu sunt un dezvoltator de utilizator în sine, așa că nu îmi fac griji pentru prea multe lucruri atunci când îmi construiesc front-end-urile..

Și cu asta, să aruncăm o privire asupra alternativelor pe care le avem.

Grila Flexbox

Gândiți-vă un minut: cel mai mare motiv pentru care ați început să utilizați Bootstrap și îl utilizați în continuare este sistemul său de grilă. Sigur, a fost nevoie de unele obișnuințe cu clasele de rând, col-md-6 etc., dar acum este a doua natură să ne gândim la un aspect în termeni de rânduri, coloane, compensări etc..

Și dacă ești sincer cu tine însuți, vei descoperi că orice altceva din Bootstrap este un pic de treabă cu care să lucrezi. Trebuie să-ți amintești tone de clase, fie că faci formulare, navigare, butoane, tabele sau orice altceva. Dacă sunteți ca mine, încă nu v-ați obișnuit cu toate clasele și cu ceea ce fac și de multe ori utilizați Bootstrap doar pentru grilă și scrieți toate celelalte CSS.

Dacă da, te-ai putea descurca mult mai bine Grila Flexbox.

Flexbox Grid, după 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 bine abstractizată, astfel încât să vă concentrați doar pe plasarea elementelor așa cum doriți. Partea cea mai bună este că toate numele de cod și de clasă imită ceea ce doriți în Bootstrap 4, ceea ce înseamnă că trecerea între aceste două instrumente necesită o frecare mentală zero. De exemplu, iată cum arată codul pentru „spațiul din jurul” în Flexbox Grid:

în jurul

în jurul

în jurul

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

Î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 mai departe și a făcut doar 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 toate și totuși, dimensiunea descărcării nu va depăși 3,7 KB!

Da, ai citit asta.

Toate modulele la pachet împreună și gzipped sunt de 3,7 KB, deși individual sunt mai mult. Modulul grilă este de 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 totalitate cu dispozitive mobile în minte, și astfel fiecare linie de CSS a fost atent examinată pentru eficiență înainte de a fi inclusă.

Să zicem că aveți nevoie doar de modulul grilă și formulare. Ei bine, pur și simplu descarcă aceste două (împreună cu modulul de bază) și ai fi făcut în mai puțin de 3,4 KB! Nu este necesar să includeți CSS din modulele butoane, tabele și meniuri dacă nu le veți folosi.

Cu toate acestea, PureCSS are clasele sale, iar codul rezultat nu imită Bootstrap-ul cu care puteți fi foarte obișnuit:

Lorem Ipsum

Dolor Sit Amet

Proba de muncă

Consectetur praesent

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

În total, PureCSS este un instrument (cadru?) Eliberator și uimitor pe care îl puteți alege și alege, după caz. Acestea fiind spuse, vine cu o cantitate corectă de curbă de cumpărare și de învățare, deoarece trebuie să înveți un mod nou (ușor diferit) de a face lucrurile.

PureCSS are, de asemenea, propriile sale clase și stilul implicit, astfel încât nu este prea diferit de Bootstrap.

Zimit

Zimit cadrul este un fel de neobișnuit în această listă. Da, este un cadru pentru construirea interfețelor de utilizator, dar este orientat către anumite tipuri de interfață de utilizator: machet-uri.

Există momente în care trebuie să dezvolți front-end-ul pentru a arăta funcționarea produsului. Modul ideal de a face acest lucru, desigur, ar fi să te implici un proiectant / dezvoltator de interfață de utilizator și să creezi machetele pe unul dintre instrumentele avansate de filigrafie (Moqups, Blasmic, etc.). Paginile ar fi perfecte pentru pixeli, 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, sunteți singurul bărbat pe treabă și trebuie să purtați toate pălăriile și să vă îndepliniți treaba. În acele momente, doriți un cadru care:

  • Vă permite să codați în HTML / CSS
  • Este ușor
  • Are o colecție extinsă de componente fundamentale
  • Are un limbaj decent și coerent
  • Dacă este posibil, seamănă cu tonul „greyish” al designului cadrului de sârmă
  • Este ușor de învățat
  • Are unele preprocesoare CSS încorporate

Zimit verifică toate aceste casete. Are doar 84 KB și are o gamă largă de componente pentru a alege. Iată câteva exemple pe care le-am găsit într-adevăr atrăgătoare, deoarece codificarea lor pe cont propriu va dura foarte mult timp.

Vedere la copac

Breadcrumb

Tab-uri

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

Să ne uităm la cum arată codul. Iată cum utilizați sistemul de grile din Zimit:

4 coloane
4 coloane

4 coloane
4 coloane

„C” înseamnă aici „coloană”, deci „c4” înseamnă o coloană care se întinde pe patru unități (grila are dimensiuni de 12, la fel ca Bootstrap). Foarte asemănător cu Bootstrap, și foarte intuitiv, după părerea mea.

În total, Zimit este un cadru complet și ușor pentru a dezvolta prototipuri UI care să răspundă și să arate bine. Este mai bun decât Bootstrap (atunci când vine vorba de prototipare), deoarece Bootstrap este o descărcare mult mai mare, iar designul rezultat este bine.

HTML KickStart

În majoritatea proiectelor pe care le construiți, viteza este critică. Cel mai mare obstacol în ceea ce privește viteza în dezvoltarea web este partea front-end, iar cel mai mare „întârziere” în dezvoltarea front-end este nevoia 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 pentru a gestiona, coda și gestiona componentele pot 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 poți să le arunci doar în proiectele tale și să reduci drastic timpul de dezvoltare. Iată câteva componente frumoase pe care le-am găsit:

Scapă jos

Butoane

Tabele (centrate și cu pictograme)

Materializa

Dacă vă place Bootstrap pentru că are o soluție pregătită pentru toate problemele obișnuite de design web, dar sunteți un fan al stilului de design material, ar trebui să încercați Materializa.

Materializarea este mai ales ca Bootstrap – sistem grilă în 12 puncte, compensări și componente familiare, cum ar fi formulare, carduri, etc. Cu toate acestea, are anumite bunătăți care pot atrage mulți.

Push-pull

Funcția push / pull a Materialize CSS vă permite să reordonați coloanele. Aceasta amintește de noul standard CSS Grid, în care aspectul diferă de ordinea elementelor.

Această div are o lățime de 7 coloane la împingere spre dreapta de 5 coloane.
5 coloane lățite trase la stânga de 7 coloane.

Rezultă următoarele:

Veți observa că coloanele au locuri schimbate, ceea ce este probabil imposibil de realizat în CSS-ul tradițional bazat pe Bootstrap.

Bunătăți JavaScript

Există destul de multe caracteristici și efecte JavaScript care se livrează cu Materialize. Instrumente, Toasturi (notificări efemere asemănătoare cu Android), Parallex, Pushpin, etc., sunt câteva dintre acestea. Un efect cu adevărat uimitor care mi-a plăcut este FeatureDiscovery, care, practic, vă permite să evidențiați un element din pagină la un anumit eveniment (să zicem, apăsăm butonul) pentru a atrage atenția utilizatorului asupra acelui element. Este greu să-l descriu complet în cuvinte, așa că accesați https://materializecss.com/feature-discovery.html pentru a vedea ce vreau să spun.

În total, Materialize este o alternativă excelentă la Bootstrap sau pentru cei care doresc să adopte un cadru complet CSS Material.

Concluzie

Bootstrap este sinonim cu un design receptiv. Bootstrap a popularizat termenul „design mobil pentru prima dată” și a arătat cum se poate realiza. Dar, deși Bootstrap își face treaba de cele mai multe ori, doar terminarea sarcinii nu este întotdeauna suficientă. Dacă credeți că Bootstrap vă restricționează și că nevoile dvs. sunt speciale, una dintre opțiunile enumerate aici vă va ajuta. ��

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