Innhold
- 01. Sett alle fargene dine i en stilguide
- 02. Bruk en fil bare for farger
- 03. Nevn fargevariablene dine
- 04. Bruk Sass-kart for farger
- 05. Bruk Sass for opasitet, lyshet og mørke
- 06. Bruk de tilpassede palettene i utviklerverktøy
- 07. Prøv Pigment for Atom
Blant de mange problemene frontend-utviklere støter på under opprettelse av nettsteder, er styring av farger helt mot slutten av listen. Likevel, hvis du vil ha et rent og konsistent nettstedoppsett, er god fargestyring viktig.
Ikke bare vil dette hindre nettstedet ditt i å se ut som en regnbue, men det betyr også at du ikke vil ende opp med at flere nyanser av samme farge vises (noe som har skjedd med meg ganske mange ganger). Denne artikkelen vil gå gjennom noen av de beste tipsene og verktøyene jeg bruker regelmessig for å håndtere farger på mine nettbaserte prosjekter.
01. Sett alle fargene dine i en stilguide
Første ting først, før du oppretter et nettsted, bør du ha en grunnleggende designstilguide eller fargepalett som inneholder alle fargene du planlegger å bruke. Dette betyr ikke at du ikke kan legge til farger på nettstedet mens du utvikler det, men det vil hjelpe deg med å holde rede på farger du allerede har, slik at de ikke blir gjentatt med litt forskjellige nyanser.
Med unntak av svart, grått og hvitt, er det best å ha ikke mer enn fem forskjellige farger på nettstedet ditt. Dette er selvfølgelig en generell regel, og det kan være noen unntak. Trenger du mer veiledning? Ta en titt på artikkelen vår om hvordan du velger den perfekte fargepaletten for nettstedet ditt.
02. Bruk en fil bare for farger
En av fordelene med å bruke CSS-forprosessorer som Sass, er muligheten til å skille stiler i mange forskjellige filer og kombinere dem for å sende CSS til en fil. Med dette i bakhodet tror jeg det er best å bruke en fil til hovedfargene på nettstedet ditt, samt alle varianter av dem. Dette gjør det ikke bare lettere å finne fargevariabler, men kan også være en vanlig påminnelse om hva og hvor mange farger som brukes.
03. Nevn fargevariablene dine
Det er best å gi hovedfargene på nettstedets variabelnavn som tilsvarer fargene de faktisk er, eller hvordan de ser ut, (også med tilpasset navneområde, hvis du er så tilbøyelig).
Så det gule for et McDonald's-nettsted vil ha variabelnavnet $ mc-gul. HTML-fargenavn som AliceBlue og DeepPink (og de andre 140 fargene) krever ikke tilpassede variabelnavn, siden de allerede er enkle å huske. Hvis du bruker et bibliotek for farger som allerede inneholder variabelnavn (for eksempel Color me Sass), kan du gjøre den tilpassede variabelen lik biblioteksvariabelen, så $ mc-gul = $ gulGull.
04. Bruk Sass-kart for farger
Dette tipset er valgfritt, ettersom det er avhengig av måten du skriver CSS på. Sass-kart gjør det lettere å tilordne klassenavn til forskjellige farger og deres relevante CSS-egenskap - veldig lik looping i de fleste programmeringsspråk.
Hvis du for eksempel vil ha en bakgrunnsfargeklasse for alle fargene som brukes på nettstedet ditt, er dette den beste og reneste måten å gjøre det på:
$ tema-farger: (korall: $ farge-korall, oransje: $ farge-oransje, gul: $ farge-gul, grønn: $ farge-grønn, blågrønn: $ farge-blågrønn, blå: $ farge-blå, lilla: $ farge-lilla, grå: $ farge-grå, svart: $ farge-svart); @each $ tema-farge, $ farge i $ tema-farger {.bg - # {$ tema-farge} {bakgrunnsfarge: $ farge; }. # {$ tema-farge} {farge: $ farge; }}
Denne metoden er spesielt nyttig for de som skriver Atomic CSS.
05. Bruk Sass for opasitet, lyshet og mørke
For små variasjoner i lyshet, mørke eller opasitet i de viktigste nettstedfargene, i stedet for å spesifisere en annen streng med HEX-verdier, er det best å bruke funksjonene som er innebygd i Sass, sammen med din egendefinerte fargevariabel. For bruk av opasitet rgba, for lyshet og mørke bruk deres respektive funksjoner.
Jeg er fullstendig klar over at Sass også inneholder funksjoner for å blande farger samt justere fargetone og metning. Du er mer enn velkommen til å bruke disse, men jeg har ennå ikke funnet en grunn til dem på prosjektene mine. Selvfølgelig anbefaler jeg at du gir dine fargevariasjoner tilpassede variabler for å gjøre det enkelt å huske dem.
$ cool_purple: bland ($ rød, $ blå, 50%); kropp {bakgrunnsfarge: $ cool_purple; } kropp {bakgrunnsfarge: desaturate ($ amberDull, 14%); } kropp {bakgrunnsfarge: mettet ($ greenSea, 39%); }
06. Bruk de tilpassede palettene i utviklerverktøy
Chrome DevTools leveres med et flott pipetteverktøy for å plukke farger. For å eksperimentere med farger på bakgrunn, rammer, tekst og så videre har jeg funnet det utrolig nyttig å plassere hovedfargene fra temaet mitt i en DevTools tilpasset fargepalett, som gjør at du kan oppdatere fargene dine med et klikk på en knapp.
07. Prøv Pigment for Atom
Sist men ikke minst er denne fantastiske pakken for Atom. Pigmenter fremhever ganske enkelt en fargestreng, hex eller annet, med den faktiske fargen den representerer. Dette høres veldig grunnleggende ut, men Pigment blir veldig nyttig når det brukes sammen med Sass.
Pluggen fremhever også Sass fargevariabler med sin respektive farge, uansett hvor den er plassert i koden, selv i forskjellige filer. Det endrer også farger umiddelbart basert på opasiteten, eller hvilken som helst Sass-funksjon som brukes på den.
Jeg kan ikke begynne å beskrive hvor nyttig det er å få øyeblikkelig visuell tilbakemelding om fargeforandringer som blir gjort i koden. Hvis du ignorerer alle mine andre fargetips og bare gjør dette, vil jeg vurdere denne artikkelen som en suksess.
