CSS-файлы шаблона следует располагать в каталоге css. В MaxSite CMS можно произвольно именовать файлы и использовать любые стили, однако лучше использовать типовой вариант работы с css-файлами, который упрощает верстку шаблона и автоматизирует многие операции.
Ниже будет приведен именно такой вариант.
CSS-фреймворк
В shared-каталоге находится css-фреймворк style-all-mini.css, который содержит стили, которые как правило всегда используются при верстке шаблонов. Структурно style-all-mini.css состоит из:
- reset — сброс стилей
- default — базовые стили, типографика
- headers — заголовки H1-H6
- menu-vertical — стили основного выпадающего многоуровневого меню
- style — стили, которые используются в type-файлах или других частях системы
- plugins — стили плагинов
- helpers — css-хелперы, предопределенные классы, которые можно использовать как при верстке сайта, так и при редактировании записей.
Следует отметить, что css-фреймворк содержит только минимально необходимые стили, чтобы их повторно не переопределять в стилях шаблона.
Использование css-фреймворка style-all-mini.css удобно в том плане, что все изменения в MaxSite CMS на уровне плагинов или ядра системы, автоматически станут доступны и шаблону. Соответственно не потребуется его переверстка.
Подключение style-all-mini.css в шаблоне
В шаблоне не требуется указывать какой-либо код для подключения css-фреймворка, поскольку он уже реализован в секции HEAD.
Стили шаблона — var_style.css
После автоматического подключения style-all-mini.css из shared-каталога подключается файл шаблона css/var_style.css. Именно в этом файле следует располагать все стили шаблона.
Управление подключением CSS в шаблоне
Вебмастер может произвольно менять подключения css-файлов с помощью предопределенного списка файлов, которые имеют определенный алгоритм подключения. См. Порядок подключения CSS-файлов в шаблоне.
CSS-препроцессор LESS
В MaxSite CMS на уровне ядра возможно использование css-препроцессора LESS в виде его php-версии. Компиляция less-файла выполняется с помощью функции mso_lessc().
LESS-файлы размещены в каталоге шаблона css-less и могут иметь произвольную структуру. Технически здесь нет никаких ограничений. В шаблоне D2 приведен пример такой структуры и вебмастер может её использовать в своих шаблонах.
Порядок компиляции LESS
В файле var_style.php, который автоматически подключается в шаблоне, указаны два файла: исходный less-файл и конечный css-файл.
- Исходный файл — css-less/var_style.less
- Конечный — css/var_style.css
Таким образом файл var_style.css создается автоматически на основе less-файлов. Поэтому не нужно редактировать var_style.css, следует это делать в less-файлах.