Napravite svoj dizajn, 3. dio: Boje

U ovom ćemo članku pogledati kako postaviti sustav boja u CSS-u i koje su najbolje prakse kako bismo bili sigurni da je sustav jednostavan za korištenje i održavanje.

Ovaj je članak dio serije o dizajnerskim sustavima inspiriranim našom bibliotekom web komponenti. Knjižnica se oslanja na solidan sustav CSS globala. To je to što dijelimo stvari koje smo naučili postavljajući globalni stil naše knjižnice!

Serija članaka:
- 1. dio: Tipografija
- Dio 2: Rešetka i izgled
- Dio 3: Boje
- Dio 4: Razmak
- Dio 5: Ikone
- Dio 6: Gumbi

Pokrenuli smo uređivač boja! Alat za web dizajn koji generira palete boja i teme kompatibilne s CodyHouse Framework.

Varijable u boji 101

Za razliku od ostalih CSS globalista, stvaranje sustava boja je 10% kodiranja i 90% semantike. Tijekom rada na datoteci _colors.scss želite imati na umu sljedeće ciljeve:

  1. Promjenjive boje moraju se lako zapamtiti → Ne želite provjeriti globalnu datoteku u bilo kojem trenutku kad morate odabrati boju.
  2. Sustav se mora lako ažurirati → Dodavat ćete, ukloniti i preimenovati boje. Pazite da to ne bude složeno.
  3. Sustav treba uključivati ​​samo osnovne boje → ovu smo čuli toliko puta ... ipak uvijek imamo više boja nego što nam treba! Pravi ključ uspjeha dizajnerskog sustava je uklanjanje svega što nije potrebno (uključujući boje).

Semantičke vs deklarativne boje

Kada je u pitanju postavljanje varijabli boja, postoje dva glavna pristupa: semantička i deklarativna boja.

Semantički pristup izgleda kao:

Ovdje je primjer deklarativnog pristupa:

Nijedno od njih nije pogrešno. Odabir onoga koji zadovoljava vaše potrebe ovisi o toliko mnogo čimbenika (npr. Veličina projekta, relevantnost boja marke itd.).

Dok sam radio na _colors.scss datoteci našeg okvira, morao sam uzeti u obzir da su je korisnici željeli urediti (100%). To znači da čak i ako je deklarativni pristup bio najlakši za upotrebu, morao sam ga pomiješati sa semantičkim pristupom kako bih dobio sustav koji je također jednostavan za održavanje.

Osnovna paleta boja

Korak broj jedan bio je proglašavanje minimalnog broja boja potrebnih za stvaranje web komponenti. Općenito, osnovna paleta boja sastoji se od:

  1. Glavna / glavna boja → koristi se za veze, boja pozadine gumba itd. Općenito, to je glavna boja poziva na akciju.
  2. Boja naglasi → koristi se za isticanje nečeg važnog na stranici. To ne bi trebala biti varijacija primarne boje, već komplementarna boja.
  3. Ljestvica neutralnih boja → To je općenito razmjera nijansi sive, koja se koristi za tekstualne elemente, suptilne elemente, obrube itd.
  4. Boje povratnih informacija → uspjeh, greška, upozorenje.

Nekim od ovih boja potrebna je varijacija (tamnija / svjetlija verzija), koja se često koristi za isticanje interaktivnosti (npr.: Lebdenje /: aktivna stanja).

U CSS-u to znači:

* napomena: upotrebljavamo dodatak postcss-color-mod-funkcije za prevođenje funkcija boja u RGBA kôd kompatibilan sa svim preglednicima.

Gornji isječak predstavlja paletu boja: sve boje koje se koriste u projektu.

Varijacije glavnih i akcentnih boja generiraju se pomoću funkcija u boji. Ovaj pristup je koristan ako imate demo.html datoteku (a mi to radimo u našem okviru) tako da možete podešavati vrijednosti funkcija sve dok niste zadovoljni dobivenim bojama. Nijanse (ili neutralne) boje se generiraju pomoću chroma.js. U ovom slučaju, korištenje funkcija nije bilo idealno, jer općenito imate dvije suprotne boje (crnu i bijelu) i morate generirati ljestvicu vrijednosti na temelju te dvije boje.

Dodavanje semantičkih boja u miks

Nakon što je paleta boja spremna, možemo dodati semantičke boje. Stvaranje semantičkih boja ne znači povećavanje broja boja, već distribuciju boja pomoću semantičkih referenci.

Zašto mislim da je to dobar pristup

Prije svega, ovaj se sustav oslanja na dvije osnovne boje: primarnu i akcentnu boju. To znači da, kada trebate koristiti varijable boja, neće vam biti teško sjetiti se što predstavljaju te varijable (čak i ako ne koristite deklarativne nazive poput "plava" i "crvena").

Vaš sustav možda mora uključivati ​​više boja (npr. Sekundarnu boju). Još uvijek se bavite samo tri boje. Upravljanje sustavom na bazi 10+ glavnih boja bilo bi teško bez obzira na pristup koji koristite, pa biste trebali razmotriti pojednostavljenje.

Boje sive boje koriste drugačiju konvenciju o imenovanju: što je veći broj na kraju varijable, tamnija je boja.
Ovaj pristup postaje koristan kada niste sigurni koju neutralnu boju želite primijeniti. Ako siva-2 izgleda previše suptilno, možete pokušati sive-3. Možda ste primijetili da nedostaju neke nijanse (npr. Siva-5). Oni u našem slučaju nisu bili bitni (nikada ih nismo koristili prilikom izrade web komponenti), pa smo ih uklonili iz palete boja.

Semantičke boje dodaju se miksu iz tri glavna razloga:

  1. Datoteka _colors.scss postaje izvor istine kad god vam je potrebno da promijenite boju. Smatrate li da bi elementi naslova teksta trebali biti tamniji? Otvorite datoteku _colors.scss i uredite varijablu zaglavlja u boji u boji.
  2. Ako definirate, na primjer, obrub boje, nećete trebati potražiti sivu boju koju upotrebljavate u drugim komponentama kad sljedeći put stvorite element obruba. Isti se koncept odnosi na mnoge elemente, a ne samo na granice.
  3. To čini komad torte za stvaranje i održavanje različitih tema.

theming

Čim budemo mogli koristiti CSS varijable bez da se oslonimo na dodatke ili polyfill, stvaranje tema u boji bit će super jednostavno *! Znači li to da danas ne možemo stvarati teme? Ne možemo. Imamo dvije mogućnosti.

* u našem okviru koristimo dodatak postcss-css-varijable za sastavljanje CSS varijabli. Trenutno ne podržava ažuriranje varijabli u CSS klasi.

1. opcija ionako ažurira CSS varijable. Preglednici koji ne podržavaju varijable prikazat će "zadanu" temu boja. To nije problem, sve dok je sadržaj dostupan.

Na primjer, imate zadanu temu boja → bijelu pozadinu i crnu boju teksta, a .temu-tamnu → crnu pozadinu i bijelu boju teksta. Tada stvorite dvije komponente, jedna sa zadanom temom, a druga s .dark-temom. Ako obje komponente sa zadanom temom ne utječu na korisničko iskustvo, možete razmotriti .dark temu kao poboljšanje (izborno). U ovom slučaju, ima smisla ažurirati varijable za stvaranje različitih tema, čak i ako nisu podržane svugdje.

Ovako stvarate novu temu ažurirajući neke ključne CSS varijable:

Ovo rješenje volim jer sadrži apstraktnu korekciju boja, a omogućava vam da teme svoje boje držite u jednoj datoteci. Na taj način možemo potencijalno promijeniti stanje svake komponente (od teme-a do teme-b) jednostavnom primjenom CSS klase.

Opcija 2 bila bi usmjeriti sve elemente na čiji izgled utječe tema. Prednost ove metode je u tome što je podržavaju svi preglednici. No, nije ga lako održavati u usporedbi s onim koji se u potpunosti temelji na CSS varijablama.

Evo primjera opcije 2 na djelu:

Sada znate kako planiramo rukovati bojama u našem okviru! Ako imate povratne informacije / prijedloge, javite nam u komentaru!

Nadam se da ste uživali u članku! Za više nugget-ova za web dizajn, slijedite nas ovdje na Medium ili Twitter.