Работа с CSS/LESS

Просмотров: 9841Комментарии: 0
Центр помощи

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-файлах.

О проекте

MaxSite CMS предназначена для создания сайтов любой сложности. Система отлично подходит обычным пользователям, вебмастерам, фрилансерам и вебстудиям.