Luo suunnittelujärjestelmä, osa 3: Värit

Tässä artikkelissa tarkastellaan kuinka asettaa värijärjestelmä CSS: ään ja mitkä ovat parhaat käytännöt sen varmistamiseksi, että järjestelmää on helppo käyttää ja ylläpitää.

Tämä artikkeli on osa suunnittelujärjestelmiä koskevaa sarjaa, joka on inspiroinut verkkokomponenttikirjastomme. Kirjasto perustuu vankkaan CSS-järjestelmään. Joten tässä me jaamme asiat, jotka olemme oppineet asettamaan kirjastomme globaalin tyylin!

Artikkelisarja:
- Osa 1: typografia
- Osa 2: Ruudukko ja asettelu
- Osa 3: Värit
- Osa 4: Väli
- Osa 5: Kuvakkeet
- Osa 6: Painikkeet

Olemme julkaisseet Värieditorin! Verkkosuunnittelutyökalu, joka tuottaa CodyHouse-kehyksen kanssa yhteensopivia väripaletteja ja teemoja.

Värimuutokset 101

Toisin kuin muut CSS-globaalit, värijärjestelmän luominen on 10% koodauksesta ja 90% semantiikasta. Työskentellessäsi _colors.scss-tiedostosi kanssa, sinun kannattaa pitää mielessä seuraavat tavoitteet:

  1. Värimuuttujien on oltava helposti muistettavissa. → Et halua tarkistaa globaalia tiedostoa milloin tahansa sinun on valittava väri.
  2. Järjestelmän on oltava helppo päivittää → Voit lisätä, poistaa ja nimetä värejä. Varmista, että sen tekeminen ei ole monimutkaista.
  3. Järjestelmään tulisi sisältyä vain välttämättömät värit → olemme kuulleet tämän niin monta kertaa ... silti päädymme aina enemmän värejä kuin tarvitsemme! Suunnittelujärjestelmän todellinen menestysavain on kaiken tarvittavan poistaminen (mukaan lukien värit).

Semanttinen vs. deklaratiiviset värit

Värimuuttujien asettamisessa on kaksi päätavoitetta: semanttiset ja deklaratiiviset värit.

Semanttinen lähestymistapa näyttää seuraavalta:

Vaikka tässä on esimerkki deklaratiivisesta lähestymistavasta:

Kumpikaan niistä ei ole väärässä. Tarpeitasi vastaavan valitseminen riippuu niin monista tekijöistä (esim. Projektin koosta, tuotemerkin värien merkityksellisyydestä jne.).

Työskennellessämme kehystemme _colors.scss-tiedostossa minun piti ottaa huomioon, että käyttäjät aikoivat muokata sitä (100%). Tämä tarkoittaa, että vaikka deklaratiivinen lähestymistapa oli helpoin käyttää, minun piti sekoittaa semanttinen lähestymistapa järjestelmän saamiseksi, jota oli myös helppo ylläpitää.

Oleellinen väripaletti

Vaihe numero yksi ilmoitti web-komponenttien luomiseen tarvittavan vähimmäismäärän. Yleensä tärkeä värivalikoima koostuu:

  1. Pää- / pääväri → linkkeihin käytetty painike, painikkeen taustaväri jne. Yleensä se on toimintakehotuksen pääväri.
  2. Aksenttiväri → korosti jotain tärkeätä sivulla. Sen ei pitäisi olla päävärin muunnelma, vaan täydentävä väri.
  3. Neutraalin värin asteikko → Se on yleensä harmaasävyjen asteikko, jota käytetään tekstielementeille, hienoille elementeille, reunuksille jne.
  4. Palautteen värit → menestys, virhe, varoitus.

Jotkut näistä väreistä tarvitsevat muunnelman (tummempi / vaaleampi versio), jota käytetään usein interaktiivisuuden korostamiseen (esimerkiksi: hover /: aktiiviset tilat).

CSS: ssä tämä tarkoittaa:

* Huomaa: Käytämme postcss-color-mod-function-laajennusta värifunktioiden kääntämiseen RGBA-koodiksi, joka on yhteensopiva kaikkien selainten kanssa.

Yllä oleva katkelma edustaa väripalettia: kaikkia projektissa käytettyjä värejä.

Pää- ja korostusvärien variaatiot luodaan värifunktioiden avulla. Tämä lähestymistapa on hyödyllinen, jos sinulla on demo.html-tiedosto (ja teemme niin puitteissa), jotta voit säätää toimintojen arvoja, kunnes olet tyytyväinen saatuihin väreihin. Sävyjä (tai neutraaleja) värit luodaan käyttämällä chroma.js. Tässä tapauksessa toimintojen käyttäminen ei ollut ihanteellista, koska sinulla on yleensä kaksi vastakkaista väriä (musta ja valkoinen), ja sinun on luotava arvoasteikko näiden kahden värin perusteella.

Semanttisten värien lisääminen sekoitukseen

Kun väripaletti on valmis, voimme lisätä semanttisia värejä. Semanttisten värien luominen ei tarkoita värien määrän lisäämistä, vaan värien jakamista semanttisten viitteiden avulla.

Miksi tämä on mielestäni hyvä lähestymistapa

Ensinnäkin, tämä järjestelmä perustuu kahteen olennaiseen väriin: perusväriin ja korostusväriin. Tämä tarkoittaa, että kun sinun on käytettävä värimuuttujia, sinun ei ole vaikea muistaa, mitä nuo muuttujat edustavat (vaikka et käyttäisivät deklaratiivisia nimiä, kuten “sininen” ja “punainen”).

Järjestelmääsi on ehkä sisällytettävä enemmän värejä (esimerkiksi toissijainen väri). Olet edelleen tekemisissä vain kolmen värin kanssa. Yli 10 pääväriin perustuvan järjestelmän hallinta olisi vaikeaa käyttämästäsi lähestymistavasta riippumatta, joten kannattaa harkita järjestelmän yksinkertaistamista.

Harmaasävyväreissä käytetään erilaista nimeämiskäytäntöä: mitä suurempi on muuttujan lopussa oleva luku, sitä tummempi on väri.
Tämä lähestymistapa tulee käteväksi, kun et ole varma, mitä neutraalia väriä haluat käyttää. Jos harmaa-2 näyttää liian hienoiselta, voit kokeilla harmaata-3. Olet ehkä huomannut, että jotkut sävyt puuttuvat (esim. Harmaa-5). Ne eivät olleet välttämättömiä tapauksessamme (emme koskaan käyttäneet niitä web-komponentteja luotaessa), joten poistimme ne värivalikoimasta.

Semanttiset värit lisätään sekoitukseen kolmesta syystä:

  1. _Colors.scss-tiedostosta tulee totuuden lähde milloin tahansa sinun täytyy muuttaa väriä. Tunnetko tekstin otsikkoelementtien olevan tummempia? Avaa _colors.scss-tiedosto ja muokkaa väri-teksti-otsikkomuuttujaa.
  2. Jos määrität esimerkiksi värireunuksen, sinun ei tarvitse etsiä, mitä harmaata väriä olet käyttänyt muissa komponenteissa seuraavan kerran, kun luot reunuselementin. Sama käsite koskee monia elementtejä, ei vain rajoja.
  3. Se tekee siitä palakakun erilaisten teemojen luomiseen ja ylläpitämiseen.

teemallaName

Heti kun voimme käyttää CSS-muuttujia tarvitsematta luottaa plugineihin tai polyfill-tiedostoihin, väriteemojen luominen on erittäin yksinkertaista *! Tarkoittaako tämä, että emme voi luoda teemoja tänään? Ei, voimme. Meillä on kaksi vaihtoehtoa.

* puitteissa käytämme postcss-css-muuttujia -laajennusta CSS-muuttujien kääntämiseen. Se ei tällä hetkellä tue muuttujien päivittämistä CSS-luokassa.

Vaihtoehto 1 päivittää CSS-muuttujia joka tapauksessa. Selaimet, jotka eivät tue muuttujia, näyttävät ”oletus” väriteeman. Tämä ei ole ongelma, kunhan sisältö on saatavilla.

Esimerkiksi, sinulla on oletusväriteema → valkoinen tausta ja mustan tekstin väri, ja .teema-tumma → musta tausta ja valkoinen tekstin väri. Sitten luot kaksi komponenttia, toisella oletusteema ja toisella .dark-teema. Jos molemmilla komponenteilla oletusteema ei vaikuta käyttökokemukseen, voit pitää .dark-teemaa lisävarusteena (valinnainen). Tässä tapauksessa on järkevää päivittää muuttujat luodaksesi erilaisia ​​teemoja, vaikka niitä ei tuettaisi kaikkialla.

Näin luot uuden teeman, joka päivittää joitain CSS-muuttujia:

Rakastan tätä ratkaisua, koska se tekee värienkorjauksesta abstraktin ja antaa sinun pitää väriteemasi yhdessä tiedostossa. Näin tekemällä voimme muuttaa jokaisen komponentin tilaa (teemasta a teemaan b) yksinkertaisesti soveltamalla CSS-luokkaa.

Vaihtoehto 2 olisi kohdistettu kaikkiin elementteihin, joiden ulkonäköön teema vaikuttaa. Tämän menetelmän etuna on, että sitä tukee kaikki selaimet. Sitä ei kuitenkaan ole niin helppo ylläpitää verrattuna kokonaan CSS-muuttujiin perustuvaan.

Tässä on esimerkki toiminnasta 2:

Nyt tiedät, kuinka aiomme käsitellä värejä kehyksessämme! Jos sinulla on palautetta / ehdotuksia, ota meihin yhteyttä kommentissa!

Toivottavasti nautit artikkelista! Saat lisää verkkosivujen suunnittelumerkkejä, seuraa meitä täällä Mediumissa tai Twitterissä.