ACSS (Automatic.css) for begyndere: kom godt i gang

Automatic.css — i daglig tale ACSS — er det CSS-framework jeg griber til på stort set hvert eneste nye Bricks-projekt. Det løser et helt konkret problem: i stedet for at opfinde dit eget spacing-, farve- og typografi-system forfra hver gang, får du et gennemtænkt, variabel-baseret fundament, der skalerer flydende fra mobil til desktop. Denne guide er til dig, der lige er begyndt med ACSS og gerne vil forstå hvad du laver, ikke bare hvilke knapper du skal trykke på.

Hvad er ACSS — og hvad er det ikke?

ACSS er et utility- og variabel-framework til WordPress, bygget til at spille sammen med buildere som Bricks Builder og Gutenberg. Det giver dig to ting:

Et globalt design-system styret af CSS-variabler: farver, skriftstørrelser, afstande, breakpoints og meget mere — sat ét sted og brugt overalt.
Et bibliotek af utility-classes som .text-l, .padding-xl eller .gap-m, der lader dig style hurtigt og konsistent uden at skrive ny CSS hver gang.

ACSS er ikke en page builder, og det er ikke et tema. Det er laget imellem — systemet der gør, at dit site hænger visuelt sammen. Vil du have det fulde billede af, hvordan builderen fungerer, så læs først Bricks Builder: Sådan kommer du i gang.

Hvorfor bruge et framework i stedet for bare at skrive CSS?

Det korte svar: konsistens og fart. Når jeg bygger uden et system, ender jeg efter 15 sider med en margin-bottom på 23px ét sted, 25px et andet og 1.5rem et tredje. Ingen kan se forskel, men sitet føles subtilt rodet, og det er umuligt at vedligeholde.

Med ACSS arbejder jeg i stedet med et fast skala-trin — s, m, l, xl og så videre — der altid trækker fra de samme variabler. Resultatet:

Visuel rytme. Afstande og størrelser følger en harmonisk skala i stedet for tilfældige tal.
Responsivt uden media queries. ACSS bruger clamp() under motorhjelmen, så typografi og spacing skalerer flydende mellem dine breakpoints.
Ét sted at rette. Skal hele sitet have lidt mere luft? Justér én variabel, ikke 200 elementer.

Den vigtigste indstilling: din root font size og skala

Det første jeg gør i ACSS-dashboardet er at sætte typografi-fundamentet. ACSS bygger sin skala oven på en root font size og en type scale (forholdstallet mellem trinene). Et par tommelfingerregler:

Lad root font size følge browserens standard (16px) medmindre du har en god grund til andet — det er bedst for tilgængelighed.
Vælg en moderat type scale (typisk mellem 1.2 og 1.33). For høj en skala giver kæmpe overskrifter, der ser voldsomme ud på mobil.
Sæt dine min- og max-viewport så clamp() ved hvornår skaleringen skal starte og stoppe.

Når det sidder, genererer ACSS automatisk hele din heading- og tekst-skala. Du behøver sjældent at sætte en pixelstørrelse på en overskrift igen — du bruger bare .text-xl eller lader heading-tagget gøre arbejdet.

Farver og brand-variabler

ACSS bygger sit farvesystem op om nogle få brand-variabler — typisk primary, secondary, accent, base og shade. For hver farve genererer frameworket automatisk lysere og mørkere varianter (fx primary-light, primary-dark, primary-trans-20).

Min anbefaling til begyndere:

Sæt dine 2-3 brandfarver først og rør ikke ved de afledte varianter — de er der, når du får brug for dem.
Brug farve-utility-classes (.text-primary, .bg-base) frem for at hardcode hex-værdier på elementer. Skifter kunden brandfarve, retter du ét felt.
Hold kontrasten i orden. Tjek altid tekst mod baggrund — god kontrast er både et tilgængeligheds- og et SEO-signal.

Spacing: dit bedste værktøj mod rodede layouts

Hvis du kun tager én ting med fra ACSS, så lad det være spacing-systemet. I stedet for vilkårlige pixelværdier bruger du trin som .padding-section-m, .gap-l eller .margin-bottom-s. Alle trækker fra den samme variabel-skala.

Sådan bruger jeg det i praksis:

Sektioner får padding-section-trin til lodret luft — så alle sektioner ånder ens.
Indhold inde i sektioner styres med gap på containere frem for margins på de enkelte børn. Det giver renere, mere forudsigeligt layout.
Knapper og kort får konsistent indvendig padding via utility-classes, så de matcher på tværs af sitet.

En typisk begynder-arbejdsgang

Når jeg sætter et nyt Bricks + ACSS-site op, er rækkefølgen næsten altid den samme:

Aktivér ACSS og forbind det til Bricks.
Sæt brandfarver, root font size og type scale i ACSS-dashboardet.
Definér evt. et par egne variabler til ting frameworket ikke dækker.
Byg din første sektion udelukkende med utility-classes og se hvor langt du kommer uden custom CSS.
Først når en utility ikke findes, skriver du en egen class — og overvejer, om den burde være global.

Den disciplin — at nå efter en utility før du skriver CSS — er hele pointen. Det er også det, der gør, at den næste udvikler kan overtage sitet uden at skulle afkode dine personlige vaner.

Almindelige begynderfejl med ACSS

At ignorere systemet og style direkte på elementet alligevel. Så betaler du for frameworket uden at få gevinsten.
At overskrive ACSS-variabler tilfældigt i stedet for at justere dem centralt i dashboardet.
For aggressiv type scale, så overskrifter sprænger layoutet på små skærme.
At glemme at teste på mobil. ACSS skalerer flydende, men du skal stadig se det på en lille skærm, før du er færdig.

Ofte stillede spørgsmål

Kræver ACSS at jeg kan kode CSS? Du kommer langt uden, fordi utility-classes dækker det meste. Men jo bedre du forstår CSS (især clamp(), variabler og box-modellen), jo mere får du ud af frameworket.

Virker ACSS kun med Bricks? Nej. ACSS fungerer også med Gutenberg og andre miljøer, men kombinationen Bricks + ACSS er den jeg bruger mest, fordi de to spiller særligt godt sammen.

Koster ACSS noget? Ja, ACSS sælges som en licens (typisk årligt pr. antal sites). Tjek de aktuelle priser på automaticcss.com.

Gør ACSS mit site langsommere? Nej, tværtimod — frameworket er bygget letvægts og kan tree-shake unødvendig CSS. Et veldrevet ACSS-site rammer fint grønne Core Web Vitals.

Næste skridt

ACSS er en af de investeringer, der betaler sig tilbage fra det første rigtige projekt: du bygger hurtigere, og sitet bliver til at vedligeholde. Start småt — sæt farver, typografi og spacing op, og byg din første sektion udelukkende med utility-classes.

Skal du have sat et professionelt Bricks + ACSS-fundament rigtigt op fra start — eller have en erfaren udvikler til at bygge selve sitet — så kan jeg hjælpe med din Bricks-build.