CSS-ramverk

En laboration där jag testar och jämför fyra olika CSS-ramverk för att undersöka hur de fungerar och vilka möjligheter de erbjuder.

Ett CSS-ramverk innehåller färdiga lösningar för att underlätta arbetet med en webbplats utseende och layout. Det kan handla om allt från gridsystem och responsiv design till knappar, formulär och navigationsmenyer.

I den här laborationen har jag valt att arbeta med Bootstrap, Foundation, Bulma och Tailwind CSS. Målet är att få en uppfattning om deras olika arbetssätt, styrkor och svagheter.

Ramverken jag har testat

Bootstrap

Ett komponentbaserat ramverk med ett omfattande utbud av färdiga komponenter, hjälpklasser och ett flexibelt gridsystem.

Läs om Bootstrap

Foundation

Ett responsivt ramverk med flexibla layoutmöjligheter och stort utrymme för egna anpassningar.

Läs om Foundation

Bulma

Ett CSS-ramverk med färdiga komponenter och ett lättillgängligt arbetssätt som påminner om Bootstrap.

Läs om Bulma

Tailwind CSS

Ett utility-first-ramverk där designen byggs upp med små CSS-klasser och stor frihet att styra utseendet.

Läs om Tailwind

Om min utvärdering

Utvärderingarna bygger på mina första erfarenheter av ramverken och hur enkelt det har varit att använda deras färdiga komponenter och CSS-klasser.

Jag är medveten om att ramverken erbjuder betydligt fler möjligheter till anpassning, exempelvis genom Sass/SCSS. I den här laborationen har jag däremot valt att fokusera på grunderna och arbeta med ramverkens färdiga CSS-funktioner.

Bedömningarna speglar därför framför allt hur jag upplevt ramverken som ny användare, snarare än deras fulla potential.