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

Просмотров: 230Комментарии: 1
MaxSite CMSСоздание шаблонов (версии 0.8x)

Типографика

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

[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 серый фон. Условно это можно назвать особенностью дизайна.

Фон 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-файлы) 51

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

Комментариев: 1 RSS

1Аноним31-01-2014 05:47

При использовании

Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики.

Заголовок H1

Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой, но текст не дал сбить себя с толку. Он собрал семь своих заглавных букв, подпоясал инициал за пояс и пустился в дорогу.

Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой, но текст не дал сбить себя с толку. Он собрал семь своих заглавных букв, подпоясал инициал за пояс и пустился в дорогу.

Заголовок H2

Она предупредила его: «В моей стране все переписывается по несколько раз. Единственное, что от меня осталось, это приставка «и». Возвращайся ты лучше в свою безопасную страну».

Она предупредила его: «В моей стране все переписывается по несколько раз. Единственное, что от меня осталось, это приставка «и». Возвращайся ты лучше в свою безопасную страну».

Заголовок H3

Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами.

Заголовок H4

Sed magna elit, laoreet ac ornare sed, tempus a velit. Donec lobortis scelerisque urna, id malesuada sem tristique scelerisque! Etiam feugiat mi a diam mollis et bibendum dui placerat!

Заголовок H5

Ut tempus auctor volutpat? Vestibulum molestie suscipit quam vitae sagittis. Sed vel metus eget ligula dapibus sagittis. Maecenas lacinia faucibus egestas. Curabitur eget mi magna, ac imperdiet dolor.

Заголовок H6

Maecenas id dui lectus. Ut ipsum leo, laoreet sit amet pulvinar quis, mattis eu justo. Donec ac leo a neque porttitor tincidunt ac id elit.


Преформатированный текст (код) PRE

<html>
	<head>
	</head>
	<body>
	</body>
</html>

Код CODE в тексте

When you call the activate() method on the robotSnowman object, the eyes glow.


Изображение в тексте IMG

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra, dui sit amet fringilla venenatis. Vestibulum lobortis semper sem aliquet rhoncus. Donec fermentum, felis quis tincidunt sodales, sem quam adipiscing nibh, nec tincidunt augue sapien.

Картинка классом left

Mauris et magna at libero mollis tristique quis non massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vitae ante dolor. Mauris tincidunt ultricies nunc eu mattis. Integer ornare vulputate semper? Nullam tempor placerat imperdiet. Nullam hendrerit sollicitudin sem, nec luctus lectus blandit sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet hendrerit urna. Sed lobortis lectus condimentum tellus consectetur facilisis. Nullam velit ipsum, pulvinar nec pellentesque sit amet, adipiscing ut eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas convallis, erat pharetra pulvinar bibendum; orci mi consequat quam, ut volutpat lectus ligula ut diam.

Цитаты BLOCKQUOTE

Quisque vehicula; neque id condimentum varius, metus nisl vehicula orci, sit amet malesuada massa ipsum ut orci. Ut tincidunt congue eleifend. Proin et eros nisi, eget sollicitudin lacus. Maecenas sit amet nibh et felis volutpat vulputate ut sed nisi. Praesent vestibulum, magna in accumsan lacinia, odio dolor laoreet nibh, non cursus nisl dui non augue?

- Duis justo quam CITE

Обычный список UL/LI

  • Nulla lobortis semper libero, rutrum volutpat leo faucibus a. Fusce justo eros, porta at cursus eu, tincidunt ut magna. Nulla.
  • Vestibulum pretium sapien eget neque bibendum at auctor justo gravida. Nam dapibus, diam eu sodales aliquet, orci lorem auctor felis.
  • Proin ut neque ut quam vestibulum blandit. Phasellus tempus semper est, at malesuada leo suscipit.
  • Phasellus faucibus fringilla ligula, at ultrices arcu varius quis. Aliquam sollicitudin scelerisque bibendum. Proin sed.

Обычный вложенный список UL/LI

  • Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты.
    • Nulla lobortis semper libero, rutrum volutpat leo faucibus a. Fusce justo eros, porta at cursus eu, tincidunt ut magna. Nulla.
    • Vestibulum pretium sapien eget neque bibendum at auctor justo gravida. Nam dapibus, diam eu sodales aliquet, orci lorem auctor felis.
  • Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.
    • Nulla lobortis semper libero, rutrum volutpat leo faucibus a. Fusce justo eros, porta at cursus eu, tincidunt ut magna. Nulla.
    • Vestibulum pretium sapien eget neque bibendum at auctor justo gravida. Nam dapibus, diam eu sodales aliquet, orci lorem auctor felis.
  • Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот.
    • Nulla lobortis semper libero, rutrum volutpat leo faucibus a. Fusce justo eros, porta at cursus eu, tincidunt ut magna. Nulla.
    • Vestibulum pretium sapien eget neque bibendum at auctor justo gravida. Nam dapibus, diam eu sodales aliquet, orci lorem auctor felis.
  • Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами.
    • Nulla lobortis semper libero, rutrum volutpat leo faucibus a. Fusce justo eros, porta at cursus eu, tincidunt ut magna. Nulla.
    • Vestibulum pretium sapien eget neque bibendum at auctor justo gravida. Nam dapibus, diam eu sodales aliquet, orci lorem auctor felis.

Нумерованный список OL/LI

  1. Curabitur ornare porttitor nunc, nec.
  2. Vivamus nisi arcu, tempus vel.
  3. In sit amet justo non.
  4. Aliquam nec bibendum libero. Phasellus.

Список определений (DL/DT/DD)

title
definition
definition
definition
title
definition
definition
definition
title
definition
definition
definition

Таблица TABLE/TR/TH/TD

Заголовок 1 THЗаголовок 2 THЗаголовок 3 THЗаголовок 4 TH
Ячейка 1.1Ячейка 1.2Ячейка 1.3Ячейка 1.4
Ячейка 2.1Ячейка 2.2Ячейка 2.3Ячейка 2.4
Ячейка 3.1Ячейка 3.2Ячейка 3.3Ячейка 3.4
не хватает how-to около блоков.

Т.е. как разные элементы использовтаь, где-то есть, где-то нет

Оставьте свой комментарий!

Комментарий будет опубликован после проверки

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)

О проекте

MaxSite CMS предназначена для создания сайтов любой сложности. Система отлично подходит обычным пользователям, вебмастерам, фрилансерам и вебстудиям.