Opret dit designsystem, del 4: Mellemrum

I denne artikel skal vi se på, hvordan man indstiller et afstandssystem i CSS, og hvordan man kan drage fordel af relative enheder til at håndtere lydhørhed.

Denne artikel er del af en serie om designsystemer inspireret af vores bibliotek med webkomponenter. Biblioteket er afhængig af et solidt system af CSS-globale. Så dette er os, der deler de ting, vi har lært, og indstiller den globale stil på vores bibliotek!

Artikel serie:
- Del 1: Typografi
- Del 2: Grid & Layout
- Del 3: Farver
- Del 4: Afstand
- Del 5: Ikoner
- Del 6: Knapper

Vi har lanceret Spaces Editor! Et webdesignværktøj, der giver dig mulighed for at generere en afstandskala og indstille lydhøre regler.

Indstilling af afstandssystemet vha. CSS-variabler

Trin et ved at indstille et afstandssystem er at oprette en skala med (afstand) værdier. For at oprette en skala med ikke-lineære værdier har du brug for 1) en enhed eller en basisværdi og 2) en multiplikator. Vi har allerede talt om at oprette en modulskala i vores artikel om webtypografi.

En grundlæggende tilgang til afstand ville se sådan ud:

Uddraget ovenfor beskriver et afstandssystem baseret på Fibonacci-sekvensen (hver værdi findes ved at tilføje de to numre før det).

Bemærk: Første gang jeg læste om at anvende Fibonacci-sekvensen på en skala med afstandsværdier var i denne fremragende artikel af The Scenery.

Ulempen med en grundlæggende tilgang er, at ... det er grundlæggende. Hvis vi ønsker at ændre en enkelt afstand, skal vi lave regnestykket og opdatere alle andre værdier manuelt.

Lad os prøve at få kontrol over systemet. Vi kan introducere en variabel til at definere enhedsnummeret og bruge calc () -funktionen til at opnå afstanden.

Vi kommer nærmere! I eksemplet ovenfor har vi defineret hver afstandsværdi ved at multiplicere enhedsnummeret med en multiplikator. Bemærk, at Fibonacci-sekvensen stadig anvendes til multiplikatorerne. Hvis vi nu ønsker at opdatere hele systemet, kan vi redigere enhedsværdien.

Lad os derefter slippe af med den absolutte enhed og erstatte den med em-enheden. For at gøre det kan vi udskifte 16px med 1em:

Hvad der ligner en lille finjustering, ændrer faktisk meget! Em-enheden er en relativ enhed lig med den aktuelle skriftstørrelse. I de fleste browsere er standardskriftstørrelsen (før CSS-styling anvendes) 16 pixels. Derfor kan vi antage 1em = 16px. Hvis du redigerer fontstørrelsen på et element, er 1em dog ikke længere 16px (for dette element), men det er lig med den nye fontstørrelse. Hvad der ser ud som en mangel på kontrol, er en kraftig reaktionsgenvej. Lad mig vise dig hvorfor.

Hvis du har fulgt denne serie om designsystemer, ved du, at vi har oprettet et typografisystem, hvor alle skrifttypestørrelser er sammenflettet og opnået ved at multiplicere en variabel i tekstbase-størrelse (lig med 1 em) med et forhold. Det betyder, at variablen tekst-base-størrelse er controlleren til hele typen system. Hvis du øger tekstbasisstørrelsen ved en bestemt medieforespørgsel, ændres alle tekststørrelsesvariabler i overensstemmelse hermed.

Ved at opdatere kun en variabel får du denne:

Ikke bare det! Da afstandsenheden er lig med 1 em, og alle andre afstandsværdier er multiplikatorer for enhedens værdi, påvirker vi også afstanden, når vi opdaterer variablen tekst-base-størrelse.

Se, hvordan denne metode påvirker typografi og afstand på samme tid:

Vi opdaterer stadig en enkelt variabel (tekst-base-størrelse). Der er ikke behov for yderligere medieforespørgsler indtil videre! Alt hvad du skal gøre for at drage fordel af denne kraftfulde tilgang til lydhørhed er at bruge afstandsvariablerne til at indstille polstringer og marginer på et komponentniveau:

Hvad hvis du vil opdatere alle afstandsværdier på en gang uden at skulle ændre variablen tekst-base-størrelse? Bare opdater rum-enhedens variabel:

Det er sandt, at ved at omfatte en metode som denne mister du noget af din "visuelle" kontrol, men det er til fordel for enkelhed og vedligeholdelighed. Det er rigtigt, at du ikke vil være i stand til at indstille pixel-perfekte værdier, men du vil håndtere lydhørhed til et helt nyt niveau: det meste af arbejdet indstiller en robust skala af værdier for afstand og typografi. Derefter kan du redigere 2–3 variabler ved specifikke medieforespørgsler for at skabe en kaskadeeffekt, i modsætning til at finpusse alle komponenter og underelementer.

Sådan indstilles en standardpolstring til alle komponenter

Der vil være tilfælde, hvor du har brug for forskellige komponenter for at have den samme polstring. At indstille en variabel til standardpolstring af komponenterne er et trick, jeg har lært efter en masse tid brugt på at lede efter en polstringværdi skjult et sted i mine CSS-filer.

For at være klar henviser jeg til de blokerende, “containere-lignende” komponenter.

Her er et eksempel:

Vender tilbage til vores _spaces.scss-fil, lad os inkludere komponentpolstervariablen:

Dermed opretter du en anden "dev genvej": Hvis du har brug for at anvende polstring på en komponent, behøver du ikke at kontrollere, hvilken afstandsvariabel der er brugt i andre lignende tilfælde. Brug bare komponent-polstringvariablen.

Margin utility klasser

Selvom det er sikkert at inkludere polstring direkte i din komponent CSS, kan margener medføre layoutproblemer. Endnu en gang henviser vi til hovedkomponenterne, de blokke, der definerer dit hovedlayout (ikke en