Warp — популярный фреймворк для Joomla от студии YOOtheme, отличающийся наглядной системой кастомизации и применением встроенного CSS-фреймворка UIKit 2. Рассмотрим ключевые особенности и настройки данного фреймворка на примере бесплатного шаблона Master 2 от YOOtheme.
Содержание
- Ключевые особенности
- Базовые возможности
- Настройки шаблона
- Выводы
Ключевые особенности Warp Framework
На момент написания данного обзора Warp, как и Helix 3, является фреймворком предыдущего поколения и не обновляется разработчиком, который активно поддерживает и продвигает свой инновационный фреймворк YOOtheme Pro. Тем не менее, на Warp Framework создано немало шаблонов и они всё еще создаются сторонними разработчиками. В этом материале мы рассмотрим ключевые особенности, возможности и настройки данного фреймворка.
Отметим ключевые особенности:
- Оригинальная структура файлов
Шаблоны, созданные на базе Warp, имеют свою оригинальную структуру. Это может обескуражить неопытных администраторов, привыкших видеть разметку позиций модулей в корневом файле шаблона index.php. - UIkit 2
UIkit — это CSS-фреймворк от YOOtheme, аналогичный Bootstrap. Нельзя сказать, что UIkit хуже или лучше, чем Bootstrap, но субъективно документация по нему преподносится несколько удобнее, а в отношении функционала он ничем не уступает своему куда более популярному аналогу. - Налядная кастомизация элементов шаблона
Шаблоны на Warp оснащены инструментом Customizer, позволяющим гибко и наглядно кастомизировать стиль всех элементов шаблона. Этот инструмент — флагманская фишка Warp. - Кастомизация модулей и меню
Осуществлять кастомизацию позиций модулей, отдельных модулей, а также пунктов меню можно прямо в настройках шаблона.
Базовые возможности Warp Framework
Важно знать:
Рассматривается версия Warp Framework 7.3.36.
Изначально Warp обладает рядом опциональных возможностей:
- Минификация кода CSS и JS-файлов.
- Отключение мета-тега Viewport.
- Отключение Bootstrap.
- Социальные кнопки Tweet, Facebook Like и Google+ в постах блога Joomla.
- Определение стилей для модулей на базе UIkit.
- Добавление пользовательских скриптов.
- Фиксированная навигация.
- Предопределенные макеты.
- Предопределённые наборы стилей.
- Управление шириной боковых панелей в процентах.
- Управление отображением модулей в различных позициях.
- Кастомизация стиля, адаптивности и заголовков модулей.
- Гибкая кастомизация пунктов меню.
Настройки шаблона на Warp
Рассмотрим возможности фреймворка на примере бесплатного шаблона Master 2 (скачать можно тут) от YOOtheme.
Важно знать:
Все настройки шаблонов, предоставляемые фреймворками, находятся на странице Расширения → Шаблоны → Стили → [Нужный шаблон]
Все настройки шаблона на Warp размещены во вкладке Настройки и имеют следующий набор вкладок:
- Settings
- Layouts
- Modules
- Menus
- Information
Вкладка Settings
Вкладка включает следующие разделы:
Styles
В данном разделе находится кнопка Customizer, при клике по которой откроется страница для наглядной настройки стилей всех элементов шоблона: страница сайта будет размещена справа, а опции кастомизации стилей — слева.
В верхне части под словами Select a style из выпадающего списка можно выбрать предустановленный стиль (в шаблоне Master 2 есть только стиль default), в который будут сохраняться все изменения. Текущий стиль можно скопировать, нажав кнопку Copy и введя его названия, после чего можно кастомизировать именно его:
По умолчанию для кастомизации открыты лишь 3 раздела:
- General,
- Typography,
- Buttons, Navs & Badges.
Каждый раздел имеет ряд опций, позволяющих тонко настраивать стили элементов шаблона, основанных на CSS-фреймворке UIkit.
Если активировать чек-бокс Advanced Mode, то в панели кастомизации станет доступно еще несколько разделов для самых разных элементов с огромный количеством опций. Кроме того, возле названий большинства разделов в скобках имеется переключатель More, при клике по которому в разделе станут доступны дополнительные настройки.
Важно знать:
Настраиваемые в кастомизаторе элементы можно рассмотреть в документации к UIkit 2.
Все изменения будут незамедлительно отображаться на представленной в правой части странице сайта, однако не забывайте жать кнопку Save, чтобы эти изменения были сохранены в выбранный стиль.
Development
Представленные опции пригодятся разработчикам при настройке сайта. На работающем сайте все чек-боксы в данном разделе должны быть декактивированы.
Compression
Из выпадающего списка можно выбрать 4 варианта для сжатия данных:
- None,
- Minify,
- Minify + Data URIs,
- Minify + Data URIs + Gzip.
Это будет полезно, если аналогичное сжатие не осуществляется другими расширениями (например JCH Optimize).
Responsive
Здесь можно активировать опцию Disable the viewport meta tag для отключения мета-тега Viewport, который делает сайт адаптивным на мобильных устройствах и планшетах. Без мета-тега Viewportна данных устройствах сайт будет выглядеть также, как и на десктопах.
Bootstrap
Здесь можно активировать опцию Disable Bootstrap. Это исключит загрузку ненужных файлов, если на сайте не применяются сторонние расширения, использующие Bootstrap.
Content
В этом разделе имеются следующие опции:
- Hide To-top scroller - отключает отображение кнопки со ссылкой, ведущий в верх страницы.
- Hide Warp branding - отключает копирайт Warp в футере.
Social Buttons
Здесь можно включить или отключить показ кнопок социальных сетей, отображаемых в материалах Joomla:
- Show Tweet button,
- Show Google+ button,
- Show Facebook Like button.
Modules
В этом разделе можно задать стиль всем модульным позициям шаблона.
Существуют следующие стили:
- Box - блок с предопределенного цвета фоном.
- Box Primary - блок с предопределенного pimary-цвета фоном.
- Box Secondary - блок с предопределенного secondary-цвета фоном.
- Header - блок без фона, но с выделенным заголовком.
- Space - блок без фона с разделителем.
Цвета для стилей настраиваются в кастомизаторе.
Важно знать:
В демоданных к шаблонам на Warp всегда имеется страница (в шаблонах от YOOtheme она называется UIkit), на которой наглядно представлены многие элементы фреймворка UIkit, в том числе перечисленные стили для модульных позиций.
Additional Scripts
В этом разделе имеется текстовая область, в которую можно вставит код Google Analytics, Яндекс.Метрики или любой другой JS-код, который будет размещен на каждой странице перед закрывающим тегом body.
Вкладка Layouts
Здесь можно создавать макеты шаблона и назначать их на отдельные страницы сайта.
Разделы:
- Layouts
- Style
- Content
- Sidebars
- Grid
Layouts
Здесь выбирается из выпадающего списка или создаётся новый макет. Все опции ниже настраиваются именно для выбранного макета. Для создания нового макета нужно нажать кнопку Add.
Style
Здесь из выпадающего списка выбирается стиль (набор CSS-правил), определённый в кастомизаторе.
Content
В этом разделе есть опция Hide system output, активация которой отключит вывод всех системных оповещений.
Sidebars
Здесь определяется ширина (Width) и выравнивание (Alignment) боковых панелей.
Grid
Здесь определяются макеты cетки модульных позиций.
В таблице для модулей в указанных позициях можно назначить:
- Layout - макет, согласно которого будут выводиться модули в данной позиции.
- Responsive - изменение сетки модулей в позиции в зависимости от устройства вывода.
- Divider - активация разделительной черты между модулями.
Вкладка Modules
В этой вкладке можно кастомизировать существующие модули, удобно представленные в табличном виде.
Для каждой модульной позиции существует отдельная таблица модулей. Название позиции модуля указывается в первом столбце, а в последующих — настройки для модуля:
- Class
Здесь можно назначить модулю CSS-класс. - Style
Здесь можно назначить модулю один из семи предустановленных стилей. - Center
В шаблоне Master 2 данный чек-бокс не вносит изменений в модуль. - Title
Здесь можно определить тег для заголовка модуля. Важно: аналогичная опция в настройках модулей Joomla для шаблонов на Warp не работает. - Icon
Здесь можно выбрать иконку, отображаемую перед заголовком модуля. - Badge
Здесь можно выбрать тип значка (отличается цветом фона, определяемым в кастомизаторе) и определить его текст в соседнем текстовом поле. - Display
Здесь определяются типы устройств, на которых должен отображаться модуль.
Вкладка Menus
В этой вкладке осуществляется кастомизация пунктов меню.
В выпадающем списке выбирается тип меню, после чего под ним в табличном виде отображаются соответствующие пункты меню. В первом столбце перечисляются названия пунктов, а в последующих — их настройки:
- Columns
Здесь определяется количество колонок для выпадающего списка с вложенными пунктами. Если для текущего пункта меню нет вложенных, то настройка не внесёт никаких изменений - Column Width
Здесь определяется фиксированный размер колонки выпадающего списка. - Icon
Здесь определяется иконка, отображаемая перед названием пункта меню. В текстовое поле можно ввести адрес изображения. - Subtitle
Здесь можно ввести подзаголовок, отображаемый мелким текстом под названием пункта меню.
Вкладка Information
Здесь отображается информация о используемой версии Warp и дугие мета-данные.
Выводы
Warp Framework — оригинальный и функциональный фреймворк, позволяющий наглядно кастомизировать практически все элементы на сайте. Любая кастомизация осуществляется в настройках шаблона (например, Helix 3 добавляет дополнительные настройки для пунктов меню в отдельную вкладку на странице редактирования пунктов меню).
Почему же разработчик YOOtheme перестал обновлять Warp Framework и переключился на YOOtheme Pro? На то есть несколько причин:
- UIkit: Warp базировался на UIkit 2, YOOtheme Pro — на UIkit 3.
- Drag & Drop: модная и удобная технология «перетаскивания» в Warp не применялась вообще. Это не проблема для разработчиков, но пользователи, далёкие от кодирования, очень любят Drag & Drop.
Пожалуй, другие существенные минусы у Warp отыскать сложно, поэтому на данном фреймворке продолжают создавать качественные и функциональные шаблоны.
Источник: Центр обучения Joomla
