Hvad er kernestruktur?
Client-First's kernestruktur består af en række klasser og principper, der danner en solid HTML-base omkring vores sideindhold.
Små sider, store sider, begynder sider og avancerede sider kan alle bruge den samme struktur.
Brugere af Client-First vil hurtigt kunne genkende den grundlæggende struktur på en side bygget med Client-First. Hvis personer ikke er bekendt med Client-First, vil vores brugervenlige klassenavne hjælpe dem med at forstå, hvad hvert lag i strukturen betyder og gør.
Vi kan tænke på vores kernestruktur som "lag" af Div Blocks, der omgiver vores sideindhold. Hvert lag har en specifik funktion, der hjælper os med at opbygge en webside.
Forklaring af hver klasse i kernestrukturen
I alt består vores kernestruktur af 6 forskellige klasser.
page-wrapper
Yderste forælder (parent) til alle elementer på siden. Denne Div Block omslutter hvert element på siden.
Stilarter:
Stilarter for page-wrapper er valgfrie. Stilarter kan tilføjes efter behov. Dog bør dette element ikke styles alt for meget.
Primære anvendelser:
- Hurtig 'kopier til udklipsholder' mulighed for alle elementer på siden. Vi kan derefter 'indsætte' hele siden på en anden side.
- Vi har en global klasse til hele webstedet tilgængelig, hvis vi har brug for at anvende en stil til hele siden. For eksempel at anvende overflow: hidden for at forhindre at horisontal scroll. Advarsel: Mens anvendelse af overflow: hidden stopper alle horisontal scroll problemer på siden, forhindrer det også CSS sticky i at fungere på alle indlejrede elementer.
- For at undgå at anvende klasser og unikke stilarter direkte på <body> HTML-tagget. I Client-First begrænser vi stilene til body-tagget til typografi og baggrundsfarveegenskaber. Vi kan anvende brugerdefinerede stilarter på page-wrapper, der omslutter hele siden. Dette holder vores styles på body-tagget begrænset til typografi og baggrundsfarve.
main-wrapper
Hovedindholdet på siden. Brug et <main> HTML-tag, der omslutter alt eller det meste af vores webstedsindholdssektioner.
VIGTIGT: Menuen (nav) og footer skal ikke være inden i dette <main> tag
Stilarter:
Stilarter for main-wrapper er valgfrie. Stilarter kan tilføjes efter behov.
Primære anvendelser:
- Accessibility best practice. Dette lag af vores kernestruktur hjælper skærmlæsere og søgemaskiner med at forstå, hvor vores sides "main" indhold er.
section_[section-identifier]
Formålet med section klassen er at forbedre vores arbejdsproces i Webflow Designer. Denne funktion hjælper med at organisere vores oversigt i Navigator-vinduet og giver os mulighed for at navigere hurtigt rundt i Designer canvasen.
Denne Div Block omslutter en hel sektion af indhold. Det anbefales at indstille HTML-tagget for dette element til <section>. Dette gøres i indstillingspanelet for elementet section_[section-identifier].
Bemærk, at dette tag vil være i en anden mappe end indholdet inden i det. Baseret på navngivningen af section_[section-identifier], er alle sektionsklasser placeret inde i mappen section_.
Stilarter:
Hvis det er muligt, bør vi undgå at anvende stilarter på section_[section-identifier]. Dog kan vi tilføje stilarter, hvis vi ønsker det.
Kontroller globale stilarter for sektioner:
Anvend en global tilføjelsesklasse som f.eks. section-style-dark til klassen section_[section-identifier] for at opretholde globale CSS-egenskaber på tværs af alle sektioner. Hver section_-klasse er en brugerdefineret klasse. Vi ønsker ikke at gentage de samme CSS-egenskaber for hver sektion. Hvis vi f.eks. har en "mørk sektion", kan vi anvende vores color: white og background-color: black-klasser på section-style-dark, og denne klasse kan fungere som en global tilføjelse til vores brugerdefinerede section_-klasse.
Primære anvendelser:
- Identificering af en sektion på en side fra Navigator-panelet. Målet er at skabe en form for sitemap for vores side. Dette er en UX beslutning i Webfow Designer.
- Når vi klikker på hver sektions-wrapper inde i Navigator-panelet, vil siden automatisk rulle ned til den tilsvarende sektion.
- Vi finder det sværere at introducere vores kunder til deres Webflow uden et visuelt 'sitemap' over siden. Denne navngivning af sektioner giver vores kunder et klart overblik over sidens indhold.
- 'Anker-rulningen' i Navigator-panelet forbedrer vores arbejdsproces som udviklere og hjælper os med at arbejde hurtigere.
Eksempel:
En hjemmeside kan have sektioner som header, om os, hvordan det fungerer, udtalelser og kontakt. Vi kan navngive vores sektioner med beskrivende titler for at forstå, hvad der er på siden.
padding-global
Global horisontal afstand. Denne klasse definerer venstre og højre padding af indholdet på en side.
Vi ønsker ikke at bruge denne klasse til at tilføje plads til indholdselementer. For eksempel ønsker vi ikke at bruge denne klasse til at style paddingen af et indholdselement i en liste.
Stilarter:
padding-left og padding-right er de eneste CSS-stilarter på klassen padding-global. Vi ønsker ikke at tilføje andre CSS-stil-egenskaber til denne klasse.
Primære anvendelser:
- Ensartet horizontal padding-left og padding-right
- Global styring af det universelle venstre og højre padding på hele webstedet
Standardimplementering
Der er fleksibilitet i, hvordan vi kan bruge padding-global. Den anbefalede struktur for padding-global er følgende:
- main-wrapper
- section-[section-identifier]
- padding-global
- container-large
...(f.eks. komponenter, elementer osv.)
Fleksibilitet:
Der er fleksibilitet i, hvor vi kan placere padding-global.
Ved at have padding-global som et lag for sig selv, kan vi styre hjemmesidens horisontale afstand, uafhængigt af andre lag.
Ved at adskille padding kan vi tilføje padding-global:
- Som et overordnet element for container-large
- Som en underordnet element til container-large
- Eller begge dele sammen
Hver mulighed kan resultere i et forskelligt visuelt layout.
Hvis vi sætter padding CSS-værdier på vores container-large klasse, vil vi altid have samme indrykningsstil på siderne, når vi bruger en container. Men det er ikke altid det, vi ønsker. Ved at adskille padding fra max-width kan vi bruge dem hver for sig, og det giver os mere frihed til at tilpasse vores design.
container-[size]
Et samlet globalt container-system til indholdet på siden. Alt, eller det meste af sidens indhold kan placeres inden i container-klassen.
Stilarter:
- margin-left og margin-right sat til auto for at centrere Div Block'en på siden.
- width: 100% for at sikre, at vi altid udnytter 100% af den tilgængelige plads.
- max-width værdi til at begrænse indholdet til en bestemt bredde. Client-First inkluderer tre forskellige containerstørrelser — small, medium og large. Vi kan ændre disse værdier, tilføje nye værdier eller fjerne værdier.
Primære anvendelser:
- Centrere indholdet på siden.
- Fastsætte og opretholde ensartede max-width værdier på tværs af projektet.
Afhængigt af vores projekt kan vi oprette 2, 3 eller 4 forskellige containerklasser.
Client-First leveres med tre forskellige containerstørrelser af max-width - small, medium og large. Vi kan ændre disse værdier, tilføje nye værdier eller fjerne værdier baseret på vores projekt.
padding-section-[size]
Et samlet globalt system til vertikal afstand for sektioner. Skaber indrykning øverst og nederst i en sektion.
Stilarter:
- padding-top og padding-bottom til at skabe vertikal afstand for en sektion.
Primære anvendelser:
- Opretholde ensartet afstand mellem sektioner i projektet.
- Opdater alle top- og bund paddings (afstand) på tværs af alle sektioner globalt i projektet.
Vi kan oprette 2, 3 eller 4 forskellige sektionsstørrelser i vores projekt.
I Client-First findes der tre varianter af vertikal afstand mellem sektioner — small, medium og large. Vi kan ændre disse værdier, tilføje nye værdier eller fjerne værdier baseret på vores projekt.
Hvis vi har en unik sektionsindrykning, kan vi anvende unikke stilarter på sektionens section_[section-identifier] klasse.