För att ta mig igenom Front-End Framework jungeln valde jag att rikta in mig på tre så kallade CSS Frameworks. Dessa frameworks är designade för att utvecklare snabbt ska kunna få till en snygg grund design för det projekt man skapat. Vissa går sedan vidare med egen skriven kod, medan andra forsätter använda ramverket i slutprodukten.

Antalet CSS Frameworks är över 40 stycken och det kan vara svårt att hitta det ramverk som passar sin kodstil bäst.

Men för att göra saken lättare för mig själv valde jag att kika på tre av de större ramverken på marknaden: Bootstrap, Foundation och Semantic UI.

Gemensamt för de tre är att de är responsiva, är licensierade med MIT och använder sig av CSS preprocessorer.

Foundation använder sig av SASS, Semantic UI och Bootstrap av LESS, dock har senaste versionen av Bootstrap gjort det möjligt att köra SASS.

Dags att ta fram macheten och grotta ner oss i det första ramverket jag listade, Bootstrap:

Bootstrap

bootstrap

Bootstrap, tidigare känt under namnen Twitter Bootstrap och Twitter Blueprint är som de gamla namnen förtäljer skapat av två utvecklare hos Twitter som heter Mark Otto och Jacob Thornton.

De två med ett litet gäng utvecklare ville med Bootstrap skapa ett designmönster för UI och minska problemen med att använda diverse bibliotek och element på ett inkonsekvent sätt.

Bootstrap är modulärt och du kan välja vilka komponenter du som utvecklare vill använda genom att justera i bootstrap.less för att lägga till och ta bort delar av koden.

På github har Bootstrap stjärnats över 87,000 gånger och är det mest använda CSS ramverket på marknaden just nu. Tack vare sin ställning finns det mycket information om Bootstrap att hitta och de är så stora att w3schools har en egen sektion om ramverket.

Komma igång med Bootstrap

Att komma igång med att bygga hemsidor med hjälp av Bootstrap går väldigt fort.

Det finns flera sätt att hämta hem filerna, men det första alternativet är att hämta hem en zip fil med den kompilerade och minifierade versionen av Bootstrap som du lägger in i din utvecklingsmiljö på datorn.

Bas template för att få med filerna i ditt projekts html fil finns efter nedladdnings alternativen och under den visar de olika exempel på element att strukturera upp sidan med.

En viktig sak att tänka på är att Bootstrap använder sig av en 12 kolumns grid som är baserad på procent.

Det finns en sak som kan vara negativ för vissa utvecklare med Bootstrap och det är att koden du skriver saknar tack vare grid classerna och andra class namn inte ser särskilt semantiska ut.

T.ex. så kan något som i vanliga fall hetat .primary visas som .col-md-8 och .secondary som .col-md-4. det gör att koden avhumaniseras lite och blir mer styrd.

Foundation

foundation

Det andra CSS Frameworket jag kikade på var Foundation som skapades av interaktionsdesignsföretaget ZURB, som bl.a. jobbat med Facebook, eBay och Walmart.

Projektet skapades för att snabba upp och förbättra front-end utvecklingen.

Foundation har många likheter med Bootstrap och är ett ramverk som är modulärt, responsivt (mobile first) och använder sig av preprocessorn SASS för att välja funktioner i det projekt du bygger.

Ramverket är med sina över 21,000 stjärningar det näst största ramverket på marknaden och är mer semantiskt än Bootstrap.

Komma igång med Foundation

Foundations nedladningssida ger flera olika val att börja med: Complete, Essential och Custom.

Custom ger dig möjlighet att innan du laddar hem filerna välja vad du vill använda. Denna variant finns också i Bootstrap, men du måste gå till en ny sida på hemsidan för att välja det alternativet.

När du laddat hem filerna och lagt de i en projekt mapp så får du i jämförelse med Bootstrap en index.html fil från start där du kan ändra utseendet på sidan.

De har flera templates för html koden som ligger i navigeringen på foundation sidan.

Semantic UI

semanticui

Semantic UI är en av många utmanare till de två stora som jag skrivit om här ovan. Projektet skapades av Front end utvecklaren och UI arkitekten Jack Lukic som är huvud författare på github.

En stor skillnad mot Bootstrap är att Semantic UI använder mer semantiska classer och liknande. Man vill undvika att utvecklaren måste lära sig namn- och programeringskonventioner för en viss utvecklare. Man vill använda vanliga termer för element istället för at kodifiera och använda kort hand.

Komma igång med Semantic UI

Av de tre ramverken jag testat är Semantic UI den absolut svåraste att få igång för de se inte är vana vid användandet av kommandotolken för att installera saker.

Först måste du installera NodeJS. Denna installation är olika beroende på om du använder linux, mac eller pc.

Som pc användare fick jag ladda hem en msi fil på nodeJS hemsida som jag installerade.

Sedan kommer flera bitar där det för de som inte kört CMD eller liknande behöver googla eller läsa på semantic uis guide vad man ska göra.

Tack vare lite vana med git så blev det inte så jobbigt för mig personligen, men jag kan förstå att många tycker Bootstrap och Foundation är smidigare på iaf den här biten.

När du väl fått Semantic UI installerat skapar du din index.html fil och lägger in scripts som aktiverar css/js koden ungefär som i Bootstrap.

Det finns exempel kod att kolla på i dokumentationen under fliken Layouts där man har lite olika användbara html sidor att ta inspiration från.

Vilken skulle jag välja?

Jag har jobbat väldigt mycket med Bootstrap under senaste tiden och har bra koll på hur Bootstrap kod ska skrivas, men jag tycker mer om semantiskt uppbygda hemsidor där man använder riktigt språk när man skapar classerna. Tycker inte att kod som skrivs typ: col-md-3, btn-xs etc. är snyggt och om man inte har koll på förkortningarna så blir det svårare att sätta sig in i ramverket fort.

Att använda sig av något av de större ramverken underlättar under utvecklingsfasen och sparar tid som man kan lägga på andra saker. Men det är viktigt att komma ihåg att du målar inte Mona Lisa utan att först förstå anatomi (html), perspektiv, skuggning (css) och annat.

Källor: Bootstrap, ZURB Foundation, Semantic UI, Learn Semantic UI, Wikipedia, Sitepoint, w3schools