Kas pasikeitė Bootstrap ekosistemoje
Kai 2021 metų gegužę pasirodė Bootstrap 5, daugelis web kūrėjų galvojo – na ir kas čia tokio? Dar vienas atnaujinimas, dar keletas naujų klasių, gal koks nors naujas komponentas. Tačiau realybė pasirodė daug įdomesnė. Bootstrap komanda ne tik išmetė jQuery priklausomybę (apie kurią visi kalbėjo), bet ir fundamentaliai pertvarkė responsive dizaino principus.
Pirmiausia reikia suprasti, kad Bootstrap 5 atsirado ne vakuume. Nuo Bootstrap 4 išleidimo praėjo beveik penki metai, per kuriuos interneto kraštovaizdis pasikeitė kardinaliai. Mobilieji įrenginiai tapo įvairesni, ekranų rezoliucijos išaugo, o vartotojų lūkesčiai tapo daug didesni. Jau nebepakanka, kad svetainė tiesiog „veiktų” mobiliajame – ji turi veikti sklandžiai, greitai ir intuityviai.
Bootstrap 5 responsive dizainas buvo perrašytas atsižvelgiant į šiuos pokyčius. Komanda atsisakė senų prielaidų ir pradėjo nuo naujo, klausinėdama save – kaip mes kurtume responsive framework 2021 metais, jei galėtume pradėti nuo nulio?
Breakpoint sistema – smulkmenos, kurios keičia viską
Pirmasis dalykas, kurį pastebėjote dirbdami su Bootstrap 5, yra patobulinta breakpoint sistema. Nors paviršiuje atrodo, kad nieko nepasikeitus – vis tie patys sm, md, lg, xl – po gaubtu įvyko rimtų permainų.
Bootstrap 5 įvedė naują xxl breakpoint, skirtą labai dideliems ekranams (1400px ir daugiau). Tai gali atrodyti kaip smulkmena, bet pagalvokite – kiek žmonių šiandien naudoja 4K monitorius ar ultrawide ekranus? Daug daugiau nei prieš penkerius metus. Senasis xl breakpoint (1200px) tiesiog nebeatitiko realybės.
Bet svarbiausia ne tai. Bootstrap 5 pakeitė būdą, kaip mes galvojame apie breakpoints. Dabar jie nėra tik „mobilusis”, „planšetinis” ir „desktop” – tai lankstūs taškai, kuriuos galite pritaikyti savo projekto poreikiams. Ir tai daroma ne per sudėtingą konfigūraciją, o per intuityvias Sass kintamąsias.
Praktiškai tai reiškia, kad jūs galite lengvai pakeisti breakpoint reikšmes arba net pridėti savo. Pavyzdžiui, jei kuriate svetainę, kuri daugiausia orientuota į planšetes, galite sukurti papildomą breakpoint tarp md ir lg. Anksčiau tai būtų reikalavę rimto framework perrašymo, dabar – kelių eilučių Sass kode.
Grid sistema ant steroidų
Bootstrap grid sistema visada buvo framework širdis. Bootstrap 5 šią sistemą padarė dar galingesnę, bet – ir tai svarbu – ne sudėtingesnę. Tai retas atvejis, kai pridedama funkcionalumo, bet neprarandama paprastumo.
Pirmiausia, dabar turime tikrą CSS Grid palaikymą. Ne, Bootstrap vis dar naudoja Flexbox kaip pagrindinę technologiją, bet dabar galite lengvai integruoti CSS Grid, kur reikia. Tai ypač naudinga sudėtingesnėms layout’ams, kur tradicinė 12 stulpelių sistema tampa per ribota.
Antra naujovė – gutters (tarpai tarp stulpelių) dabar valdomi per utility klases. Senajame Bootstrap turėjote vieną fiksuotą gutter dydį, ir jei norėjote jį pakeisti, reikėjo rašyti custom CSS. Dabar galite naudoti klases kaip g-0, g-3, gx-5 ar gy-2, kad kontroliuotumėte tarpus horizontaliai, vertikaliai ar abiem kryptimis.
Štai realus pavyzdys, kaip tai veikia praktikoje:
<div class="container">
<div class="row g-2 g-md-4 g-lg-5">
<div class="col-12 col-md-6 col-lg-4">
Turinys
</div>
</div>
</div>Šiame pavyzdyje tarpai tarp stulpelių didėja kartu su ekrano dydžiu – mažesni tarpai mobiliajame, didesni desktop’e. Tai gali atrodyti kaip smulkmena, bet tokios detalės ir sukuria tikrai gerą vartotojo patirtį.
Utility-first požiūris be perėjimo prie Tailwind
Vienas didžiausių Bootstrap 5 pasikeitimų yra išplėsta utility klasių sistema. Jei sekate web development tendencijas, žinote, kad pastaraisiais metais utility-first framework’ai kaip Tailwind CSS tapo labai populiarūs. Bootstrap 5 paėmė geriausias šio požiūrio idėjas, bet išlaikė savo identitetą.
Dabar turite utility klases beveik viskam – margin, padding, display, position, sizing, typography ir t.t. Bet svarbiausia – visos šios klasės yra responsive. Galite pridėti breakpoint prefiksą ir klasė veiks tik tam tikrame ekrano dydyje.
Pavyzdžiui, d-none d-md-block paslėps elementą mobiliajame, bet parodys nuo md breakpoint. Arba text-center text-lg-start centruos tekstą mažuose ekranuose, bet lygiuos kairėje dideliuose.
Kas iš tikrųjų svarbu – jums nebereikia rašyti tiek custom CSS. Aš pats pastebėjau, kad projektuose su Bootstrap 5 mano custom stylesheet’ai sumažėjo maždaug 40%. Ne todėl, kad Bootstrap tapo bloated (priešingai, jis tapo lengvesnis), bet todėl, kad daugelį dalykų galiu padaryti tiesiog kombinuodamas utility klases.
Žinoma, čia reikia balanso. Negalite visko daryti per utility klases – kartais reikia tikrų komponentų ir semantic HTML. Bet galimybė greitai prototypuoti ar padaryti nedidelius layout pakeitimus be CSS rašymo yra neįkainojama.
Offcanvas ir nauji responsive komponentai
Bootstrap 5 pristatė keletą naujų komponentų, kurie specialiai sukurti responsive dizainui. Pats įdomiausias iš jų – Offcanvas.
Offcanvas yra kaip modal, bet jis atslenka iš ekrano šono. Tai puikus sprendimas mobiliesiems meniu, filtrams, shopping cart’ams ir panašiems dalykams. Anksčiau turėjote naudoti trečių šalių bibliotekas ar rašyti savo sprendimą, dabar tai įeina į Bootstrap core.
Kas daro Offcanvas tikrai responsive komponentu, yra galimybė jį rodyti skirtingai priklausomai nuo ekrano dydžio. Pavyzdžiui, mobiliajame jūsų navigacija gali būti offcanvas, o desktop’e – įprasta horizontali navbar. Ir visa tai kontroliuojama per responsive klases, be jokio JavaScript.
<div class="offcanvas offcanvas-start offcanvas-lg" id="navMenu">
<div class="offcanvas-header">
<h5>Meniu</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
Navigacijos turinys
</div>
</div>Klasė offcanvas-lg reiškia, kad offcanvas bus matomas tik iki lg breakpoint, o didesnėse rezoliucijose jis bus statinis elementas puslapyje.
Kitas naujas komponentas – floating labels. Tai ne tiek responsive funkcija, kiek UX patobulinimas, bet jis puikiai veikia visuose ekranuose. Labels „plaukioja” virš input laukų, taupydami vertikalią vietą – o tai ypač svarbu mobiliajame.
Responsive typography ir fluid scaling
Tipografija visada buvo responsive dizaino skausmo taškas. Per maži šriftai mobiliajame, per dideli desktop’e, arba atvirkščiai. Bootstrap 5 įvedė keletą naujovių, kurios padeda išspręsti šias problemas.
Pirmiausia, dabar turime font-size utility klases su responsive variantais. Bet svarbiau – Bootstrap 5 naudoja RFS (Responsive Font Size) sistemą. Tai automatiškai skalina šriftus priklausomai nuo viewport dydžio, naudojant CSS calc() ir viewport vienetus.
Praktiškai tai reiškia, kad jūsų h1 antraštė nebūs fiksuoto dydžio – ji sklandžiai mažės mažesniuose ekranuose ir didės didesniuose. Ir jums nereikia rašyti daugybės media queries – tai veikia automatiškai.
Štai kaip tai atrodo po gaubtu:
h1 {
font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
h1 {
font-size: 2.5rem;
}
}RFS apskaičiuoja optimalų šrifto dydį kiekvienam viewport’ui, bet nustato maksimalią reikšmę didesnėms rezoliucijoms. Tai reiškia, kad jūsų tekstas niekada netaps per didelis ar per mažas.
Galite kontroliuoti RFS elgesį per Sass kintamuosius, jei norite labiau agresyvaus ar konservatyvaus scaling’o. Aš paprastai šiek tiek sumažinu scaling’o koeficientą, nes default nustatymai kartais būna per dramatiški mano skoniui.
Performance optimizacijos responsive kontekste
Viena iš didžiausių Bootstrap 5 naujovių, apie kurią mažiau kalbama, yra performance optimizacijos. Ir jos ypač svarbios responsive dizaine, nes mobilieji įrenginiai dažnai turi lėtesnį internetą ir mažiau procesorių galios.
Pirmiausia, jQuery pašalinimas. Taip, visi apie tai kalba, bet ar suprantate, ką tai reiškia praktiškai? Bootstrap.js failas sumažėjo nuo ~70KB iki ~20KB (minified). Tai reiškia greitesnį puslapio įkėlimą, ypač mobiliajame.
Antra, Bootstrap 5 geriau naudoja modernias CSS funkcijas, kurios yra hardware-accelerated. Pavyzdžiui, transitions ir animations dabar naudoja transform ir opacity vietoj left, top ar kitų properties, kurios triggerina layout reflow.
Trečia, dabar galite lengvai importuoti tik tai, ko jums reikia. Naudojate tik grid sistemą ir keletą komponentų? Importuokite tik juos. Jūsų galutinis CSS failas gali būti 80% mažesnis nei pilnas Bootstrap.
// Custom.scss
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/utilities";
// Pridėkite tik tuos komponentus, kurių reikiaDar vienas performance aspektas – lazy loading palaikymas. Bootstrap 5 komponentai gerai veikia su native lazy loading ir Intersection Observer API. Tai reiškia, kad galite efektyviai užkrauti turinį tik tada, kai jis tampa matomas viewport’e.
Realūs patarimai darbui su Bootstrap 5 responsive funkcijomis
Gerai, užteks teorijos. Pasidalinsiu konkrečiais patarimais, kuriuos išmokau dirbdamas su Bootstrap 5 realiuose projektuose.
Nepiktnaudžiaukite utility klasėmis. Taip, jos patogios, bet jei jūsų HTML atrodo kaip <div class="d-flex justify-content-between align-items-center p-3 mb-4 bg-light rounded-3 shadow-sm">, galbūt laikas sukurti tikrą komponentą. Aš laikausi taisyklės: jei tas pats klasių derinys kartojasi daugiau nei tris kartus, darau komponentą.
Naudokite Sass kintamuosius. Nepakeiskite breakpoint reikšmių tiesiogiai Bootstrap failuose. Vietoj to, override’inkite kintamuosius savo custom Sass faile prieš importuodami Bootstrap. Taip jūsų pakeitimai išliks atnaujinus framework.
Testuokite realiuose įrenginiuose. Browser DevTools responsive mode yra geras, bet ne tobulas. Aš visada testuoju bent keliuose realiuose telefonuose ir planšetėse. Kartais pastebite dalykų, kurių nematote simuliatoriuje – touch target’ai per maži, tekstas sunkiai skaitomas, animacijos lėtos.
Kombinuokite Bootstrap su custom CSS. Bootstrap 5 yra puikus foundation, bet ne galutinis sprendimas. Nesibijokite rašyti custom CSS, kai reikia. Aš paprastai naudoju Bootstrap grid ir utilities, bet komponentams dažnai rašau savo stilius, kad projektas turėtų unikalų vaizdą.
Optimizuokite images responsive dizainui. Bootstrap suteikia img-fluid klasę, bet tai tik pusė sprendimo. Naudokite <picture> elementą su skirtingais source’ais skirtingiems breakpoint’ams. Mobilieji vartotojai neturėtų krauti 4K nuotraukų.
<picture>
<source media="(min-width: 1200px)" srcset="large.jpg">
<source media="(min-width: 768px)" srcset="medium.jpg">
<img src="small.jpg" class="img-fluid" alt="Aprašymas">
</picture>Išnaudokite CSS custom properties. Bootstrap 5 vis dar daugiausia naudoja Sass, bet galite pridėti CSS custom properties dinamiškiems dalykams. Pavyzdžiui, jei turite theme switcher, custom properties leidžia keisti spalvas be puslapio perkrovimo.
Kaip tai keičia mūsų darbo būdą
Bootstrap 5 responsive naujovės nėra tik techniniai patobulinimai – jos keičia būdą, kaip mes galvojame apie web dizainą. Nebegalvojame „mobile version” ir „desktop version” – galvojame apie fluid, adaptable interfaces, kurie prisitaiko prie bet kokio konteksto.
Pastebėjau, kad projektai su Bootstrap 5 užima mažiau laiko. Ne todėl, kad framework daro viską už mane, bet todėl, kad jis suteikia gerą foundation, ant kurios galiu statyti. Nebereikia spręsti tų pačių problemų iš naujo kiekviename projekte – grid sistema, breakpoints, utility klasės jau čia, veikia ir išbandytos milijonuose svetainių.
Bet svarbiausia – Bootstrap 5 leidžia man labiau sutelkti dėmesį į tai, kas iš tikrųjų svarbu: vartotojo patirtį, turinį, unikalias funkcijas. Mažiau laiko praleidžiu kovojant su CSS, daugiau – kuriant vertę.
Žinoma, Bootstrap nėra vienintelis sprendimas. Tailwind, Foundation, ar net vanilla CSS su moderniomis funkcijomis kaip CSS Grid ir Container Queries gali būti geresni pasirinkimai tam tikriems projektams. Bet jei ieškote balanced sprendimo, kuris suteikia ir struktūrą, ir lankstumą, Bootstrap 5 responsive funkcijos tikrai vertos dėmesio.
Galiausiai, responsive dizainas nėra tik apie techniką – tai apie empatiją vartotojui. Ar jūsų svetainė veikia gerai žmogui, kuris naršo telefonuose metro, su lėtu 3G internetu? Ar ji patogi vyresniam žmogui su planšete? Bootstrap 5 suteikia įrankius atsakyti „taip” į šiuos klausimus, bet sprendimas vis tiek jūsų rankose.
