Lumikha ng iyong sistema ng disenyo, bahagi 3: Mga Kulay

Sa artikulong ito, titingnan natin kung paano magtakda ng isang sistema ng kulay sa CSS, at kung ano ang mga pinakamahusay na kasanayan upang matiyak na madaling gamitin at mapanatili ng system.

Ang artikulong ito ay bahagi ng isang serye sa mga sistema ng disenyo na inspirasyon ng aming library ng mga bahagi ng web. Ang aklatan ay nakasalalay sa isang solidong sistema ng mga globals ng CSS. Kaya't ito ay ibinabahagi namin ang mga bagay na natutunan namin na itakda ang pandaigdigang istilo ng aming library!

Artikulo Serye:
- Bahagi 1: Palalimbagan
- Bahagi 2: Grid at Layout
- Bahagi 3: Mga Kulay
- Bahagi 4: Spacing
- Bahagi 5: Mga Icon
- Bahagi 6: Mga pindutan

Inilunsad namin ang Kulay ng Editor! Ang isang tool sa disenyo ng web na bumubuo ng mga palette ng kulay at mga tema na katugma sa CodyHouse Framework.

Mga variable ng Kulay 101

Hindi tulad ng iba pang mga globals CSS, ang paglikha ng isang sistema ng kulay ay 10% tungkol sa coding at 90% tungkol sa semantika. Habang nagtatrabaho sa iyong _colors.scss file, nais mong tandaan ang mga sumusunod na layunin:

  1. Ang mga variable ng kulay ay kailangang madaling alalahanin → Hindi mo nais na suriin ang pandaigdigang file anumang oras kailangan mong pumili ng isang kulay.
  2. Ang system ay kailangang maging madaling i-update → Magdagdag ka, mag-aalis, at magpapabago ng mga kulay. Siguraduhing hindi kumplikado ang paggawa nito.
  3. Dapat na isama lamang ng system ang mga mahahalagang kulay na → Narinig namin ito ng maraming beses ... gayon pa man lagi kaming nagtatapos sa maraming kulay kaysa sa kailangan namin! Ang tunay na key ng tagumpay ng isang sistema ng disenyo ay tinanggal ang lahat ng hindi kinakailangan (kasama ang mga kulay).

Mga kulay ng Semantiko kumpara sa Pahayag

Pagdating sa pagtatakda ng mga variable na kulay, mayroong dalawang pangunahing mga diskarte: semantiko at pagpapahayag ng mga kulay.

Ang diskarte sa semantiko ay mukhang:

Habang narito ang isang halimbawa ng isang pagpapahayag ng diskarte:

Wala rin sa kanila ang mali. Ang pagpili ng isa na nakakatugon sa iyong mga pangangailangan ay nakasalalay sa napakaraming mga kadahilanan (hal., Laki ng proyekto, kaugnayan sa mga kulay ng branding, atbp.).

Habang nagtatrabaho sa _colors.scss file ng aming balangkas, kinailangan kong isaalang-alang ang mga gumagamit ay mai-edit ito (100%). Nangangahulugan ito na kahit na ang pagdeklarar na diskarte ay ang pinakamadaling gamitin, kinailangan kong ihalo ito sa semantikong pamamaraan upang makakuha ng isang sistema na madaling mapanatili.

Ang mahahalagang paleta ng kulay

Ang bilang ng hakbang ng isa ay nagpapahayag ng pinakamababang bilang ng mga kulay na kinakailangan upang lumikha ng mga bahagi ng web. Sa pangkalahatan, ang mahahalagang paleta ng kulay ay binubuo ng:

  1. Ang pangunahing / pangunahing kulay → na ginamit para sa mga link, kulay ng background ng pindutan, atbp Sa pangkalahatan, ito ang pangunahing kulay ng call-to-action.
  2. Ang kulay ng accent → na ginamit upang i-highlight ang isang bagay na mahalaga sa pahina. Hindi ito dapat maging isang pagkakaiba-iba ng pangunahing kulay, ngunit isang pantulong na kulay.
  3. Isang sukat ng mga neutral na kulay → Kadalasan ay isang scale ng mga tono ng grayscale, na gagamitin para sa mga elemento ng teksto, banayad na mga elemento, hangganan, atbp.
  4. Mga kulay ng feedback → tagumpay, error, babala.

Ang ilan sa mga kulay na ito ay nangangailangan ng isang pagkakaiba-iba (mas madidilim / mas magaan na bersyon), na madalas na ginagamit upang i-highlight ang pakikipag-ugnay (hal.,: Hover /: mga aktibong estado).

Sa CSS, isinasalin ito sa:

* tala: Ginagamit namin ang plugin ng postcss-color-mod-function upang isalin ang mga pag-andar ng kulay sa RGBA code na katugma sa lahat ng mga browser.

Ang snippet sa itaas ay kumakatawan sa paleta ng kulay: lahat ng mga kulay na ginamit sa buong proyekto.

Ang mga pagkakaiba-iba ng mga pangunahing at accent na kulay ay nabuo gamit ang mga function ng kulay. Ang pamamaraang ito ay madaling gamitin kung mayroon kang isang demo.html file (at ginagawa namin sa aming balangkas) upang maaari mong mai-tweak ang mga halaga ng mga pag-andar hanggang nasiyahan ka sa mga nakuha na kulay. Ang mga shade (o neutral) na kulay ay nabuo gamit ang chroma.js. Sa kasong ito, ang paggamit ng mga pag-andar ay hindi perpekto, dahil sa pangkalahatan ay mayroon kang dalawang kabaligtaran na kulay (itim at puti), at kailangan mong makabuo ng isang sukat ng mga halaga batay sa dalawang kulay na ito.

Pagdaragdag ng mga semantiko na kulay sa halo

Kapag handa na ang paleta ng kulay, maaari kaming magdagdag ng mga kulay ng semantiko. Ang paglikha ng mga kulay ng semantiko ay hindi nangangahulugang pagdaragdag ng bilang ng mga kulay, ngunit ang pamamahagi ng mga kulay gamit ang mga sangguniang semantiko.

Bakit sa palagay ko ito ay isang mahusay na diskarte

Una sa lahat, ang sistemang ito ay umaasa sa dalawang mahahalagang kulay: pangunahin at kulay na tuldik. Nangangahulugan ito na kapag kailangan mong gumamit ng mga variable na kulay, hindi magiging mahirap para sa iyo na alalahanin ang kinakatawan ng mga variable na iyon (kahit na hindi ka gumagamit ng mga nagpapahayag na pangalan tulad ng "asul" at "pula").

Maaaring kailanganin ng iyong system na magsama ng higit pang mga kulay (hal., Isang pangalawang kulay). Tatlong kulay ka pa rin sa iyong pakikitungo. Ang pamamahala ng isang sistema batay sa 10+ pangunahing kulay ay magiging mahirap kahit na anong diskarte na iyong ginagamit, kaya maaari mong isaalang-alang ang pagpapagaan nito.

Ang mga kulay ng grayscale ay gumagamit ng iba't ibang kombensyon sa pagbibigay ng pangalan: ang mas mataas ay ang numero sa dulo ng variable, ang mas madidilim ang kulay.
Ang pamamaraang ito ay magiging madaling gamiting kapag hindi ka sigurado kung aling neutral na kulay ang nais mong ilapat. Kung ang kulay-abo-2 ay mukhang masyadong banayad, maaari mong subukan ang kulay-abo-3. Maaaring napansin mo ang ilang mga shade na nawawala (hal., Grey-5). Hindi sila mahalaga sa aming kaso (hindi namin ginamit ang mga ito habang lumilikha ng mga bahagi ng web), kaya tinanggal namin ang mga ito mula sa paleta ng kulay.

Ang mga semantikong kulay ay idinagdag sa halo para sa tatlong pangunahing mga kadahilanan:

  1. Ang _colors.scss file ay nagiging mapagkukunan ng katotohanan anumang oras na kailangan mong baguhin ang isang kulay. Sa palagay mo ba dapat maging mas madidilim ang mga elemento ng heading ng teksto? Buksan ang _colors.scss file at i-edit ang variable ng head-text-heading.
  2. Kung tinukoy mo ang isang hangganan ng kulay, halimbawa, hindi mo na kailangang hahanapin kung aling kulay-abo na kulay na iyong ginagamit sa ibang mga sangkap sa susunod na lumikha ka ng isang elemento ng hangganan. Ang parehong konsepto ay nalalapat sa maraming mga elemento, hindi lamang mga hangganan.
  3. Ginagawa nitong isang piraso ng cake upang lumikha at mapanatili ang iba't ibang mga tema.

Ang pagpapahinga

Sa sandaling magagamit namin ang mga variable ng CSS nang hindi kinakailangang umasa sa mga plugin o polyfill, ang paglikha ng mga tema ng kulay ay magiging sobrang simple *! Nangangahulugan ba ito na hindi tayo makalikha ng mga tema ngayon? Hindi, kaya natin. Mayroon kaming dalawang pagpipilian.

* Sa aming balangkas, ginagamit namin ang plugin ng postcss-css-variable upang makatipon ang mga variable ng CSS. Sa kasalukuyan ay hindi sumusuporta sa pag-update ng mga variable sa isang klase ng CSS.

Ang Opsyon 1 ay pag-update ng mga variable ng CSS pa rin. Ang mga browser na hindi sumusuporta sa mga variable ay magpapakita ng tema ng kulay na "default". Hindi ito isang isyu, hangga't maa-access ang nilalaman.

Halimbawa, mayroon kang isang default na tema ng kulay → puting background at itim na kulay ng teksto, at isang .theme-dark → itim na background at kulay ng puting teksto. Pagkatapos ay lumikha ka ng dalawang sangkap, isa na may default na tema, ang iba pang may .dark-tema. Kung ang pagkakaroon ng parehong mga sangkap na may default na tema ay hindi nakakaapekto sa karanasan ng gumagamit, kung gayon maaari mong isaalang-alang ang .dark-tema bilang isang pagpapahusay (opsyonal). Sa kasong ito, makatuwiran na i-update ang mga variable upang lumikha ng iba't ibang mga tema kahit na hindi sila suportado saanman.

Ito ay kung paano ka lumikha ng isang bagong tema sa pag-update ng ilang mga pangunahing variable na CSS:

Gustung-gusto ko ang solusyon na ito dahil nahuhuli nito ang pagwawasto ng kulay, at pinapayagan ka nitong mapanatili ang iyong mga tema ng kulay sa isang solong file. Sa pamamagitan nito, maaari nating mapalitan ang estado ng bawat sangkap (mula sa tema-a hanggang sa tema-b) sa pamamagitan lamang ng paglalapat ng isang klase ng CSS.

Ang pagpipilian 2 ay magiging target sa lahat ng mga elemento na ang hitsura ay apektado ng tema. Ang bentahe ng pamamaraang ito ay suportado ng lahat ng mga browser. Gayunpaman, hindi madaling mapanatili kung ihahambing sa isa batay sa kabuuan sa mga variable ng CSS.

Narito ang isang halimbawa ng pagpipilian 2 sa pagkilos:

Alam mo ngayon kung paano namin pinaplano na hawakan ang mga kulay sa aming balangkas! Kung mayroon kang feedback / mungkahi, ipaalam sa amin sa komento!

Inaasahan kong nasiyahan ka sa artikulo! Para sa higit pang mga nugget ng disenyo ng web, sundan kami dito sa Medium o Twitter.