Beer CSS bygger Material Design med bara HTML-klasser
- Klasserna heter det du redan tänker
- Beer CSS väger runt 90 kB mot Bootstraps 230 kB
- När Beer CSS är rätt val
- Du behöver bara två rader i `` för att komma igång
- FAQ
- Måste jag kunna JavaScript för att använda Beer CSS?
- Är Beer CSS gratis?
- Kan jag använda Beer CSS tillsammans med React eller Vue?
- Ser en Beer CSS-sida bra ut på både mobil och dator?
Beer CSS är ett litet CSS-ramverk som låter dig bygga gränssnitt i Googles Material Design 3-stil utan att skriva egen CSS. Du sätter klasser på dina HTML-element, som `button`, `field` eller `row` och får färdiga komponenter som redan följer Materials designregler. Ingen konfiguration krävs för att komma igång och grundpaketet är avsevärt mindre än vad Bootstrap eller Tailwind drar in i ett projekt.
Namnet är ett skämt. Ramverket marknadsför sig som ”Material Design på nolltid” och de flesta som testar det märker snabbt att den enkla klass-syntaxen faktiskt håller vad den lovar för mindre projekt.
Klasserna heter det du redan tänker
Det som skiljer Beer CSS från de flesta andra ramverk är hur läsbara klassnamnen är. En knapp får klassen `button`. Ett textfält får `field`. En rad blir `row`, en kolumn blir en `col`. Vill du ha en knapp med kantlinje lägger du till `border` och en cirkelrund knapp får `circle`. Det är precis det som händer när ett ramverk bygger sitt API kring vanliga ord i stället för förkortningar.
Jämför med Tailwind, där du staplar `flex items-center justify-between px-4 py-2 rounded-lg` för att bygga samma sak. Tailwind ger dig full kontroll över varje pixel men priset är att din HTML fylls med tiotals verktygsklasser per element. Beer CSS går motsatt väg, färre och större klasser som redan bestämt hur komponenten ska se ut. Du byter kontroll mot hastighet.
Material Design 3 ligger inbyggt. Färgsystemet, rundade hörn, skuggor och de mjuka övergångarna följer Googles specifikation. Det betyder att en app byggd med Beer CSS ser hemma på en Android-telefon direkt, utan att du behöver läsa in Material-specifikationen själv.
Beer CSS väger runt 90 kB mot Bootstraps 230 kB
Valet mellan de tre handlar mindre om vilket som är ”bäst” och mer om vad du bygger. Tabellen visar var skillnaderna faktiskt märks.
| Egenskap | Beer CSS | Bootstrap | Tailwind CSS |
|---|---|---|---|
| Designspråk | Material Design 3 | Eget (Bootstrap-look) | Inget, du bygger själv |
| Storlek (minifierad, ca) | Runt 90 kB CSS+JS | ~230 kB CSS+JS | Beror på build, ofta <20 kB |
| Syntax | Enkla ordklasser (`button`, `field`) | Klasser (`btn btn-primary`) | Verktygsklasser (`px-4 py-2`) |
| Byggsteg krävs | Nej | Nej | Ja (för optimal storlek) |
| Inbyggt tema | Ljust/mörkt, färgbytardynamik | Ja, med SASS-variabler | Nej, konfigureras |
| Lämpar sig för | Snabba appliknande UI | Traditionella webbsidor | Egen designidentitet |
Storlekssiffrorna är ungefärliga och beror på vilken version och vilka delar du laddar. Poängen är riktningen, Beer CSS ligger mellan Bootstraps tyngre paket och Tailwinds byggberoende leverans.
Tailwind kan bli minst av alla tre efter en produktionsbuild som rensar oanvända klasser men det kräver att du sätter upp en byggkedja. Beer CSS fungerar direkt från en `
Källor
- Googles specifikation m3.material.io