Шаблоны для новичков. Урок 20. Основы D2 (базовые принципы построения)

Основной принцип работы шаблона на shared-каталоге — разделение ответственности. MaxSite CMS берёт на себя сложный программный код, оставляя вебмастеру только те задачи, которые требуется решить как-то по особенному.

В других CMS вебмастер берет на себя решение почти всех задач: от получения данных и формирования служебных файлов до диспетчеризации типов данных и css-верстки. У нас ситуация несколько другая. MaxSite CMS формирует некий базовый «каркас» на основе которого вебмастер определяет только те участки которые требуют изменений. Если нужно добавить какой-то код в секцию HEAD, то не нужно менять её всю — достаточно использовать специальный файл, который автоматически попадёт в HEAD.

Таким образом создание шаблона на shared сводится к определению функциональных блоков и/или дизайну, которые следует изменить отталкиваясь от каркаса, который и есть шаблон D2 (это default шаблон MaxSite CMS версий 0.84-0.86x).

Создание нового шаблона

Для создания нового шаблона просто делается копия D2 . D2 — очень простой шаблон, в котором мало стилей, а программный код «спрятан» где-то в недрах системы.

Как формируется шаблон с точки зрения верстальщика

Для простоты будем считать, что основа шаблона — main.php. Именно здесь выполняются прочие подключения:

• секция HEAD
• компоненты шапки
• вывод контента
• вывод сайдбара
• компоненты подвала

Здесь же подключаются некоторые custom-файлы. Например:

if ($fn = mso_fe('custom/header-start.php')) require($fn);

И даже прописаны некоторые ушки:

if (function_exists('ushka')) echo ushka('header-start');

То есть, модульная сетка (main.php) представляет собой не только базовую HTML-разметку, но и выполняет функцию по сборке сопутствующих файлов. Если требуется разместить какой-то код в верху шапки, мы просто используем соответствующий custom-файл. Если код небольшой, то используем ушку. Править main.php не потребуется. Просто изучите его возможности!

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

При этом отмечу, что модульная сетка (HTML-код) практически не изменилась по сравнению в Default-шаблоном.

Три базовые составляющие

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

Вторая составляющая — вёрстка модульной сетки. От этого зависит будет ли шаблон адаптивным или нет. Здесь же задаются размеры и расположение основных блоков.

Третья составляющая — вёрстка дизайна.

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

Сборка less-файлов

Рассмотрим схему сборки less-файлов. Основной файл — var_style.less. Именно в нём производятся все остальные подключения. Строчки с @import не вызовут большой сложности — это подключение служебных миксов. Блок

@MSO_IMPORT_ALL_BLOCKS;
@MSO_IMPORT_ALL_COMPONENTS;
@MSO_IMPORT_ALL_PLUGINS;
@MSO_IMPORT_ALL_TYPE;
@MSO_IMPORT_ALL_ELEMENTS;

— подключает все файлы из соответствующих каталогов (см. Урок 19). То есть в целом всё ясно. Перейдём к детальному анализу.

Файл variables.less

Здесь содержатся «глобальные» переменные. Они могут использоваться в других less-файлах. Некоторые переменные рассчитываются на основе других. Например @LINK_COLOR_HOVER формируется на 15% темнее основного цвета ссылок. Если такой вариант не подходит, то указываем явное значение.

Переменные @RATIO_CONTENT и @RATIO_SIDEBAR рассчитываются как процентное соотношение контент/сайдбар с учётом общей ширины сайта. В дальнейшем эти значения используются для построения адаптивной модульной сетки.

Переменные позволяют упростить вёрстку. Просто указываем новые значения, остальное сделает компилятор LESS.

Файл base.less

Здесь располагаются базовые стили шаблона. Начиная с этого файла, стили должны задаваться как отличия от css-фреймворка style-all-mini.css, который расположен в shared-каталоге. Этот файл формируется из less-файлов в shared/css-less/default. Например, если нужно поменять вывод H1, то можно предварительно посмотреть как он объявлен в mso-headers.less:

h1 {
	font-size: 36px; 
	margin: 10px 0; 
	font-weight: normal; 
	line-height: 1.2em;
	
	&.first {
		margin: 10px 0 5px 0;
	}
 
	a {
		text-decoration: none;
		
		&:hover {
			text-decoration: underline;
		}
	}
}

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

h1 {
	color: @H1_COLOR;
	
	a {
		color: @H1_LINK_COLOR;
	
		&:hover {
			color: @H1_LINK_COLOR_HOVER;
		}
	}
	
	&.category {
		margin: 0 0 15px 0; 
		border-bottom: 2px solid #DDD;
	}
}

Мы видим, что за цвет заголовка отвечают глобальные переменные, которые определены ранее в variables.less.

Типографика

В base.less удобно задавать типографику сайта. Для её проверки в произвольной записи разметите bb-код

[text-demo]

При просмотре записи, вместо этого кода, появится текст с разнообразной html-разметкой: заголовки, списки и т.д. Фреймворк style-all-mini.css уже содержит базовую типографику, которая потребует минимальных изменений, вроде другой гарнитуры шрифтов или размера основного текста. Старайтесь проверять типографику сразу после настройки модульной сетки и до отладки прочих блоков и компонентов.

Основное предназначение типографики — сделать текст удобным и читаемым. Поэтому не нужно пытаться поразить своих посетителей чем-то необычным, вроде тени основного текста. Учитывайте и особенности шрифтов. Если это Tahoma, то только для маленьких кеглей, поскольку при увеличении текст смотрится совершенно ужасно (не говоря уже об отсутствующем курсиве). Если это семейство Segoe, то кегль должен быть увеличенным — этот шрифт «самосглаживающийся», при небольшом размере сильно «мылится».

Отдельно отмечу, что в Windows используется обычное сглаживание шрифтов и специальное ClearType, которое приводит не просто к «размыливанию» текста, но и к его радужной окантовке. Для многих она заметна и читать такой текст уже неприятно. Поэтому, если вы и включили ClearType, то при использовании сложных шрифтов, вроде Tahoma, отключайте сглаживание и проверяйте типографику уже в этом варианте. К тому же стоит учитывать, что данная технология используется только в Windows (так?).

Для подбора шрифта можно воспользоваться онлайн-сервисом Typetester. Обращайте внимание на размер, а также полужирное и курсивное начертание. Очень многие шрифты не имеют курсива, а используют простое наклонное начертание, что смотрится довольно-таки «страшненько».

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

Модульная сетка layouts

Модульная сетка D2 находится в layouts/layout01.less. Сразу обращаем внимание, что это параметизированный микс .layout(), который вызывается ниже. Почему используется микс, а не готовые стили, мы уже рассматривали в 17 уроке «Базовый шаблон MaxSite CMS. Адаптивный дизайн».

Здесь также используется адаптивный дизайн, правда немного в другом варианте — полурезиновая верстка. Давайте её разберём подробно.

Весь сайт имеет одну ширину и размещен по центру браузера. Но при этом, если ширину браузера уменьшать, то колонки контента и сайдбара будут пропорционально уменьшаться. То есть сайт становится «резиновым».

Основной контейнер div.all:

div.all {
	margin: 0 auto; // центрируем по браузеру
	width: 100%; // ширина 100%
	max-width: @content; // ограничиваем ширину
}

Переменная микса @content будет равна @CONTENT_WIDTH — именно её мы и передаём в качестве аргумента. В нашем случае ширина сайта не будет превышать 960px.

Контент у нас определён в div.content, сайдбар — в div.sidebar1

div.content {
	width: @RATIO_CONTENT;
	float: left;
}
 
div.sidebar1 {
	width: @RATIO_SIDEBAR;
	float: left;
}

Обычный float, а вот ширину мы указываем как @RATIO_CONTENT. Магия здесь в том, что исходные размеры мы задаём в px, а в @RATIO_CONTENT получаем проценты. Аналогично поступаем и с блоком сайдбара div.sidebar1 с его переменной @RATIO_SIDEBAR.

Если посмотреть на результирующий var_style.css, то увидим

div.content {
  width: 73.958333333333%;
  float: left;
}
 
div.sidebar1 {
  width: 26.041666666667%;
  float: left;
}

Что в сумме даёт 100%. Теперь, если ширина браузера будет менее 960px, то колонки отобразятся с пропорциональным уменьшением.

Wrap-блоки, думаю, не вызовут затруднений — в них просто выставляются отступы, чтобы блоки не слипались.

Подвал задаётся в div.footer. Он занимает 100% ширины, а отступы задаём уже во wrap-блоке. Здесь же указываем некоторые стили. Строго говоря, это не совсем правильно, поскольку дизайн должен задаваться для каждого элемента/компонента. Но в этом шаблоне дизайн слишком простой, поэтому я не стал усложнять код.

Это же самое замечание касается и фона браузера, который задан в body.

Стили для main-шаблонов

В layout можно разместить и стили других main-шаблонов. У нас есть no-sidebar — модульная сетка без сайдбара. Следовательно в этой html-разметке будет отсутствовать div.sidebar1, а div.content должен быть 100% ширины без float. Переключателем будет выступать body.no-sidebar — именно этот класс указан в main-файле.

body.no-sidebar {
	div.content {
		width: 100%;
		float: none;
		
		div.content-wrap {
			margin: 20px;
		}
	}
}

Дополнительно выставляем отступ для wrap-блока, чтобы текст не прилипал к краям.

Адаптивный дизайн

Схема адаптивного дизайна определяется в responsive.less. Из-за того, что используется полурезиновая верстка, для адаптации достаточно только отследить какую-то минимальную ширину браузера, при которой колонки окажутся слишком узкие. Типовой вариант — 767px:

@media (max-width: 767px) 
{
	@import url('responsive/responsive-max-767.less');
}

В файле responsive-max-767.less выполняются уже привычные задачи: выставляется ширины блоков 100% и отменяется float.

div.all-wrap {
	width: 100%;
}
 
div.content {
	width: 100%;
	float: none;
	
	div.content-wrap {
		margin: 20px;
	}
}
 
div.sidebar1 {
	width: 100%;
	float: none;
	
	div.sidebar1-wrap {
		margin: 0;
		padding: 20px;
		background: #f0f0f0;
	}
}

Дополнительно выставляются отступы в зависимости от дизайна.

««« Урок 21 | Урок 19 »»»