Introduktion
Det klonbare Client-First projekt indeholder Utility klasser og stilarter, der hjælper os med at starte ethvert Webflow-projekt.
Disse klasser er ikke specifikke for noget website, design, stil eller layout. Utility klasser administrerer vigtige CSS-egenskaber, der bruges på mange sider, sektioner eller elementer.
Nogle Utility klasser giver os mulighed for at foretage kraftfulde globale ændringer af elementer i hele buildet. For eksempel en klasse, der anvender universel horisontal padding.
Nogle klasser er til for at forbedre arbejdsprocessen. For eksempel en klasse, der anvender display: none.
Det er vigtigt at vide, at alle inkluderede utility styles i Client-First er valgfrie. Hvis buildet kræver, at vi organiserer spacing anderledes eller bruger en unik struktur til den ydre sidestruktur, kan vi gøre det. Vi synes, at de fleste projekter fungerer rigtig godt med utility klasserne i Client-First.
De vigtigste utility systemer
Tre primære globale utility klasse systemer følger med Client-First — kernestruktur, typografi og spacing.
Vi har identificeret disse som vores mest essentielle globale utility klasser, når vi bygger i Webflow. Hvert globalt utility klasse system har en dedikeret strategiside, der forklarer, hvordan vi bruger det.
Struktur
Defineret og fleksibel kernestruktur, som vi kan bruge på alle eller de fleste sider.
Global horisontal padding
Global horpadding manages the left and right padding of a page's content.
- padding-global
Container størrelse
Globale max width værdier, der fungerer som max-width containere til indhold.
- container-large
- container-medium
- container-small
Lær mere on kernestruktur på siden Kernestrukturstrategi.
Padding - sektioner
Padding på sektioner administrerer et globalt vertikalt spacing system for sektioner.
- padding-section-small
- padding-section-medium
- padding-section-large
Typografi
Client-First indeholder et globalt utility system til overskrifter, typografistørrelse, farve og tilpasninger.
HTML tags
Vi bruger altid HTML-tagget til at definere standard stilarter for overskrifter.
- body
- H1
- H2
- H3
- H4
- H5
- H6
Skift af overskriftsstil
Skift standard stil for overskrifter.
Brug klassepræfikset heading-style- på H1, H2, H3 eller et hvilket som helst andet stykke tekst for at ændre teksten til en bestemt H-overskriftsstørrelse. Hvis vi f.eks. har en H2, der skal styles som en H3, kan vi bruge H2 til SEO-formål og anvende heading-style-h3 på elementet.
- heading-style-h1
- heading-style-h2
- heading-style-h3
- heading-style-h4
- heading-style-h5
- heading-style-h6
Tekststørrelse
Brug klassepræfikset text-size- på et tekstelement for at ændre tekstens størrelse.
- text-size-large
- text-size-medium
- text-size-regular
- text-size-small
- text-size-tiny
Tekstformatering
Brug klassepræfikset text-style- på et tekstelement for at ændre tekstens stil.
- text-style-allcaps
- text-style-italic
- text-style-link
- text-style-muted
- text-style-nowrap
- text-style-quote
- text-style-strikethrough
- text-style-2lines
- text-style-3lines
Tekstvægt
Brug klassepræfikset text-weight- på et tekstelement for at ændre tekstens vægt.
- text-weight-xbold
- text-weight-bold
- text-weight-semibold
- text-weight-normal
- text-weight-light
Tekstposition
Brug klassepræfikset text-align- på et tekstelement for at ændre justeringen af teksten.
- text-align-left
- text-align-center
- text-align-right
Tekstfarve
Brug klassepræfikset text-color- på et tekstelement for at ændre tekstens farve.
- text-color-white
- text-color-black
- text-color-grey
Knapper
Brug klassepræfikset button- til at bruge en knapstil.
- button
- button is-secondary
- button is-text
Lær mere on kernestruktur på siden Typografistrategi.
Afstand / Spacing
Spacing system, der styrervertikal og horisontal afstand globalt på vores hjemmeside.
For at lære mere om margin- og padding-klasser, se siden afstandsstrategi.
Margin retning
- margin-top
- margin-bottom
- margin-left
- margin-right
- margin-horizontal
- margin-vertical
Margin størrelse
- margin-0 0rem
- margin-tiny 0.125rem
- margin-xxsmall 0.25rem
- margin-xsmall 0.5rem
- margin-small 1rem
- margin-medium 2rem
- margin-large 3rem
- margin-xlarge 4rem
- margin-xxlarge 5rem
- margin-huge 6rem
- margin-xhuge 8rem
- margin-xxhuge 12rem
- margin-custom1 1.5rem
- margin-custom2 2.5rem
- margin-custom3 3.5rem
Sådan fungerer det:
Padding retning
- padding-top
- padding-bottom
- padding-left
- padding-right
- padding-horizontal
- padding-vertical
Padding størrelse
- padding-0 0rem
- padding-tiny 0.125rem
- padding-xxsmall 0.25rem
- padding-xsmall 0.5rem
- padding-small 1rem
- padding-medium 2rem
- padding-large 3rem
- padding-xlarge 4rem
- padding-xxlarge 5rem
- padding-huge 6rem
- padding-xhuge 8rem
- padding-xxhuge 12rem
- padding-custom1 1.5rem
- padding-custom2 2.5rem
- padding-custom3 3.5rem
Sådan fungerer det:
Fjern al afstand / spacing
Sætter al margin og padding til 0. Nyttigt til at fjerne den oprindelige afstand mellem Webflow-komponenter.
- spacing-clean
Lær mere on afstand og spacing på siden Afstandsstrategi.
Nyttige utility systemer
Utility klasser, som vi gerne vil bruge i de fleste af vores projekter for at bygge hurtigere.
Responsive hide
Vis og skjul elementer efter skærmstørrelse.
- hide - skjul på alle enheder
- hide-tablet - skjul fra tablet opløsning
- hide-mobile-landscape - skjul fra mobile landscape opløsning
- hide-mobile-portrait - skjul fra mobile portrait opløsning
Display inline flex
Anvend CSS-egenskaben display: inline-flex, som ikke er en understøttet CSS-egenskab i Webflow.
- display-inlineflex - Indstiller display: inline-flex at på desktop breakpoint.
Anvendelse: Brug af CSS-egenskaben display: flex er normalt vigtig i vores projekt. Men display: flex får som standard elementer til at optage 100% af pladsen. Det gør det svært at bruge flexbox til knapper. display: inline-flex gør det muligt for elementer at opføre sig som inline, samtidig med at flex-funktionerne bevares inde i dem.
Max width
Tilføj max-width til ethvert element på siden.
Brug container- klasser til det primære ydre indholds max-bredde. Brug max-width- klasser til at bestemme max-bredden på elementer indlejret i container-.
- max-width-xxlarge 80rem
- max-width-xlarge 64rem
- max-width-large 48rem
- max-width-medium 32rem
- max-width-small 20rem
- max-width-xsmall 16rem
- max-width-xxsmall 12rem
Max width full
Indstiller max-width: none.
- max-width-full - Indstiller max-width: none
- max-width-full-tablet - Indstiller max-width: none på tablet
- max-width-full-mobile-landscape - Indstiller max-width: none på mobile landscape
- max-width-full-mobile-portrait - Indstiller max-width: none på mobile portrait
Ikonstørrelser
Indstiller en højde eller højde og bredde på ikonerne. icon 1x1 indstiller både bredde- og højdeværdier. Nyttig til sociale ikoner, firmalogoer, footer-assets osv.
- icon-height-small
- icon-height-medium
- icon-height-large
- icon-1x1-small
- icon-1x1-medium
- icon-1x1-large
Baggrundsfarver
Baggrundsfarver hjælper med at anvende en tilbagevendende background-color CSS-egenskab på elementer i vores projekt.
- background-color-grey
- background-color-black
- background-color-white
Nyttige utilities til at bygge med
Mere avancerede anvendelser. Ikke nødvendigt at bruge.
- z-index-1 - indstiller z-index: 1
- z-index-2 - indstiller z-index: 2
- align-center - indstiller margin-left og margin-right til auto, centrerer et element i dets overordnede div.
- div-square - skaber og opretholder en 1:1-dimension af en div. CSS-magi.
- layer - indstiller position: absolute med 0% på alle sider. Tilføj denne klasse til en div for at få den til at udvide sig til hele størrelsen af det overordnede element. Sørg for, at den overordnede div har en position der er sat til andet end static.
- pointer-events-off - indstiller pointer-events: none, som forhindrer al klik- og hover-interaktion med et element.
- pointer-events-on - indstiller pointer-events: auto, som muliggør al klik- og hover-interaktion med et element.
- overflow-hidden - indstiller overflow: hidden
- overflow-scroll - indstiller overflow: scroll
- overflow-auto - indstiller overflow: auto
Global indlejring / embed
Client-First leveres med en embed-block som et "symbol", som indeholder vores globale CSS-stilarter, der gælder for hele sitet. Dette embed-block "symbol" skal være på alle sider i projektet.
Brugerdefinerede CSS-stilarter implementeres bedst gennem den indbyggede embed-block — ikke som brugerdefineret kode i Site Settings eller Page Settings.
Stilarter føjes til et embed element, så vi kan se CSS inde i vores Designer
Muligheden for at se vores CSS inde i Designer-lærredet er den primære grund til, at vi bruger en embed-block i stedet for Site Settings.
Når koden er i Site Settings, kan vi kun se CSS'en på det publicerede site.
Når CSS-stilarterne ligger i en embed inde i vores Designer, kan vi se dem visuelt, mens vi arbejder i vores Designer. I de fleste tilfælde foretrækkes det at se tilpassede CSS-stilarter direkte i Designer-lærredet.
Utility klasser af CSS-egenskaber, der ikke understøttes i Designer.
Vi kan tilføje utility klasser til stilarter, der ikke understøttes i Webflow.
For eksempel ved at tilføje pointer-events-none, som tilføjer pointer-events: none. Den eneste måde at tilføje ikke-understøttede CSS-egenskaber til Webflow, og se disse egenskaber visuelt i Designer, er at tilføje dem til en embed-block.
Opdater et par af Webflows standardstilarter.
Vi har flere stilarter inde i symbolet, som overskriver standard Webflow-stilarter, som vi helst ikke vil have i vores projekt.
Bygget til justeringer og opdateringer
Client-First utility stilene og de globale embed-block stile kan ændres baseret på vores projekt.
Det klonbare starterprojekt indeholder kommentarer til hver stil inde i embeddet. Hvis du er usikker på, hvad den tilpassede CSS gør, skal du lade den stå og ikke slette den. Hver linje i den globale indlejring er der af en grund og er sandsynligvis gavnlig for projektet.
Lær mere om den globale indlejring.
Siden Global indlejring forklarer hver CSS-stump i indlejringen. Forstå, hvad de enkelte snippets bruges til, og hvorfor de er en del af Client-First.