Bootstrap je sveprisutan, ali nije uvek idealno rešenje za svaki zadatak. Predstavljamo vam nekoliko izvanrednih alternativa!
Ukoliko nasumično pregledate izvorni kod web stranica, vrlo je verovatno da ćete pronaći Bootstrap. Svi smo se navikli na koncepte kao što su `container-fluid`, `row`, `col-sm-6` i slično, da je teško zamisliti da je drugačiji pristup razvoju front-enda uopšte moguć. Stoga, kada započinjemo novi projekat, često instinktivno posežemo za Bootstrapom. Međutim, njegova popularnost ne znači da je pogodan za sve projekte i zahteve.
Za jednostavne frontendove, učitavanje celog Bootstrap CSS i JS može dovesti do nepotrebnog povećanja veličine stranice.
Ovaj tekst ima dva cilja:
- Predstaviti kvalitetne alternative Bootstrapu koje se od njega razlikuju.
- Objasniti zašto biste trebali razmisliti o ovim alternativama umesto o Bootstrapu.
Razumevanje razloga je ključno, jer u većini slučajeva ljudi nisu svesni da imaju problem ili da sebi komplikuju posao koristeći Bootstrap. Važno je naglasiti da ovo nije anti-Bootstrap stav. Bootstrap 4 je odličan i koristim ga kad god je to prikladno. Ali, kao individualni programer, moram razmišljati o korišćenju najoptimalnijeg rešenja. Takođe, nisam isključivo UI programer, pa ne brinem previše o dizajnu kada pravim svoje frontendove.
Uz to, hajde da pogledamo koje alternative su nam dostupne.
Flexbox Grid
Razmislite na trenutak: glavni razlog zašto ste počeli koristiti Bootstrap, i zašto ga i dalje koristite, je njegov sistem mreže. Trebalo je malo vremena da se naviknete na klase kao što su `row`, `col-md-6`, itd., ali sada je prirodno razmišljati o layoutu u terminima redova, kolona i slično.
Iskreno, sve ostalo u Bootstrapu može biti zamorno. Postoji veliki broj klasa koje treba zapamtiti, bilo da radite sa formama, navigacijom, dugmićima, tabelama ili bilo čim drugim. Mnogi od nas se još uvek nisu navikli na sve klase i njihove funkcije, i često Bootstrap koristimo samo za grid, a sav ostali CSS pišemo sami.
Ako se prepoznajete u ovome, Flexbox Grid bi mogao biti bolji izbor za vas.
Flexbox Grid, kao što ime govori, je sistem mreže baziran na Flexbox svojstvima. Međutim, za razliku od direktnog korišćenja CSS-a, sva kompleksnost je skrivena, omogućavajući vam da se fokusirate na postavljanje elemenata onako kako želite. Najbolje je što nazivi klasa i kod podsećaju na Bootstrap 4, što znači da prelazak između ova dva alata ne zahteva mnogo mentalnog napora. Na primer, ovako izgleda kod za „space around“ u Flexbox Grid-u:
<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>
Minifikovani CSS fajl za ovaj sistem mreže je samo 10.7 KB, čime se štedi nekoliko stotina KB u veličini fajla. Flexbox Grid je moj omiljeni alat, jer ne želim da se borim protiv Bootstrapa da bih ga u potpunosti prilagodio. Volim da počinjem sa osnovnim elementima i sam ih stilizujem, koristeći Flexbox Grid gde je potrebno.
Učite Flexbox online.
Pure CSS
Zar ne bi bilo idealno kada bi Bootstrap bio modularan i da možete uvesti samo modul koji vam je potreban?
E, pa Pure CSS je upravo to uradio – to je skup modula koji pokrivaju različite funkcionalne oblasti web stranice. Možete odabrati da preuzmete jedan ili sve, a veličina preuzimanja neće preći 3.7 KB!
Da, dobro ste pročitali.
Svi moduli zajedno, kompresovani, zauzimaju 3.7 KB, iako pojedinačno zauzimaju više. Modul mreže ima samo 0.8 KB, dok je osnovni modul 1.0 KB. Tim koji stoji iza Pure CSS-a tvrdi da je napravljen imajući u vidu mobilne uređaje, tako da je svaka linija CSS-a pažljivo ispitana radi efikasnosti pre nego što je uključena.
Recimo da vam treba samo modul mreže i obrazaca. Jednostavno preuzmite ova dva (zajedno sa osnovnim modulom) i to je sve, manje od 3.4 KB! Nema potrebe da uključujete CSS iz modula dugmića, tabela i menija ako ih nećete koristiti.
Međutim, Pure CSS ima svoje klase, a kod ne imitira Bootstrap na koji ste navikli:
<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>
Primećujete da više nema mreže od 12 kolona. Pure CSS ima svoj sistem mreže koji određuje koliko prostora kolone treba da zauzme. Tako, `pure-u-lg-1-4` znači da ovaj element treba da zauzme 1/4 ili 25% dostupne širine na velikim ekranima. Dostupne su i širine pomnožene sa 1/5.
Sve u svemu, Pure CSS je oslobađajući i neverovatan CSS alat koji možete koristiti po potrebi. Međutim, dolazi sa krivom učenja, jer morate savladati novi (malo drugačiji) način rada.
Pure CSS takođe ima svoje klase i podrazumevani stil, pa se po tome ne razlikuje previše od Bootstrapa.
Zimit
Zimit Framework je pomalo neobičan na ovoj listi. Da, to je framework za kreiranje korisničkog interfejsa, ali je usmeren na određene tipove UI: mockupe.
Postoje situacije kada je potrebno razviti frontend za demonstraciju funkcionisanja proizvoda. Idealno bi bilo angažovati UI dizajnera/programera i kreirati makete na jednom od naprednih alata za uokvirivanje (mockup alati poput Balsamiq, itd.). Stranice bi bile savršene po pikselima, paleta boja pažljivo odabrana, a stranice bi bile otvorene za saradnju, recenzije, komentare itd.
Ali, realnost nije idealna i često ste jedina osoba koja radi sve poslove. U tim trenucima, potreban vam je framework koji:
- Omogućava kodiranje u HTML/CSS
- Je lagan
- Ima široku kolekciju osnovnih komponenti
- Ima dobar i konzistentan stilski jezik
- Ako je moguće, podseća na “sivkasti” izgled wireframe-a
- Je jednostavan za učenje
- Ima ugrađeni CSS preprocesor
Zimit ispunjava sve ove zahteve. Veličine je samo 84 KB i ima širok spektar komponenti koje možete izabrati. Evo nekoliko primera koji su mi bili posebno privlačni, jer bi njihovo samostalno kodiranje oduzelo dosta vremena.
Prikaz stabla
Breadcrumb
Tabovi
Postoji još mnogo toga za istražiti. Pogledajte ih ovde.
Hajde da pogledamo kako izgleda kod. Evo kako biste koristili sistem mreže u Zimitu:
<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” ovde označava “column”, tako da “c4” znači kolonu koja zauzima četiri jedinice (mreža je veličine 12, baš kao Bootstrap). Vrlo slično Bootstrapu i vrlo intuitivno, po mom mišljenju.
Sve u svemu, Zimit je kompletan i jednostavan framework za brzi razvoj UI prototipova koji su responsivni i dobro izgledaju. Bolji je od Bootstrapa (kada je reč o izradi prototipa), jer je Bootstrap mnogo veći za preuzimanje, a dizajn može izgledati „lepljivo“.
HTML KickStart
U većini projekata koje radite, brzina je ključna. Najveća prepreka brzini u web razvoju je frontend deo, a najveće „usko grlo“ u frontend razvoju je potreba za kodiranjem interaktivnih komponenti elegantnog izgleda. Budući da postoji mnogo načina na koje komponenta može da se ponaša i mnogo veličina ekrana koje treba uzeti u obzir, kodiranje i upravljanje komponentama može postati noćna mora za programera.
HTML KickStart nudi alternativu.
Jednostavno rečeno, to je zbirka elegantnih komponenti koje možete jednostavno ubaciti u svoje projekte i drastično skratiti vreme razvoja. Evo nekoliko lepih komponenti koje sam pronašao:
Padajući meniji
Dugmad
Kartice (centrirane i sa ikonama)
Materialize
Ako volite Bootstrap zbog činjenice da ima rešenje za sve uobičajene probleme web dizajna, ali ste ljubitelj Material Design stila, trebalo bi da isprobate Materialize.
Materialize je u osnovi sličan Bootstrapu – sistem mreže od 12 tačaka, offseti i poznate komponente kao što su forme, kartice itd. Međutim, ima određene prednosti koje se mnogima mogu svideti.
Push-pull
Funkcija push/pull u Materialize CSS-u vam omogućava da promenite redosled kolona. Ovo podseća na novi CSS Grid standard, gde se raspored razlikuje od redosleda elemenata.
<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>
Ovo rezultira sledećim:
Primećujete da su kolone zamenile mesta, što je nešto što je možda nedostupno u tradicionalnom CSS-u baziranom na Bootstrapu.
JavaScript dodatci
Postoji dosta JavaScript funkcija i efekata koji dolaze sa Materialize-om. Tooltips, Toasts (efemerna obaveštenja slična Androidu), Parallax, Pushpin, itd., su neki od njih. Jedan zaista neverovatan efekat koji mi se dopao je FeatureDiscovery, koji vam u osnovi omogućava da istaknete element na stranici u nekom događaju (recimo, pritiskom na dugme) da biste skrenuli pažnju korisnika na taj element. Teško je to u potpunosti opisati rečima, pa idite na https://materializecss.com/feature-discovery.html da vidite na šta mislim.
Sve u svemu, Materialize je odlična alternativa za Bootstrap ili za one koji žele da koriste potpuno funkcionalan Material CSS framework.
Zaključak
Bootstrap je sinonim za responsivni dizajn. Upravo je Bootstrap popularizovao termin „mobile-first dizajn“ i pokazao kako se to može uraditi. Ali iako Bootstrap u većini slučajeva obavlja posao, samo obavljanje posla nije uvek dovoljno. Ako smatrate da vas Bootstrap ograničava i da su vaše potrebe specifične, jedna od opcija navedenih ovde će vam pomoći. 🙂