Warp 6 framework

Введение в Warp 6 Framework

Joomla

Введение в Warp 6 Framework

Давайте начнем серию сногсшибательных постов про Warp6, это новый фреймворк от компании YooTheme, в них мы рассмотрим все возможности данного инструмента и разберемся в них вместе. В этой статье мы рассмотрим основную концепцию шаблонов на Warp и как мы сможем его использовать в повседневной работе. Если вы не знаете, что такое Warp6 вам следует немедленно обратиться в знания, прочитав анонс данного шаблонизатора. После того как вы обратились в слух мы наконец сможем начать знакомство!

Фреймворк

Warp6 это следующая ступень эволюции предыдущего фреймворк студии YooTheme Warp5.5, после того как дань капитану очевидности отдана преступим к особенностям. Как и его предшественник, данный шаблонизатор создан для решения повторяющихся задач возникающих при создании шаблона для сайта. Warp6 содержит в себе содружество HTML, JS и PHP классов помогающих и убыстряющих разработку. Фреймворк действительно портативен т.к. все необходимые файлы находятся в одной директории под названием warp, эта папка находится в каждом шаблоне. Это исключает зависимость от плагинов или компонентов (как например в JA T3 (плагин) или Gantry (компонент + библиотека)). Ненужно нечего устанавливать и соответственно поддерживать, все на благо разработчика!

Warp6 можно разделить на три слоя. Первый слой назовем «ядром», оно содержит в себе основные стили и js скрипты, а так же в нем скрываются php хелперы (helpers). Ядро является универсальным и будет работать на всех поддерживаемых системах. Второй слой имеет название «зависимый слой», он необходим для бесшовной интеграции в CMS. Эта часть адаптируется к определенной системе, сформировывая определенное API для работы шаблона. Третьим слоем называется «слоем шаблона», он содержит индивидуальные стили для темы оформления. Это место где хранятся все пользовательские стили, скрипты и изображения.

Каскад

Что бы обеспечить максимальную гибкость мы внедрили специальный каскад файлов в фреймворк. Если вы внедрите CSS, JS или php файл шаблона в специальную папку, то Warp последовательно подключить их.

Вот как выглядит каскад:

  • Папка шаблона
  • Специальная директория, например warp/systems/joomla
  • Директория warp

Это дает вам большую свободу действий для переопределения любой части фреймворка. Теперь мы рассмотрим наиболее важные для шаблона файлы.

Файлы шаблона

Основной файл шаблонизатора это /layouts/template.php это сердце каждого шаблона, он обеспечивает HTML разметку сайта. Это отличается от стандартных шаблонов для Joomla и WordPress, в которых основная разметка находится в файле <iindex.php. Второй важный файл это /layouts/template.config.php, включающий в себя несколько формулы расчета ширина макета, подгружает и определяет правила для CSS стилей JavaScript.

Модули

Модули или виджеты могут быть отображены в различных стилях, с дополнительными иконками или бейджами. Файл /layouts/module.php отвечает за дизайн всех вариации модулейРЕЬ. В зависимости от выбранного стиля для модуля, module.php загружает необходимую HTML разметку. Так же фреймворк дает возможность выбрать три самые используемые разметки расположения модулей, такие как equal (все модули в позиции располагаются рядом друг с другом и имеют равную ширину), double (первый модуль в ряду имеет двойную ширину) и stacked (модули располагаются друг под другом). Кроме того вы можете расширить это многообразие своим собственным стилем или разметкой.

CSS

CSS файлы делятся на три слоя и располагаются в различных местах фреймворка, файлы шаблона располагаются в папке /css, системные в /warp/systems/joomla/css и фреймворка в папке /warp/css. Подключить файлы очень просто, потому что Warp6 автоматически находит их в этих папках. Все файлы являются блочными и хорошо структурированными, каждый из них имеет название, показывающее за какую часть он отвечает.

JavaScript

Warp6 так же дает вам библиотеку эффектов JavaScript отвечающих за выпадающее и аккордеон меню, живой поиск, а так же за мобильную версию сайта. Скрипты также структурированы и хранится в советующих папках, скрипты шаблона хранятся в папке /js, системные файлы в /warp/systems/joomla.1.6/js, a файлы фреймворка в директории /warp/js. Все конфигурационные скрипты сосредоточены в файле /js/template.js. Этот файл используется для включения или отключения эффектов, которые будут загружаться вместе с шаблоном.

Система Разметки

Каждая система имеет множество шаблонов, которые определяют HTML-разметку для вывода и отображения информации из CMS. Для Joomla шаблоны, как правило, используют HTML переопределение, для оформления компонентов или модулей, такие как, модуль входа или поиска. Эти файлы находятся в папке warp/systems/joomla/layouts. Для WordPress шаблоны имеют возможность переопределять вывод определенных страниц, таких как блог, главная страница, одиночный материал, архив. Для этой CMS файлы находятся в warp/systems/wordpress.3.0/layouts. Что бы не усложнять разработку шаблона для разных CMS Warp 6 используют в основном одинаковую HTML разметку. Не важно, что вы читаете категорию Joomla или категорию в WorpPress, вы видите одинаковую разметку. Это позволяет создавать универсальные правила CSS, которые применяются для обеих платформ.

Заключение

В данном обзоре мы рассмотрели основные моменты Warp6 такие как Каскад, CSS, JS и Разметку. Как вы можете видеть, Warp 6 представляет собой блочную, гибкую и расширяемую основу для создания шаблонов, которая обеспечивает богатый набор инструментов для разработки под Joomla 1.5/2.5 и Wordpress 3.x. Все зависит от разработчика, какие функции он использует, выбирая только те инструменты, которые ему необходимы в данный момент времени. В нашей следующей статье мы будем говорить о "Стилях" Warp6. Оставайтесь с нами!

Оригинальная статья: YooTheme
Stepan Tyurin
Привет меня зовут Степан, больше 9 лет занимаюсь версткой, работаю c Joomla, WordPress, October, Bitrix. Вместе с Евгением "Sulpher" создал сайт joomlablog.ru, который нашел новых авторов и переродился в портал cmscafe.ru :)