Creați-vă sistemul de proiectare, partea a 3-a: Culori

În acest articol, vom analiza cum să setați un sistem color în CSS și care sunt cele mai bune practici pentru a vă asigura că sistemul este ușor de utilizat și întreținut.

Acest articol face parte dintr-o serie de sisteme de design inspirate din biblioteca noastră de componente web. Biblioteca se bazează pe un sistem solid de globale CSS. Așadar, noi împărtășim lucrurile despre care am învățat să stabilim stilul global al bibliotecii noastre!

Seria articolelor:
- Partea 1: Tipografie
- Partea 2: Grilă și dispunere
- Partea 3: Culori
- Partea 4: Spațiere
- Partea 5: Icoane
- Partea 6: Butoane

Am lansat Editorul de culori! Un instrument de design web care generează palete de culori și teme compatibile cu CodyHouse Framework.

Variabile de culoare 101

Spre deosebire de alte globuri CSS, crearea unui sistem de culori este de 10% despre codificare și 90% de semantică. În timp ce lucrați la fișierul dvs. _colors.scss, doriți să țineți cont de următoarele obiective:

  1. Variabilele de culoare trebuie să fie ușor de reținut → Nu doriți să verificați fișierul global oricând trebuie să alegeți o culoare.
  2. Sistemul trebuie să fie ușor de actualizat → Veți adăuga, elimina și redenumi culori. Asigurați-vă că a face acest lucru nu este complicat.
  3. Sistemul ar trebui să includă doar culorile esențiale → l-am auzit de atâtea ori ... totuși ajungem întotdeauna cu mai multe culori decât ne trebuie! Cheia de succes reală a unui sistem de proiectare este eliminarea a tot ceea ce nu este necesar (culorile incluse).

Culorile semantice vs declarative

Când vine vorba de setarea variabilelor de culoare, există două abordări principale: culorile semantice și cele declarative.

Abordarea semantică arată astfel:

În timp ce iată un exemplu de abordare declarativă:

Niciunul dintre ei nu greșește. Alegerea celui care răspunde nevoilor dvs. depinde de atât de mulți factori (de exemplu, dimensiunea proiectului, relevanța culorilor de brand etc.).

În timp ce lucram la fișierul _colors.scss din cadrul nostru, a trebuit să iau în calcul utilizatorii care urmau să-l editeze (100%). Asta înseamnă că, chiar dacă abordarea declarativă a fost cea mai ușor de utilizat, a trebuit să o amestec cu abordarea semantică pentru a obține un sistem ușor de întreținut.

Paleta de culori esențială

Etapa numărul unu a declarat numărul minim de culori necesare pentru a crea componente web. În general, paleta de culori esențială este compusă din:

  1. Culoarea principală / principală → folosită pentru legături, culoarea de fundal a butonului, etc. În general, este culoarea principală de apel la acțiune.
  2. Culoarea accentului → folosită pentru a evidenția ceva important în pagină. Nu ar trebui să fie o variație a culorii principale, ci o culoare complementară.
  3. O scară de culori neutre → Este, în general, o scară a tonurilor în tonuri de gri, pentru a fi utilizate pentru elemente de text, elemente subtile, chenare etc.
  4. Culori de feedback → succes, eroare, avertizare.

Unele dintre aceste culori au nevoie de o variantă (versiunea mai închisă / mai deschisă), adesea folosită pentru a evidenția interactivitatea (de exemplu:: hover /: state active).

În CSS, aceasta se traduce prin:

* notă: folosim pluginul funcție color-mod-postcss pentru a traduce funcțiile de culoare în cod RGBA compatibil cu toate browserele.

Snippet-ul de mai sus reprezintă paleta de culori: toate culorile utilizate în cadrul proiectului.

Variațiile culorilor primare și accentului sunt generate folosind funcții de culoare. Această abordare este utilă dacă aveți un fișier demo.html (și noi îl facem în cadrul nostru), astfel încât puteți regla valorile funcțiilor până când nu sunteți mulțumit de culorile obținute. Nuantele (sau neutre) culorile sunt generate folosind chroma.js. În acest caz, utilizarea funcțiilor nu a fost ideală, deoarece, în general, aveți două culori opuse (alb și negru) și trebuie să generați o scară de valori pe baza acestor două culori.

Adăugarea de culori semantice la mix

Odată ce paleta de culori este gata, putem adăuga culori semantice. Crearea de culori semantice nu înseamnă creșterea numărului de culori, ci distribuirea culorilor folosind referințe semantice.

De ce cred că aceasta este o abordare bună

În primul rând, acest sistem se bazează pe două culori esențiale: culorile primare și accentul. Aceasta înseamnă că atunci când trebuie să utilizați variabilele de culoare, nu vă va fi dificil să vă amintiți ce reprezintă acele variabile (chiar dacă nu utilizați nume declarative, precum „albastru” și „roșu”).

Este posibil ca sistemul dvs. să includă mai multe culori (de exemplu, o culoare secundară). Încă mai aveți de-a face doar cu trei culori. Gestionarea unui sistem bazat pe 10 sau mai multe culori principale ar fi dificilă indiferent de abordarea pe care o utilizați, așa că poate doriți să luați în considerare simplificarea acestuia.

Culorile în tonuri de gri folosesc o convenție de denumire diferită: cu cât numărul este mai mare la sfârșitul variabilei, cu atât culoarea este mai închisă.
Această abordare devine utilă atunci când nu sunteți sigur ce culoare neutră doriți să aplicați. Dacă gri-2 arată prea subtil, puteți încerca gri-3. Este posibil să fi observat că unele nuanțe lipsesc (de exemplu, gri-5). Nu au fost esențiale în cazul nostru (nu le-am folosit niciodată în timpul creării componentelor web), așa că le-am eliminat din paleta de culori.

Culorile semantice sunt adăugate la mix din trei motive principale:

  1. Fișierul _colors.scss devine sursa adevărului oricând trebuie să modificați o culoare. Credeți că elementele de la titlu de text ar trebui să fie mai întunecate? Deschideți fișierul _colors.scss și editați variabila de culoare text-titlu.
  2. Dacă definiți un chenar de culoare, de exemplu, nu va trebui să căutați ce culoare gri ați utilizat în alte componente la următoarea creare a unui element de bord. Același concept se aplică multor elemente, nu doar granițelor.
  3. O face o bucată de tort pentru a crea și menține diferite teme.

theming

De îndată ce vom putea folosi variabile CSS fără a fi nevoie să ne bazăm pe pluginuri sau polifill, crearea temelor de culoare va fi super simplă *! Asta înseamnă că nu putem crea teme astăzi? Nu, putem. Avem două opțiuni.

* în cadrul nostru, folosim pluginul postcss-css-variables pentru a compila variabile CSS. În prezent nu acceptă actualizarea variabilelor într-o clasă CSS.

Opțiunea 1 este actualizarea oricum a variabilelor CSS. Navigatoarele care nu acceptă variabile vor arăta tema culorilor „implicite”. Aceasta nu este o problemă, atât timp cât conținutul este accesibil.

De exemplu, aveți o temă de culoare implicită → fundal alb și culoarea textului negru și o .theme-dark → fundal negru și culoare text alb. Apoi creați două componente, una cu tema implicită, cealaltă cu tema .dark. Dacă ambele componente cu tema implicită nu afectează experiența utilizatorului, puteți considera tema .dark ca o îmbunătățire (opțional). În acest caz, are sens să actualizăm variabilele pentru a crea teme diferite, chiar dacă nu sunt acceptate peste tot.

Astfel creezi o nouă temă care actualizează unele variabile CSS cheie:

Îmi place această soluție pentru că rezumă corectarea culorii și vă permite să vă păstrați temele de culoare într-un singur fișier. Procedând astfel, putem schimba potențial starea fiecărei componente (de la theme-a la theme-b) pur și simplu aplicând o clasă CSS.

Opțiunea 2 ar viza toate elementele a căror aspect este afectat de temă. Avantajul acestei metode este că este acceptat de toate browserele. Cu toate acestea, nu este la fel de ușor de întreținut în comparație cu cea bazată în totalitate pe variabile CSS.

Iată un exemplu de opțiune 2 în acțiune:

Acum știți cum intenționăm să gestionăm culorile în cadrul nostru! Dacă aveți feedback / sugestii, informați-ne în comentariu!

Sper că v-a plăcut articolul! Pentru mai multe nuggets pentru design web, urmați-ne aici pe Medium sau Twitter.