Bootstrap este omniprezent, dar nu este întotdeauna alegerea optimă pentru fiecare sarcină. Iată câteva alternative remarcabile!
În cazul în care inspectezi codul sursă al unei pagini web în zilele noastre, este foarte probabil să descoperi Bootstrap la bază. Ne-am obișnuit atât de mult cu elemente precum „container-fluid”, „row”, „col-sm-6”, încât ne este dificil să ne imaginăm un alt mod de a dezvolta interfețele web. Astfel, când începem un nou proiect, ajungem, aproape instinctiv, să alegem Bootstrap. Cu toate acestea, popularitatea nu garantează că Bootstrap este adecvat pentru toate proiectele și cerințele.
De fapt, pentru interfețe front-end minimaliste, încărcarea întregului CSS-ului Bootstrap și a codului JavaScript poate duce la o dimensiune considerabilă a fișierelor.
Acest articol are două obiective principale:
- Prezentarea unor alternative viabile la Bootstrap, care nu sunt simple clone
- Explicarea motivelor pentru care ar trebui să iei în considerare aceste alternative în locul Bootstrap
Consider că explicațiile sunt cruciale deoarece, adesea, dezvoltatorii nici măcar nu realizează că au o problemă sau că îngreunează lucrurile alegând Bootstrap. În final, trebuie să subliniem că acest articol nu este un atac la Bootstrap. Îmi place Bootstrap 4 și îl folosesc ori de câte ori este posibil. Totuși, sunt un dezvoltator independent care trebuie să aleagă cea mai potrivită soluție; în plus, nu sunt specializat în design UI, așa că nu mă concentrez prea mult pe detalii când construiesc interfețele.
Acum, să explorăm câteva alternative pe care le avem la dispoziție.
Flexbox Grid
Gândește-te un moment: principalul motiv pentru care ai început să folosești Bootstrap, și o faci și acum, este sistemul său de grid. Sigur, a durat ceva timp să te obișnuiești cu clasele „row”, „col-md-6” etc., dar acum este a doua natură să te gândești la structura unei pagini în termeni de rânduri, coloane, spații libere etc.
Dacă ești sincer cu tine însuți, vei observa că folosirea Bootstrap poate fi obositoare. Există o mulțime de clase de reținut, indiferent dacă lucrezi cu formulare, navigare, butoane, tabele sau orice altceva. Dacă ești ca mine, încă nu ai memorat toate clasele și funcțiile lor și adesea folosești Bootstrap doar pentru grila și scrii singur restul codului CSS.
În acest caz, poți obține rezultate mai bune cu Flexbox Grid.
Flexbox Grid, după cum sugerează și numele, este un sistem de grid bazat pe proprietățile CSS Flexbox. Cu toate acestea, spre deosebire de utilizarea directă a proprietăților CSS, complexitatea este abstractizată, permițându-ți să te concentrezi doar pe poziționarea elementelor. Cel mai bun aspect este că denumirile claselor sunt similare cu cele din Bootstrap 4, ceea ce face foarte ușoară tranziția între cele două instrumente. De exemplu, iată cum arată codul pentru distribuirea spațiului uniform î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 grid are doar 10.7 KB, ceea ce reduce semnificativ dimensiunea finală a fișierelor. În prezent, Flexbox Grid este alegerea mea preferată, deoarece nu mai trebuie să mă lupt cu Bootstrap pentru a-l personaliza. Prefer să încep cu elemente de bază și să le stilizez singur, folosind Flexbox Grid acolo unde este necesar.
Învață Flexbox online.
PureCSS
Nu ar fi ideal dacă Bootstrap ar fi modularizat, astfel încât să poți importa doar modulele de care ai nevoie?
Ei bine, PureCSS a făcut exact acest lucru – este un set de module care acoperă diferite aspecte funcționale ale unui site web. Poți alege să descarci unul sau toate modulele, dar dimensiunea totală nu va depăși 3.7 KB!
Da, ai citit corect.
Toate modulele, când sunt combinate și comprimate cu gzip, au o dimensiune de 3.7 KB, deși individual sunt mai mari. Modulul grid are doar 0.8 KB, iar modulul de bază are 1.0 KB. Echipa PureCSS susține că a fost construit având în vedere dispozitivele mobile și, prin urmare, fiecare linie de CSS a fost analizată cu atenție pentru eficiență înainte de a fi inclusă.
Să presupunem că ai nevoie doar de modulul grid și cel pentru formulare. Ei bine, pur și simplu descarci aceste două module (împreună cu modulul de bază) și ai terminat, cu o dimensiune de sub 3.4 KB! Nu este nevoie să incluzi CSS-ul modulelor pentru butoane, tabele și meniuri dacă nu le folosești.
PureCSS are propriile clase, iar codul rezultat nu este similar cu cel din Bootstrap:
<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>
După cum observi, nu mai avem un grid cu 12 coloane. PureCSS are un sistem propriu de grid care specifică lățimea pe care trebuie să o aibă o coloană. Astfel, „pure-u-lg-1-4” înseamnă că acest element ar trebui să ocupe 1/4 sau 25% din lățimea disponibilă pe ecranele mari. De asemenea, sunt disponibile și lățimi ca multipli de 1/5.
În general, PureCSS este un instrument CSS eliberator și impresionant (cadru?) din care poți alege exact ce ai nevoie. Cu toate acestea, necesită un anumit nivel de acceptare și învățare, deoarece trebuie să înveți un mod nou (ușor diferit) de a face lucrurile.
PureCSS are propriile sale clase și stiluri implicite, fiind similar cu Bootstrap în acest sens.
Zimit
Cadrul Zimit este puțin diferit în această listă. Da, este un cadru pentru construirea interfețelor utilizator, dar se adresează anumitor tipuri de interfețe: machete.
Apar situații când trebuie să dezvolți interfața front-end pentru a demonstra funcționalitatea produsului. Modul ideal ar fi să implici un designer/dezvoltator UI și să creezi machetele cu instrumente avansate de wireframing (Moqups, Balsamiq etc.). Paginile ar fi perfect aliniate, cu scheme de culori elegante și ar fi deschise pentru participare, recenzii, comentarii etc.
Dar viața reală nu este ideală, iar deseori ești singurul om care se ocupă de tot. În astfel de momente, ai nevoie de un cadru care:
- Să permită codificarea în HTML/CSS
- Să fie ușor
- Să aibă o colecție extinsă de componente de bază
- Să aibă un limbaj de stilizare coerent
- Să semene cu aspectul „gri” al designului wireframe
- Să fie ușor de învățat
- Să aibă un preprocesor CSS încorporat
Zimit îndeplinește toate aceste condiții. Are doar 84 KB și o gamă largă de componente din care poți alege. Iată câteva exemple care mi s-au părut interesante, deoarece codificarea lor de la zero ar lua mult timp.
Arbore de directoare
Breadcrumb
Tab-uri
Există multe alte componente de explorat. Verifică-le aici.
Să analizăm cum arată codul. Iată cum folosești sistemul de grid î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” înseamnă „coloană”, deci „c4” înseamnă o coloană care se întinde pe patru unități (grid-ul având o dimensiune de 12, ca și în Bootstrap). Este foarte asemănător cu Bootstrap și foarte intuitiv, după părerea mea.
În general, Zimit este un cadru ușor și complet pentru dezvoltarea rapidă a prototipurilor de interfețe, responsive și atractive. Este mai bun decât Bootstrap (pentru prototipare), deoarece Bootstrap este mult mai mare și designul rezultat este mai puțin flexibil.
HTML KickStart
În majoritatea proiectelor, viteza este esențială. Cel mai mare obstacol în dezvoltarea web este partea front-end, iar cea mai mare „întârziere” este cauzată de necesitatea de a codifica componente interactive cu un aspect modern. Având în vedere numeroasele moduri în care o componentă poate funcționa și multitudinea de dimensiuni ale ecranelor, codificarea și gestionarea componentelor poate deveni o provocare pentru dezvoltatori.
HTML KickStart oferă o alternativă.
Simplu spus, este o colecție de componente atractive, pe care le poți integra ușor în proiectele tale, reducând semnificativ timpul de dezvoltare. Iată câteva componente interesante pe care le-am găsit:
Meniuri derulante
Butoane
Tab-uri (centrate și cu pictograme)
Materialize
Dacă apreciezi Bootstrap pentru că oferă soluții rapide pentru toate problemele comune de web design, dar preferi stilul Material Design, ar trebui să încerci Materialize.
Materialize este similar cu Bootstrap – sistem de grid în 12 puncte, decalaje și componente familiare, precum formulare, carduri etc. Cu toate acestea, are câteva elemente care pot atrage mulți dezvoltatori.
Push/Pull
Funcția push/pull din Materialize CSS îți permite să reordonezi coloanele. Acest lucru este similar cu 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>
Rezultatul este următorul:
După cum poți observa, coloanele și-au schimbat locul, un lucru dificil de realizat cu abordarea tradițională CSS bazată pe Bootstrap.
Elemente JavaScript
Materialize oferă multe funcții și efecte JavaScript. Tooltips, Toasts (notificări efemere ca pe Android), Paralax, Pushpin etc. sunt câteva dintre ele. Un efect interesant este FeatureDiscovery, care îți permite să evidențiezi un element de pe pagină la un eveniment (de exemplu, apăsarea unui buton), pentru a atrage atenția utilizatorului. Este greu de descris în cuvinte, așa că vizitează https://materializecss.com/feature-discovery.html pentru a vedea despre ce este vorba.
În concluzie, Materialize 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 designul responsive. Bootstrap a fost cel care a popularizat termenul „design pentru mobil” și a demonstrat cum se poate realiza. Dar, deși Bootstrap își face treaba în majoritatea cazurilor, nu este întotdeauna suficient pentru a rezolva toate problemele. Dacă simți că Bootstrap te limitează și că nevoile tale sunt speciale, una dintre opțiunile prezentate aici te va ajuta. 🙂