Looge oma kujundussüsteem, 3. osa: Värvid

Selles artiklis vaatleme, kuidas CSS-is värvisüsteemi seadistada ja millised on parimad tavad, et süsteemi oleks lihtne kasutada ja hooldada.

See artikkel on osa meie veebikomponentide raamatukogust inspireeritud disainisüsteemide sarjast. Raamatukogu tugineb CSS-i globaalsete süsteemide kindlale süsteemile. Nii jagame seda kõike, mida oleme õppinud oma raamatukogu globaalse stiili seadmisel!

Artiklite seeria:
- 1. osa: tüpograafia
- 2. osa: ruudustik ja paigutus
- 3. osa: värvid
- 4. osa: vahed
- 5. osa: ikoonid
- 6. osa: Nupud

Oleme käivitanud värviredaktori! Veebidisaini tööriist, mis loob CodyHouse raamistikuga ühilduvaid värvipalette ja teemasid.

Värvuse muutujad 101

Erinevalt teistest CSS-i globaalsetest süsteemidest moodustab värvisüsteemi loomine 10% kodeeringust ja 90% semantikast. Faili _colors.scss töötamise ajal peate meeles pidama järgmisi eesmärke:

  1. Värvimuutujaid peab olema lihtne meeles pidada. → Te ei soovi ülemaailmset faili igal ajal värvi valida.
  2. Süsteemi peab olema lihtne värskendada → Saate värve lisada, eemaldada ja ümber nimetada. Veenduge, et selle tegemine pole keeruline.
  3. Süsteem peaks sisaldama ainult olulisi värve → oleme seda juba mitu korda kuulnud ... ometi on meil alati rohkem värve kui vaja! Kujundussüsteemi tõeliseks eduvõtmeks on kõik ebavajaliku eemaldamine (kaasa arvatud värvid).

Semantilised vs deklaratiivsed värvid

Värvimuutujate seadistamisel on kaks peamist lähenemisviisi: semantilised ja deklaratiivsed värvid.

Semantiline lähenemisviis näeb välja järgmine:

Ehkki siin on näide deklaratiivsest lähenemisest:

Kumbki neist pole vale. Teie vajadustele vastava valiku valimine sõltub nii paljudest teguritest (nt projekti suurus, kaubamärgi värvide olulisus jne).

Töötades meie raamistiku failiga _colors.scss, pidin arvestama, et kasutajad kavatsevad seda redigeerida (100%). See tähendab, et isegi kui deklaratiivset lähenemisviisi oli kõige lihtsam kasutada, pidin selle segama semantilise lähenemisega, et saada süsteem, mida oleks ka lihtne hooldada.

Oluline värvipalett

Esimene samm oli veebikomponentide loomiseks vajaliku minimaalse arvu värvide deklareerimine. Üldiselt koosneb oluline värvipalett järgmistest osadest:

  1. Põhi- / põhivärv → linkide jaoks kasutatav värv, nupu taustvärv jne. Üldiselt on see peamine tegevusele kutsuv värv.
  2. Rõhumärk → kasutab lehel midagi olulist esile tooma. See ei peaks olema põhivärvi variatsioon, vaid täiendav värv.
  3. Neutraalsete värvide skaala → Üldiselt on see halltoonide toonide skaala, mida kasutatakse tekstielementide, peenete elementide, ääriste jms jaoks.
  4. Tagasiside värvid → edu, viga, hoiatus.

Mõni neist värvidest vajab variatsiooni (tumedam / heledam versioon), mida kasutatakse sageli interaktiivsuse esiletõstmiseks (nt hover /: aktiivsed olekud).

CSS-is tähendab see järgmist:

* märkus: värvifunktsioonide tõlkimiseks RGBA-koodiks, mis ühildub kõigi brauseritega, kasutame pistikprogrammi postcss-color-mod-function.

Ülalolev fragment tähistab värvipaletti: kõiki värve, mida projektis kasutatakse.

Põhi- ja aktsentvärvide variatsioonid genereeritakse värvifunktsioonide abil. See lähenemisviis on kasulik, kui teil on demo.html-fail (ja seda teeme ka meie raamistikus), nii et saate funktsioonide väärtusi muuta, kuni olete saadud värvidega rahul. Varjundid (või neutraalsed) värvid luuakse chroma.js abil. Sel juhul ei olnud funktsioonide kasutamine ideaalne, kuna teil on tavaliselt kaks vastupidist värvi (must ja valge) ning peate nende kahe värvi põhjal genereerima väärtuste skaala.

Semantiliste värvide lisamine segule

Kui värvipalett on valmis, saame lisada semantilisi värve. Semantiliste värvide loomine ei tähenda värvide arvu suurendamist, vaid värvide jaotamist semantiliste viidete abil.

Miks ma arvan, et see on hea lähenemisviis

Esiteks toetub see süsteem kahele olulisele värvile: primaar- ja aktsentvärvidele. See tähendab, et kui peate kasutama värvimuutujaid, ei ole teil raske meelde jätta, mida need muutujad esindavad (isegi kui te ei kasuta deklaratiivseid nimesid, näiteks „sinine” ja „punane”).

Võimalik, et teie süsteem peab sisaldama rohkem värve (nt teisene värv). Teil on endiselt tegemist ainult kolme värviga. 10+ põhivärvidel põhineva süsteemi haldamine oleks keeruline, hoolimata kasutatavast lähenemisviisist, seega võiksite kaaluda selle lihtsustamist.

Halli skaala värvides kasutatakse erinevat nimetamisviisi: mida suurem on muutuja lõpus olev number, seda tumedam on värv.
See lähenemine muutub käepäraseks, kui te pole kindel, millist neutraalset värvi soovite rakendada. Kui hall-2 tundub liiga peen, võite proovida halli-3. Võib-olla olete märganud, et mõni varjund puudub (nt hall-5). Need polnud meie puhul olulised (me ei kasutanud neid kunagi veebikomponentide loomisel), mistõttu eemaldasime need värvipaletist.

Semantilisi värve lisatakse segule kolmel peamisel põhjusel:

  1. Failist _colors.scss saab tõe allikas igal ajal, kui peate värvi muutma. Kas tunnete, et teksti pealkirja elemendid peaksid olema tumedamad? Avage fail _colors.scss ja muutke värvi-teksti-päise muutujat.
  2. Kui määratlete näiteks värvipiiri, ei pea te järgmine kord ääriseelemendi loomisel otsima, millist halli värvi olete teistes komponentides kasutanud. Sama mõiste kehtib paljude elementide, mitte ainult piiride kohta.
  3. Erinevate teemade loomiseks ja hooldamiseks on sellest tükk tegemist.

Theming

Niipea kui saame kasutada CSS-i muutujaid, ilma et peaksime lootma pistikprogrammidele või polütäidisele, on värviteemade loomine ülilihtne *! Kas see tähendab, et me ei saa täna teemasid luua? Ei, me saame. Meil on kaks võimalust.

* oma raamistikus kasutame CSS-i muutujate kompileerimiseks pistikprogrammi postcss-css-muutujaid. Praegu ei toeta see muutujate värskendamist CSS-klassis.

1. võimalus on CSS-i muutujate värskendamine niikuinii. Brauserid, mis muutujaid ei toeta, näitavad värviteema vaikimisi. Kui sisu on juurdepääsetav, pole see probleem.

Näiteks on teil vaikimisi värvi teema → valge taust ja must teksti värv ning .teem-tume → must taust ja valge teksti värv. Seejärel loote kaks komponenti, millest üks on vaikimisi teema ja teine ​​.dark-teema. Kui mõlema komponendi olemasolu vaiketeemaga ei mõjuta kasutajakogemust, võite pidada .dark-teemat lisaseadmeks (valikuline). Sel juhul on mõistlik muutujaid värskendada, et luua erinevaid teemasid, isegi kui neid kõikjal ei toetata.

Nii saate luua uue teema, värskendades mõnda CSS-i peamist muutujat:

Armastan seda lahendust, kuna see võtab kokku värviparanduse ja võimaldab teil hoida oma värviteemasid ühes failis. Nii toimides saame potentsiaalselt muuta iga komponendi olekut (teemast a teemani b), rakendades lihtsalt CSS-i klassi.

2. võimalus oleks suunatud kõigile elementidele, mille välimust teema mõjutab. Selle meetodi eeliseks on see, et seda toetavad kõik brauserid. Kuid seda, mis põhineb täielikult CSS-i muutujatel, pole seda nii lihtne hooldada.

Siin on näide 2. toimimisvõimalusest:

Nüüd teate, kuidas me plaanime oma raamistikus värve käsitleda! Kui teil on tagasisidet / ettepanekuid, andke sellest kommentaaris teada!

Loodan, et teile artikkel meeldis! Rohkemate veebikujunduse tükkide saamiseks jälgige meid siin meediumites või Twitteris.