Objavljena je nova verzija Bootstrap 5

Bootstrap 5

Pregled sadržaja

Prošlo je šest dugih godina od Boostrapa 4. Alfa verzija službeno je bila objavljena u lipnju 2020. i nakon skoro godinu dana poliranja puštena je u produkciju nova stabilna verzija Bootstrap 5.

Što je Bootstrap

Bootstrap je framework otvorenog kôda koji pomaže brže definirati web stranice prilagođene po svim veličinama ekrana. Sadrži CSS i JavaScript kôdove za sve komponente koje se često koriste – elemente navigacije, gumbe, kontakt obrasce, tipografiju itd.

Prvi puta je objavljen 2011. godine, izradili su ga developeru koji rade u Twitteru radi dosljednog kodiranja rješanja za njihove potrebe. Objavljen je za slobodno korištenje u široj javnosti, kroz godine je marljivo nadograđivan i uhodavan u skladu s modernim standardima i danas je najpopularniji framework za izradu web stranica.

Danas na GitHubu ima više od 150 000 zvjezdica što ga čini jedan od najpopularnijih open-source projekata ikad. Također, samo u ovom trenutku na njegovoj osnovi je sazidano preko 18 milijuna web stranica širom svijeta i ta brojka će još puno više rasti. U svakom slučaju, Bootstrap je moćan za alat za izradu web stranica kojeg koristi i mnogi veliki igrači.

Zašto koristiti Bootstrap

Osnovni princip rada kod izrade stranice je definirati HTML strukturu te potom lijepiti Bootstrapove klase radi primijenjivanja boja, veličine i drugih dijelova koji čine dizajn. Vrlo je korisno koristiti takav framewak jer omogućuje znatno bržu izradu svakog dijela web stranice a uvijek se drži ujednačenog izgleda.

Iako radimo prilagođene web stranice po mjeri klijenta od dizajna i vlastitih rješenja, korištenje isprobanog frameworka štedi vrijeme i nije potrebno izmišljavati toplu vodu svaki puta. Također, velika prednost Bootstrapa je u slučaju kada definirani vizualni dizajn nije od najvećeg prioriteta, možemo brže raditi prototip aplikacije i biti reaktivniji prema zahtjevima klijenata.

Što je novo u Bootstrapu 5?

U nastavku ćemo pogledati koje novotarije nam donosi novi Bootstrap.

jQuery je potpuno izgnan iz svake pore

Glavna novost kojoj se najviše radujemo je upravo uklanjanje staromodnog jQueryja o kojem je ovisan ne samo Bootstrap već i brojni drugi sustavi, dodaci i razne skripte koje se koriste na web stranicama. Najvažnija značajka novog Bootstrapa je da je posve isključena potreba za jQuery skriptom što predstavlja značajnu prekretnicu.

Što je jQuery

jQuery je knjižnica programerskih rješenja pisana u JavaScriptu koja je kreirana kako bi omogućila jednostavniji i brži rad nego što nam dopušta izvorni JavaScript. Pomoću jQueryja a bez puno pisanja kôda možemo manipulirati HTML elementima u pregledniku, postavljati AJAX dinamične pozive prema backendu, postavljati CSS animacije i mnogea druga rješenja za interaktivnu funkcionalnost.

Još jedna bitna stvar je da je jQuery negirao razlike koje su u prošlosti postojale između raznih preglednika. Zapravo, Internet Explorer je bio glavni trn u oku te je uvijek pisanjem čistog JavaScript kôda bilo potrebno improvizirati da bi implementacija rješenja radila jednako na svim preglednicima. Takav način rada značio bi puno više posla i brige oko izrade i održavanja.

jQuery je posve besplatan i otvorenog kôda. Sve navedeno uvjetovalo je njegovom planetarnoj popularnosti i praktički se teško može naći web stranica koja ga ne koristi. Sintaksa mu je vrlo jednostavna te i programerima početnicima omogućuje rad i stvaranje nečeg. jQuery je uistinu promijenio način na koji developeri diljem svijeta pišu JavaScript.

Koji su nedostaci jQueryja

S obzirom na to da moderni preglednici nemaju značajnih razlika već se svi vode zajedničkim standardima, danas za to više nema potrebe.

Također, pojavom modernih rješenja poput React, Vue i drugih, jQuery je polako ali sigurno gubio utrku.

Budućnost Bootstrapa bez jQueryja

jQuery je relativno velika knjižnica te zahtijeva od korisnika da ga prilikom web stranice preuzme na svoje računalo što znači duže vrijeme učitavanja.

S obzirom da modernu sintaksu JavaScript programerskog jezika podržavaju svi popularni preglednici, time što nam jQuery više nije potreban, web stranice će biti lakše a time će korisnici manje datoteka trebati preuzeti na uređaj. Također, implementacijom čistog JavaScript kôda programerski dio se brže procesuira. U konačnici, uklanjanje njegove ovisnosti smanjit će veličinu projekta te će direktno utjecati na smanjeno vrijeme učitavanja web stranice.

Naravno, ako web stranica i dalje zbog drugih rješenja koristi jQuery nema nikakvih problema. Postaje stvar prošlosti, dobro nam je služio ali vrijeme je da ode u ropotarnicu povijesti.

Modifikacije mrežne strukture

Bootstrapova mreža ili grid osnovna je poanta frameworka. Nova verzija donosi neke promjene koje nisu revolucionarne ali se tiču optimizacije i nove mogućnosti nam stoje na raspolaganju.

Dodana je podrška za veće ekrane stolnih računala. Sada imamo dodatan breakpoint xxl kada želimo ciljati ekrane šire od 1400 piksela.

Širina grida više neće biti fiksirana na 15 piksela s lijeve i desne strane neovisno o veličini ekrana već će vrijednosti biti u rem jedinici te relativne u odnosu na korijenski HTML element. Također, relativno pozicioniranje sa svih .col-* klasa je maknuto.

Elementi obrazaca

Elementi koji čine kontakt obrasce rekreirani su iz početka. Sada pomoću jednostavnijeg kôda možemo prilagoditi potvrdni okvir, radio, unos datoteke, odabir raspone i druge srodne UI elemente kako bi dizajn bio suvremen i objedinjen u odnosu na zadane postavke preglednika. Izgled je objedinjen bez nepotrebnih suvišnih klasa a time je i HTML kôd čišći i jednostavniji a time i brži te lakši za pisanje i održavanje.

Novost je da polje za unos omogućuje unos oznake koja ga opisuje na način da je prikazano unutar njega a dok korisnik krene upisivati oznaka se pomakne prema gore ali je i dalje vidljiva. Takav način doprinosi bolje korisničkom iskustvu jer je uvijek jasno na što se polje odnosi. Naravno, takvu funkcionalnost lako možemo rekreirati vlastitim jednostavnim kôdom ali zadani prikaz je uvijek dobro prihvaćena stvar jer će je odmah početi koristiti i velik broj drugih web stranica što podiže razinu digitalne pristupačnosti za korisnike.

Bolja kontrola nad varijablama

Pomoću varijabli možemo definirati svojstva koji će mijenjati osnovne postavke cjelokupne strukture i dizajna. Varijable nam omogućuju prilagođavanje svega onoga što je sazdano u frameworku bez puno dodatnih komplikacija. Varijable su bile i u prethodnim verzijama no sada su nadograđene te imamo puno bolju kontrolu nad izgledom i ponašanjem svake pojedine komponente.

Definiranjem vlastitih varijabli sa željenim svojstvima Bootstrap će ih uzeti u obzir pilikom generiranja konačne CSS datoteke. Korisno je kada želimo prilagoditi neke boje, margine i razmake, tipografiju itd. bez nepotrebnog naknadnog prekoračivanja stilova što stvara dodatne probleme i povećava težinu CSS datoteke.

Prilagodba veličine teksta

Bootstrap 5 donosi responzivniju veličinu fonta što nam omogućuje lakše prilagođavanje teksta prema raznim veličinama ekrana. Sada je to moguće po zadanim postavkama te funkcionira tako da se automatski kalkuliraju vrijednosti ovisno o dimenzijama ekrana.

Komponenta harmonike

Stara verzija harmonike je nadograđena i poboljšana. Sada se po zadanim postavkama prikazuje ikona koja prikazuje stanje (prikaz komponente ili njezinu sakrivenost).

Offcanvas komponenta

Offcanvas je nova stvar, donosi nam novu mogućnost kreiranja komponente nalik na klasičan skočni (modalni ili popup) prozor s razlikom da nije centrirano u sredini ekrana već se komponenta prikazuje s gornje, donje, lijeve ili desne strane. Ništa revolucionarnog ali tu je ako ga trebamo. Ako ga ne trebamo, samo ga jednostavno isključimo i komponenta se neće generirati u konačno rješenje.

Podrška za ljudske jezike koji se pišu od desna na lijevo

Bootstrap 5 omogućuje lakšu izradu web stranice kada se radi za strane jezike koji pišu i čitaju sadržaj od desna na lijevo. Aha, postoje takvi jezici 🙂 To su arapski, hebrejski, urdu, farsi… Osobno nismo imali priliku raditi web stranicu za takve jezike ali tko zna što budućnost donosi 🙂

Podrška za Internet Explorer 10 i 11 se potpuno napušta

Internet Explorer 10 i 11 danas drže zanemarivo mali postotak na tržištu te je podrška za njih u potpunosti ukinuta. Rezultat je još veća optimiziranost frameworka jer se ukidaju kodovi koji su potrebni za korekcije tih preglednika.

Dodana je podrška za vlastite Bootstrap SVG ikone.

Nijedan UI framework nije potpun bez načina prikazivanja malih ikona koje imaju značajnu ulogu u web dizajnu.

Bootstrap je prethodnim verzijama pokušao pogurati ikone u obliku fonta pod imenom Glyphicons. Glyphicons u osnovi nisu bile besplatne ali ih je autor poklonio Bootstrapu te su postale sastavni dio frameworka. Ipak, nisu bile ni približno toliko popularne jer su web developeri obično koristili druge setove ikona kao što su Font Awesome ili Material Design. Glyphicons su potpuno uklonjeni i kreirane su vlastite Bootstrapove ikone. Svaka ikona je dodatno kreirana kao SVG a u ovom trenutku postoji preko 1300 ikona.

U nekim komponentama SVG ikone koriste se direktno unutar CSS kôda kao data-image što bi moglo predstavljati problem ako se želi koristiti neki drugi sustav ikona. Jedan način je da tada ne uključimo te komponente i kreiramo vlastito rješenje ili jednostavno prekoračimo vrijednosti novim.

Sažetak

Bootstrap 5 trebao bi biti brži, bolji i jednostavniji za rad. Migracija sa 4. verziju na 5. je puno jednostavnija nego što je to bilo sa prethodnim verzijama. Većina uobičajenih komponenata se nije puno promijenila jer je framework dosta stabilan i nazivi klasa te HTML struktura može dobrim dijelom ostati ista. Stoga prijelaz na novi sustav ne bi trebao uzrokovati puno glavobolje.

Tražite nadogradnju sustava ili razmišljate o kompletnom redizajnu web stranice? U pravo vrijeme. Javite nam se već danas.