Bootstrap är allestädes närvarande, men det är inte alltid det optimala valet. Här presenterar vi några utmärkta alternativ!
Om du granskar källkoden på en slumpmässig webbsida idag, är sannolikheten stor att du stöter på Bootstrap. Vi har vant oss så vid termer som ”container-fluid”, ”row”, ”col-sm-6” osv. att det kan vara svårt att föreställa sig andra metoder för frontend-utveckling. Och när vi påbörjar ett nytt projekt, sträcker vi oss instinktivt efter Bootstrap. Trots sin popularitet är Bootstrap inte alltid det bästa valet för alla projekt eller behov.
Faktum är att för minimalistiska frontend-lösningar kan det vara onödigt att ladda hela Bootstrap CSS och JS, vilket kan leda till onödigt stor filstorlek.
Denna artikel har två mål:
- Att erbjuda alternativa, icke-Bootstrap-baserade live-lösningar.
- Att förklara varför du kan överväga dessa alternativ framför Bootstrap.
Jag anser att förklaringsdelen är viktig, eftersom många inte ens inser att de har ett problem eller att de försvårar sitt arbete genom att automatiskt välja Bootstrap. Slutligen, observera att detta inte är en attack mot Bootstrap. Jag uppskattar Bootstrap 4 och använder det när det är lämpligt. Men som en enskild utvecklare måste jag prioritera den mest effektiva lösningen. Jag är inte heller i första hand en UI-utvecklare, så jag behöver inte oroa mig för så många aspekter när jag skapar gränssnitt.
Låt oss nu utforska några av de tillgängliga alternativen.
Flexbox Grid
Tänk efter: den främsta anledningen till att du började och fortfarande använder Bootstrap är troligtvis dess gridsystem. Visst, det tog tid att vänja sig vid klasser som ”row”, ”col-md-6” osv., men nu är det en andra natur att tänka på layout i termer av rader, kolumner och förskjutningar.
Och om du är ärlig mot dig själv, inser du kanske att mycket annat i Bootstrap kan vara lite krångligt att hantera. Det finns otaliga klasser att komma ihåg, oavsett om du arbetar med formulär, navigation, knappar, tabeller eller annat. Om du är som jag, har du troligtvis inte lärt dig alla klasser och deras funktioner, och du använder ofta Bootstrap enbart för grid-systemet och skriver all annan CSS själv.
I så fall kan du få ett bättre resultat med Flexbox Grid.
Flexbox Grid är, som namnet antyder, ett gridsystem baserat på CSS Flexbox-egenskaper. Men till skillnad från ren CSS, är all komplexitet elegant abstraherad bort, så att du kan fokusera på att placera element som du önskar. Det bästa är att all kod och klassnamn liknar det du ser i Bootstrap 4, vilket gör att övergången mellan dessa två verktyg är smidig. Till exempel, så här ser koden för ”space around” 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 minifierade CSS-filen för detta gridsystem är endast 10,7 KB, vilket sparar flera hundra KB i den totala nedladdningsstorleken. Idag är Flexbox Grid min favorit eftersom jag inte vill behöva kämpa med Bootstrap för att anpassa den fullständigt. Jag föredrar att börja med vanliga element och styla dem själv, med hjälp av Flexbox Grid när det behövs.
Lär dig mer om Flexbox online här.
PureCSS
Visst vore det praktiskt om Bootstrap var uppdelat i moduler, så att du bara kunde importera den modul du behövde?
PureCSS har tagit detta till en ny nivå – det är en uppsättning moduler som täcker olika funktionella områden på en webbplats. Du kan välja att ladda ner en eller alla moduler, och den totala nedladdningsstorleken kommer ändå inte att överstiga 3,7 KB!
Ja, du läste rätt.
Alla moduler är 3,7 KB när de är sammanpackade och gzippade, trots att de individuellt kan vara större. Grid-modulen är endast 0,8 KB, medan basmodulen är 1,0 KB. Teamet bakom PureCSS säger att det är byggt med mobilanvändning i åtanke, och varje CSS-rad har granskats noggrant för att säkerställa effektivitet.
Låt oss säga att du endast behöver grid- och formulärmodulerna. Då behöver du bara ladda ner dessa två (tillsammans med basmodulen), vilket totalt blir under 3,4 KB! Du behöver inte inkludera CSS från moduler som Knappar, Tabeller och Menyer om du inte tänker använda dem.
PureCSS har dock sina egna klasser, och den resulterande koden liknar inte det Bootstrap som du kanske är van vid:
<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 ser att det inte längre finns något grid med 12 kolumner. PureCSS använder ett eget grid-system där du anger hur stor del av bredden en kolumn ska uppta. Till exempel betyder ”pure-u-lg-1-4” att elementet ska ta 1/4, eller 25%, av den tillgängliga bredden på stora skärmar. Bredder som är multiplar av 1/5 är också tillgängliga.
Sammantaget är PureCSS ett befriande och utmärkt CSS-verktyg (ramverk?) som du kan välja efter behov. Det kommer dock med en viss inlärningskurva eftersom du behöver lära dig ett nytt (och lite annorlunda) sätt att göra saker på.
PureCSS har också sina egna klasser och standardstyling, så i det avseendet skiljer det sig inte så mycket från Bootstrap.
Zimit
Zimit Framework är lite av en outsider på denna lista. Det är visserligen ett ramverk för att bygga användargränssnitt, men det är inriktat på en specifik typ av gränssnitt: mockups.
Ibland behöver du utveckla frontend-gränssnitt för att demonstrera hur en produkt fungerar. Det perfekta sättet att göra detta vore naturligtvis att involvera en UI-designer/utvecklare och skapa modeller med ett av de avancerade wireframing-verktygen (Moqups, Balsamiq etc.). Sidorna skulle vara pixelfekta, färgschemat snyggt och genomtänkt, och sidorna skulle vara öppna för kommentarer och recensioner.
Men det verkliga livet är inte idealiskt, och ofta är du den enda personen som måste axla alla roller och få jobbet gjort. I dessa situationer vill du ha ett ramverk som:
- Låter dig koda i HTML/CSS
- Är lättviktigt
- Har en omfattande samling av grundläggande komponenter
- Har ett genomtänkt och konsekvent stilspråk
- Om möjligt, liknar den ”gråaktiga” tonen i trådramsdesign
- Är lätt att lära sig
- Har en inbyggd CSS-förprocessor
Zimit uppfyller alla dessa krav. Det är endast 84 KB stort och har ett brett utbud av komponenter att välja mellan. Här är några exempel som jag tyckte var särskilt intressanta, eftersom det skulle ta mycket tid att koda dem på egen hand.
Trädvy
Brödsmula
Flikar
Det finns många fler intressanta funktioner att utforska. Kolla in dem här.
Låt oss titta på hur koden ser ut. Så här använder du gridsystemet 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” här står för ”kolumn”, så ”c4” betyder en kolumn som sträcker sig över fyra enheter (grid-systemet är 12-delat, precis som i Bootstrap). Väldigt likt Bootstrap, och väldigt intuitivt enligt mig.
Sammantaget är Zimit ett komplett och lättanvänt ramverk för att utveckla UI-prototyper som är responsiva och snabbt ser bra ut. Det är bättre än Bootstrap (när det gäller prototyper) eftersom Bootstrap är en mycket större nedladdning och den resulterande designen tenderar att se mer standardiserad ut.
HTML KickStart
I de flesta projekt du bygger är snabbhet avgörande. Det största hindret för snabbare webbutveckling är frontend-delen, och den största ”fördröjningen” i frontend-utveckling är behovet av att koda eleganta, interaktiva komponenter. Eftersom det finns många sätt som en komponent kan bete sig på, och det finns många skärmstorlekar att ta hänsyn till, kan kodning och hantering av komponenter vara en utmaning för utvecklaren.
HTML KickStart erbjuder ett alternativ.
Enkelt uttryckt: det är en samling riktigt snygga komponenter som du enkelt kan infoga i dina projekt för att minska utvecklingstiden avsevärt. Här är några komponenter som jag tyckte var särskilt användbara:
Rullgardinsmenyer
Knappar
Flikar (centrerade och med ikoner)
Materialize
Om du uppskattar Bootstrap för att det tillhandahåller en färdig lösning för alla vanliga webbdesignproblem, men samtidigt föredrar en materialdesign-stil, bör du prova Materialize.
Materialize liknar i mångt och mycket Bootstrap – det har ett 12-delat gridsystem, offsets och välbekanta komponenter som formulär, kort etc. Det har dock några guldkorn som kan locka många användare.
Push och Pull
Push/pull-funktionen i Materialize CSS låter dig ändra kolumnordningen. Detta liknar den nya CSS Grid-standarden, där layouten inte är beroende av elementordningen.
<div class="row">
<div class="col s7 push-s5"><span class="flow-text">Den här div:en är 7 kolumner bred och förskjuten 5 kolumner åt höger.</span></div>
<div class="col s5 pull-s7"><span class="flow-text">5 kolumner bred och förskjuten 7 kolumner åt vänster.</span></div>
</div>
Detta resulterar i följande:
Du ser att kolumnerna har bytt plats, något som kan vara svårt att uppnå med traditionell Bootstrap-baserad CSS.
JavaScript-funktioner
Det finns många JavaScript-funktioner och effekter som kommer med Materialize. Verktygstips, Toasts (Android-liknande meddelanden), Parallax, Pushpin med mera är några exempel. En särskilt intressant effekt är FeatureDiscovery, som låter dig framhäva ett element på sidan vid en händelse (t.ex. ett knapptryck) för att rikta användarens uppmärksamhet mot det elementet. Det är svårt att beskriva det fullt ut med ord, så besök https://materializecss.com/feature-discovery.html för att se vad jag menar.
Sammantaget är Materialize ett bra alternativ till Bootstrap, eller för de som föredrar ett fullfjädrat Material CSS-ramverk.
Slutsats
Bootstrap har blivit synonymt med responsiv design. Det var Bootstrap som populariserade konceptet ”mobil-först design” och visade hur det kan implementeras. Även om Bootstrap ofta fungerar bra, är det inte alltid tillräckligt. Om du känner att Bootstrap begränsar dig eller att dina behov är speciella, kan något av de alternativ som nämns här hjälpa dig. 🙂