Sukurkite savo projektavimo sistemą, 3 dalis: Spalvos

Šiame straipsnyje apžvelgsime, kaip nustatyti spalvų sistemą CSS ir kokia yra geriausia praktika, norint įsitikinti, ar sistemą lengva naudoti ir prižiūrėti.

Šis straipsnis yra dizaino sistemų serijos, įkvėptos mūsų internetinių komponentų bibliotekos, dalis. Biblioteka remiasi tvirta CSS sistema visame pasaulyje. Taigi tai yra tas dalykas, kurio mes išmokome, nustatydami visuotinį mūsų bibliotekos stilių!

Straipsnių serija:
- 1 dalis. Tipografija
- 2 dalis: Tinklelis ir išdėstymas
- 3 dalis: Spalvos
- 4 dalis: Tarpai
- 5 dalis: Piktogramos
- 6 dalis: Mygtukai

Paleidome Spalvų rengyklę! Žiniatinklio kūrimo įrankis, sukuriantis spalvų paletes ir temas, suderinamas su „CodyHouse Framework“.

Spalvų kintamieji 101

Skirtingai nuo kitų CSS pasaulio šalių, spalvų sistemos sukūrimas yra 10% kodavimo ir 90% semantikos. Dirbdami su failu _colors.scss, turėtumėte nepamiršti šių tikslų:

  1. Spalvų kintamuosius turi būti lengva atsiminti → Nenorite tikrinti visuotinio failo bet kada, kai turite pasirinkti spalvą.
  2. Sistemą turi būti lengva atnaujinti → Pridėsite, pašalinsite ir pervardysite spalvas. Įsitikinkite, kad tai padaryti nėra sudėtinga.
  3. Sistema turėtų apimti tik pagrindines spalvas. → Mes tai girdėjome tiek kartų ... vis tiek mes visada gauname daugiau spalvų, nei mums reikia! Tikrasis projektavimo sistemos sėkmės raktas yra tai, kas nereikalinga (su spalvomis), pašalinimas.

Semantinės ir deklaratyviosios spalvos

Kai reikia nustatyti spalvų kintamuosius, yra du pagrindiniai metodai: semantinės ir deklaratyvios spalvos.

Semantinis požiūris atrodo taip:

Pateikiame deklaratyvaus požiūrio pavyzdį:

Nei vienas iš jų nėra neteisus. Pasirinkimas, kuris atitinka jūsų poreikius, priklauso nuo daugybės faktorių (pvz., Projekto dydžio, prekės ženklo spalvų atitikimo ir kt.).

Dirbdamas su mūsų sistemos failu _colors.scss, aš turėjau atsižvelgti į tai, kad vartotojai ketina jį redaguoti (100%). Tai reiškia, kad net jei deklaratyvų požiūrį buvo lengviausia naudoti, aš turėjau jį sumaišyti su semantiniu metodu, kad gaučiau sistemą, kurią taip pat buvo lengva prižiūrėti.

Esminė spalvų paletė

Pirmas žingsnis buvo minimalaus spalvų skaičiaus, reikalingo žiniatinklio komponentams sukurti, deklaravimas. Apskritai pagrindinę spalvų paletę sudaro:

  1. Pagrindinė / pirminė spalva → naudojama nuorodoms, mygtuko fono spalva ir kt. Apskritai tai yra pagrindinė raginimo veikti spalva.
  2. Akcentinė spalva → naudojama norint pabrėžti ką nors svarbaus puslapyje. Tai turėtų būti ne pagrindinės spalvos variantas, o papildanti spalva.
  3. Neutralių spalvų skalė → Paprastai tai yra pilkos spalvos tonai, naudojami teksto elementams, subtiliams elementams, kraštams ir pan.
  4. Atsiliepimų spalvos → sėkmė, klaida, įspėjimas.

Kai kurioms iš šių spalvų reikalinga variacija (tamsesnė / lengvesnė versija), dažnai naudojama pabrėžti interaktyvumą (pvz .: užveskite / užveskite aktyviąsias būsenas).

CSS tai reiškia:

* pastaba: norėdami išversti spalvų funkcijas į RGBA kodą, suderinamą su visomis naršyklėmis, naudojame papildymą „Postcss-color-mod-function“.

Aukščiau pateiktas fragmentas nurodo spalvų paletę: visas projekte naudojamas spalvas.

Pagrindinių ir akcento spalvų variantai generuojami naudojant spalvų funkcijas. Šis būdas yra naudingas, jei turite „demo.html“ failą (ir mes tai darome savo sistemoje), kad galėtumėte pritaikyti funkcijų reikšmes tol, kol nebūsite patenkinti gautomis spalvomis. Atspalviai (arba neutralūs) spalvos generuojami naudojant chroma.js. Tokiu atveju naudoti funkcijas nebuvo idealu, nes paprastai jūs naudojate dvi priešingas spalvas (juodą ir baltą) ir jums reikia sugeneruoti vertybių skalę, pagrįstą šiomis dviem spalvomis.

Semantinių spalvų pridėjimas mišinyje

Kai spalvų paletė bus paruošta, mes galime pridėti semantinių spalvų. Sukurti semantines spalvas nereiškia padidinti spalvų skaičių, bet paskirstyti spalvas naudojant semantines nuorodas.

Kodėl aš manau, kad tai yra geras požiūris

Visų pirma, ši sistema remiasi dviem esminėmis spalvomis: pirminėmis ir akcento spalvomis. Tai reiškia, kad kai jums reikės naudoti spalvų kintamuosius, jums nebus sunku prisiminti, ką tie kintamieji atspindi (net jei nenaudojate deklaratyvių pavadinimų, tokių kaip „mėlyna“ ir „raudona“).

Gali reikėti, kad jūsų sistemoje būtų daugiau spalvų (pvz., Antrinė spalva). Vis dar kalbate tik apie tris spalvas. Sistemą, pagrįstą 10 ir daugiau pagrindinių spalvų, būtų sunku valdyti, nepriklausomai nuo jūsų naudojamo metodo, todėl galbūt norėsite apsvarstyti galimybę ją supaprastinti.

Pilkos spalvos spalvos naudoja skirtingą pavadinimų sudarymo tvarką: kuo didesnis skaičius kintamojo pabaigoje, tuo tamsesnė spalva.
Šis požiūris tampa patogus, kai nežinote, kurią neutralią spalvą norite pritaikyti. Jei pilka-2 atrodo per daug subtili, galite išbandyti pilką-3. Galbūt pastebėjote, kad trūksta kai kurių atspalvių (pvz., Pilka-5). Jie nebuvo būtini mūsų atveju (niekada nenaudojome jų kurdami žiniatinklio komponentus), todėl pašalinome juos iš spalvų paletės.

Semantinės spalvos pridedamos prie mišinio dėl trijų pagrindinių priežasčių:

  1. Failas _colors.scss tampa tiesos šaltiniu bet kada, kai reikia pakeisti spalvą. Ar manote, kad teksto antraštės elementai turėtų būti tamsesni? Atidarykite failą _colors.scss ir redaguokite spalvos-teksto antraštės kintamąjį.
  2. Pvz., Jei apibrėžiate spalvų apvadą, jums nereikės ieškoti, kurią pilką spalvą naudojate kituose komponentuose, kai kitą kartą sukursite rėmelio elementą. Ta pati sąvoka taikoma ne tik sienoms, bet ir daugeliui kitų elementų.
  3. Tai daro pyragą, kad sukurtų ir prižiūrėtų skirtingas temas.

Theming

Kai tik galėsime naudoti CSS kintamuosius ir nereikės pasikliauti papildiniais ar polipropildais, sukurti spalvų temas bus labai paprasta *! Ar tai reiškia, kad mes negalime šiandien kurti temų? Ne, mes galime. Mes turime dvi galimybes.

* mūsų sistemoje CSS kintamiesiems kompiliuoti naudojame papildinį Postcss-css-kintamieji. Šiuo metu nepalaikoma CSS klasės kintamųjų atnaujinimo.

1 variantas vis tiek atnaujina CSS kintamuosius. Naršyklėse, kurios nepalaiko kintamųjų, bus rodoma „numatytoji“ spalvų tema. Tai nėra problema, jei turinys prieinamas.

Pvz., Jūs turite numatytąją spalvų temą → balto fono ir juodo teksto spalvą, o „tema - tamsi“ → juodo fono ir baltos spalvos tekstą. Tada sukuriate du komponentus, vieną su numatytąja tema, kitą su .dark tema. Jei abiejų komponentų su numatytąja tema neturėjimas daro įtaką vartotojo patirčiai, tada .dark-temą galite laikyti patobulinimu (pasirenkama). Tokiu atveju prasminga atnaujinti kintamuosius, kad būtų sukurtos skirtingos temos, net jei jie ne visur palaikomi.

Taip sukuriate naują temą, atnaujindami keletą pagrindinių CSS kintamųjų:

Man patinka šis sprendimas, nes jis apibendrina spalvų pataisą ir leidžia spalvų temas laikyti viename faile. Tai darydami, mes galime pakeisti kiekvieno komponento būseną (nuo temos iki temos-b), tiesiog pritaikę CSS klasę.

2 galimybė būtų skirta visiems elementams, kurių išvaizdai daro įtaką tema. Šio metodo pranašumas yra tas, kad jį palaiko visos naršyklės. Tačiau tai nėra taip lengva prižiūrėti, palyginti su tuo, kuris visiškai pagrįstas CSS kintamaisiais.

Čia pateiktas 2 veiksmo pavyzdys:

Dabar jūs žinote, kaip mes planuojame tvarkyti spalvas mūsų sistemoje! Jei turite atsiliepimų / pasiūlymų, praneškite mums komentare!

Tikiuosi, kad jums patiko straipsnis! Norėdami rasti daugiau internetinio dizaino grynuolių, sekite mus čia „Medium“ ar „Twitter“.