Начинающим: удобный инструмент для верстки, создание и понимание работы плагинов в MODx.
Sass — правильный CSS
Многое (если не всё), чего не хватало старому доброму CSS (вплоть до CSS3), реализовано в расширенном формате написания каскадных таблиц стилей — Sass. Не зря приверженцы Ruby on Rails (откуда берет корни Sass) ласково называют его «синтаксический сахар».
После того, как попробуешь Sass «на вкус», становится трудно отмахнуться от идеи ввести его в боевой арсенал каждого верстальщика. Ведь до чего удобно, например, задать в $переменных значения цветов корпоративной гаммы заказчика, чтобы, если тому вдруг понадобится, с еще большей легкостью «сделать сайт более зеленым»!
Не отстаем от тенденций современности
Для тех, кто программирует на PHP в условиях CMS MODx, предлагается создать плагин, который будет следить за наличием и изменениями в sass-файлах и автоматически (ре)генерировать соответствующие css-файлы, подключаемые в шаблоне.
Пользуемся поиском: «php sass parser»
Одна из реализаций нужного нам функционала есть в недрах библиотеки phamlp. В составе phamlp присутствует и другая «Ruby-сладость» — haml (чудесная замена для HTML), но это история на перспективу.
Плагин для MODx
Несколько простых шагов:
1. Скачиваем архив с библиотекой phamlp
2. Архив распаковываем в «assets/plugins/phamlp» (можно без папки haml)
3. В «Элементах» создаем новый плагин «SASS»
4. Копируем и вставляем код плагина:
// директория со стилями (в конце слэш обязательно)
$style_dir = MODX_BASE_PATH.'assets/css/';
// сканирование содержимого
$files = scandir(rtrim($style_dir,'/'));
// выбор файлов с расширением sass
foreach ($files as $sass_file)
if (is_file($style_dir.$sass_file) && (strtolower(pathinfo($style_dir.$sass_file,PATHINFO_EXTENSION))=='sass')) {
// вычисление проверочного md5 хэша содержимого .sass файла
$sass_hash = hash('md5',file_get_contents($style_dir.$sass_file));
// при отсутствии записанного (в .sasshash файл) хэша или его несовпадении с записанным - генерация css
if (!file_exists($style_dir.$sass_file.'hash')||($sass_hash!=file_get_contents($style_dir.$sass_file.'hash'))) {
// подключение библиотеки phamlp
include_once(MODX_BASE_PATH.'assets/plugins/phamlp/sass/SassParser.php');
// инициализация и настройка класса работы с sass форматом
$sass = new SassParser(array(
'cache'=>false,
'style'=>'expanded',
'vendor_properties'=>array(
'border-radius' => array(
'-moz-border-radius',
'-webkit-border-radius',
'-khtml-border-radius'
),
'border-top-right-radius' => array(
'-moz-border-radius-topright',
'-webkit-border-top-right-radius',
'-khtml-border-top-right-radius'
),
'border-bottom-right-radius' => array(
'-moz-border-radius-bottomright',
'-webkit-border-bottom-right-radius',
'-khtml-border-bottom-right-radius'
),
'border-bottom-left-radius' => array(
'-moz-border-radius-bottomleft',
'-webkit-border-bottom-left-radius',
'-khtml-border-bottom-left-radius'
),
'border-top-left-radius' => array(
'-moz-border-radius-topleft',
'-webkit-border-top-left-radius',
'-khtml-border-top-left-radius'
),
'box-shadow' => array('-moz-box-shadow', '-webkit-box-shadow'),
'box-sizing' => array('-moz-box-sizing', '-webkit-box-sizing'),
'opacity' => array('-moz-opacity', '-webkit-opacity', '-khtml-opacity'),
)
));
// генерация css файла
file_put_contents( $style_dir.substr($sass_file,0,-4).'css', $sass->toCss($style_dir.$sass_file) );
// запись хэша
file_put_contents( $style_dir.$sass_file.'hash', $sass_hash );
}
}5. На вкладке «Системные события» ставим галочку напротив OnWebPageInit. Это означает запуск кода плагина во время инициализации веб-страницы (проще говоря — каждый раз, когда кто-либо загружает любую из страниц сайта). С тем же успехом можно использовать и другие события MODx, происходящие в это время (OnWebPagePrerender, OnParseDocument).
6. Сохраняем плагин
Работаем со стилями в Sass-формате
Конечно, для этого подойдет даже штатный веб-редактор MODx (или загрузка по FTP файлов, созданных в Блокноте), но если уж расширять инструментарий веб-разработки, то лучше открыть для себя возможности одной из интегрированных сред разработки (IDE) с мощным набором встроенных средств (FTP-менеджер, подсветка синтаксиса, управление версиями и т.п.).
В директории «assets/css» (как указано в переменной $style_dir) создаем файл с расширением .sass. Для начала, в этом файле можно сохранить примеры из википедии.
Открываем сайт в браузере или обновляем открытую страницу. В момент возникновения события OnWebPageInit запустится плагин «SASS», который при сканировании обнаружит свежий sass-файл, и сгенерирует его css-версию, которая с этого момента доступна для загрузки в браузеры пользователей со всего мира.
После окончания работы над стилевым оформлением сайта, плагин можно отключить, чтобы не совершал холостых сканирований.
UPD: MODx Evo и MODx Revo имеют одинаковые принципы создания плагинов и названия указанных системных событий.
