Ustvarite svoj sistem oblikovanja, 3. del: Barve

V tem članku si bomo ogledali, kako nastaviti barvni sistem v CSS-ju in kakšne so najboljše prakse za zagotovitev, da je sistem enostaven za uporabo in vzdrževanje.

Ta članek je del serije o sistemih oblikovanja, ki jih je navdihnila naša knjižnica spletnih komponent. Knjižnica temelji na trdnem sistemu globalnih CSS. Torej, to je, da delimo stvari, ki smo se jih naučili, da postavljajo svetovni slog naše knjižnice!

Članek serija:
- 1. del: Tipografija
- 2. del: Mreža in postavitev
- 3. del: Barve
- 4. del: Razmik
- 5. del: Ikone
- 6. del: Gumbi

Uvedli smo urejevalnik barv! Orodje za spletno oblikovanje, ki ustvarja barvne palete in teme, združljive s sistemom CodyHouse.

Barvne spremenljivke 101

Za razliko od drugih globalnih CSS je ustvarjanje barvnega sistema 10% o kodiranju in 90% o semantiki. Med delom na datoteki _colors.scss želite imeti v mislih naslednje cilje:

  1. Barvne spremenljivke si je enostavno zapomniti → Ne želite preveriti globalne datoteke, kadar koli morate izbrati barvo.
  2. Sistem mora biti enostavno posodobiti → Barve boste dodali, odstranili in preimenovali. Prepričajte se, da to ni zapleteno.
  3. Sistem mora vsebovati samo bistvene barve → to smo slišali že tolikokrat ... vendar vedno na koncu več barv, kot jih potrebujemo! Pravi ključ uspeha dizajnerskega sistema je odstranjevanje vsega, kar ni potrebno (vključno z barvami).

Semantične vs Deklarativne barve

Ko gre za nastavitev barvnih spremenljivk, obstajata dva glavna pristopa: semantična in deklarativna barva.

Semantični pristop izgleda tako:

Tu je primer deklarativnega pristopa:

Noben od njih ni napačen. Izbira tistega, ki ustreza vašim potrebam, je odvisna od toliko dejavnikov (npr. Velikost projekta, ustreznost barv blagovne znamke itd.).

Med delom na datoteki _colors.scss našega okvira, sem moral upoštevati, da jo bodo uporabniki urejali (100%). To pomeni, da sem moral deklarativni pristop najlažje uporabiti, zato sem ga moral pomešati s pomenskim pristopom, da sem dobil enostaven sistem za vzdrževanje.

Bistvena barvna paleta

Prvi korak je bil razglasitev najmanjšega števila barv, potrebnih za izdelavo spletnih komponent. Na splošno je bistvena barvna paleta sestavljena iz:

  1. Glavna / osnovna barva →, ki se uporablja za povezave, barva ozadja gumba itd. Na splošno je glavna barva s pozivom k dejanju.
  2. Barva poudarka → se uporablja za označevanje nečesa pomembnega na strani. Ne bi smela biti variacija primarne barve, ampak dopolnilna barva.
  3. Lestvica nevtralnih barv → To je na splošno lestvica odtenkov v sivih tonah, ki se uporabljajo za besedilne elemente, subtilne elemente, obrobe itd.
  4. Barve povratnih informacij → uspeh, napaka, opozorilo.

Nekatere od teh barv potrebujejo različico (temnejša / svetlejša različica), ki se pogosto uporablja za poudarjanje interaktivnosti (npr.: Lebdenje /: aktivna stanja).

V CSS to pomeni:

* opomba: za prevajanje barvnih funkcij v kodo RGBA, ki je združljiva z vsemi brskalniki, uporabljamo vtičnik postcss-color-mod-function.

Zgornji delček predstavlja paleto barv: vse barve, uporabljene v projektu.

Različice primarnih in naglasnih barv so ustvarjene z uporabo barvnih funkcij. Ta pristop je uporaben, če imate datoteko demo.html (in to počnemo v našem okviru), tako da lahko spreminjate vrednosti funkcij, dokler niste zadovoljni s pridobljenimi barvami. Odtenki (ali nevtralne) barve so ustvarjeni z uporabo chroma.js. V tem primeru uporaba funkcij ni bila idealna, ker imate na splošno dve nasprotni barvi (črno in belo) in morate ustvariti lestvico vrednosti na podlagi teh dveh barv.

Mešanici dodamo semantične barve

Ko je barvna paleta pripravljena, lahko dodamo pomenske barve. Ustvarjanje semantičnih barv ne pomeni povečanja števila barv, temveč distribucijo barv s pomočjo semantičnih referenc.

Zakaj mislim, da je to dober pristop

Najprej se ta sistem opira na dve bistveni barvi: primarno in naglasno barvo. To pomeni, da ko boste morali uporabiti spremenljivke barve, se vam ne bo težko spomniti, kaj predstavljajo te spremenljivke (tudi če ne uporabljate deklarativnih imen, kot sta „modra“ in „rdeča“).

Vaš sistem bo morda moral vključiti več barv (npr. Sekundarne barve). Še vedno se ukvarjate s samo tremi barvami. Upravljanje sistema, ki temelji na 10+ glavnih barvah, bi bilo težko, ne glede na pristop, ki ga uporabljate, zato boste morda želeli razmisliti o poenostavitvi.

Barve v sivih barvah uporabljajo drugačno poimenovanje: večja je številka na koncu spremenljivke, temnejša je barva.
Ta pristop postane primeren, ko niste prepričani, katero nevtralno barvo želite uporabiti. Če je siva-2 videti preveč subtilna, lahko poskusite sivo-3. Morda ste opazili, da manjkajo nekateri odtenki (npr. Siva-5). V našem primeru niso bile bistvene (nikoli jih nismo uporabili pri ustvarjanju spletnih komponent), zato smo jih odstranili iz barvne palete.

Semantične barve so mešanici dodane iz treh glavnih razlogov:

  1. Datoteka _colors.scss postane vir resnice, kadar koli želite spremeniti barvo. Ali menite, da bi morali biti elementi naslova besedila temnejši? Odprite datoteko _colors.scss in uredite spremenljivko naslova barvnega besedila.
  2. Če na primer določite mejo barv, vam ob naslednjem ustvarjanju obrobnega elementa ne bo treba iskati sive barve, ki jo uporabljate v drugih komponentah. Isti koncept velja za številne elemente, ne le za meje.
  3. To je kos torte za ustvarjanje in vzdrževanje različnih tem.

Snemanje

Takoj, ko bomo lahko uporabili spremenljivke CSS, ne da bi se morali zanesti na vtičnike ali polyfill, bo ustvarjanje barvnih tem zelo preprosto *! Ali to pomeni, da danes ne moremo ustvarjati teme? Ne, lahko. Imamo dve možnosti.

* v našem okviru uporabljamo vtičnik postcss-css-spremenljivke za sestavljanje spremenljivk CSS. Trenutno ne podpira posodabljanja spremenljivk v razredu CSS.

Možnost 1 je tako ali tako posodobitev spremenljivk CSS. Brskalniki, ki ne podpirajo spremenljivk, bodo prikazali "privzeto" barvno temo. Če je vsebina dostopna, to ni vprašanje.

Na primer imate privzeto temo barv → belo ozadje in črno barvo besedila ter. Temno → črno ozadje in belo barvo besedila. Nato ustvarite dve komponenti, eno s privzeto temo, drugo s temo .dark. Če obe komponenti s privzeto temo ne vplivata na uporabniško izkušnjo, lahko temo .dark obravnavate kot izboljšavo (neobvezno). V tem primeru je smiselno spremeniti spremenljivke za ustvarjanje različnih tem, tudi če niso povsod podprte.

Tako ustvarite novo temo, ki posodablja nekatere ključne spremenljivke CSS:

Všeč mi je ta rešitev, ker povzema korekcijo barv in vam omogoča, da svoje barvne teme hranite v eni datoteki. S tem lahko potencialno spremenimo stanje vsake komponente (od teme-a do teme-b) preprosto z uporabo razreda CSS.

Možnost 2 bi bila namenjena vsem elementom, katerih videz vpliva na temo. Prednost te metode je, da jo podpirajo vsi brskalniki. Vendar ga ni tako enostavno vzdrževati v primerjavi s tistim, ki v celoti temelji na spremenljivkah CSS.

Tu je primer možnosti 2 v akciji:

Zdaj veste, kako načrtujemo ravnanje z barvami v našem okviru! Če imate povratne informacije / predloge, nas obvestite v komentarju!

Upam, da ste v članku uživali! Če želite več pripomočkov za spletni dizajn, nas spremljajte tukaj na Medium ali Twitter.