Bootstrap er overalt, men det er ikke altid det rigtige værktøj til jobbet. Her er nogle gode alternativer!
Hvis du tjekker kildekoden til et websteds frontend tilfældigt i disse dage, er der en chance for, at du finder Bootstrap nedenunder. Vi er alle blevet så vant til begreber som container-fluid, row, col-sm-6 osv., at det er svært at forestille sig, at nogen anden form for frontend-udvikling overhovedet er mulig. Og så når vi skal bygge det næste projekt, rækker vi ubevidst efter Bootstrap. Når det er sagt, gør populariteten ikke Bootstrap til at passe godt til alle projekter og behov.
Faktisk, for virkelig magre frontends, indlæser alle Bootstrap CSS og JS kan forårsage større oppustethed.
Denne artikel har to formål:
Jeg tror, at forklaringsdelen er virkelig vigtig, fordi folk i de fleste tilfælde ikke engang indser, at de har et problem, eller at de gør deres arbejde sværere ved at hente Bootstrap. Bemærk endelig, at dette ikke er et anti-Bootstrap-indlæg på nogen måde. Jeg elsker Bootstrap 4 og bruger den, når jeg kan. Men altså, jeg er en individuel udvikler, der skal tænke på at bruge den mest populære løsning; Jeg er heller ikke en UI-udvikler i sig selv, så jeg bekymrer mig ikke om for mange ting, når jeg bygger mine front-ends.
Og med det, lad os se på, hvilke alternativer vi har.
Indholdsfortegnelse
Flexbox Grid
Tænk over det et øjeblik: Den største grund til, at du begyndte at bruge Bootstrap og stadig bruger det, er dets gittersystem. Selvfølgelig tog det lidt at vænne sig til klasserne række, col-md-6 osv., men nu er det en anden natur at tænke på et layout i form af rækker, kolonner, forskydninger osv.
Og hvis du er ærlig over for dig selv, vil du opdage, at alt andet i Bootstrap er lidt af en opgave at arbejde med. Der er tonsvis af klasser at huske, uanset om du laver formularer, navigation, knapper, tabeller eller noget andet. Hvis du er ligesom mig, har du stadig ikke vænnet dig til alle klasserne og hvad de laver, og du bruger ofte kun Bootstrap til gitteret og skriver alle de andre CSS’er selv.
Hvis ja, kan du gøre det meget bedre med Flexbox Grid.
Flexbox Grid, som navnet antyder, er et gittersystem baseret på CSS Flexbox ejendomme. Men i modsætning til CSS-teknikken er al kompleksiteten flot abstraheret væk, så du kun fokuserer på at placere elementer, som du ønsker. Det bedste er, at al kode og klassenavne efterligner, hvad du ønsker i Bootstrap 4, hvilket betyder, at skift mellem disse to værktøjer kræver nul mental friktion. For eksempel, her er, hvordan koden for “rummet omkring” ser ud 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 minificerede CSS-fil til dette gittersystem er kun 10,7 KB, hvilket sparer dig for flere hundrede KB i den endelige downloadstørrelse. I disse dage er Flexbox Grid min favorit, da jeg ikke ønsker at bekæmpe Bootstrap for at tilpasse det fuldt ud. Jeg kan godt lide at starte med vaniljeelementer og style dem selv ved at bruge Flexbox Grid, hvor jeg har brug for det.
Lære Flexbox her, online.
PureCSS
Ville det ikke være rart, hvis Bootstrap var opdelt i moduler, og du kun kunne importere det modul, du havde brug for?
Godt, PureCSS er gået videre og gjort netop det — det er et sæt moduler, der dækker forskellige funktionelle områder på et websted. Du kan vælge at downloade en eller alle, og alligevel vil downloadstørrelsen ikke overstige 3,7 KB!
Ja, du læste rigtigt.
Alle moduler, når de er bundtet sammen og gzippet er 3,7 KB, selvom de hver for sig udgør mere. Gittermodulet er kun 0,8 KB, mens basismodulet er 1,0 KB. Holdet bag PureCSS siger, at det blev bygget udelukkende med mobile enheder i tankerne, og derfor blev hver linje af CSS nøje undersøgt for effektivitet, før den blev inkluderet.
Så lad os sige, at du kun har brug for gitter- og formularmodulet. Nå, bare download disse to (sammen med basismodulet), og du er færdig på mindre end 3,4 KB! Det er ikke nødvendigt at inkludere CSS fra modulerne Knapper, Tabeller og Menuer, hvis du ikke skal bruge dem.
PureCSS har dog sine klasser, og den resulterende kode efterligner ikke den Bootstrap, du måske er meget 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 bemærke, at der ikke længere er et gitter med 12 kolonner. PureCSS har sit gittersystem, der specificerer, hvor meget bredde en kolonne skal have. Så pure-u-lg-1-4 betyder, at dette element skal tage 1/4 eller 25% af den tilgængelige bredde på store skærme. Bredder som multipla af 1/5 er også tilgængelige.
Alt i alt er PureCSS et befriende og fantastisk CSS-værktøj (framework?), som du kan vælge og vrage imellem efter behov. Når det er sagt, kommer det med en god del buy-in og læringskurve, da du skal lære en ny (lidt anderledes) måde at gøre tingene på.
PureCSS har også sine egne klasser og standardstyling, så i det er det ikke så forskelligt fra Bootstrap.
Zimit
Det Zimit Framework er en slags ulige-mand-out på denne liste. Ja, det er en ramme til at bygge brugergrænseflader, men den er rettet mod bestemte typer brugergrænseflader: mockups.
Der er tidspunkter, hvor du skal udvikle front-end for at vise produktets funktion. Den ideelle måde at gøre dette på ville selvfølgelig være at få en UI-designer/udvikler involveret og skabe modellerne på et af de avancerede wireframing-værktøjer (Moqups, Blasmic, osv., kommer til at tænke på). Siderne ville være pixel-perfekte, farveskemaet slankt og velvalgt, og siderne ville være åbne for deltagelse, anmeldelser, kommentarer mv.
Men det virkelige liv er ikke ideelt, og ofte er du den eneste mand på jobbet og skal have alle hattene på og få arbejdet gjort. På de tidspunkter ønsker du en ramme, der:
- Giver dig mulighed for at kode i HTML/CSS
- Er letvægts
- Har en omfattende samling af grundlæggende komponenter
- Har et anstændigt og konsekvent stilsprog
- Hvis det er muligt, ligner den “grålige” tone i wireframe-designet
- Er let at lære
- Har en eller anden CSS-forprocessor indbygget
Zimit markerer alle disse felter. Den er kun 84 KB i størrelse og har en lang række komponenter at vælge imellem. Her er nogle eksempler, som jeg fandt virkelig tiltalende, da det tager meget tid at kode dem på egen hånd.
Træ udsigt
Brødkrumme
Faner
Der er mange flere lækkerier at udforske. Tjek dem ud her.
Lad os se på, hvordan koden ser ud. Sådan vil du bruge gittersystemet 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” betyder en kolonne, der spænder over fire enheder (gitteret er 12-størrelse, ligesom Bootstraps). Meget lig Bootstrap, og meget intuitiv, efter min mening.
Alt i alt er Zimit en komplet og nem ramme til at udvikle UI-prototyper, der er responsive og hurtigt ser godt ud. Det er bedre end Bootstrap (når det kommer til prototyping), fordi Bootstrap er en meget større download, og det resulterende design er, ja, klæbrigt.
HTML KickStart
I de fleste af de projekter, du bygger, er hastigheden afgørende. Den største hindring for at fremskynde webudvikling er frontend-delen, og den største “forsinkelse” i frontend-udvikling er behovet for at kode elegante interaktive komponenter. Da der er mange måder, hvorpå en komponent kan opføre sig, og der er mange skærmstørrelser at administrere, kan kodning og styring af komponenter blive et mareridt for udvikleren.
HTML KickStart tilbyder et alternativ.
Sagt enkelt; det er en samling af virkelig slanke komponenter, som du bare kan droppe ind i dine projekter og reducere udviklingstiden drastisk. Her er nogle gode komponenter, jeg fandt:
Dropdown
Knapper
Faner (centreret og med ikoner)
Materialisere
Hvis du kan lide Bootstrap for det faktum, at det har en færdiglavet løsning til alle almindelige webdesignproblemer, men du er fan af Materiale design stil, bør du prøve det Materialisere.
Materialize er for det meste ligesom Bootstrap – 12-punkts gittersystem, offsets og velkendte komponenter som formularer, kort osv. Det har dog visse godbidder, der kan appellere til mange.
Skub træk
Push/pull-funktionen i Materialize CSS giver dig mulighed for at omarrangere kolonner. Dette minder om den nye CSS Grid-standard, hvor layoutet er anderledes end elementrækkefø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 bemærke, at kolonnerne har skiftet plads, hvilket måske er uopnåeligt i traditionel Bootstrap-baseret CSS.
JavaScript godbidder
Der er en del JavaScript-funktioner og effekter, der leveres med Materialize. Værktøjstip, Toasts (Android-lignende flygtige notifikationer), Parallex, Pushpin osv., er nogle af dem. En virkelig fantastisk effekt, jeg kunne lide, er FeatureDiscovery, som dybest set giver dig mulighed for at fremhæve et element på siden på en eller anden begivenhed (f.eks. knaptryk) for at bringe brugerens opmærksomhed på det element. Det er svært at beskrive det med ord fuldt ud, så gå over til https://materializecss.com/feature-discovery.html for at se, hvad jeg mener.
Alt i alt er Materialize et godt alternativ til Bootstrap eller for dem, der ønsker at vedtage et fuldt udstyret Material CSS-framework.
Konklusion
Bootstrap er synonymt med responsivt design. Det var Bootstrap, der populariserede udtrykket “mobil-first design” og viste, hvordan det kunne gøres. Men selvom Bootstrap får arbejdet gjort det meste af tiden, er det ikke altid nok at få arbejdet gjort. Hvis du føler, at Bootstrap begrænser dig, og at dine behov er specielle, vil en af mulighederne, der er anført her, hjælpe. 🙂