Készítse el a tervezési rendszert, 3. rész: Színek

Ebben a cikkben megvizsgáljuk, hogyan állíthat be színrendszert a CSS-ben, és mi a legjobb gyakorlat annak biztosítása érdekében, hogy a rendszer könnyen használható és karbantartható.

Ez a cikk a tervezési rendszerek sorozatának része, amelyet a web-összetevők könyvtára ihlette. A könyvtár a CSS globális rendszerek szilárd rendszerére támaszkodik. Tehát megosztjuk azokat a dolgokat, amelyeket megtanultunk beállítani könyvtárunk globális stílusához!

Cikk sorozat:
- 1. rész: Tipográfia
- 2. rész: Rács és elrendezés
- 3. rész: Színek
- 4. rész: Távolság
- 5. rész: Ikonok
- 6. rész: Gombok

Elindítottuk a Színes Szerkesztőt! Weboldal-készítő eszköz, amely színes palettákat és témákat generál a CodyHouse keretrendszerrel.

Színváltozók 101

Más CSS globálisokkal ellentétben a színrendszer létrehozása 10% a kódolás és 90% a szemantika szempontjából. A _colors.scss fájl kidolgozása közben szem előtt kell tartania a következő célokat:

  1. A színváltozóknak könnyen megjegyezhetőknek kell lenniük → Nem szívesen ellenőrzi a globális fájlt, amikor színt kell választania.
  2. A rendszert könnyen frissíteni kell. → Hozzáad, eltávolít és átnevez a színeket. Ügyeljen arra, hogy ez ne legyen bonyolult.
  3. A rendszernek csak az alapvető színeket kell tartalmaznia → ezt már oly sokszor hallottuk ... mindazonáltal mindig több színnel járunk, mint amire szükségünk van! A tervezőrendszer valódi sikerének kulcsa minden, ami nem szükséges, eltávolítása (a színeket is tartalmazza).

Szemantikus és deklaratív színek

A színváltozók beállításához két fő megközelítés létezik: szemantikai és deklaratív színek.

A szemantikai megközelítés a következőképpen néz ki:

Míg itt egy példa egy deklaratív megközelítésre:

Egyikük sem rossz. Az Ön igényeinek megfelelő kiválasztás nagyon sok tényezőtől függ (például a projekt méretétől, a márkanevek színének relevanciájától stb.).

A keretünk _colors.scss fájljának kidolgozása során figyelembe kellett vennem a felhasználók szerkesztését (100%). Ez azt jelenti, hogy még ha a deklaratív megközelítést is volt a legkönnyebben használni, a szemantikai megközelítéssel kellett összekevernem egy olyan rendszert, amelyet szintén könnyű karbantartani.

Az alapvető színpaletta

Az első lépés a webes összetevők létrehozásához szükséges minimális színszám deklarálása. Általában az alapvető színpaletta a következőkből áll:

  1. A linkekhez használt fő / elsődleges szín → a gomb háttér színe stb. Általában ez a cselekvésre ösztönző fő szín.
  2. Az ékezetes szín → valami fontos kiemelésére szolgál az oldalon. Ez nem az elsődleges szín variációja, hanem egy kiegészítő szín.
  3. Semleges színek skála → Ez általában a szürkeárnyalatos hangok skálája, amelyet szövegelemekhez, finom elemekhez, szegélyekhez stb. Kell használni.
  4. Visszajelzés színei → siker, hiba, figyelmeztetés.

Ezeknek a színeknek némelyikéhez változatot kell (sötétebb / világosabb változat) használni, gyakran az interaktivitás kiemelésére (például: lebegés / aktív állapotok).

A CSS-ben ez a következőkre fordul:

* Megjegyzés: a postcss-color-mod-function plugin-t használjuk a színfunkciók lefordítására az összes böngészővel kompatibilis RGBA kódra.

A fenti kivonat a színpalettát ábrázolja: a projekt során használt összes színt.

Az elsődleges és az ékezetes szín variációit a színfunkciók segítségével állíthatjuk elő. Ez a megközelítés akkor hasznos, ha van egy demo.html fájl (és ezt a mi keretünkben is megteszjük), így mindaddig finomíthatjuk a függvények értékeit, amíg elégedettek lennének a kapott színekkel. Az árnyalatok (vagy semleges) színeket a chroma.js segítségével állítják elő. Ebben az esetben a funkciók használata nem volt ideális, mivel általában két ellentétes színben van (fekete-fehér), és e két szín alapján el kell állítania az értékek skáláját.

Szemantikus színek hozzáadása a keverékhez

Amint a színpaletta kész, szemantikai színeket adhatunk hozzá. A szemantikai színek létrehozása nem jelenti a színek számának növelését, hanem a színek szemantikai referenciák szerinti eloszlását.

Miért gondolom, hogy ez jó megközelítés

Mindenekelőtt ez a rendszer két alapvető színre támaszkodik: az elsődleges és az ékezetes színekre. Ez azt jelenti, hogy amikor a színváltozókat kell használnia, akkor nem lesz nehéz megjegyezni, hogy mit jelentenek ezek a változók (még akkor is, ha nem deklaratív neveket használ, például a „kék” és a „piros”).

Lehet, hogy rendszerének több színt kell tartalmaznia (például egy másodlagos színt). Még mindig csak három színtel foglalkozik. A 10 vagy több fő szín alapján működő rendszer kezelése az alkalmazott megközelítéstől függetlenül nehéz lesz, ezért érdemes megfontolni annak egyszerűsítését.

A szürkeárnyalatos színek más elnevezési módszert használnak: minél nagyobb a szám a változó végén, annál sötétebb a szín.
Ez a megközelítés akkor lesz praktikus, ha nem biztos abban, hogy melyik semleges színt kívánja alkalmazni. Ha a szürke-2 túl finomnak tűnik, kipróbálhatja a szürke-3-t. Lehet, hogy észrevette, hogy egyes árnyalatok hiányoznak (például a szürke-5). A mi esetünkben nem voltak nélkülözhetetlenek (soha nem használtuk őket a web-összetevők létrehozásakor), ezért eltávolítottuk őket a színpalettából.

Szemantikus színeket adnak a keverékhez három fő okból:

  1. A _colors.scss fájl az igazság forrásává válik bármikor, amikor módosítania kell a színt. Úgy érzi, hogy a szöveg címsorának sötétebbnek kell lennie? Nyissa meg a _colors.scss fájlt, és szerkessze a szín-szöveg-fejléc változót.
  2. Ha például meghatároz egy színkeretet, akkor nem kell megnéznie, melyik szürke színt használta más összetevőkben, amikor a szegélyelem legközelebb létrehoz. Ugyanez a koncepció vonatkozik sok elemre, nem csak a határokra.
  3. Különböző témák készítéséhez és karbantartásához teszi tortadarabbá.

rendszerezést

Amint felhasználhatjuk a CSS-változókat anélkül, hogy támaszkodnunk kell plug-inekre vagy polyfill-kitöltésre, a színes témák létrehozása rendkívül egyszerű *! Ez azt jelenti, hogy ma nem tudunk témákat létrehozni? Nem, tudjuk. Két lehetőségünk van.

* keretrendszerünkben a postcss-css-variables bővítményt használjuk a CSS változók összeállításához. Jelenleg nem támogatja a CSS osztály változók frissítését.

Az 1. lehetőség a CSS-változók frissítésére szolgál. Azok a böngészők, amelyek nem támogatják a változókat, az „alapértelmezett” színes témát mutatják. Ez nem kérdés, mindaddig, amíg a tartalom elérhető.

Például van egy alapértelmezett színtéma → fehér háttér és fekete szöveg szín, valamint .téma-sötét → fekete háttér és fehér szín. Ezután két összetevőt hoz létre, az egyik az alapértelmezett témával, a másik a .dark-témával. Ha mindkét alkotóelem alapértelmezett témája nem befolyásolja a felhasználói élményt, akkor a .dark-témát javításnak tekintheti (opcionális). Ebben az esetben érdemes frissíteni a változókat, hogy különféle témákat hozzon létre, akkor is, ha nem mindenhol támogatják őket.

Így hozhat létre egy új témát, frissítve néhány kulcsfontosságú CSS-változót:

Szeretem ezt a megoldást, mert kivonja a színjavítást, és lehetővé teszi a színes témák egyetlen fájlban tartását. Ezzel megváltoztathatjuk az egyes összetevők állapotát (az a-tól a-b-ig) egyszerűen egy CSS osztály alkalmazásával.

A 2. lehetőség minden elemre irányulna, amelynek megjelenését a téma befolyásolja. Ennek a módszernek az az előnye, hogy minden böngésző támogatja. A teljes mértékben CSS-változókon alapulóhoz viszonyítva azonban nem olyan könnyű karbantartani.

Íme egy példa a 2. lehetőségre a működésben:

Most már tudja, hogyan tervezzük a színek kezelését a keretünkben! Ha visszajelzése / javaslata van, tudassa velünk a megjegyzésben!

Remélem tetszett a cikk! További webdizájn-rögökkel kapcsolatban itt követhet minket a Mediumon vagy a Twitter-en.