Warning: Declaration of bdyssh_menu_titles::start_el(&$output, $item, $depth, $args) should be compatible with Walker_Nav_Menu::start_el(&$output, $item, $depth = 0, $args = Array, $id = 0) in /var/www/jopka/data/www/bdyssh.ru/wp-content/themes/bdyssh/functions.php on line 57
Bdyssh!
Bdyssh! // Бдыщщь!

Все что вы сдесь видете, далжно оставатся сикретам, %username%.

Как правильно делать сайты. Часть 1: CSS / How to make precisely correct websites. Part 1: CSS

Введение

Сегодня подавляющая часть разработок, связанных с интернет-дизайном, имеет недопустимо низкое качество. Прежде всего потому, что программисты и дизайнеры не имеют специального образования, и как следствие не знают основ своего дела. Причём не только в России, сейчас это мировая проблема.

Здесь пока не идёт речь о конкретных ляпах на web-страницах. Мы поговорим о куда более принципиальных и всеобъемлющих недостатках, прежде всего – о влиянии неправильного дизайна на здоровье ваших глаз.

К таким недостаткам относятся: 1) использование светлого фона и тёмного текста; 2) использование мелкого шрифта. Данная, первая часть общего цикла статей, не рассматривает вторую проблему, но обеспечивает фундаментальную подготовку к её решению.

Правило 1: Для того чтобы веб-сайт, как и любая другая текстовая или векторная (чертежи) информация, отображаемая на светоизлучающем устройстве (дисплее с лампой), была безвредна для глаз, необходимо, чтобы весь текст и линии чертежей были светлее (ярче) фона.

Для глобального решения этой проблемы независимо от необразованных дизайнеров и программистов, были разработаны специальные инвертирующие экранные фильтры, а для правильной работы, мной они были доработаны для сохранения цвета окрашенных участков. Тем не менее такой фильтр не помогает, когда в больную голову дизайнера приходит идея совмещения на одном кадре прямого и инвертированного текста.

Правило 2: Если вы не можете следовать Правилу №1, необходимо делать весь текст и линии в пределах одного экрана одинаковым методом (например тёмный текст, белый фон) для правильной работы инверсных фильтров.

Несоблюдение этих правил приводит к выжиганию глаз белыми участками изображения, и к высокой утомляемости мозга из-за переключения зрения с прямого на инверсный текст, когда не выполнено Правило №2.

Применительно к web-программированию, для того чтобы сделать сайт соответствующий этим требованиям, полезной окажется информация о том, что практически всё цветовое и шрифтовое оформление для данного домена или сайта, на сегодня, находится в файле .css . Таким образом, нам нужно разобраться со структурой этого файла, с целью править имеющиеся стили, так как их уже существует огромное количество в виде открытого кода, и это гораздо быстрее, чем создавать стиль заново. Но полученный опыт также сильно пригодится и при создании файла CSS с нуля или доработки собственной имеющейся коллекции.

Ещё одной целью данной работы является то, что результат работы является принципиально адаптирован для удобного изменения человеком, что способствует повторному использованию кода, повышая общественное благосостояние.

Introduction

Nowadays, there are many of web-related designs which have unacceptable low quality. Mostly it is due to new designers and programmers does not know foundations of their work; they only just know how to use <xxx> software.

I wait for decision on https://github.com/nex3/sass/issues/935 to continue writing final version of this article.

 

uuuuuu

CSS: Первое знакомство

При рассмотрении различных готовых файлов CSS, являющихся, с точки зрения opensource-сообщества, профессиональными, и имеющими высокий рейтинг, можно обнаружить следующее.

CSS (обычно, и далее по тексту, это style.css) имеет сложную неупорядоченную структуру. А именно, забегая вперёд и выражаясь правильным с точки зрения программирования языком, – является скомпилированным файлом. То есть, не предназначенным для редактирования человеком в текстовом редакторе. Представьте себе редактирование бинарника в hex-кодах. Но не секрет, что многие всё равно правят, а то и пишут с нуля, CSS-файлы напрямую. Что не только не эффективно и не красиво, но и делает код почти невозможным к правке, особенно другими пользователями.

На данном этапе нас будут интересовать структура, расположение и формат объявления цветов в файле CSS.

Цвета объявляются в виде color, #RGB, #RRGGBB, rgb(r, g, b) – непрозрачные, или rgba (r, g,b, a.a) – прозрачные. Где: color – это человекопонятное слово, например black; R (G, B) – шестнадцатиричная цифра, r (g, b) – десятичное число от 0 до 100, a.a – дробное десятичное число от 0 до 1.0. Собственно, это мы менять не собираемся – здесь всё относительно логично, просто нужно знать.

Зато дальше, с расположением цветовых констант по ходу файла, начинаются проблемы. Дело в том, что скомпилированный файл неструктурирован. Это означает, что один и тот же цвет может перечисляться много раз по ходу файла. Это делает редактирование (изменение этого цвета) трудным, а если цветов много (а для инверсии цветов их надо менять все) – почти невозможным делом, даже с помощью автозамены. А если завтра выйдет новая, обновлённая версия этого файла? Всё сначала?

Очевидным способом для преодоления этого недостатка могло бы стать использование переменных. Но на данный момент нативные переменные всё ещё не поддерживаются в CSS, хотя поддержка планируется.

Следовательно, необходим иной способ. И он был придуман. Это использование структурированных файлов на этапе хранения, редактирования и распространения, которые однозначно переводятся в стандартный CSS при публикации сайта на хостинге.

Такими файлами являются SCSS, или структурированный CSS.

Об этом стандарте информация вполне доступна и открыта в других местах. Нам же здесь сейчас важно, что имеющийся готовый, скомпилированный файл CSS, может быть декомпилирован – переведён в исходный код, который человекочитаем и удобен для правки. Разумеется, возможен и обратный процесс – компиляция.

В этом важно прежде всего то, что при декомпиляции умным алгоритмом производится структурирование содержимого, хоть и пока ещё не со 100%-ным успехом, но приемлемым для работы (и, разумеется, при компиляции этот код даёт эквивалентный CSS). В частности – одинаковые цвета частично группируются, что значительно уменьшает общее число объявленных цветовых констант.

Однако, этого всё ещё недостаточно для удобной работы.

Одной из важных особенностей, реализованной в компиляторе CSS, но не в декомпиляторе, является отличная поддержка тех долгожданных переменных, а также хорошего набора функций для работы с цветами. Вот оно – что поможет нам сделать человекоизменяемый файл! При этом мы, получив исходник готового CSS, декомпилировав его, – или же написав свой структурированный исходник, сможем уже в полном объёме использовать переменные и функции для объявления всех необходимых цветов! В этом случае, изменение и даже инверсия цветовой схемы становится не мучением, а удовольствием!

Но как уже было отмечено, в декомпиляторе поддержки переменных нет, и не будет в обозримом будущем. То есть, декомпилятор не группирует одинаковые значения цветов (все встречающиеся в разных секциях) и не даёт им объявляемую переменную с требуемым значением. Поэтому мной было написана программа-парсер (интеллектуальных обработчик), чтобы восполнить это отсутствующее звено в цепи, и таким образом получить полный готовый комплекс для обработки большой массы имеющихся стилей. Программа запускается после того, как отработает декомпилятор из пакета sass. (Т.е. имеет на входе SCSS после декомпиляции, а на выходе – SCSS со сгруппированными переменными).

Для примера возьмём стиль из самой распространённой “белой” темы WordPress, “twentytwelve”. Данный стиль (wp-content/themes/twentytwelve/style.css) мы используем, чтобы показать возможности программы и отработать на нём способы создания правильных SCSS-файлов.

Примечание: Данный стиль не был выбран как самый “неправильный” с точки зрения внутренней структуры; тем не менее, пусть авторы не обижаются на критику технического содержания внутренностей (им надо отдать должное – проделана огромная работа, методом написания двоичного кода в шестнадцатеричном редакторе). Стиль был выбран лишь из-за того, что он широкоизвестный, распространённый и профессиональный.

Декомпиляция: от CSS к SCSS

Итак, что же мы увидим после декомпиляции этого файла и группировки всех имеющихся цветов в переменные?

Оттенки серого

Результат поражает! Одних только оттенков серого, используется более двадцати – при том, что на глаз их не более двух!!!

Примечание: Использован вывод предыдущей версии программы, только для демонстрации.
Примечание 2: “Lighten” – это уже мой парсер добавляет в SCSS; пока это можно игнорировать.

ojoj

Hmmm.

 

/* Total grouped colors GRAY: 26, total colors GRAY was: 186 */
$color_333:    lighten(#000,  20);    /* $color_333:    lighten(#000,  20); qty=2 n=0 */
$color_ccc:    lighten(#000,  80);    /* $color_ccc:    lighten(#000,  80); qty=2 n=1 */
$color_636363:    lighten(#000,  38);    /* $color_636363:    lighten(#000,  38); qty=2 n=2 */
$color_7c7c7c:    lighten(#000,  48);    /* $color_7c7c7c:    lighten(#000,  48); qty=3 n=3 */
$color_e6e6e6:    lighten(#000,  90);    /* $color_e6e6e6:    lighten(#000,  90); qty=19 n=4 */
$color_f4f4f4:    lighten(#000,  95);    /* $color_f4f4f4:    lighten(#000,  95); qty=18 n=5 */
$color_d2d2d2:    lighten(#000,  82);    /* $color_d2d2d2:    lighten(#000,  82); qty=3 n=6 */
$color_5e5e5e:    lighten(#000,  36);    /* $color_5e5e5e:    lighten(#000,  36); qty=7 n=7 */
$color_ebebeb:    lighten(#000,  92);    /* $color_ebebeb:    lighten(#000,  92); qty=34 n=8 */
$color_f9f9f9:    lighten(#000,  97);    /* $color_f9f9f9:    lighten(#000,  97); qty=15 n=9 */
$color_757575:    lighten(#000,  45);    /* $color_757575:    lighten(#000,  45); qty=17 n=10 */
$color_e1e1e1:    lighten(#000,  88);    /* $color_e1e1e1:    lighten(#000,  88); qty=18 n=11 */
$color_c6c6c6:    lighten(#000,  77);    /* $color_c6c6c6:    lighten(#000,  77); qty=3 n=12 */
$color_fff:    lighten(#000, 100);    /* $color_fff:    lighten(#000, 100); qty=5 n=13 */
$color_ededed:    lighten(#000,  92);    /* $color_ededed:    lighten(#000,  92); qty=13 n=14 */
$color_444:    lighten(#000,  26);    /* $color_444:    lighten(#000,  26); qty=5 n=15 */
$color_000:    lighten(#000,   0);    /* $color_000:    lighten(#000,   0); qty=5 n=16 */
$color_515151:    lighten(#000,  31);    /* $color_515151:    lighten(#000,  31); qty=1 n=17 */
$color_9f9f9f:    lighten(#000,  62);    /* $color_9f9f9f:    lighten(#000,  62); qty=2 n=18 */
$color_686868:    lighten(#000,  40);    /* $color_686868:    lighten(#000,  40); qty=3 n=19 */
$color_666:    lighten(#000,  40);    /* $color_666:    lighten(#000,  40); qty=2 n=20 */
$color_848484:    lighten(#000,  51);    /* $color_848484:    lighten(#000,  51); qty=1 n=21 */
$color_6a6a6a:    lighten(#000,  41);    /* $color_6a6a6a:    lighten(#000,  41); qty=2 n=22 */
$color_efefef:    lighten(#000,  93);    /* $color_efefef:    lighten(#000,  93); qty=2 n=23 */
$color_aaa:    lighten(#000,  66);    /* $color_aaa:    lighten(#000,  66); qty=1 n=24 */
$color_e3e3e3:    lighten(#000,  89);    /* $color_e3e3e3:    lighten(#000,  89); qty=1 n=25 */

/* Total grouped colors RGB: 12, total colors RGB was: 31 */
$color_fff9c0:    rgb(255, 249, 192);    /* $color_fff9c0:    rgb(255, 249, 192); qty=1 n=0 */
$color_21759b:    rgb( 33, 117, 155);    /* $color_21759b:    rgb( 33, 117, 155); qty=11 n=1 */
$color_1f6f93:    rgb( 31, 111, 147);    /* $color_1f6f93:    rgb( 31, 111, 147); qty=1 n=2 */
$color_0f3647:    rgb( 15,  54,  71);    /* $color_0f3647:    rgb( 15,  54,  71); qty=1 n=3 */
$color_4d525a:    rgb( 77,  82,  90);    /* $color_4d525a:    rgb( 77,  82,  90); qty=1 n=4 */
$color_2e3542:    rgb( 46,  53,  66);    /* $color_2e3542:    rgb( 46,  53,  66); qty=1 n=5 */
$color_d2e0f9:    rgb(210, 224, 249);    /* $color_d2e0f9:    rgb(210, 224, 249); qty=1 n=6 */
$color_a8bfe8:    rgb(168, 191, 232);    /* $color_a8bfe8:    rgb(168, 191, 232); qty=1 n=7 */
$color_4a5466:    rgb( 74,  84, 102);    /* $color_4a5466:    rgb( 74,  84, 102); qty=1 n=8 */
$color_0088d0:    rgb(  0, 136, 208);    /* $color_0088d0:    rgb(  0, 136, 208); qty=6 n=9 */
$color_009cee:    rgb(  0, 156, 238);    /* $color_009cee:    rgb(  0, 156, 238); qty=5 n=10 */
$color_007cbd:    rgb(  0, 124, 189);    /* $color_007cbd:    rgb(  0, 124, 189); qty=1 n=11 */

/* Total grouped colors RGBA: 3, total colors RGBA was: 5 */
$color_64__64__64__0_1:    rgba( 64,  64,  64, 0.10);    /* $color_64__64__64__0_1: rgba( 64,  64,  64, 0.10); qty=3 n=0 */
$color_0__0__0__0_2:    rgba(  0,   0,   0, 0.20);    /* $color_0__0__0__0_2:    rgba( 0,   0,   0, 0.20); qty=1 n=1 */
$color_100__100__100__0_3:    rgba(100, 100, 100, 0.30);    /* $color_100__100__100__0_3:    rgba(100, 100, 100, 0.30); qty=1 n=2 */ 

Часть оттенков серого идентичны: чего только стОит #636363, #666, #686868 и #6a6a6a. Нет, я конечно понимаю, что opensource-код пишется десятками людей, но нельзя же настолько неуважать свой труд, чтобы допускать такое в топовом продукте, не имея даже намёка на попытку использования безопасных цветов – а их, к счастью, определено всего 6 (из неокрашенных) – белый, чёрный, и 4 градации серого, с шагом 20%. И правильно – больше не нужно, а если дизайнер не способен оперировать безопасными Web-цветами – он что-то делает не так, стоит задуматься.

Тем не менее, в пределах данной работы мы дадим дизайнеру послабление, и допустим наличие, кроме 6-ти основных (шаг 20%), также 11-ти (шаг 10%) или 17-ти (шаг #111111) градаций (значение выбирается в программе). По этому параметру моя программа-парсер будет группировать grayscale-цвета в ещё меньшее количество переменных. (TODO: сделать функцию дискретизации отключаемой в случае изначально вменяемого кол-ва градаций серого). Однако связь с оригинальным значением останется в виде названия переменной. Так что, если парсер где-то “ошибётся” (например, был указан градиент от #636363 до #686868 – он перестанет быть градиентом, став монотонным – но вот вопрос, был ли этот градиент заметен для глаз?!) – в таких случаях, если градиент всё ж во что бы то ни стало должен остаться градиентом – необходима правка SCSS руками; названия переменных помогут.

Получим для 10%-го шага, такой результат (забегая вперёд, укажем, что здесь программа выполнена уже с ключом – – invert, см.далее, поэтому, например, Color_000 это 100% белый, а Color_fff это 0% белого, т.е. чёрный):

Код №2: SCSS:

kkkk

 

/* Gray table: step = 25.5/255 */
$gray0:	lighten(#000,   0);
$gray10:	lighten(#000,  10);
$gray20:	lighten(#000,  20);
$gray30:	lighten(#000,  30);
$gray40:	lighten(#000,  40);
$gray50:	lighten(#000,  50);
$gray60:	lighten(#000,  60);
$gray70:	lighten(#000,  70);
$gray80:	lighten(#000,  80);
$gray90:	lighten(#000,  90);
$gray100:	lighten(#000, 100);
/* Total grouped colors GRAY: 26, total colors GRAY was: 186 */
$color_333:	$gray80;	/* $color_333:	$gray80; qty=2 n=0 */
$color_ccc:	$gray20;	/* $color_ccc:	$gray20; qty=2 n=1 */
$color_636363:	$gray60;	/* $color_636363:	$gray60; qty=2 n=2 */
$color_7c7c7c:	$gray50;	/* $color_7c7c7c:	$gray50; qty=3 n=3 */
$color_e6e6e6:	$gray10;	/* $color_e6e6e6:	$gray10; qty=19 n=4 */
$color_f4f4f4:	$gray0;	/* $color_f4f4f4:	$gray0; qty=18 n=5 */
$color_d2d2d2:	$gray20;	/* $color_d2d2d2:	$gray20; qty=3 n=6 */
$color_5e5e5e:	$gray60;	/* $color_5e5e5e:	$gray60; qty=7 n=7 */
$color_ebebeb:	$gray10;	/* $color_ebebeb:	$gray10; qty=34 n=8 */
$color_f9f9f9:	$gray0;	/* $color_f9f9f9:	$gray0; qty=15 n=9 */
$color_757575:	$gray50;	/* $color_757575:	$gray50; qty=17 n=10 */
$color_e1e1e1:	$gray10;	/* $color_e1e1e1:	$gray10; qty=18 n=11 */
$color_c6c6c6:	$gray20;	/* $color_c6c6c6:	$gray20; qty=3 n=12 */
$color_fff:	$gray0;	/* $color_fff:	$gray0; qty=5 n=13 */
$color_ededed:	$gray10;	/* $color_ededed:	$gray10; qty=13 n=14 */
$color_444:	$gray70;	/* $color_444:	$gray70; qty=5 n=15 */
$color_000:	$gray100;	/* $color_000:	$gray100; qty=5 n=16 */
$color_515151:	$gray70;	/* $color_515151:	$gray70; qty=1 n=17 */
$color_9f9f9f:	$gray40;	/* $color_9f9f9f:	$gray40; qty=2 n=18 */
$color_686868:	$gray60;	/* $color_686868:	$gray60; qty=3 n=19 */
$color_666:	$gray60;	/* $color_666:	$gray60; qty=2 n=20 */
$color_848484:	$gray50;	/* $color_848484:	$gray50; qty=1 n=21 */
$color_6a6a6a:	$gray60;	/* $color_6a6a6a:	$gray60; qty=2 n=22 */
$color_efefef:	$gray10;	/* $color_efefef:	$gray10; qty=2 n=23 */
$color_aaa:	$gray30;	/* $color_aaa:	$gray30; qty=1 n=24 */
$color_e3e3e3:	$gray10;	/* $color_e3e3e3:	$gray10; qty=1 n=25 */

И для правки оттенков серого, если это понадобится, достаточно будет поправить всего 11 значений в первых строках (яркость от 0 до 100 в функции lighten() ). Нетрудно догадаться, что эта простая правка, после компиляции в CSS стандартным способом, приведёт к коррекции цветов во всём стиле, с полным сохранением его оригинальной функциональности!

Окрашенные цвета

Декомпиляция с последующей группировкой показывает, что в “twentytwelve” используются 12 окрашенных цветовых оттенков. Не так уж и много для правки руками, когда всё в одном месте – хотя и подозрительно много с точки зрения визуальной цветовой простоты данного стиля. Но может быть ситуацию можно ещё более упростить без нарушения функциональности?

Здесь необходимо отметить, что для окрашенных тонов, их схожесть, а также трансформацию, куда более удобно проводить в цветовой модели HSL, нежели в RGB. Поэтому в программе-парсере предусмотрен перевод всех окрашенных тонов в этот формат. (Разумеется, проверена полная обратная совместимость с компилятором).

Что это даёт? Прежде всего можно сразу определить схожесть цветового тона (окраса) цветов, ведь теперь за это отвечает один параметр – hue, вместо трёх сразу (r, g, b). Итак, посмотрим, что же получилось:

txt

 

/* Total grouped colors RGB: 12, total colors RGB was: 31 */
$color_fff9c0:	hsl( 54, 100,  12);	/* $color_fff9c0:	hsl( 54, 100,  12); qty=1 n=0 */
$color_21759b:	hsl(198,  64,  63);	/* $color_21759b:	hsl(198,  64,  63); qty=11 n=1 */
$color_1f6f93:	hsl(198,  65,  65);	/* $color_1f6f93:	hsl(198,  65,  65); qty=1 n=2 */
$color_0f3647:	hsl(198,  65,  83);	/* $color_0f3647:	hsl(198,  65,  83); qty=1 n=3 */
$color_4d525a:	hsl(216,   7,  67);	/* $color_4d525a:	hsl(216,   7,  67); qty=1 n=4 */
$color_2e3542:	hsl(218,  17,  78);	/* $color_2e3542:	hsl(218,  17,  78); qty=1 n=5 */
$color_d2e0f9:	hsl(218,  76,  10);	/* $color_d2e0f9:	hsl(218,  76,  10); qty=1 n=6 */
$color_a8bfe8:	hsl(218,  58,  21);	/* $color_a8bfe8:	hsl(218,  58,  21); qty=1 n=7 */
$color_4a5466:	hsl(218,  15,  65);	/* $color_4a5466:	hsl(218,  15,  65); qty=1 n=8 */
$color_0088d0:	hsl(200, 100,  59);	/* $color_0088d0:	hsl(200, 100,  59); qty=6 n=9 */
$color_009cee:	hsl(200, 100,  53);	/* $color_009cee:	hsl(200, 100,  53); qty=5 n=10 */
$color_007cbd:	hsl(200, 100,  62);	/* $color_007cbd:	hsl(200, 100,  62); qty=1 n=11 */

Нетрудно видеть, что используется только два оттенка: жёлтый (hue=54) и голубой (hue=198…218). (Hue=0 – Красный, 120 – Зелёный, 240 – Синий, 360=0 – снова красный; промежуточные: 60 – жёлтый, и т.д.). Для чего нужно минимизировать число оттенков? Для того, чтобы затем ввести понятие акцента (см.далее). Разумеется, оттенок с hue 198 на типичном мониторе вряд ли отличим от hue=218 (учитывая и то, что группа с hue 218 представлена с низкой насыщенностью, цвет едва различим) – и мы считаем это за один оттенок. На основании этого, достаточно будет определить только два оттенка (акцента) – а остальные цвета рассчитать как изменение его яркости и насыщенности (указав через соответствующие функции SCSS).

Примечание: Если очень хочется вы каким-то образом (как мне подсказывают) будете использовать результат в полиграфии, то в данном случае оттенки с hue 198 и 218 можно разделить, но иметь более двух акцентов (см. ниже) это уже дурной тон (в случае если они независимы, т.е. третий и прочие не могут быть вычислены из первых двух).
Также исключение может быть сделано для главной страницы. На ней может применяться несколько акцентов, или даже допускается полноцветное оформление, в том числе с элементами анимации. Но в этом случае главная страница не информативна, являясь лишь визитной карточкой, и служит только для перенаправления на основное содержимое, выполняемое куда более строго. В этом случае, на ней обязательно наличие обычных текстовых гиперссылок, дублирующих анимированное меню, если оно не заработает у пользователя по различными причинам; впрочем, не будем уклоняться от темы.

Важно: При инверсии цветов, формат HSL очень удобен, надо только лишь инвертировать яркостную составляющую (L) для получения инвертированного цвета, с сохранением его окраски и глубины. В данном примере (коде) уже применена, с помощью ключа – -invert программы-парсера, инверсия к цветам (по формуле L = 100 — Lориг).

Здесь необходимо ввести понятие акцента.

Акцент – это некоторый цвет, а именно, величина hue от 0 до 360, оттенок, которым будут окрашены элементы, не являющиеся серыми. В просторечии можно услышать, что “вот эта тема – зелёная”, другая – голубая, и др., – по названию преобладающего тона. Это и будет акцент данной темы.

Акцент обычно один в пределах сайта, реже два. Акцент должен допускать свободное изменение, при этом вся остальная схема будет следовать за ним: все окрашенные полутона будут вычисляться как функция только трёх цветов (или, иначе говоря, будут расположены между этими цветами): Акцент, Чёрный цвет, Белый цвет.

Акцент в полноцветном выражении – это стопроцентно насыщенный цвет. Например, если тема светло-зелёная, то акцент будет (в полноцветном виде) #00ff00, даже если ярко-зелёный цвет в теме отсутствует. Акцент в виде оттенка однозначно переводится в полноцветный акцент функцией SCSS hsl(accent, 100, 50).

Дополнительными акцентами, окраску которых изменять нельзя, являются информационные сообщения, имеющие принятую кодировку: Норма – зелёный, Внимание – жёлтый, Авария (ошибка) – Красный, Информация – синий. Таким образом, в стилях, использующих такие сообщения (например ПО Zabbix), эти акценты будут заданы в чистом виде.

Для задания всех цветов на основании трёх указанных (акцента, белого, и чёрного), понадобятся, помимо hsl(), ещё три функции, все они уже есть в компиляторе ‘sass’: это lighten(), darken() и desaturate(). После некоторого обдумывания и использования этих функций получится примерно следующее:

text

 

Рис. 1

Как работают функции цветовой модели HSL в SCSS. Присутствуют все возможные цвета веб-интерфейса сайта, имеющего один акцент – поэтому все они вычисляемы.

 

Fig. 1.

How works translation functions for HSL color model in SCSS files. Here presented all possible colors of web interface of html page, when it has only one accent.

 

 

/* user defined accent colors */
$accent0_hue: 200;	/* sea blue */
$accent1_hue: 54;		/* canary */
/* calculated part of colors */
$accent0_color: hsl($accent0_hue, 100, 50);
$accent1_color: hsl($accent1_hue, 100, 50);
/* some website-specific constants for easy of change outlook */
$desat_amount_1: 35;	/* example, you may need to define more vars */

$color_fff9c0:	darken($accent1_color, 35);	/* $color_fff9c0:	hsl( 54, 100,  12); qty=1 n=0 */
$color_21759b:	lighten(desaturate($accent0_color, $desat_amount_1), 15);	/* $color_21759b:	hsl(198,  64,  63); qty=11 n=1 */
$color_1f6f93:	$color_21759b;	/* $color_1f6f93:	hsl(198,  65,  65); qty=1 n=2 */
$color_0f3647:	lighten(desaturate($accent0_color, $desat_amount_1), 30);	/* $color_0f3647:	hsl(198,  65,  83); qty=1 n=3 */
$color_4d525a:	lighten(desaturate($accent0_color, 95), 15);	/* $color_4d525a:	hsl(216,   7,  67); qty=1 n=4 */
$color_2e3542:	lighten(desaturate($accent0_color, 85), 25);	/* $color_2e3542:	hsl(218,  17,  78); qty=1 n=5 */
$color_d2e0f9:	darken(desaturate($accent0_color, 25), 40);	/* $color_d2e0f9:	hsl(218,  76,  10); qty=1 n=6 */
$color_a8bfe8:	darken(desaturate($accent0_color, 40), 25);	/* $color_a8bfe8:	hsl(218,  58,  21); qty=1 n=7 */
$color_4a5466:	lighten(desaturate($accent0_color, 75), 15);	/* $color_4a5466:	hsl(218,  15,  65); qty=1 n=8 */
$color_0088d0:	lighten($accent0_color, 10);	/* $color_0088d0:	hsl(200, 100,  59); qty=6 n=9 */
$color_009cee:	lighten($accent0_color, 5);	/* $color_009cee:	hsl(200, 100,  53); qty=5 n=10 */
$color_007cbd:	lighten($accent0_color, 15);	/* $color_007cbd:	hsl(200, 100,  62); qty=1 n=11 */
Если кто не догадался, это делается вручную. Примерно так:
1. Если цвет, который необходимо задать, имеет насыщенность (S) 100%, то нужны только lighten (если яркость (L) более 50%) или darken (когда L<50%); а если L около 50%, то вообще никакая функция не нужна. А второй аргумент функции это разница между L и 50.
2. Если yасыщенность S < 100%, то добавляется ещё и desaturate(), второй аргумент которой – разница между S и 100.Если это оказалось достаточно понятно, то поздравляю, вы способны будете создавать и править красивые и вместе с тем сложные цветовые схемы со смешной лёгкостью. Например,  достаточно изменить одно значение (акцент) как автоматически, причём полностью правильно, рассчитаются все остальные цвета.Для достижения профессионального результата можно затем автозаменой поправить названия цветовых переменных, сгенерированные автоматически – но, конечно, только после того, как будет получен полностью рабочий код.

Прозрачные цвета

Обработка прозрачных цветов происходит так же, в зависимости от того, окрашенный цвет или оттенок серого. Прозрачных цветов обычно не много. В данной теме их три, и все они оттенки серого. Четвёртая цифра в функции rgba(), как и hsla(), означает прозрачность, её трогать не нужно. (Разница между этими функциями в том, что первая имеет на входе цвет и прозрачность, а вторая три цветовые характеристики и прозрачность). Результат обработки для оттенков серого (с учётом оттенков серого, объявленных для непрозрачных цветов) получим примерно следующий:

text

 

/* Total grouped colors RGBA: 3, total colors RGBA was: 5 */
$color_64__64__64__0_1:	rgba($gray40, 0.1);	/* $color_64__64__64__0_1:	hsla(  0,   0,  36, 0.10); qty=3 n=0 */
$color_0__0__0__0_2:	rgba($gray100, 0.2);	/* $color_0__0__0__0_2:	hsla(  0,   0, 100, 0.20); qty=1 n=1 */
$color_100__100__100__0_3:	rgba($gray0, 0.3);	/* $color_100__100__100__0_3:	hsla(  0,   0,   0, 0.30); qty=1 n=2 */

После такой предварительной ручной обработки, сохраняем файл и делаем копию файла, чтобы он в последствии не был по ошибке перезаписан программой-парсером.

Проверка

Компилируем:

$ sass new.style.scss:style.css

(полностью сценарий работы описан в исходном тексте программы, или в её информационной подсказке).

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

Например, в данном случае пропали кое-какие градиенты, в результате преднамеренного уменьшения числа оттенков серого. Такое происходит с едва заметными изначально градиентами, а на среднем мониторе так они и вообще не заметны. Невелика потеря, но поскольку они всё-таки были дизайнерским изыском, и специально введены, то из уважения к этому труду, находим в результирующем файле (CSS) градиенты с одинаковыми аргументами, и правим исходник (SCSS) (но на самом последнем этапе, когда иных проблем уже точно не осталось!) таким образом, чтобы сделать градиенты более заметными.
Замечание дизайнеру: Всегда делать диапазон градиента не менее 20%. Помнить, что меньшая глубина просто бесполезна на типичных мониторах.

Могут пропасть и переходы, т.е. два соседних очень близких цвета, стать одинаковым цветом. Решение (если оно нужно) так же ручная правка исходника.

В данном случае, в результирующем файле появились такие строки:

text

 CSS:

linear-gradient(top, #1a1a1a, #1a1a1a);
которые, немного подумав, можно найти в исходнике как
еуче

 
SCSS:

.menu-toggle {
  &:active, &.toggled-on {
    color: $color_757575;
    background-color: $color_e1e1e1;
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(top, $color_ebebeb, $color_e1e1e1);
    background-image: -ms-linear-gradient(top, $color_ebebeb, $color_e1e1e1);
    background-image: -webkit-linear-gradient(top, $color_ebebeb, $color_e1e1e1);
    background-image: -o-linear-gradient(top, $color_ebebeb, $color_e1e1e1);
    background-image: linear-gradient(top, $color_ebebeb, $color_e1e1e1);
    box-shadow: inset 0 0 8px 2px $color_c6c6c6, 0 1px 0 0 $color_f4f4f4;
    border-color: transparent;
  }
}
(подсказка – см. таблицу оттенков серого в коде №2) и заменить на
 еуч

 
SCSS:

$grad0:	$gray0;
$grad1:	$gray10;
$grad2:	$gray20;
$bg-img-grad0: unquote("-moz-linear-gradient(top, "+$grad0+", "+$grad1+"); background-image: -ms-linear-gradient(top, "+$grad0+", "+$grad1+"); background-image: -webkit-linear-gradient(top, "+$grad0+", "+$grad1+"); background-image: -o-linear-gradient(top, "+$grad0+", "+$grad1+"); background-image: linear-gradient(top, "+$grad0+", "+$grad1+");");
$bg-img-grad1: unquote("-moz-linear-gradient(top, "+$grad1+", "+$grad2+"); background-image: -ms-linear-gradient(top, "+$grad1+", "+$grad2+"); background-image: -webkit-linear-gradient(top, "+$grad1+", "+$grad2+"); background-image: -o-linear-gradient(top, "+$grad1+", "+$grad2+"); background-image: linear-gradient(top, "+$grad1+", "+$grad2+");");

.menu-toggle {
  &:active, &.toggled-on {
    color: $color_757575;
    background-color: $grad1;
    background-repeat: repeat-x;
    background-image: $bg-img-grad1;
    box-shadow: inset 0 0 8px 2px $color_c6c6c6, 0 1px 0 0 $color_f4f4f4;
    border-color: transparent;
  }
}

При этом ясно, что задать эти пять переменных надо один раз – в начале, а вот заменить пятистрочные конструкции из “background-image:” на простые “background-image: $bg-img-grad0;” и  “background-image: $bg-img-grad1;” можно не только в проблемных градиентах, но и по всему тексту.

Показанный способ объявления текстовых переменных, содержащих изменяемые числовые значения, удобен и для замены других многократно повторяющихся отрезков строк на переменную.

Что ещё?

При окончательной проверке можно заметить, что текстовые поля ввода, не окрашиваются темой. Внимание: Это не является ошибкой в теме (в CSS). Правильный способ окрашивания (а именно, выбор цвета текста, фона, курсора, выделенного текста, орфография, и прочее, в т.ч. размер шрифта) этих полей – определяется браузером, который в свою очередь берёт эти данные из настроек текущей темы операционной системы. И именно так, правильным образом, работает ‘twentytwelve’.

Тем не менее, в некоторых случаях полезным может оказаться явное указание свойств этих полей. Для данной темы это не сложно:

Заменяем в SCSS

text

 

input {
  &[type="submit"], &[type="button"], &[type="reset"] {
на
by

 

input[type="submit"], input[type="button"], input[type="text"], input[type="reset"], textarea {

Не забываем после каждого изменения исходника SCSS, компилировать его. Интересно, что это возможно делать автоматически – авторы стандарта продумали и это. Инструкция находится в подсказке команды sass, или в подсказке в самом верху страницы.

Что не сделано?

На данном этапе, после окончательного переименования переменных с помощью автозамены, мы получили высококачественный исходный код, в тёмном цветовом решении и с легко изменяемыми акцентами. Используйте именно такой код для хранения, изменения, распространения.

Но, в этом коде пока нет автоматической возможности переключения с белого на чёрный фон: это ещё предстоит сделать; хотя и ручное выполнение этого теперь займёт не более пары минут.

Также можно заметить, что фон вокруг основного фрейма остался светлым. Оказывается, он настраивается отдельно – в пользовательских настройках темы, не находящихся в CSS; они находятся в “админке” (http…/wp-admin/).

text

 

text.

Залючение к первой части

Данная работа прививает навыки правильного отношения к цветовому оформлению, под которым понимается, прежде всего, уважение программиста к пользователям, а не только написание качественного кода. В последнее время стало редкостью встретить корректно написанное ПО, веб-сайт или даже простую тему, где бы не встретилось ни одного значения цвета, заданного через жёсткую константу, вместо того чтобы брать значения из текущей цветовой схемы. Это самое отъявленное нарушение, объяснить опасность которого оказалось практически невозможно даже мейнтейнерам OS Ubuntu. Впрочем, данная ОС постепенно скатывается в УГ, когда новоявленные “программисты” начали постепенно выбрасывать функции управления цветом, начиная с исключения единственной тёмной цветовой схемы в версии 11.10, и заканчивая неработоспособностью цветого фильтра в версии 13.10, что делает её просто непригодной для чего-либо, кроме двухминутного сеанса в кафе в Kiosk-mode. Причина этого – вселенского масштаба программистская лень при реализации правильной цветовой обработки для Unity.

Здесь я полностью согласен со словами директора корпорации RGB-Media:
— У убунты был шанс, но они его с треском просрали.

Сейчас я использую Ubuntu 10.04 LTS как основную, а для тестирования и для багрепортов по Gnome3 – Xubuntu 12.10.

Впрочем мы сильно уклонились от темы. Ждём второй части статьи – создание собственных SCSS с нуля.

Keywords:

accent, color, colour, css, dark, darken, functions, inverse, inverted, lighten, sass, scss, sheme, theme, twentytwelve, ubuntu, variables, web, wordpress,