Introduktion
Afstandsstrategi
Denne side forklarer, hvordan man implementerer alle de afstandsmetoder, der anbefales af Client-First.
Client-First afstandsstrategien skal give mere konsistens i vores projekt. Vi ønsker at skabe mindre kaos og forvirring. Vores workflow og projektkvalitet forbedres, hvis vi bruger Client-First afstandsstrategier intelligent.
Vi organiserer denne dokumentationsside i to dele:
- Del 1: Utility klasser
- Del 2: Brugerdefinerede klasser
Del 1: Utility klasser
Del 1 af Client-First afstandsstrategi handler om globale utility klasser. Vi inkluderer flere strategier for brug af utility klasser i projektet.
Forskellige projekter, use cases og implementeringer kan foretrække én strategi frem for en anden. At have flere afstandsstrategier med utility klasser giver os fleksibilitet, når vi bygger vores projekter.
Client-First utility klasseafstand giver os muligheder for implementering:
- Strategi for afstandsblok: Mulighed 1 (spacer- klasser) eller mulighed 2 (padding- klasser)
- Afstandswrapper strategi (margin- / padding- klasser)
Disse værktøjsklassesystemer er inkluderet i Client-First utility klasser.
Strategi for afstandsblokke
Mulighed 1:
spacer-[size]
Mulighed 2:
padding-bottom + padding-[size]
I Client-First er en "afstandsblok" en tom Div block med utility-klasse(r), der skaber plads mellem to søskendeelementer.
1. Tilføj en Div Block til siden med klassen—
spacer-[size]
2. Tilføj indholdselementer til siden som søskende til afstandsblokken.
3. Afstandblokken skaber mellemrum (padding) mellem elementer.
Afstandsblokke kan bruges til at skabe plads mellem alle elementer vertikalt.
Mulighed 1 eller 2?
Spacer- systemet svarer til padding-bottom + padding-[size] systemet, og de opnår begge det samme resultat.
Client-First giver dig mulighed for at vælge, hvilken implementeringsmetode der passer bedst til dit workflow.
Den primære forskel er, at spacer- klasserne bruger én klasse, mens de padding- baserede klasser bruger to klasser.
Med implementeringen med to klasser anvender vi padding-bottom klassen (retning) og tilføjer derefter vores padding-medium klasse (størrelse) ud over den. Sammen anvender de to klasser padding-bottom: 2rem på elementet.
Beslutningen om at bruge det ene eller det andet er op til dig som udvikler.
En fordel ved spacer- klassesystemet er muligheden for at tilføje responsive varianter. Dette forklares senere på siden.
Afstandswrapper strategi
padding-[direction] + padding-[size]
og
margin-[direction] + margin-[size]
I Client-First er en "afstandswrapper" en Div Block, der omslutter et underordnet element og skaber plads mellem et søskendeelement.
1. Tilføj en Div Block "afstandswrapper" til siden med to klasser —
margin/padding-[direction] + margin/padding-[size]
2. Indlejr et indholdselement i afstandswrapperen
3. Afstandswrapperen skaber mellemrum (margin eller padding) mellem sig selv og et søskendeelement.
Vi tilføjer en Div Block til siden og anvender margin-bottom klassen (retning) og tilføjer derefter vores margin-medium klasse (størrelse) ud over den. Sammen anvender de to klasser margin-bottom: 2rem på elementet.
Vi indlejrer et element i afstandswrappern for at skabe plads mellem det indlejrede element og noget andet.
Anvendelsesmuligheder for: Utility spacing generelt
1. Brug standardværdier for global afstand
Fordel: Vi holder vores afstandsværdier mere konsistente og ensartede i hele projektet.
Vi ønsker at ensrette vores hjemmesides mellemrum på tværs af sektioner og sider. Hvis vi bruger 4rem, 8rem, 12rem som vores primære afstandsværdier på tværs af projektet, vil vi gerne have, at disse værdier er ens overalt.
Jo mere vi bruger Client-First-systemet til afstandsberegning, jo mere ensartet vil vores afstandsberegning være gennem hele projektet.
Fordel: Vi har standard- og automatiske afstandsopdateringer på tværs af alle breakpoints.
En afstandsblok eller afstandswrapper implementerer automatisk ensartede spacing-justeringer for hele sitet på tværs af alle breakpoints.
Hvis vi anvender afstandsblokke og wrappers på 100 elementer i hele projektet, er det 100 færre tablet- og mobilstilarter, vi skal anvende i vores projekt.
For hvert breakpoint-niveau vil elementer med blokke og wrappers få de standardværdier for afstand, der bruges i hele projektet.
Fordel: Vi kan lave globale opdateringer af afstanden på hele sitet gennem hele projektet.
Vi kan opdatere mange spacing-værdier på tværs af projektet med én ændring af CSS-egenskabsværdien. Opdateringen påvirker alle elementer, der bruger en afstandsklasse. Hvis en kunde f.eks. siger: "Jeg vil have mindre afstand mellem alt indhold", kan denne opdatering foretages relativt hurtigt ved at justere de globale utility spacing-værdier.
2. Fordele ved workflow og skalerbarhed
Fordel: Hvis vi bruger en utility klassestrategi, kan vi reducere antallet af brugerdefinerede klasser, der bruges til margin og padding CSS-egenskaber.
Vi ønsker at reducere antallet af brugerdefinerede klasser, der er oprettet specifikt til afstand. afstandsblokke og wrappers kan hjælpe os med at skabe færre klasser til vores projekt.
Vi kan stole på de utility klasser, der allerede er skabt til afstand. Efterhånden som vi bruger værktøjssystemet mere, vil vi være mindre afhængige af at oprette brugerdefinerede klasser til afstand.
Fordel: Vi undgår at stable klasser dybt oven på et element.
Client-First er imod deep stacking i Webflow-projekter. Vi ønsker at undgå deep stacking til enhver tid. Afstandswrappere og blokke hjælper os med at undgå deep stacking af klasser på vores elementer. Læs mere om deep stacking på siden klassestrategi 2.
Fordel: Hvis de bruges korrekt, kan afstandswrappere hjælpe os med at arbejde hurtigere.
Afstandsblokke og wrappere i Client-First er til for at hjælpe os med at arbejde hurtigere og vedligeholde vores projekt bedre.
Hvis vi bruger wrappere og blokke, og det resulterer i en langsommere arbejdsgang eller problemer med projektstyringen, kan det skyldes, at vi bruger afstandswrappere forkert.
Det er ikke påkrævet eller anbefalet at bruge afstand overalt.
Det er acceptabelt at anvende CSS-egenskaberne margin og padding direkte på brugerdefinerede klasser. Der er tilfælde, hvor det er mere effektivt at anvende spacing på en brugerdefineret klasse. Vi diskuterer brugen af brugerdefinerede klasser i anden del af denne artikel.
3. Afstand mellem typografi og knapper
I dette eksempel har vi en H3, et afsnit og en knap. Vi kan skabe afstand mellem disse elementer uden at oprette en ny klasse.
Vi bruger afstandsblokke eller wrappers til at skabe plads mellem hvert tekstelement, hvilket hjælper os med at undgå at oprette brugerdefinerede klasser.
Vores typografistrategi opfordrer til, at vi bruger få eller ingen brugerdefinerede klasser på vores typografielementer. Vi vil gerne undgå at oprette nye brugerdefinerede klasser specifikt til afstand mellem typografielementer.
I stedet kan vi parre vores globale typografistrategi med vores globale afstandsstrategi for at skabe tekstindholdslayouts uden brugerdefinerede klasser.
Fordel: Undgå deep stacking af utility klasser på tekstelementer.
I Client-First ønsker vi at holde vores overskrifter og afsnitsskrifttyper fri for ikke-typografiske klasser.
Ideelt set er der ingen klasser anvendt på vores typografielementer. Det er bedst at bruge standard-tag stilen. Hvis typografien har en variation fra standarden, kan vi placere tekst- eller heading- klasser på den.
Vi ønsker at undgå margin- eller padding- Klasser direkte på tekstelementet. Vi vil hurtigt nærme os deep stacking problemer, hvis vi anvender typografi- og spacing- klasser på tekstelementer.
Med afstandsblokke og wrappers undgår vi dyb stabling.
Vi ønsker ikke at gøre dette:
Afstandsblokken løser problemet med at stable afstandsklasser på tekstelementet.
Når vores afstandsklasser er adskilt fra vores typografiklasser, kan vi håndtere dem hver for sig uden problemet med deep stacking.
4. Afstand for genanvendelige symbols og komponenter
Fordel: Vi kan skabe instansspecifikke afstande for symbols og komponenter.
Når vi ønsker at anvende afstand på symbols, skal afstanden anvendes på alle forekomster af symbolet.
Ensartet symbolafstand kan være et problem, hvis forekomster af vores symbol kræver forskellige afstandsværdier.
Ved hjælp af afstandsblokke eller wrappers kan vi have forskellig afstand for forskellige symbolforekomster.
Ingen kombi-klasse påkrævet, ingen nye klasser oprettet, ingen tilpasset CSS nødvendig. Vores afstandssystem giver os instansspecifik afstand, mens vi bruger det kerneindhold, der er gemt i symbolet.
Brugsscenarier for strategi for afstandsblokke
1. Skab plads mellem to elementer
Afstandsblokke er meget nyttige, når vi skal skabe plads mellem to elementer. De er hurtige at implementere, vi har færre indlejrede niveauer, og vores elementer er mere synlige.
2. Se underordnede elementer i Navigatoren
Når vi bruger afstandsblokke, skaber vi en klar visning i Navigator. Vi kan se alle elementer i komponenten.
Hvis vi bruger for mange afstandswrappere, kan det "skjule" for mange af vores vigtige elementer i indlejrede mapper. Afstandsblokke vil skabe mindre indlejring i Navigator.
Afstandsblokke før vores vigtige elementer mere synligt i Navigator.
3. Unik afstand for top og bund af sektioner
Når en sektions padding-top og padding-bottom skal være forskellige, og vi ønsker at bevare det globale utility klassesystem, kan vi bruge afstandsblokke.
Vi kan anvende en padding-large afstandsblok i toppen af sektionen og en padding-small afstandsblok i bunden af sektionen.
Brugsscenarier for: Afstandswrapper strategi
1. Brug med CSS Grid afstandsstrategi
Ved hjælp af CSS Grid afstandsstrategien kan vi hurtigt skabe lige meget plads mellem de underordnede elementer.
Vi kan bruge afstandswrappere til at skabe unik afstand for et element i listen. Når afstandswrappere bruges sammen med CSS Grid-strategien, kan vi hurtigt og med mindre besvær anvende tilpasset afstand.
For eksempel har et indholdselement 1rem mellem hvert underordnet element — undtagen det sidste element i listen.
Vi kan anvende margin-top margin-small som en afstandswrapper til det sidste element i listen.
afstandswrappere giver os mulighed for at bruge CSS Grid afstand uden at oprette flere brugerdefinerede klasser.
FAQ — Er tomme divs dårlige for min hjemmeside?
Vi bliver ofte spurgt om effekten af tomme divs og divs der kun består af afstand, der bruges i Client-First afstandssystmet.
- Vil søgemaskiner have svært ved at læse min hjemmeside?
- Vil jeg generere for mange elementer på websiden?
- Vil der være et problem med tilgængelighed?
- Vil mit projekt være sværere at vedligeholde?
Det korte svar er — Nej.
Så længe de tomme divs ikke har noget indhold eller tilgængelighedsattributter (som aria-label) tilføjet til dem, vil skærmlæsere udelade dem.
Søgemaskiner vil heller ikke blive forvirret af tomme divs. En tom div med en CSS-klasse er let at identificere for os mennesker og for søgemaskiner.
"Overdreven DOM-størrelse" er en almindelig fejlmeddelelse, der findes i mange web-performance-værktøjer. For eksempel Googles PageSpeed Insights. Det er meget usandsynligt, at Client-First afstandssystem er årsagen til denne fejl. De mest sandsynlige årsager er animationer i lag, Lottie-filer og indlejringer. Disse implementeringer kan generere eksponentielt flere DOM-elementer end Client-First spacing.
En webside, der er bygget med Client-First-retningslinjer, har ingen eller kun lille indflydelse på performance-advarslen "Overdreven DOM-størrelse".
Er du interesseret i at læse mere om tomme divs? Vi elskede at læse Don't Fear Empty Divs af Cory Etzkorn.
Del 2: Brugerdefinerede klasser
Der findes andre implementeringsmetoder for afstand på vores hjemmeside udover Client-First utility afstandsklasser.
Vi kan anvende CSS-egenskaberne margin og padding direkte på den brugerdefinerede klasse.
indenfor tankegangen om brug af brugerdefinerede klasser, præsenterer vi 2 afstandsstrategier:
- Brugerdefineretpåment
- CSS grid overordnede afstand
Begge strategier bruger en brugerdefineret klasse til at skabe afstand mellem elementer.
Når vi bruger brugerdefinerede klasser til afstand, skal vi have en god use case for den brugerdefinerede klasse. Færre brugerdefinerede klasser er lig med mere konsistens i afstanden.
Brugerdefineret klasse på element - strategi
"Brugerdefineret klasse på element" anvender margin- og padding-værdier direkte på det element, der skal have afstand.
For eksempel anvender vi faq_title på en overskrift, der kræver unik afstand, hvilket utility klassesystemet ikke kan opnå. En CSS-egenskab af margin-bottom: 0.75rem anvendes direkte på faq_title klassen.
Denne grafik anvender en brugerdefineret klasse og brugerdefineret afstand på elementet.
Denne strategi er den mest fleksible. Vi har total kontrol over et specifikt element på tværs af alle breakpoints. Vi skal bruge denne magt med omtanke.
Ved at overbruge denne strategi kan vi skabe for mange brugerdefinerede klasser til afstand. Det kan resultere i et uorganiseret afstandssystem og mange manuelle opdateringer af breakpoints.
CSS Grid strategi
CSS Grid afstandsstrategien anvender CSS Grid på en overordnet wrapper, som skaber plads til underordnede elementer inde i den.
Vi kan skabe vertikal og horisontal plads mellem underordnede elementer ved hjælp af CSS grid.
I stedet for at anvende mange blokke, wrappers eller brugerdefinerede klasser på elementer i en liste, kan vi bruge CSS Grid-strategien til at styre alle underordnede elementer med én controller — den overordnede wrapper.
Use cases: Brugerdefineret klasse på element
1. Styr afstanden af et specifikt element globalt
Nøgleordet er "af et specifikt element".
Når vi har tilbagevendende elementer, der skal have den samme afstandsværdi i hele projektet, kan det være bedst at bruge en brugerdefineret klasse til at styre afstanden. En brugerdefineret klasse giver os mulighed for at opdatere afstanden for dette tilbagevendende element.
Globale afstandswrappere på tilbagevendende elementer kan gøre vores arbejdsprocess langsomme og gøre det sværere at styre projektet.
Vi kan stille os selv to vigtige spørgsmål for at forstå, om vi skal bruge utility klasseafstand eller en brugerdefineret klasse til et specifikt element.
Hvor mange forekomster af [dette element] er der i projektet?
Hvis der er mange forekomster af dette specifikke element, er det et tilbagevendende element i projektet. Vi kan målrette hver forekomst ved hjælp af en brugerdefineret klasse.
Hvis der f.eks. er 25 forekomster af dette element i projektet, kan vi bruge én brugerdefineret klasse til at målrette alle 25 forekomster.
Hvordan vil vi håndtere hver enkelt forekomst af [dette element]?
Hvis vi ønsker at administrere hver forekomst af [dette tilbagevendende element] som en gruppe, vil en brugerdefineret klasse hjælpe os med at målrette den gruppe af elementer og anvende ændringer på gruppen globalt.
Eksempel på brugerdefineret klasse på formularinput
Lad os se på et eksempel på en use case med et formularinput i vores projekt. Formularinput bruges på tværs af 4 sider i projektet.
Opsætningen nedenfor viser hvert form_input adskilt af en afstandsblok. Denne strategi bruges på tværs af hele projektet.
Hvis vi ønskede at reducere afstanden mellem hvert form_input, skulle vi opdatere hver afstandsblok individuelt.
Eksemplet ovenfor er ikke ideelt, da denne ændring kan kræve en unødvendig indsats for at opdatere hver formular i projektet. Vi skal gå input for input for at opdatere værdien for afstandsblokken.
En ændring af alle formularinputs i hele projektet kan tage sekunder og kræver kun lidt arbejde med den rette opsætning.
En brugerdefineret klasse på form_input giver os mulighed for at administrere alle form_input-elementer som en samlet elementgruppe.
Dette skærmbillede viser hver form_input med margin-bottom: 1rem anvendt på det.
Hvis vi ønsker at ændre afstanden mellem hvert input, kan vi foretage en enkelt ændring i form_input klassen. Ændring af marginen vil ændre værdien for alle input i hele projektet.
Dette eksempel er ideelt, hvis vi ønsker, at alle formularinputs i projektet skal have en ensartet margin-bottom: 1rem-værdi.
Vi har fuldstændig global kontrol over afstanden til dette specifikke element. Vi kan ændre alle formularinput på denne side og i hele projektet med en enkelt ændring af CSS-egenskaben form_input margin-bottom.
2. Unikke afstandsstørrelser på tablet og mobil
Afstandsblokke og wrappers har den store fordel, at de opretholder standardafstanden på tværs af alle breakpoints. Men det er ikke sikkert, at vi ønsker standardafstand på tværs af alle breakpoints.
Nogle gange har vi elementer, der kræver unik afstand på tablet, mobil eller begge dele. I dette tilfælde vil afstandsblokke og wrappers gøre vores tilpasninger sværere.
Client-First utility klasseafstand er designet til at ensrette afstanden på tværs af alle breakpoints. Systemet tillader ikke tilpasninger på tværs af breakpoints.
Vi kan anvende afstand direkte på den brugerdefinerede klasse, hvis vi har brug for afstandstilpasninger på tværs af breakpoints. Den brugerdefinerede klasse giver os mulighed for at styre afstanden på tværs af hvert breakpoint.
3. Unik one-off afstand
Nogle gange har vi et element, der har brug for unik afstand. Det er ikke en del af en gruppe af andre elementer og har ikke nogen specifikke tilpasninger til mobil. Det er et element, der kræver en engangsafstand til engangsbrug.
For eksempel insisterer en kunde på, at padding-small er for lille, og padding-medium er for stor. De vil have noget i midten.
I stedet for at tvinge denne unikke one-off ind i utility afstandssystemet, kan vi oprette en brugerdefineret klasse til elementet og fortsætte med vores opbygning. Vi kan f.eks. oprette about_testimonial-title med margin-bottom: 2.25rem som en unik afstandsklasse.
Når vi ikke er sikre på, at vi kan integrere utility afstandssystemet i layoutet, kan vi oprette en enkeltstående afstand for dette specifikke element.
Det er vigtigt at forstå, at jo mere vi opretter individuelle klasser til afstand, jo mindre følger vi et globalt forenet afstandssystem. Dette bør ikke være en almindelig praksis for alle elementer.
Use cases: CSS Grid afstand
1. Afstand mellem underordnede elementer i en liste
Det centrale anvendelsesområde for CSS Grid er afstand mellem elementer i en liste. Når der er søskendeelementer, der har brug for den samme plads mellem hinanden, er det en effektiv måde at placere de forskellige elementer på, ved at anvende CSS Grid på en overordnet indpakning.
Eksempel på links i footer med CSS Grid
Lad os se på et eksempel med links i footeren.
Vi har en overordnet wrapper kaldet footer_links-column, som omslutter footer-links. Vi kan anvende display: grid med rækker for at skabe lige meget plads mellem alle footer-links.
Hvis vi ønsker at ændre afstanden mellem hvert footer-link, kan vi foretage en enkelt ændring i footer_links-column klassen. Hvis vi justerer rækkeafstanden, justeres afstanden mellem alle footer-links.
Dette er en fremragende strategi til en liste med elementer, der kræver afstand. En justering giver os fleksibel kontrol over afstanden mellem elementerne.
Eksempel på CSS Grid content card
CSS Grid spacing fungerer også med underordnede indholdselementer.
Vi har 'content card'-elementer indlejret i en liste. Hvert content card har elementer, der er indlejret i det. Vi kan anvende CSS Grid direkte på content card for at placere ikonet, titlen og afsnittet i det.
CSS Grid anvendes på benefits_item, og elementerne indeni påvirkes.
Vi kan justere CSS Grid-rækkeværdierne og justere alt benefits_item indhold sammen med én controller.
Denne strategi fungerer rigtig godt, hvis afstanden mellem hvert child-element er ens. I vores eksempel er afstanden mellem hvert underordnet element i benefits_item 1rem. Dette scenarie passer perfekt, da vi kan kontrollerer rækkerne i vores CSS grid.
For at tilføje et underordnet element med forskellige afstandsværdier i CSS Grid, kan vi bruge vores utility klasse afstandswrapper-metode sammen med CSS Grid-metoden.
I eksemplet nedenfor tilføjer vi en knap til vores content card. Denne knap kræver 3rem afstand under afsnittet. Det fungerer ikke med de Grid-værdier, der er anvendt på benefits_item.
Vi kan tilføje en afstandswrapper under afsnittet, som omslutter den nye knap.
Nu skaber afstandswrapperen padding-top padding-medium ekstra plads i benefits_item CSS Grid-systemet.
Afstandswrappere er fremragende til at bruge CSS Grid afstandsstrategi med fleksibilitet og variation.
Det fungerer godt til at skabe global kontrolleret indholdsafstand.
Benefits_item kan være en tilbagevendende komponent på hele websitet.
Nogle benefits_item-kort har en CTA, nogle har ikke en CTA, og nogle kan have helt nye elementer.
Vi kan holde en global og ensartet afstand mellem benefits_item med vores CSS Grid-kontroller, mens vi drager fordel af instansspecifikke elementer og afstandsvariationer.
Responsiv afstand
Skab responsive afstandsvarianter med spacer- klassesystemet.
Spacer- systemet bruger kun én klasse, så at tilføje en anden klasse for at skabe en responsiv variantkombinationsklasse er Client-First-godkendt.
Strategierne med to klasser har allerede to klasser anvendt på et element. Hvis man tilføjer en tredje, vil det begynde at skabe en lang stak af klasser (3 klasser). Endnu vigtigere er det, at det ikke er en god strategi at oprette en kombinationsklasse ud fra en stak af klasser, der sandsynligvis vil ændre sig. Vi fraråder og undgår responsive varianter af strategier med to klassers afstandsblokke og afstandswrappere.
spacer- Fleksibilitet på tablet og mobil
Brug is- kombinationsklasser til at lave tilpasninger til standard breakpoint utility afstand.
Hvis et element har brug for spacer-large, men et lille breakpoint har brug for en unik afstandsstørrelse, kan vi tilføje en kombi-klasse til spacer- klassen for at tilpasse afstanden til det lavere breakpoint. Hvis vi f.eks. kun har brug for mindre plads på mobilen, kan vi bruge spacer-large is-mobile-small.
Hvis den responsive tilpasning er fokuseret på et specifikt element, kan vi være mere specifikke med vores kombinationsklasse-navngivning, såsom spacer-large is-home-tabs. Brugen af kombinationsklassen giver os mulighed for at bevare den globale afstand på tværs af desktop og derefter lave instansspecifikke tilpasninger til mindre breakpoints.
Tips til afstand
padding-section-[size]
padding-section-[size]- er et sæt utility klasser, der hjælper os med at styre top- og bundpadding for sektioner globalt i hele projektet.
Dette er en hybrid tilgang mellem brugerdefineret klasser og utility klasser. Vi kan administrere alle vores sektionsafstande som en global utility klasse.
En ny mappe kaldet section- føjes til vores padding- utility klasse-mappe.
padding-section-small
adding-section-medium
padding-section-large
Hvis en sektions vertikale padding er tilpasset eller unik, kan vi:
- Anbefales: Bruge afstandsblokke til at skabe unik plads i toppen og bunden af sektionen. Denne metode opretholder utility afstandssystem.
- Anvend den unikke padding på det ydre sektionslag, section_[section-identifier].
Tilføj eventuelt margin på Heading-tags
Vi ønsker måske, at hvert Heading-tag skal have den samme mængde plads over og under. Vi ønsker at ensrette afstanden i vores typografisystem.
For eksempel har alle H2 i projektet margin-bottom: 2rem, og alle H3 i projektet har margin-bottom: 1,5rem.
At anvende margin på Heading-tagget er et forsøg på at ensrette afstanden over og under vores Heading-tags. Det er sådan, vi skaber globale afstandsregler for vores typografi.
Margin på Heading-tags fungerer godt, hvis vi har designkontrol over projektet. Vi kan vælge at have et meget formaliseret afstandssystem. Det er en metode til at ensrette typografien i projektet yderligere.
Hvis vi arbejder på en hjemmeside med mange variationer i overskrifter, og hvordan overskrifter bruges i designet, er dette måske ikke en god strategi.
Hvis vi fortsætter med at tilsidesætte standardværdierne for overskriftsmargen, skaber vi mere arbejde for os selv.
Hvis alle eller de fleste overskrifter skal følge den samme margin på tværs af projektet, kan dette være en effektiv strategi.
Vi har en fuld forklaring på denne typografiske afstandsmetode på siden Typografistrategi.
Flex eller grid til knapper og rækker af knapper
Brug CSS flex eller grid til at skabe enkle layouts af knapper.
Eksempel på knap med ikon
Lav en knap med tekst og et ikon. Anvend flex eller grid på knapelementet for at skabe plads mellem teksten og ikonet.
Dette er en hurtig og enkel måde at implementere en knap med flere indlejrede elementer.
Eksempel på en række med knapper
Opret horisontal afstand mellem to knapper. Anvend det horisontale afstand mellem knapperne gennem den overordnede wrapper.
Ved at bruge flex eller grid på knappernes overordnede wrapper kan vi skabe horisontal plads mellem knapperne.
At anvende margin-right direkte på knapklassen vil begrænse, hvordan vi kan bruge vores button. Vi ønsker, at vores button skal fungere i alle tilfælde, ikke kun i en række af knapper.
At anvende afstandsblokke til horisontal margin fungerer måske ikke så godt til mobiler. Mange mobildesigns kræver en specifik horisontal afstand. Afstandsblokke giver os ikke mulighed for at foretage justeringer til mobildesign.
Vi mener, at flex eller grid er ideelt til at skabe plads i en række af knapper.
Undgå at bruge utility padding til at skabe dimensioner til indre elementer.
Vi anbefaler ikke at bruge utility klasserne til at skabe padding omkring elementets indhold. Denne strategi fungerer med hensyn til CSS og kan opnå det ønskede resultat, men vi ønsker at undgå denne praksis. Det opfordrer til dyb klassestabling og konflikter med styling på mobilen.
Normalt vil padding for indre elementer have brug for specifikke størrelsestilpasninger gennem hvert breakpoint. Client-First afstandssystemet har ingen kontrol over afstandsværdier på tværs af breakpoints.
I stedet skal du anvende det indre elements padding direkte på den tilpassede klasse.
Opret en brugerdefineret klassemappe med "spacers"
Betegnelsen "spacer" kan også bruges til brugerdefinerede klasser.
Vi bruger det formelt som et utility klassesystem: (spacer-)
Vi kan også bruge den som en brugerdefineret klasse til at administrere alle brugerdefinerede unikke afstande på tværs af projektet (spacer_).
Hvis der er et tilbagevendende element, hvor afstanden skal administreres globalt, kan vi bruge spacer_[element] til at administrere den brugerdefinerede elementafstand. Denne nye spacer_-mappe er nyttig til organisering af alle brugerdefinerede elementspecifikke afstande, der skal holdes globale.
spacer_header
spacer_sticky-nav
spacer_title-primary
spacer_title-subtitle
spacer_footer
Vi kan bruge denne spacer_-mappe til hvad som helst, selv noget tilpasset som spacer_home-faq.