Alternativer til Bootstrap: Utforsk nye veier innen frontend-utvikling
Bootstrap er allestedsnærværende i webutviklingsverdenen, men det er ikke alltid det mest optimale verktøyet for alle prosjekter. La oss utforske noen fremragende alternativer som kan være bedre egnet for dine behov.
Når man analyserer kildekoden til mange nettsiders frontend, er det svært sannsynlig at man støter på Bootstrap. Vi har blitt så vant til konsepter som «container-fluid», «row» og «col-sm-6», at det kan være vanskelig å forestille seg en annen tilnærming til frontend-utvikling. Dermed hender det ofte at vi automatisk tyr til Bootstrap når vi starter et nytt prosjekt. Likevel betyr ikke populariteten at Bootstrap er ideelt for alle prosjekter og krav.
For slanke frontends kan det å laste inn hele Bootstrap CSS og JavaScript føre til unødvendig oppblåsthet av koden.
Denne artikkelen har to hovedmål:
- Presentere live-alternativer til Bootstrap som ikke følger den samme malen.
- Begrunne hvorfor du bør overveie disse alternativene i stedet for å bruke Bootstrap.
Jeg anser forklaringsdelen som viktig, ettersom mange ikke er klar over at de har et problem eller gjør jobben mer komplisert ved å velge Bootstrap. Det er viktig å påpeke at dette ikke er en kritikk av Bootstrap. Jeg verdsetter Bootstrap 4 og bruker det gjerne når det passer. Men som individuell utvikler må jeg vurdere den mest effektive løsningen, og som ikke-spesialisert UI-utvikler er ikke alle grensesnittaspekter like viktige for meg.
La oss nå se på de tilgjengelige alternativene.
Flexbox Grid
Tenk over det: Den primære årsaken til at du begynte å bruke Bootstrap, og fortsatt gjør det, er mest sannsynlig rutenettsystemet. Det tok kanskje litt tid å bli vant til klassene «row», «col-md-6» osv., men nå er det naturlig å tenke på oppsett i form av rader, kolonner og forskyvninger.
Om du er ærlig med deg selv, vil du antagelig innse at mye annet i Bootstrap kan være tungvint å håndtere. Det finnes et stort antall klasser å huske, enten du jobber med skjemaer, navigasjon, knapper eller tabeller. Hvis du er som meg, har du kanskje ikke helt kontroll over alle klassene og deres funksjoner, og bruker derfor ofte Bootstrap hovedsakelig for rutenettet, mens du skriver resten av CSS-en selv.
I så fall kan du oppnå mye bedre resultater med Flexbox Grid.
Som navnet antyder, er Flexbox Grid et rutenettsystem basert på CSS Flexbox egenskaper. Men i motsetning til å implementere CSS direkte, er all kompleksitet abstrahert bort, slik at du kan konsentrere deg om å plassere elementer slik du ønsker. Det som er flott, er at koden og klassenavnene ligner de du finner i Bootstrap 4. Overgangen mellom disse verktøyene blir derfor smidig. Et eksempel på «space around» funksjonen i Flexbox Grid er som følger:
<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>
Den minifiede CSS-filen for dette rutenettet er bare 10,7 KB, noe som sparer deg for mange kilobyte i den endelige nedlastingsstørrelsen. Flexbox Grid er nå mitt foretrukne valg, da jeg ikke ønsker å kjempe mot Bootstrap for å tilpasse den. Jeg foretrekker å starte med grunnleggende elementer og style dem selv ved hjelp av Flexbox Grid der det er nødvendig.
Lær mer om Flexbox her, online.
PureCSS
Ville det ikke vært praktisk om Bootstrap var delt inn i moduler, slik at du kunne importere bare de modulene du trengte?
PureCSS har tatt dette konseptet til virkelighet. Det er et sett med moduler som dekker ulike funksjonelle områder på en nettside. Du kan velge å laste ned én eller alle modulene, og nedlastingsstørrelsen vil fortsatt ikke overstige 3,7 KB!
Ja, du leste riktig.
Alle modulene samlet og gzippet utgjør 3,7 KB, selv om de hver for seg er større. Nettmodulen er kun 0,8 KB, mens basemodulen er 1,0 KB. Utviklerteamet bak PureCSS sier at det er utviklet med fokus på mobile enheter, og at hver eneste CSS-linje er nøye evaluert for effektivitet før den ble inkludert.
La oss si at du kun trenger rutenett- og skjema-modulene. Last ned disse to (sammen med basemodulen), og du er ferdig med under 3,4 KB! Du trenger ikke å inkludere CSS for moduler som knapper, tabeller og menyer, hvis du ikke skal bruke dem.
PureCSS har egne klasser, og den resulterende koden ligner ikke nødvendigvis på det du kanskje er vant til fra 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>
Som du ser, er det ikke lenger et 12-kolonners rutenett. PureCSS har sitt eget rutenettsystem som spesifiserer bredden en kolonne skal oppta. For eksempel betyr «pure-u-lg-1-4» at dette elementet skal oppta 1/4 eller 25 % av den tilgjengelige bredden på store skjermer. Bredder som multipler av 1/5 er også tilgjengelige.
Alt i alt er PureCSS et frigjørende og utmerket CSS-verktøy (eller rammeverk) som du kan velge mellom etter behov. Imidlertid krever det en viss investering i tid og læring ettersom du må lære en ny (litt annerledes) måte å gjøre ting på.
PureCSS har også sine egne klasser og standardstil, så det er ikke så annerledes enn Bootstrap på det punktet.
Zimit
Zimit-rammeverket skiller seg litt ut i denne listen. Det er et rammeverk for å bygge brukergrensesnitt, men det er spesielt rettet mot mockups.
Det er situasjoner hvor du må utvikle en frontend for å demonstrere hvordan et produkt fungerer. Ideelt sett bør man involvere en UI-designer/utvikler og lage mockups med avanserte wireframing-verktøy (Moqups, Balsamiq osv.). Da ville sidene være pikselperfekte, fargeskjemaet elegant og gjennomtenkt, og sidene åpne for tilbakemeldinger, kommentarer osv.
Men i virkeligheten er vi ofte alene om oppgaven og må fylle alle rollene for å få jobben gjort. I slike tilfeller trenger man et rammeverk som:
- Lar deg kode i HTML/CSS
- Er lett
- Har et omfattende utvalg av grunnleggende komponenter
- Har et anstendig og konsistent stilspråk
- Helst har en «gråaktig» tone som ligner wireframe-design
- Er lett å lære
- Har en innebygd CSS-forprosessor
Zimit oppfyller alle disse kravene. Det er kun 84 KB stort og har et bredt spekter av komponenter å velge mellom. Her er noen eksempler som jeg fant spesielt nyttige, da de kan være tidkrevende å kode fra bunnen av.
Trevisning
Brødsmulesti
Faner
Det er mange flere nyttige verktøy å utforske. Sjekk dem ut her.
La oss se på hvordan koden ser ut. Slik bruker du rutenettet i 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» står for «kolonne», så «c4» betyr en kolonne som strekker seg over fire enheter (rutenettet er 12-delt, akkurat som Bootstrap). Dette er svært likt Bootstrap og intuitivt etter min mening.
Alt i alt er Zimit et komplett og lettvint rammeverk for å utvikle UI-prototyper som er responsive og ser bra ut på kort tid. Det er bedre enn Bootstrap (når det gjelder prototyping) fordi Bootstrap har en mye større nedlastingsstørrelse og det resulterende designet kan virke overdrevet.
HTML KickStart
I de fleste utviklingsprosjekter er hastighet avgjørende. Den største hindringen for hastighet i webutvikling er frontend-delen, og den største «forsinkelsen» i frontend-utvikling er behovet for å kode elegante og interaktive komponenter. Ettersom det er mange måter en komponent kan oppføre seg på, og mange skjermstørrelser å administrere, kan koding og administrasjon av komponenter bli en utfordring for utvikleren.
HTML KickStart tilbyr et alternativ.
Enkelt sagt, det er en samling av virkelig elegante komponenter som du enkelt kan integrere i prosjektene dine og redusere utviklingstiden betraktelig. Her er noen eksempler på nyttige komponenter:
Nedtrekksmenyer
Knapper
Faner (sentrert og med ikoner)
Materialize
Hvis du liker Bootstrap for at det har en ferdig løsning for de fleste vanlige webdesignproblemer, men du er en tilhenger av materialdesign, bør du prøve ut Materialize.
Materialize er ganske lik Bootstrap – med et 12-punkts rutenettsystem, forskyvninger og velkjente komponenter som skjemaer og kort. Men den har også noen godbiter som kan appellere til mange.
Push-pull
Materialize CSS sin push/pull-funksjon lar deg omorganisere kolonner. Dette minner om den nye CSS Grid-standarden, hvor oppsettet er forskjellig fra elementenes rekkefølge.
<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>
Dette resulterer i følgende:
Du vil se at kolonnene har byttet plass, noe som kan være vanskelig å oppnå med tradisjonell Bootstrap-basert CSS.
JavaScript-funksjoner
Materialize leveres med en rekke JavaScript-funksjoner og effekter. Verktøytips, Toasts (Android-lignende flyktige varsler), Parallax, Pushpin, etc. er noen av dem. En fantastisk effekt jeg likte er FeatureDiscovery, som lar deg fremheve et element på siden ved en hendelse (for eksempel et knappetrykk) for å trekke brukerens oppmerksomhet mot det. Det er vanskelig å beskrive den fullstendig med ord, så besøk https://materializecss.com/feature-discovery.html for å se hva jeg mener.
Alt i alt er Materialize et utmerket alternativ til Bootstrap, spesielt for de som ønsker å ta i bruk et fullverdig Material CSS-rammeverk.
Konklusjon
Bootstrap er synonymt med responsiv design. Det var Bootstrap som populariserte konseptet «mobil-first design» og demonstrerte hvordan det kunne gjøres. Men selv om Bootstrap ofte er tilstrekkelig, er det ikke alltid det beste valget. Hvis du føler at Bootstrap begrenser deg, og at dine behov er spesielle, kan et av alternativene som er presentert her være til hjelp. 🙂