Jeg byggede samme portfolio i Bootstrap, Tailwind CSS og Bulma med samme indhold, design og funktioner. Bagefter sammenlignede jeg dem i en vægtet matrix for at finde ud af, hvilket framework jeg ville vælge til hvilken slags projekt.
Hvor let rammer hvert framework et bestemt design?
Designet kom fra min egen portfolio: farverne, fontene Anton og DM Sans og et breakpoint ved 860 px. Alle tre versioner har sticky header med burgermenu, hero med portræt, projektkort, "Om mig" og en kontakt-footer.
For at gøre sammenligningen fair brugte jeg samme setup til alle tre: Vite som dev-server og build, npm til pakker og ét Git-repository med en mappe pr. framework. Tailwind og Bulma blev bygget i hver sin branch og merget ind i main med pull requests. Hver version ligger på sit eget subdomæne.
02
Det gjorde jeg
Hvert framework blev tilpasset til mit design på sin egen måde.
Bootstrap
Sass-variabler
Farver, font, breakpoints og containerbredde sat med Sass-variabler før import. Resten i egen SCSS med Bootstraps mixins, og burgermenuen bruger Bootstraps collapse.
Tailwind CSS
@theme og @apply
Egne farver, fonte og breakpoint i @theme. Gentagne mønstre som chips, knapper og projektkort samlet med @apply i @layer components.
Bulma
@use … with
Farver, font og navbar-breakpoint sat med @use "bulma/sass" with (…). Variabler, der ikke kunne sættes sådan, blev overskrevet i SCSS.
03
Resultatet
Bootstrap til fart, Tailwind til kontrol.
Jeg gav hvert framework 1–5 point på seks kriterier, vægtet efter hvad der betyder mest i et rigtigt projekt: tilpasning til eget design, læringskurve, overskuelighed, CSS-størrelse, færdige komponenter og moderne værktøjer.
Bootstrap
84
Tailwind
77
Bulma
61
Bootstrap var hurtigst at komme i gang med og har færdig JavaScript. Tailwind ramte designet mest præcist og gav langt den mindste CSS: ca. 15 kB mod 226 kB for Bootstrap og 684 kB for Bulma.
Det tager jeg med: Til en prototype eller et internt værktøj med kort tidsfrist vælger jeg Bootstrap. Når designet skal være helt mit eget, og siden skal være hurtig, vælger jeg Tailwind.
Se alle tre
Samme indhold og design, tre forskellige frameworks.
Dev-projekt