Bootstrap 4, ikke kommet i gang enda?

Bootstrap 4, ikke kommet i gang enda?

19. Oktober, kun to måneder etter at den etterlengtede Beta-versjonen til Bootstrap 4 kom, har et av de aller mest populære frontend rammeverkene allerede rukket å slippe sin andre stabile versjon, Bootstrap 4 Beta 2. Hvis du ikke har begynt å bruke Bootstrap 4, så er det på høy tid å kaste seg ut i det, fordelene er mange!

Det har vært nøyaktig to år med utvikling siden første slippet av Alpha-versjonen av Bootstrap 4 til den nåværende versjonen. Så vi har hatt gleden av å bruke de nye funksjonene lenge allerede, men med en stabil versjon betyr at det er først nå at teamet bak Bootstrap ikke lenger vil fjerne ny teknologi, derav en Beta-release.

Hva er Bootstrap?

Et rent frontend rammeverk! Det har gått over 6 år siden Mark Otto og Jacob Thornton slapp den første versjonen av frontend rammeverket Bootstrap til offentligheten. Utvikleren og designeren arbeidet til daglig hos Twitter og så behovet for et rammeverk som kunne håndtere de interne verktøyene, JavaScript eller kompilering på en konsistent måte. Rammeverket de utviklet ble så lovende at de slapp det som et open-source prosjekt og har siden blitt et av de mest populære rammeverkene for frontend.

Er Bootstrap så populært?

Ja, det er det! Ifølge nettsiden BuiltWith, som viser statistikk over bruken av forskjellige rammeverk, så er det over 13 millioner som benytter Bootstrap per dags dato. Det er en kontinuerlig økning i bruken fra fjoråret, hele 3,6% av alle verdens websider benytter Bootstrap i dag, stigning med 1,5% fra fjoråret.

Bootstrap sin økning over ett år
Skjermdump av Bootstrap sin økning over ett år. Kilde: https://trends.builtwith.com/docinfo/Twitter-Bootstrap

Noe av det som gjør Bootstrap så attraktivt er at det bygger opp under "mobile-first" prinsippet og har et responsivt design slik at websidene kan leveres til alle typer enheter. I tillegg kan man peke på følgende områder som suksessfaktorer:

  • Det meget anvendelige Grid-systemet til å bygge layout på sider
  • Lav terskel for å sette opp en nettside og style den. Man må ikke være frontend utvikler eller designer for å bygge et enkelt og brukervennlig grensesnitt
  • Masse forhåndsalternativer til knapper, web-skjemaer eller navigering
  • Åpen for mange JavaScript-tillegg
  • Stort samfunn

Dette er i korte trekk hva Bootstrap har tilbyd sine brukere. Men nå er det altså kommet nye oppgraderinger.

Grid systemet
Skjermdump av Grid-systemet i teorien. Den vil bestå, men får en oppgradering. Kilde: https://getbootstrap.com/docs/4.0/layout/grid/#mix-and-match

Hva er nytt? Og vil det ha innvirkning på meg?

For å svare på det siste først, hvis du ikke har turt å gi slipp på Bootstrap 3 fordi den nye funksjonaliteten til versjon 4 ikke har vært spikret enda, så har Beta-releasen veldig stor innvirkning. Bootstrap teamet har allerede avsluttet all utvikling av Bootstrap 3 og avvikling av support står for tur.

Det er ganske mye som skiller seg fra Bootstrap 3. Og mange av endringene fortsetter å underbygge responsivt design, samtidig som Bootstrap 4 vil bli enda enklere og kraftigere å bruke.

Bootstrap bruker nå Flexbox som sitt standard layout verktøy. Dette gir enda mer frihet og fleksibilitet til det eksisterende Grid-systemet, samt kjernekomponentene i Bootstrap. Flexbox fungerer som en løsning til å administrere sidens responsivitet på en forutsigbar måte ved forskjellige skjermstørrelser. Flexbox kan blant annet ved hjelp av "multi-rows" opprette columns med lik bredde som strekker seg over flere rows. Eller utnytte flere vertikale/horisontale plasseringsmuligheter. Ved å basere seg på Flexbox går man bort fra Float og dets avhengighet av "Clearfix", noe som var gjenstand til hodebry for flere med bruken av Bootstrap 3. Man vil med andre ord spare tid man tidligere måtte bruke på å justere objekter til hver eneste skjermoppløsning. Og ikke minst kan det resultere i en renere css og mer kompatibel kode.

Kompromisset med å binde seg til Flexbox er at dette fjerner støtten til IE8 (som allerede hadde kompatibelhetsmangler med Bootstrap 3), IE9 og iOS 6. Dermed er IE10+ og iOS7+ minimumskrav om man skal nyte Bootstrap 4 sitt fulle potensiale. En fyldigere introduksjon til bruken av Flexbox kan finnes hos MDBootstrap.

For videre å støtte opp under viktigheten av et responsivt uttrykk, så har det velkjente Grid-systemet også fått seg en oppgradering. Det består fortsatt av de samme 12 kolonnene som tidligere, og vil med det fortsatt unngå posisjoneringsproblemene til CSS, men man har fått et Grid-nivå ekstra. Det betyr at det nå er 5 nivåer, hvor de 4 foregående nivåene hopper opp ett nytt nivå for å gjøre plass til det nye som retter seg mot skjermer mindre enn 576px.

De ulike skjermnivåene

Skjermdump av de forskjellige skjermnivåene. Kilde: https://getbootstrap.com/docs/4.0/layout/grid/

Det siste punktet som fremmer responsivt design, er at Bootstrap nå har gått over fra px til rem. Det gjør at alt blir dynamisk og relativt til rot html-elementene. Den globale font-størrelsen er 16px, det betyr at 1 rem tilsvarer 16 px. Dette gjør igjen skaleringen imellom mobile enheter enklere. Til tross for byttet, så blir pixler fortsatt benyttet i media-queries og skjæringspunktet til Grid-systemet, og viewports forblir uberørt.

Hele temaet med enheter (px, rem, em etc.) i CSS er fortsatt ikke helt standardisert og det er større potensiale enn det som kanskje er utnyttet hos massene akkurat nå. Bootstrap tar grep med overgangen til rem for å gjøre skaleringen imellom skjermer enda "renere", selv om det fortsatt er rom for forbedringer. Det får være temaet for et annet innlegg, men Michael Riethmuller har et godt foredrag om tematikken rundt CSS-enheter og hvordan utforme gode løsninger for typografi og bilder.

Bootstrap har skiftet kompilator fra Less til Sass. Som en følge av at Sass har gått over til LibSass, kompilerer den raskere enn forgjengeren sin, samt skal være ansett som enklere å bruke enn tidligere. Det og faktumet at Sass har et bredt samfunn av brukere og utviklere, har gjort at de ble foretrukket fremfor Less.

Andre nyheter i korte trekk:

  • HTML5 skjemavalidering med stiler
  • Bootstrap sin navbar har fått en oppgradering for å støtte Flexbox
  • Font Awesome i stedet for Glyphicons
  • Panels, Thumbnails og Wells er droppet til fordel for Cards 
  • Hver eneste plugin er blitt omskrevet til ECMAScript 6 (ECMA og ISO standard) for å utnytte de nyeste JavaScript-forbedringene
  • Bootstrap har gått over til å bruke NPM-scripts som build-verktøyet i stedet for Grunt
  • Hundrevis av nye responsive klasser og flere nye komponenter

Den rykende ferske oppdateringen har tatt med seg en oppfriskning av temaene som gir nye fargevariabler og et innblikk i strukturen til de nye Sass-filene. Oppgraderingen gir oss også muligheten til å sette individuell responsivitet til tabeller. Ellers har dokumenteringen til Bootstrap fått på plass flere nye seksjoner i bruken av de nye godbitene.

Hva gjør jeg nå?

Stikke hodet i sanden

Det er trygt å stikke hodet opp fra jorden, Bootstrap 4 er nå klar for å bli brukt i produksjon! Man kan riktignok vente seg en versjonsoppgradering til før v4 Final, men Bootstrap har en annonsert plan for hvilke områder som får en oppfriskning. Hvis historien går sin gang, så vil Bootstrap 3 snart fases helt ut og Bootstrap 4 har for mange fordeler til å bli oversett i forhold til sin forgjenger. For hvem vil vel ikke bruke et frontend rammeverk som er raskere i kompileringen sin, lettere som rammeverk, enklere å ta i bruk takket være Flexbox og med det nye Grid-systemet også mektigere enn versjon 3? Bootstrap 4 er fremtiden!

 

Om bloggeren:
Christian følger Acandos treårige traineeprogram for å bli en av Norges fremste konsulenter med mindre enn 5 års erfaring. Han har en MSc i Universell Utforming av IKT fra HiOA, og interesserer seg stort for hvordan mennesker interagerer og påvirkes av den digitale tilgjengeligheten i samfunnet.

comments powered by Disqus