Шаблоны для новичков. Урок 11. Прототипирование. Использование LESS

Первым этапом создания шаблона является его прототипирование. Это что-то вроде чернового варианта, где опущены мелкие детали и можно сосредоточиться на самых важных частях сайта. На этом этапе создается модульная сетка сайта и верстка основных блоков.

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

Если же стоит задача придумать сайт, то прототипирование будет обязательным этапом.

Программы для прототипирования

Для создания наброска сайта используются произвольные программы, или даже обычный блокнот и карандаш. Я давно приноровился использовать Pencil (советую ставить как «standalone application» по ссылке Downloads). Там же можно скачать и наборы элементов, иконок и т.п.

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

Черновой макет сайта

Для учебных целей я сделал набросок будущего сайта. Это главная страница.

Отмечу основные моменты:

• Шапка содержит два меню.
• В шапке выводится логотип.
• Во втором меню добавим поиск по сайту.
• Шапка визуально растянута на ширину браузера.
• Основной контент фиксированной ширины 960px по центру браузера.
• Используется один сайдбар справа.
• Для главной страницы выводится слайдер вверху.
• Для главной страницы записи выводятся в две колонки.
• Сайдбар настраивается стандартно через админ-панель.
• Подвал содержит два блока: блок колонок и блок копирайтов.
• Подвал визуально растянут на всю ширину браузера.
• Четыре колонки в подвале.
• Блок копирайтов содержит дату, название сайта и т.п.

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

Чеклист создания шаблона

Полный чеклист приведен в wiki MaxSite CMS.

• Создадим каталог шаблона.
• Скопируем в него содержимое default/_create_a_new_template.
• Укажем в info.php данные шаблона.
• Скопируем default/css/var_style.css в свой шаблон.
• Скопируем default/css/less/var_style.less в свой шаблон в /css/.
• Удалим css/add_style.css в своем шаблоне.
• В админ-панели сайта и переключимся на свой шаблон.
• Отключим все css-профили, если они были включены.

Компоненты-заглушки

Прежде чем приступать к верстке, следует определиться с компонентами. Очевидно, что вся шапка будет состоять из трех компонентов:

• Верхнее меню (плюс иконки).
• Лого.
• Нижнее меню (плюс поиск).

Из всех этих компонентов у нас нет ни одного подходящего. Поэтому мы сделаем файлы-заглушки в каталоге компонентов.

• header-menu-top.php
• header-logo.php
• header-menu.php

Содержимое файла (на примере header-menu.php):

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
 
echo '<div>header-menu.php</div>';

После этого в Настройке шаблона указываем эти компоненты.

Для подвала добавим аналогичный footer-top.php. При этом будем (пока) использовать стандартные footer-copyright.php и footer-statistic.php.

Также укажем эти компоненты в Настройках шаблона.

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

Для css-вёрстки используем LESS

Вообще, что такое LESS? Это компилятор расширенного синтаксиса CSS в стандартный CSS. Например в LESS мы можем указывать переменные и выполнять различные арифметические вычисления. Соответсвенно, если нужно будет поменять размеры, в переменной указываем новое значение и LESS сам всё пересчитает и обновит CSS-файл.

Тут важно понять, что LESS - это тот же CSS, только более удобный и функциональный.

Для работы с LESS нужно установить программу WinLESS. Подробнее вы можете почитать в моей статье «Используем LESS (динамический CSS) в MaxSite CMS».

Перед началом работы с var_style.less откройте его и замените строчку

@import "include/helpers.less";

на

@import url('../../default/css/less/include/helpers.less');

Это позволит подключать хелперы LESS прямо из default шаблона. Если этого не сделать, то компилятор WinLESS будет ругаться на ненайденный файл.

Почему LESS

Первая причина - лучший синтаксис CSS. Прежде всего это касается вложенных селекторов. Например задание ссылок:

a {
	color: #0E5FBF; 
	text-decoration: underline;
 
	&:hover {color: red;}
 	
	div.widget & {text-decoration: none;} 
	div.sitemap & {text-decoration: none;} 
	div.type_comments & {text-decoration: none;} 
	div.page_other_pages & {text-decoration: none;} 
}

Данная возможность примечательна ещё и тем, что на выходе получается правильный css с контекстными селекторами.

Вторая причина - переменные и математические функции. Мы рассмотрим эту возможность чуть ниже при указании размеров контента и сайдбара.

Третья причина - миксы (mix, mixin) - наборы правил, которые можно использовать в любых других наборах. Например есть микс .border_radius(), который задаёт скругление углов блока. А микс .border() указывает границу.

div.page_other_pages_header, 
div.page_comments_count, 
div.leave_a_comment {
	.border(#DDD);
	.border_radius(8px);
}

LESS спокойно преобразует это в нормальный CSS со всеми moz- и webkit-префиксами.

Изучение LESS

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

Задаем структуру сайта

Откроем var_style.less и найдем комментарий «Структура сайта». Здесь объявлены две переменные:

@all_width: 960px;
@sidebar_width: 250px;

Несложно догадаться, что это общая ширина сайта и ширина сайдбара. Ниже по коду можно увидеть использование этих переменных при задании ширины DIV-блоков, а также отступов margin.

Впрочем, для нашего шаблона данная структура (default-шаблона) все равно полностью не подходит, и после того, как вы поиграетесь, секцию структуры можно удалить.

Основные контейнеры

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

• div.all-wrap
• div.header
• div.footer
• и их wrap-блоки

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

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

Готовый код:

// СТРУКТУРА САЙТА
 
@all_width: 960px;
@sidebar_width: 270px;
 
div.main {
	width: @all_width; 
	margin: 0 auto; 
	background: white;
}
 
div.content {
	width: @all_width - @sidebar_width; 
	margin: 0 @sidebar_width 0 0; 
	float: left;
}
 
div.content-wrap {margin: 20px 30px 10px 20px;}
 
div.sidebar {
	width: @sidebar_width; 
	float: right; 
	margin: 20px 0 0 -@sidebar_width;
}
 
div.sidebar1-wrap {margin-right: 10px;}

Для сайдбара я указал 270px.

HTML-структура компонентов

Компоненты шапки должны быть 100% ширины, а вот содержимое отцентировано. Решается это как обычно wrap-блоками.

Откроем header-menu-top.php и зададим блоки и классы.

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');?>
 
	<div class="header-menu-top">
		<div class="wrap">
			header-menu-top.php
		</div>
	</div>

И стили:

// компоненты
 
div.header-menu-top {
	div.wrap {
		width: @all_width;
		.block_center();
	}
}

Переменная @all_width нам уже знакома. А микс .block_center() делает выравнивание по центру. Этот микс будет эквивалентен:

margin: 0 auto;

Точно по этой же схеме делаем остальные компоненты:

• header-logo.php
• header-menu.php
• footer-top.php

Ну и результирующий CSS (все компоненты):

// компоненты
 
div.header-menu-top,
div.header-logo,
div.header-menu,
div.footer-top
 {
	div.wrap {
		width: @all_width;
		.block_center();
	}
}

Итого

На этом этап построения модульной сетки сайта можно считать завершенным. Все основные блоки у нас спозиционированы и дальнейшие действия уже будут связаны с функциональным и цветовым наполнением компонентов.

««« Урок 12 | Урок 10 »»»