Bootstrap er overalt, men det er ikke alltid det rette verktøyet for jobben. Her er noen gode alternativer!
Hvis du sjekker kildekoden til et nettsteds frontend tilfeldig i disse dager, er sjansen stor for at du finner Bootstrap under. Vi har alle blitt så vant til konsepter som container-fluid, row, col-sm-6, etc., at det er vanskelig å forestille seg at noen annen stil med frontend-utvikling er mulig. Og så når vi skal bygge det neste prosjektet, strekker vi oss ubevisst etter Bootstrap. Når det er sagt, gjør ikke populariteten Bootstrap til å passe godt for alle prosjekter og behov.
Faktisk, for virkelig magre frontends, laster du inn alle Bootstrap CSS og JS kan forårsake stor oppblåsthet.
Denne artikkelen har to formål:
Jeg tror forklaringsdelen er veldig viktig fordi i de fleste tilfeller skjønner folk ikke engang at de har et problem eller at de gjør jobben vanskeligere ved å plukke opp Bootstrap. Til slutt, vær oppmerksom på at dette ikke er et anti-Bootstrap-innlegg på noen måte. Jeg elsker Bootstrap 4 og bruker den når jeg kan. Men altså, jeg er en individuell utvikler som må tenke på å bruke den mest populære løsningen; Jeg er heller ikke en brukergrensesnittutvikler i seg selv, så jeg bekymrer meg ikke for mange ting når jeg bygger ut grensesnittene mine.
Og med det, la oss se på hvilke alternativer vi har.
Innholdsfortegnelse
Flexbox Grid
Tenk på det et øyeblikk: den største grunnen til at du begynte å bruke Bootstrap og fortsatt bruker det, er rutenettsystemet. Jada, det tok litt tid å venne seg til klassene rad, col-md-6, etc., men nå er det en annen natur å tenke på et oppsett når det gjelder rader, kolonner, forskyvninger osv.
Og hvis du er ærlig med deg selv, vil du oppdage at alt annet i Bootstrap er litt av et ork å jobbe med. Det er tonnevis av klasser å huske, enten du gjør skjemaer, navigering, knapper, tabeller eller noe annet. Hvis du er som meg, har du fortsatt ikke blitt vant til alle klassene og det de gjør, og du bruker ofte Bootstrap kun for rutenettet og skriver alle de andre CSSene selv.
Hvis ja, kan du gjøre det mye bedre med Flexbox Grid.
Flexbox Grid, som navnet antyder, er et rutenettsystem basert på CSS Flexbox eiendommer. I motsetning til CSS-teknikken er imidlertid all kompleksiteten pent abstrahert bort slik at du kun fokuserer på å plassere elementer slik du ønsker. Det beste er at alle koden og klassenavnene etterligner det du ønsker i Bootstrap 4, noe som betyr at bytte mellom disse to verktøyene krever null mental friksjon. For eksempel, her er hvordan koden for «plassen rundt» ser ut i Flexbox Grid:
<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 forminskede CSS-filen for dette rutenettet er bare 10,7 KB og sparer deg for flere hundre KB i den endelige nedlastingsstørrelsen. I disse dager er Flexbox Grid min favoritt, da jeg ikke vil kjempe mot Bootstrap for å tilpasse den fullt ut. Jeg liker å starte med vaniljeelementer og style dem selv, ved å bruke Flexbox Grid uansett hvor jeg trenger det.
Lære Flexbox her, online.
PureCSS
Ville det ikke vært fint om Bootstrap ble delt opp i moduler og du kunne importere bare modulen du trengte?
Vi vil, PureCSS har gått foran og gjort nettopp det — det er et sett med moduler som dekker forskjellige funksjonelle områder på et nettsted. Du kan velge å laste ned en eller alle, og likevel vil ikke nedlastingsstørrelsen overstige 3,7 KB!
Ja, du leste riktig.
Alle modulene når de er buntet sammen og gzippet er 3,7 KB, selv om de hver for seg utgjør mer. Nettmodulen er bare 0,8 KB, mens basemodulen er 1,0 KB. Teamet bak PureCSS sier at det ble bygget utelukkende med mobile enheter i tankene, og derfor ble hver linje med CSS nøye undersøkt for effektivitet før den ble inkludert.
Så la oss si at du bare trenger rutenett- og skjemamodulen. Vel, bare last ned disse to (sammen med Base-modulen), så er du ferdig på mindre enn 3,4 KB! Du trenger ikke å inkludere CSS fra moduler Knapper, Tabeller og Menyer hvis du ikke skal bruke dem.
PureCSS har imidlertid sine klasser, og den resulterende koden etterligner ikke Bootstrap du kanskje er veldig vant til:
<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>
Du vil legge merke til at det ikke er noe rutenett med 12 kolonner lenger. PureCSS har sitt rutenettsystem som spesifiserer hvor mye bredde en kolonne skal ta. Så, pure-u-lg-1-4 betyr at dette elementet bør ta 1/4 eller 25% av den tilgjengelige bredden på store skjermer. Bredder som multipler på 1/5 er også tilgjengelige.
Alt i alt er PureCSS et befriende og fantastisk CSS-verktøy (rammeverk?) som du kan velge mellom etter behov. Når det er sagt, kommer det med en god del buy-in og læringskurve ettersom du trenger å lære en ny (litt annerledes) måte å gjøre ting på.
PureCSS har også sine egne klasser og standard styling, så i det er det ikke så forskjellig fra Bootstrap.
Zimit
De Zimit rammeverket er en slags odd-mann-out på denne listen. Ja, det er et rammeverk for å bygge brukergrensesnitt, men det er rettet mot bestemte typer brukergrensesnitt: mockups.
Det er tider når du må utvikle front-end for å vise hvordan produktet fungerer. Den ideelle måten å gjøre dette på, ville selvfølgelig være å involvere en UI-designer/utvikler og lage mockups på et av de avanserte wireframing-verktøyene (Moqups, Blasmic, etc., kommer til tankene). Sidene ville være pikselperfekte, fargeskjemaet slankt og velvalgt, og sidene ville være åpne for deltakelse, anmeldelser, kommentarer osv.
Men det virkelige liv er ikke ideelt, og ofte er du den eneste mannen på jobben og må bruke alle hattene og få jobben gjort. På de tidspunktene vil du ha et rammeverk som:
- Lar deg kode i HTML/CSS
- Er lett
- Har en omfattende samling av grunnleggende komponenter
- Har et anstendig og konsekvent stilspråk
- Hvis mulig, ligner den «gråaktige» tonen i wireframe-design
- Er lett å lære
- Har noe CSS-forprosessor innebygd
Zimit krysser av for alle disse boksene. Den er bare 84 KB stor og har et bredt utvalg av komponenter å velge mellom. Her er noen eksempler som jeg fant veldig tiltalende, siden det tar mye tid å kode dem på egen hånd.
Tre utsikt
Brødsmule
Faner
Det er mange flere godbiter å utforske. Sjekk de ut her.
La oss se på hvordan koden ser ut. Slik vil du bruke 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» her står for «kolonne», så «c4» betyr en kolonne som spenner over fire enheter (rutenettet er 12-størrelse, akkurat som Bootstraps). Veldig lik Bootstrap, og veldig intuitivt, etter min mening.
Alt i alt er Zimit et komplett og enkelt rammeverk for å utvikle UI-prototyper som er responsive og ser bra ut raskt. Det er bedre enn Bootstrap (når det kommer til prototyping) fordi Bootstrap er en mye større nedlasting og den resulterende designen er, vel, klebrig.
HTML KickStart
I de fleste prosjektene du bygger er hastigheten avgjørende. Det største hinderet for hastighet i nettutvikling er front-end-delen, og den største «forsinkelsen» i front-end-utvikling er behovet for å kode elegante interaktive komponenter. Siden det er mange måter en komponent kan oppføre seg på, og det er mange skjermstørrelser å administrere, kan koding og administrasjon av komponenter bli et mareritt for utvikleren.
HTML KickStart tilbyr et alternativ.
Enkelt sagt; det er en samling av virkelig elegante komponenter som du bare kan slippe inn i prosjektene dine og redusere utviklingstiden drastisk. Her er noen fine komponenter jeg fant:
Fall ned
Knapper
Faner (sentrert og med ikoner)
materialisere seg
Hvis du liker Bootstrap for det faktum at den har en ferdig løsning for alle vanlige webdesignproblemer, men du er en fan av materialdesignstil, bør du prøve ut materialisere seg.
Materialize er stort sett akkurat som Bootstrap – 12-punkts rutenettsystem, forskyvninger og kjente komponenter som skjemaer, kort osv. Den har imidlertid visse godbiter som kan appellere til mange.
Push-pull
Push/pull-funksjonen til Materialize CSS lar deg omorganisere kolonner. Dette minner om den nye CSS Grid-standarden, hvor oppsettet er forskjellig fra elementrekkefølgen.
<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 legge merke til at kolonnene har byttet plass, noe som kanskje er uoppnåelig i tradisjonell Bootstrap-basert CSS.
JavaScript-godbiter
Det er ganske mange JavaScript-funksjoner og effekter som følger med Materialize. Verktøytips, Toasts (Android-lignende flyktige varsler), Parallex, Pushpin, etc., er noen av dem. En virkelig fantastisk effekt jeg likte er FeatureDiscovery, som i utgangspunktet lar deg fremheve et element på siden på en eller annen begivenhet (for eksempel knappetrykk) for å bringe brukerens oppmerksomhet til det elementet. Det er vanskelig å beskrive det med ord fullstendig, så gå over til https://materializecss.com/feature-discovery.html for å se hva jeg mener.
Alt i alt er Materialize et flott alternativ til Bootstrap eller for de som ønsker å ta i bruk et fullverdig Material CSS-rammeverk.
Konklusjon
Bootstrap er synonymt med responsiv design. Det var Bootstrap som populariserte begrepet «mobil-first design» og viste hvordan det kunne gjøres. Men mens Bootstrap får jobben gjort mesteparten av tiden, er det ikke alltid nok å få jobben gjort. Hvis du føler at Bootstrap begrenser deg og at dine behov er spesielle, vil et av alternativene som er oppført her hjelpe. 🙂