Създайте вашата система за дизайн, част 3: Цветове

В тази статия ще разгледаме как да зададете цветна система в CSS и какви са най-добрите практики, за да сме сигурни, че системата е лесна за използване и поддръжка.

Тази статия е част от поредица за дизайнерски системи, вдъхновени от нашата библиотека от уеб компоненти. Библиотеката разчита на солидна система от CSS глобали. Така че това е, че споделяме нещата, които научихме, задавайки глобалния стил на нашата библиотека!

Поредица от статии:
- Част 1: Типография
- Част 2: Мрежа и оформление
- Част 3: Цветове
- Част 4: Разстояние
- Част 5: Икони
- Част 6: Бутони

Стартирахме цветния редактор! Инструмент за уеб дизайн, който генерира цветни палитри и теми, съвместими с CodyHouse Framework.

Цветни променливи 101

За разлика от други CSS глобали, създаването на цветна система е 10% за кодиране и 90% за семантиката. Докато работите върху файла си _colors.scss, искате да имате предвид следните цели:

  1. Цветните променливи трябва да бъдат лесно запомнящи се → Не искате да проверявате глобалния файл по всяко време, когато трябва да изберете цвят.
  2. Системата трябва да бъде лесна за актуализиране → Ще добавяте, премахвате и преименувате цветове. Уверете се, че това не е сложно.
  3. Системата трябва да включва само основните цветове → ние сме чували този много пъти ... все пак винаги се оказваме с повече цветове, отколкото ни е необходимо! Истинският ключ за успех на дизайнерската система е премахването на всичко, което не е необходимо (включени цветове).

Семантични срещу декларативни цветове

Когато става въпрос за задаване на цветните променливи, има два основни подхода: семантичен и декларативен цвят.

Семантичният подход изглежда така:

Докато ето пример за декларативен подход:

Нито едно от тях не е наред. Изборът на този, който отговаря на вашите нужди, зависи от толкова много фактори (например размер на проекта, уместност на цветовете на марката и т.н.).

Докато работех върху файла _colors.scss на нашата рамка, трябваше да взема предвид, че потребителите ще го редактират (100%). Това означава, че дори ако декларативният подход беше най-лесният за използване, трябваше да го смесвам със семантичния подход, за да получа система, която също беше лесна за поддръжка.

Основната цветова палитра

Стъпка номер едно обявява минималния брой цветове, необходими за създаването на уеб компонентите. По принцип основната цветова палитра е съставена от:

  1. Основният / основният цвят → използва се за връзките, цветът на фона на бутона и т.н. Като цяло това е основният цвят призив за действие.
  2. Цветът на акцента → използва се за подчертаване на нещо важно на страницата. Това не трябва да бъде промяна на основния цвят, а допълващ цвят.
  3. Скала от неутрални цветове → Обикновено е мащаб на сиви тонове, който се използва за текстови елементи, фини елементи, рамки и т.н.
  4. Цветове за обратна връзка → успех, грешка, предупреждение.

Някои от тези цветове се нуждаят от вариация (по-тъмна / по-светла версия), често използвана за подчертаване на интерактивността (например: hover /: активни състояния).

В CSS това се превежда на:

* забележка: използваме приставката postcss-color-mod-функция, за да превеждаме цветовите функции в RGBA код, съвместим с всички браузъри.

Фрагментът по-горе представлява цветовата палитра: всички цветове, използвани в проекта.

Вариациите на основните и акцентираните цветове се генерират с помощта на цветни функции. Този подход е полезен, ако имате demo.html файл (а ние го правим в нашата рамка), така че да можете да настроите стойностите на функциите, докато не сте доволни от получените цветове. Сенките (или неутралните) цветове се генерират с помощта на chroma.js. В този случай използването на функциите не беше идеално, защото обикновено имате два противоположни цвята (черно и бяло) и трябва да генерирате скала от стойности въз основа на тези два цвята.

Добавяне на семантични цветове към микса

След като цветовата палитра е готова, можем да добавим семантични цветове. Създаването на семантични цветове не означава увеличаване на броя на цветовете, а разпределяне на цветовете с помощта на семантични референции.

Защо мисля, че това е добър подход

На първо място, тази система разчита на два основни цвята: основен и акцентен цвят. Това означава, че когато трябва да използвате цветните променливи, няма да ви е трудно да си спомните какво представляват тези променливи (дори ако не използвате декларативни имена като „синьо“ и „червено“).

Вашата система може да се наложи да включва повече цветове (например вторичен цвят). Все още се занимавате само с три цвята. Управлението на система, базирана на 10+ основни цвята, ще бъде трудно, независимо от подхода, който използвате, така че може да искате да помислите за опростяването му.

Цветовете в сивото използват различна конвенция за именуване: колкото по-голямо е числото в края на променливата, толкова по-тъмен е цветът.
Този подход става удобен, когато не сте сигурни кой неутрален цвят искате да приложите. Ако сивото-2 изглежда твърде фино, можете да опитате сиво-3. Може би сте забелязали, че някои нюанси липсват (например сиво-5). В нашия случай те не бяха от съществено значение (никога не ги използвахме при създаването на уеб компонентите), затова ги премахнахме от цветовата палитра.

Семантичните цветове се добавят към сместа поради три основни причини:

  1. Файлът _colors.scss става източник на истината по всяко време, когато трябва да промените цвят. Смятате ли, че елементите на заглавието на текста трябва да са по-тъмни? Отворете файла _colors.scss и редактирайте променливата за цвят-текст заглавие.
  2. Ако определите например цветна рамка, няма да е необходимо да търсите сив цвят, който използвате в други компоненти следващия път, когато създадете рамка. Същата концепция се прилага за много елементи, а не само за граници.
  3. Това го прави парче торта за създаване и поддържане на различни теми.

Theming

Веднага щом можем да използваме CSS променливи, без да се налага да разчитаме на плъгини или polyfill, създаването на цветни теми ще бъде супер просто *! Това означава ли, че днес не можем да създаваме теми? Не, можем. Имаме две възможности.

* в нашата рамка използваме приставката postcss-css-променливи, за да компилираме CSS променливи. Понастоящем не поддържа актуализиране на променливи в CSS клас.

Вариант 1 е актуализиране на CSS променливи така или иначе. Браузърите, които не поддържат променливи, ще покажат цветната тема „по подразбиране“. Това не е проблем, стига съдържанието да е достъпно.

Например, имате цветна тема по подразбиране → бял фон и черен цвят на текста, и .темен-тъмен → черен фон и бял цвят на текста. След това създавате два компонента, един с темата по подразбиране, а другият с .dark-тема. Ако разполагането на двата компонента с темата по подразбиране не влияе на потребителското изживяване, тогава можете да разгледате .dark-тема като подобрение (незадължително). В този случай има смисъл да се актуализират променливите, за да се създадат различни теми, дори ако те не се поддържат навсякъде.

Ето как създавате нова тема, актуализираща някои ключови CSS променливи:

Обичам това решение, защото то абстрахира корекцията на цветовете и ви позволява да запазите вашите цветови теми в един файл. Правейки това, ние потенциално можем да променим състоянието на всеки компонент (от тема-a до тема-b), просто като приложим CSS клас.

Вариант 2 ще бъде насочен към всички елементи, чийто външен вид е засегнат от темата. Предимството на този метод е, че се поддържа от всички браузъри. Въпреки това, не е толкова лесно да се поддържа в сравнение с тази, базирана изцяло на CSS променливи.

Ето пример на вариант 2 в действие:

Сега знаете как планираме да боравим с цветовете в нашата рамка! Ако имате отзиви / предложения, уведомете ни в коментара!

Надявам се, че ви е харесала статията! За повече нокти за уеб дизайн, следвайте ни тук на Medium или Twitter.