Шаблоны для новичков. Урок 15. Организация файлов и каталогов

Сегодня рассмотрим вопросы организации файлов в шаблоне. По предыдущим урокам в принципе уже понятно, что работать будем с отдельными файлами. Поэтому нужно продумать структуру каталогов, чтобы в неё не заблудиться.

Я рекомендую завести свой вариант базового шаблона. Да, у нас есть _create_a_new_template, но у любого вебмастера всегда начнет собираться коллекция скриптов, изображений, компонентов, стилей и просто примеры под меткой «подумать». Поэтому оптимальней будет сделать на основе _create_a_new_template свой вариант шаблона, который будет использоваться как база для любых других.

Причем, особо отмечу, этот шаблон должен быть 146 100% рабочим. В некоторых случаях вообще можно начинать работу над новым шаблоном в рамках базового. Чуть позже я покажу как это сделать.

Структура каталогов в целом будет повторять _create_a_new_template. Также я рекомендую сделать каталог __extra, в котором разместить изображения, скрипты, стили, примеры и какие-то свои идеи. Этот каталог не копируется в рабочий, но всегда будет под рукой.

Stock-файлы

В каталоге stock можно разместить готовые скрипты, которые могут подключаться в других файлах. Если какой-то stock-файл не используется, то в новом шаблоне просто удаляется его каталог (но он сохраняется в базовом). Удобство здесь в том, что мы можем разместить сложный php-код в stock-каталоге, а в нужном месте подключать его как обычный файл одной строчкой.

Изображения

Несколько слов о каталоге изображений images. Я пробовал самые разные варианты его структуры, и на текущий момент пришел к простому варианту: все файлы группируются по подкаталогам, но не более одного уровня вложения. Иначе возникает путаница. Вот мой вариант каталогов images:

• _test - здесь файлы, которые я подбираю для дизайна. В рабочем шаблоне он удаляется.
• backgrounds - фоны.
• bullets - булечки для списков.
• favicons - фавиконки.
• headers - изображения для шапки. Обычно фото.
• icons - иконки, если используются.
• logos - логотипы.
• placehold - заглушки для изображения. Я их формирую через placehold.it.
• social - иконки соцсетей. Есть еще каталоги social1, social2 и т.п. где находятся другие наборы.
• social-deafult - иконки соцсетей из default-шаблона.

Итого непосредственно в каталоге images находятся только несколько png-файлов, которые используются в type-файлах и имеют фиксированный адрес относительно шаблона.

В целом такая структура подходит под большинство шаблонов, а если появляются какие-то новые типы элементов, то добавляется и новый каталог. Например для теней можно сделать shadows.

Less-файлы

Теперь рассмотрим организацию less-файлов. Здесь также нет каких-то строгих правил, поэтому делать нужно так, чтобы было удобно прежде всего для себя.

Основной каталог для less-файлов лучше всего расположить в «корне» шаблона. Это объясняется тем, что в конце работы, когда исходный css-файл сформирован, less-файлы не нужны. Клиенту отдается без изменений обычный css-каталог.

У меня каталог для less-файлов называется css-less. В нём находится var_style.less, который является основным файлом. Уже в нём происходят подключение остальных файлов.

Рассмотрим как обеспечивается поддержка LESS в этом варианте.

В MaxSite CMS подключение css-стилей происходит по достаточно сложному алгоритму, где одним из подключаемых файлов может быть css/var_style.php. В этом файле мы и подключаем компилятор LESS и на выходе образуется var_style.css, который, собственно, и подключается в секции HEAD шаблона (автоматически).

Таким образом наша задача состоит только в том, чтобы указать пути к файлам.

<?php if (!defined('BASEPATH')) exit('No direct script access allowed'); 
 
// укажем less-файл
$less_file = getinfo('template_dir') . 'css-less/var_style.less';
 
if (!file_exists($less_file))
{
	mso_add_file('css/var_style.css');
}
else
{
	echo mso_lessc(
			$less_file, 
			getinfo('template_dir') . 'css/var_style.css', 
			getinfo('template_url') . 'css/var_style.css', 
			false, 	// разрешить использование кэша LESS
			true, 	// использовать сжатие css-кода?
			true 	//если включено сжатие, то удалять переносы строк?
			);
}

В этом коде путь указывается в $less_file. В функции mso_lessc() можно указать использование кэширования и сжатия css-кода. На этапе разработки я рекомендую запретить кэш, чтобы всегда иметь актуальню версию css/var_style.css.

Теперь система будет автоматом создавать css/var_style.css и подключать его в HEAD секции шаблона. После отладки можно удалить или переименовать css/var_style.php и компиляция автоматом отключится: будет использоваться готовый css/var_style.css.

Теперь рассмотрим организацию каталога css-less.

Структура Less-файлов (каталог css-less)

За основу берётся несколько базовых положений.

Основной файл - var_style.less. В нём происходит только (и ничего более!) подключение других less-файлов. Например:

@import url('variables.less'); // переменные
@import url('mixins/helpers.less'); // хелперы
@import url('mixins/menu_hor.less'); // хелпер меню горизонтальное
@import url('mixins/tabs.less'); // табы
@import url('base.less');  // базовое оформление
@import url('layouts/layout01.less'); // структура сайта
 
... и т.д. ...

Файл variables.less содержит глобальные переменные, которые могут использоваться в других less-файлах. Например:

@content_width: 960px; // вся полезная ширина сайта (контент + сайдбар)
@sidebar_width: 300px; // ширина основного сайдбара
 
@link_color: #1189B7; // цвет ссылок
@link_color_hover: #1189B7; // цвет при наведении

Файл base.less я использую для типографики и для задания базовых стилей: ссылки, заголовки, цитаты и т.п.

В файле menu.less задаются меню. Сами же стили подключаются из миксов, которые находятся в каталоге menus.

Остальные файлы группируются по каталогам.

• blocks - стили блоков, которые не попали в в другие группы.
• components - стили компонентов.
• layouts - здесь файлы, описывающие модульную сетку.
• menus - стили меню.
• mixins - здесь хелперы и прочие миксы.
• plugins - стили плагинов.
• responsive - стили для адаптивного дизайна.
• stock - стили из stock-файлов.
• type - специфичные стили для разных type-файлов.

Остановлюсь кратко на модульной сетке (каталог layouts). В предудущих уроках мы рассматривали различное расположение блоков и, можно было бы сохранить все эти варианты по разным less-файлам. Например в файле layout01.less расположить сайдбар слева, а в layout02.less - справа. Теперь, при создании нового шаблона, берем подходящий layout-файл, копируем его и уже на этой основе делаем нужную модульную сетку. Подключается нужный файл в var_style.less:

@import url('layouts/layout02.less');

То есть начать работу с новым шаблоном можно прямо в базовом.

Less-хелперы. Миксы (миксины)

Со временем вебмастер составит свой вариант helpers.less, где будут миксы для border-radius, шрифты, тени и прочая рутина. В Интернете вы найдете различные варианты, вроде lesselements.com, но я бы всё-таки посоветовал самостоятельно выстроить свой вариант хелперов. Проблема здесь в том, что чужие наборы - это результат чужого опыта, не имеющего к вашему никакого отношения. А поскольку миксы должны упрощать жизнь, то лучше делать так, чтобы было удобно прежде всего вам. Ну простой пример: микс .transition-duration(). Можно ли его набрать по памяти? Лично я использую .transition() - это проще.

Или вместо «традиционного» .opacity() - .op(). Цвет фона я задаю через .bg() и т.п. То есть я свожу к тому, что выбрать оптимальный вариант хелперов лучше со своей колокольни, не оглядываясь на других.

Небольшой вариант хелперов можно найти в Default-шаблоне: css/less/include/helpers.less. Что же касается правил написания less-кода, то сразу используйте мои рекомендации.

И ещё один момент, который не сразу очевиден. Со временем миксы меняются. Это происходит по нескольким причинам: исправляются ошибки, добавляются новые возможности и меняются предыдущие описания. При работе с шаблоном, конечно же хочется иметь самую свежую версию миксов, которые могут измениться в процессе работы с этим шаблоном. То есть возникает ситуация, когда в шаблоне окажется более свежая версия миксов, чем в базовом шаблоне. Самый простой вариант - это копировать в базовый шаблон исправленную версию файлов.

Другой способ - это подключать миксы прямо из базового шаблона. То есть теперь все изменения вносятся в одном месте в базовом шаблоне. Здесь подвох может быть в том, что если какие-то миксы меняются или удаляются, то старые шаблоны могут перестать нормально отображаться - миксы-то уже другие.

Поэтому мой совет: с месяц-другой «помучиться» с копированием, и уже после этого перейти на подключение из базового шаблона. Подключение в var_style.less будет таким:

@import url('../../mybasetemplate/css-less/mixins/helpers.less');

Здесь следует указывать относительный путь к файлу.

Итого

Представьте себе, что над шаблоном одновременно работают верстальщик и программист. Если бы мы не продумали структуру каталогов и файлов, то разобраться, где что лежит было бы гораздо сложней.

««« Урок 16 | Урок 14 »»»