Пример создания шаблона по принципу D3 (продолжение 2)

Типографика

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

[text-demo]
[text-normalize]

При просмотре этой записи автоматически будет выведена вся используемая типографика. Это и заголовки H1-H6, и ссылки, и списки, и т.п. Второй код отвечает за вывод типового варианта normalize.html, где используются только «голые» html-тэги.

Изначально следует задать стили для BODY, поскольку от него наследуются остальные. Привожу свой «типовой» вариант типографики (файл 22-typography/typography.less):

// типографика
 
body {
	background: #eee;
	font-size: 14px;
	color: #444;
	line-height: 1.4em;
}
 
p, hr, ul, ol, dl, blockquote, pre, address, fieldset, figure, table { 
	margin: 0 0 10px 0;
}
 
* + p, * + hr, * + ul, * + ol, * + dl, * + blockquote, * + pre, 
* + address, * + fieldset, * + figure, * + table { 
	margin-top: 10px;
}
 
h1, h2, h3, h4, h5, h6 {
	margin: 20px 0;
	font-weight: normal;
	line-height: 1.4em;
}
 
* + h1, * + h2, * + h3, * + h4, * + h5, * + h6 {
	margin-top: 20px;
}	
 
h1 {
	font-size: 2.0em;
	color: #8C0000;
}
 
h2 {
	font-size: 1.6em;
	color: #555;
}
 
h3 {
	font-size: 1.3em;
	color: #444;
}
 
h4 {
	font-size: 1.2em;
	color: #444;
}
 
h5 {
	font-size: 1em;
	color: #444;
}
 
h6 {
	font-size: 0.9em;
	color: #444;
}
 
a {
	color:  #0036D9;
	text-decoration: none;
	
	&:hover {
		color: #FF4C4C;
		text-decoration: underline;
	}
}
 
hr {
	display: block;
	padding: 0;
	border: 0;
	border-top: 1px solid #aaa;
	margin: 30px 0;
}
 
img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}
 
blockquote {
	font-style: italic;
	padding-left: 15px;
	border-left: 5px solid #aaa;
}
 
pre {
	padding: 10px;
	background: #eee;
	color: #555;
	font-size: 1em;
	-moz-tab-size: 4;
	tab-size: 4;
	
	& code {
		color: inherit;
		white-space: pre-wrap;
	}
}
 
code {
	color: #FFFF73;
	background: #000066;
	white-space: nowrap;
	display: inline-block;
	padding-left: 5px;
	padding-right: 5px;
}

Размер шрифта в PX задается в BODY, а для других элементов используется EM. Это позвляет автоматически их масштабировать. Впрочем, при использовании LESS можно сразу рассчитать PX-размеры шрифтов для заголовков через коэффициент от BODY. У подходов есть плюсы и минусы, какой использовать вебмастер решает сам.

Поскольку типографика влияет на множество блоков, например виджеты, компоненты, то возникнет стремление сразу править стили и для этих блоков. Не нужно этого делать! На уровне типографии следует лишь отладить тексты записей. Возьмите за правило, что на этом уровне создаются стили только для «голых» HTML-тэгов, то есть никаких div.info не может быть в принципе.

Ещё раз layout

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

Если убрать этот фон, то потеряется смысл во внутреннем отступе контента:

Очевидно, что для такого варианта потребуется вернуться к layout.less и поправить отступы ещё раз.

Прототипирование

На этом этапе следует определиться с дизайном шаблона, хотя бы по основным параметрам: размеры, цвета ссылок, текста и положение основных блоков. Если есть готовый (нарисованный) дизайн, то это несколько упрощает дело. Для таких вариантов следует разбить дизайн на состовляющие блоки и постепенно верстать от одного к другому. Вначале выставлюятся размеры и положение, а после уже цвета и прочие мелкие детали.

Если же готового дизайна нет, но есть некий набросок, то есть смысл выполнить прототипирование, где основная задача — размещение блоков в серых/нейтральных тонах. Тема прототипирования достаточно обширна, поэтому я просто дам ссылку на статью «Учимся использовать каркасы при создании сайта» для ознакомления.

Прототип в теории должен быть полнофункциональным. В нашем случае вопрос решается достаточно просто, поскольку мы прототипируем сразу «по живому» и надобности в «буферных» инструментах нет.

Шаблон может быть универсальным или узконаправленным. К универсальным можно отнести Default-шаблон, поскольку он поддерживает массу компонентов, type_foreach-файлов и прочие сложные выводы данных. На практике, как правило, такой задачи не стоит и можно органичиться лишь выбранными компонентами и одним-двумя выводами данных. Отдельно стоит отметить вывод главной страницы. В MaxSite CMS несколько вариантов вывода, но для клиента возможно будет нужен только один, но какой-то особенный. Решается этот вопрос через unit'ы type-файлов. Хорошим тоном будет скрыть из настроек шаблона незадействованные опции.

Для простоты, думаю, есть смысл остановиться на варианте прототипирования без учета цветового дизайна. Схематично это будет выглядеть так:

Глядя на этот набросок можно определить, что для шапки мы можем использовать компоненты logo-ns-descr-banner и menu-only, а для подвала footer-copy-stat. Выбираем эти компоненты в настройках шаблона.

Clearfix

Микс .clearfix() достаточно важен, поэтому я приведу его код полностью (10-mixins/helpers.less):

.box() {
	.clearfix() {
		&:before,
		&:after {
			content: " "; 
			display: table; 
		}
		
		&:after {
			clear: both;
		}
	}
}

Вызывать так:

БЛОК {
	.box > .clearfix;
}

«Супермикс» .box() я использую для группировки миксов так или иначе связанных с размерами, положением или поведением блоков. Часто встречается просто микс «.clearfix» (а не «.box > .clearfix») и это создает конфликт использования, поскольку, как правило, уже существет одноименный css-класс «.clearfix». LESS-компилятору придется дважды включить стили в результирующий код: вначале от микса, после от класса.

Отдельного упоминания clearfix заслуживает в первую очередь из-за особенностей его использования. Существует два варианта. Первый — в родительском блоке указывается clearfix вторым классом:

<div class="блок clearfix">
 
	... какой-то блок ...
 
</div>

В этом случае следует заранее предопределить класс .clearfix {...}.

Второй вариант без использования класса clearfix:

<div class="блок">
 
	... какой-то блок ...
 
</div>

То есть блок содержит только свой класс. В стилях же следует указать:

div.блок {
	.box > .clearfix;
	... прочие стили ...
} 

Существует ещё один вариант, который признан морально устаревшим (из-за современных браузеров, которым больше не требуется данный «костыль»), но до сих пор часто встречается. Задаются стили .clearfix, который размещается в отдельном пустом div-блоке:

<div class="блок">
 
	... какой-то блок ...
 	 
	<div class="clearfix"></div>
</div>

Данный вариант лучше не использовать, а ограничиться первым или вторым (второй — более универсальный, поскольку не завязан на предопределенный css-класс).

Скачать текущий вариант D3 (less-файлы) ⁷⁰⁶

Предыдущая часть.