Atomic.CSS { Css/Sass: Framework; }

ACSS Framework ~ Uni(versal) Atomic CSS

Настройка UniCSS под свою задачу

Общая структура sass-файлов UniCSS:

─ sass/
  ├── fonts/
  │	  └── ...
  │
  ├── main/
  │	  └── ...
  │
  ├── unicss/
  │	  └── ... 
  │
  ├── _variables.scss (настройки)
  └── style.scss (компилируемый файл)

Каталог fonts содержит классы для иконочного шрифта FontAvesome.

Каталог main содержит файлы, которые непосредственно отвечают на вёрстку вашего шаблона (типографику, формы, таблицы и т.п.).

Каталог unicss содержит основные файлы UniCSS: типовые классы и служебные миксины.

Файл _variables.scss содержит все основные настройки, с помощью которого можно управлять UniCSS.

Файл style.scss — компилируемый и содержит все подключаемые блоки.

Sass-компиляция

Используется стандарный sass-компилятор. Вы можете использовать следующую команду в Консоли:

sass --update assets/sass/:assets/css/ --sourcemap=none --style compressed

Это запустит компиляцию sass-файлов в каталоге assets/sass/, а результат будет помещён в assets/css/.

Обратите внимание, что sass-компилятор игнорирует файлы, начинающиеся с символа подчеркивания «_». Именно поэтому в UniCSS файл style.scss единственный компилируемый.

Файл style.scss можно произвольно переименовать.

Управление через style.scss

Если какие-то css-классы не нужны в вашем проекте, то их можно отключить прямо в style.scss. Для этого достаточно закоментировать нужую строчку. Например, если не нужны css-классы для таблиц:

...
@import 'main/lists';
@import 'main/shadow';
// @import 'main/table'; — закоментированная строчка
@import 'main/transition';
@import 'main/other';
...

Точно также вы можете добавить свои scss-файлы для компиляции.

Управление через _variables.scss

Файл _variables.scss предлагает более гибкую настройку. В UniCSS используются автогенерируемые css-классы, что позволяет создавать только те, которые действительно нужны.

Делается это с помощью sass-переменных (начинаются с «$»). Переменная обычно содержит список значений, на основе которых будут сгенерированы css-классы. Например строчка:

$padding_list: 5, 10;

приведёт к созданию следующих классов:

.pad5    { padding: 5px; }
.pad5-t  { padding-top: 5px; }
.pad5-r  { padding-right: 5px; }
.pad5-b  { padding-bottom: 5px; }
.pad5-l  { padding-left: 5px; }
.pad5-tb { padding-top: 5px;  padding-bottom: 5px; }
.pad5-rl { padding-right: 5px; padding-left: 5px; }
  
.pad10    { padding: 10px; }
.pad10-t  { padding-top: 10px; }
.pad10-r  { padding-right: 10px; }
.pad10-b  { padding-bottom: 10px; }
.pad10-l  { padding-left: 10px; }
.pad10-tb { padding-top: 10px; padding-bottom: 10px; }
.pad10-rl { padding-right: 10px; padding-left: 10px; }

При этом, если отмечена

$padding_margin_important: true;

то к классам будет добавлено свойство !important:

.pad5    { padding: 5px !important; }
.pad5-t  { padding-top: 5px !important; }
.pad5-r  { padding-right: 5px !important; }

и т.д.

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

Адаптивный дизайн

В UniCSS используются следующие @media-точки:

.     480     640      768      1024       1100
 SMALL   PHONE   TABLET   MEDIUM    DESKTOP    LARGE

Настраиваются они через переменные:

$SCREEN_SMALL:   "(max-width: 480px)";
$SCREEN_PHONE:   "(max-width: 640px)";
$SCREEN_TABLET:  "(max-width: 768px)";
$SCREEN_MEDIUM:  "(max-width: 1024px)";
$SCREEN_DESKTOP: "(max-width: 1100px)";
$SCREEN_LARGE:   "(min-width: 1101px)";

При этом в переменной $screen_media_width_step_list можно указать только те, которые востребованы в шаблоне. По умолчанию в UniCSS используются только tablet и phone — остальные строчки закоментированы.

$screen_media_width_step_list: (
		// "large":   $SCREEN_LARGE,
		// "desktop": $SCREEN_DESKTOP,
		// "medium":  $SCREEN_MEDIUM,
	"tablet":  $SCREEN_TABLET, 
	"phone":   $SCREEN_PHONE,
		// "small":   $SCREEN_SMALL
);

Данная настройка влияет на классы ширины («w», см. $width_list_percent), чтобы обеспечить их разнообразие для адаптивного дизайна:

.w30-tablet
.w100-phone

Аналогичным образом работают настройки $screen_media_flex_step_list — для flex-сетки, и $screen_media_text_step_list — для размеров текста в адаптивном дизайне.

Настройка цветов

В UniCSS используется концепция Material Design от Google, где каждый основной цвет имеет градацию яркости от 50 до 900. Миксины UniCSS автоматически рассчитывают данную градацию для цветов, указанных в переменной $color_step_list. Сами же степени градации задаются в переменной $colors_state_step_list. Эти две настройки позволяют указать те цвета и те градации, которые будут востребованы при верстке. По умолчанию включена генерация всех цветов во всех градациях. Это довольно большой объем css-кода, но при этом доступны все варианты цветов.

В комплект UniCSS входит colors-gmd.html, где собраны все google-цвета. Файл _colors-gmd.scss содержит их sass-переменные.

Сами цвета настраиваются в одноименных sass-переменных и вы можете указать любые свои значения. Кроме этого в Material Design предполагается использование дополнительных цветов в смежных вариантах. Для этого предусмотрены переменные $color1 и $colorA1, $color2 и $colorA2 и т.д. Назначение цветов может быть произвольным. Их особенностью будет то, что для них также будут сгенерированы css-классы: цвет текста, фона, бордюра и т.п.

Модульная сетка

Не следует путать модульную сетку и flex-сетку. Модульная сетка — это общий контейнер, в задачу которого входит позиционирование блока относительно браузера. В UniCSS используются классы .layoutXXX, которые настраиваются через sass-переменные.

Flex сетка

Flex-модель в UniCSS предоставлена классами flex- и большинстве случаев повторяют стандартные css-стили.

Переменная $screen_media_flex_step_list позволяет задать адаптивное поведением для некоторых flex-классов. Например:

Для задания ширины ячеек используются общие классы ширины («w»).

Такая возможность позволяет управлять поведением сетки в очень больших вариациях.

Main-каталог

В каталоге main располагаются файлы, которые можно (и нужно) менять под свою задачу. Здесь настраивется вся типографика, а также наиболее распространенные css-классы. Здесь же следует размещать дополнительные sass-файлы, если возникнет такая потребность (и подключить их в style.scss).

Некоторые переменные для main-файлов вынесены ради удобства в общий _variables.scss. Вы можете их использовать, либо задать стили прямо в main-файлах.

Обратите внимание, что файл unicss/_colors.scss подключается после main-файлов. Сделано это для увеличения «веса css-селектора» — когда последний объявленный имеет больший «вес». В данном случае это означает, что классы цветов будут иметь чуть больший приоритет. Это особенно актально для случаев, когда требуется переопределить цвета.

В любом случае main-каталог полностью отдан на откуп вебмастеру. Используйте его по своему усмотрению.

© Universal Atomic CSS, 2015-2018