UXS - User Experience Sverige

Blueprint CSS är ett design-ramverk, eller kanske ska man säga ett stilmalls-bibliotek som hjälper utvecklare att snabbt bygga flexibla css-designade webbplatser utan att slå knut på sig. Ofta när jag ska bygga en prototyp, eller behöver ha en webbsida snabbt färdig och jag vill att saker och ting ska funka rent presentationsmässigt hos alla som kan tänkas titta på det, oberoende av browser och operativsystem, så brukar jag använda mig av Blueprint CSS.

Det finns en hel del CSS-ramverk där ute förutom Blueprint CSS, vi kommer täcka alla senare i en djupdykning här på webbigt.se bland alla olika ramverk som försöker bevisa sin absoluta överlägsenhet över andra ramverk. Här ska vi fokusera på Blueprint CSS och vad som gör det ramverket bra, samt vilka negativa effekter det har på din webblösning.

Out-of-the-Box

När du har laddat ner Blueprint, antingen från deras webbplats eller senaste versionen från GitHub, i skrivande stund är Blueprint i version 0.9, (så för er som jobbar på Ericsson eller annan organisation som inte använder kod med lägre versionsnummer än 2.1 kan sluta läsa nu), så kan du snabbt kika på deras exempelsida som är bra att kika på för att få lite insikt i hur ramverket är uppbyggt rent filosofiskt. Grabbarna (Joshua Clayton och crew) bakom Blueprint CSS påstår att de erbjuder detta ut-ur-lådan:

• En rutnätverk som är lätt att hantera
• En satt fungerande typografi
• CSS reset
• print-stilmall
• bygg-script för att bygga egna css:er av källkoden
• liten kodbas med god överblick, ingen bloat
• Ett IE-css för att fixa små prylar för de som bryr sig om de äldre versionerna av IE

Standard så inkluderas Blueprint via 3 filer, screen.css, print.css och ie.css. Men du kan välja att använda delar ur biblioteket som är uppdelat i följande filer:

• forms.css
• grid.css
• ie.css
• print.css
• reset.css
• typography.css

Detta gör det enkelt att integrera in Blueprint CSS i en redan befintlig webbplats, ofta kan man välja bort ett eller flera av delarna, kanske är det gridden man vill åt och köra på egen typografi och ibland tvärtom. Förutom detta så är Blueprint byggt på ett sådant sätt att det är väldigt lätt att utöka och förändra.

Moduler och tillägg

Blueprint är byggt för tillägg och plugins, när du laddar ner finns det med några stycken väldigt användbara. Ett plugin för knappar, ett för att lägga till ikoner på utgående länkar för att visa vad för typ av länkar det är, ett plugin som förhöjer den typografiska upplevelsen och sist ett tillägg som spegelvänder Blueprint CSS för sidor som läser höger-till-vänster. Det finns även andra tillägg att ladda ned om man söker på Blueprint CSS plugins på Google.

Fördelar

Den första klara fördelen med Blueprint CSS är givetvis att du kan få upp en snygg design med komplicerad grid på under 30 minuter. Typografin är snygg, formulären ser bra ut och du vet att det funkar i alla browsers.

En annan fördel är att det är enkelt att välja ut de delar du anser passa i din design, kanske vill du bara använda forms.css och inget annat, detta är inget hinder med Blueprint CSS.

Det är enkelt att överrida de inställningar som görs i de olika delarna av Blueprint CSS, importerar Blueprint CSS by-the-book och importera sen din specifika stilmall och bestäm vilka delar du vill överrida där för att fortfarande åtnjuta hjälp från Blueprint CSS, men samtidigt vara unik med din egen design.

Nackdelar

Ut ur lådan är Blueprint bra, men det är inte helt semantiskt korrekt att lägga till klasser som span-5, last och liknande i sin markup, men kan man leva med det så tror jag man kan ha nytta av Blueprint CSS.

Slutsats

Blueprint CSS är ett gediget ramverk för dig som vill minska tiden du skriver CSS. Framför allt tror jag att ramverket är att rekommendera när man skall prototypa något fort och vill att det ska se bra ut, trots att man bara har en halvtimme på sig. Ska man använda det på större webbplatser så måste man nog kombinera de delar man känner är mest passande med sina egna CSS:er för design. Gör man det smart så kan man ju hålla den CSS-massa man behöver underhålla själv till ett minimum och låta Blueprint CSS göra det grova jobbet.