1. Ключевые особенности Warp Framework
  2. Базовые возможности Warp Framework
  3. Настройки шаблона на Warp
    1. Вкладка Settings
      1. Styles
      2. Development
      3. Compression
      4. Responsive
      5. Bootstrap
      6. Content
      7. Social Buttons
      8. Modules
      9. Additional Scripts
    2. Вкладка Layouts
      1. Layouts
      2. Style
      3. Content
      4. Sidebars
      5. Grid
    3. Вкладка Modules
    4. Вкладка Menus
    5. Вкладка Information
  4. Выводы

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 размещены во вкладке Настройки и имеют следующий набор вкладок:

  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

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 варианта для сжатия данных:

  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 - блок без фона с разделителем.

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

Полезно знать!
В демоданных к шаблонам на Warp всегда имеется страница (в шаблонах от YOOtheme она называется UIkit), на которой наглядно представлены многие элементы фреймворка UIkit, в том числе перечисленные стили для модульных позиций.

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 и другие мета-данные.

Упоминаемые термины:

CSS, Joomla, Кастомизация, Модуль, Bootstrap