Warp 7 Framework: возможности и настройки

Ключевые особенности 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 обладает рядом опциональных возможностей:

• Минификация кода CSS и JS-файлов.
• Отключение мета-тега Viewport.
• Отключение Bootstrap.
• Социальные кнопки Tweet, Facebook Like и Google+ в постах блога Joomla.
• Определение стилей для модулей на базе UIkit.
• Добавление пользовательских скриптов.
• Фиксированная навигация.
• Предопределенные макеты.
• Предопределённые наборы стилей.
• Управление шириной боковых панелей в процентах.
• Управление отображением модулей в различных позициях.
• Кастомизация стиля, адаптивности и заголовков модулей.
• Гибкая кастомизация пунктов меню.

Настройки шаблона на Warp

Рассмотрим возможности фреймворка на примере бесплатного шаблона Master 2 (скачать можно тут) от YOOtheme.

Все настройки шаблона на Warp размещены во вкладке Настройки и имеют следующий набор вкладок:

1. Settings
2. Layouts
3. Modules
4. Menus
5. Information

Вкладка Settings

Вкладка включает следующие разделы:

1. Styles
2. Development
3. Compression
4. Responsive
5. Bootstrap
6. Content
7. Social Buttons
8. Modules
9. Additional Scripts

Все изменения будут незамедлительно отображаться на представленной в правой части странице сайта, однако не забывайте жать кнопку Save, чтобы эти изменения были сохранены в выбранный стиль.

Development

Представленные опции пригодятся разработчикам при настройке сайта. На работающем сайте все чек-боксы в данном разделе должны быть деактивированы.

Compression

Из выпадающего списка можно выбрать 4 варианта для сжатия данных:

1. None,
2. Minify,
3. Minify + Data URIs,
4. 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 - блок без фона с разделителем.

Цвета для стилей настраиваются в кастомизаторе.

Additional Scripts

В этом разделе имеется текстовая область, в которую можно вставит код Google Analytics, Яндекс.Метрики или любой другой JS-код, который будет размещен на каждой странице перед закрывающим тегом body.

Вкладка Layouts

Здесь можно создавать макеты шаблона и назначать их на отдельные страницы сайта.

Разделы:

1. Layouts
2. Style
3. Content
4. Sidebars
5. 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 и другие мета-данные.