Шаблоны для новичков. Урок 21. Основы D2 (меняем модульную сетку)

В комплекте шаблона присутствует файл layout02.less, который содержит немного другой вариант модульной сетки, построенной по «классическому» принципу. И поскольку для этой сетки нет «резины», то её адаптивность должна уже определяться в responsive-файлах. Рассматривать этот вариант не будем, поскольку он практически один в один повторяет предыдущие уроки.

По поводу модульной сетки скажу, что это краеугольный камень в построении шаблона. От её выбора будет зависеть вся остальная вёрстка. Рассмотрим вариант, когда для шаблона нужно разместить шапку на всю ширину браузера. В нашем же варианте контейнер div.all имеет ограничение по ширине. Следовательно этот блок не позволит дочернему div.header выполнить поставленную задачу.

Выход в этом случае только один — позволить всем родительским блокам иметь 100% ширину браузера.

Но и это ещё не всё. Шапку можно задавать в виде div.header или только блоков компонентов. Возьмём в качестве примера мой сайт:

Шапка представлена в виде компонентов:

• верхнее меню + иконки
• лого + название + описание + баннер
• основное меню

Все эти компоненты ограничены по ширине основного сайта. Вот я их выделил цветом:

Казалось бы что в данном варианте для задания фона шапки следует использовать div.header, но это будет ошибкой, поскольку фон каждого компонента разный.

Ситуация может усложнится и тем, что высоты компонентов могут меняться и не быть фиксированными. Это исключает использование фоновых изображений в родительском div.header. Мы приходим к тому, что ширина каждого компонента тоже должна быть 100% ширины браузера. Только таким образом мы можем задать у каждого компонента свой уникальный фон, без оглядки на остальные блоки.

Модульная сетка, рассмотренная нами в D2 не годится для такого варианта шаблона. Что же следует изменить в layout01.less, чтобы реализовать нужный нам вариант?

При внимательном рассмотрении (а я настоятельно рекомендую досконально разобраться в этом вопросе), у нас задана ширина основного контейнера div.all. В нашей же задаче ширина должна быть только у контейнера для контента и сайдбара — div.main. Таким образом следует перенести стили из div.all в div.main.

...
 
div.all {
}
 
div.all-wrap {
}
 
div.header {
}
 
div.main {
	margin: 0 auto;
	width: 100%;
	max-width: @content;
	.bg(#fff);
}
 
...

На выходе мы получаем ровно то, что нам нужно. С учетом того, что каждый компонент уже сам отвечает за свое расположение в пределах своего родителя.

Разметка компонентов

Типовой вариант компонента всегда такой:

<div class="компонент"><div class="wrap">
 
 ... вывод компонента ...
 
</div></div>

Если компонент состоит из нескольких блоков, то разметка будет примерно такой:

<div class="компонент"><div class="wrap">
 
	<div class="r1">
	 блок1
	</div>
 
	<div class="r2">
	 блок2
	</div>
 
 	<div class="clearfix"></div>
</div></div>

Название css-классов не имеют значения, но возможна ситуация, когда внутренний блок может содержать другие вложенные блоки. Главное это то, что за позиционирование компонента отвечает он сам.

Рассмотрим для примера компонент menu-login. Вывод html осуществляется через шаблонизатор Page_out:

$pt->div_start('menu-login', 'wrap');
	
	$pt->div_start('r1');
		if ($fn = mso_fe('components/menu/menu.php')) require($fn);
	$pt->div_end('r1');
	
	$pt->div_start('r2');
		if ($fn = mso_fe('components/_login/_login.php')) require($fn);
	$pt->div_end('r2');
	
	$pt->clearfix();
 
$pt->div_end('menu-login', 'wrap');

Данный код приведёт к такой разметке:

<div class="menu-login"><div class="wrap">
 
	<div class="r1">
	 меню
	</div>
 
	<div class="r2">
	 логин
	</div>
 
 	<div class="clearfix"></div>
</div></div>

В div.menu-login, который имеет 100% ширину, мы указываем фон. А для его div.wrap уже выставляем максимальную ширину контента. Вложенные блоки расположены в одну строчку, поэтому для их расположения выставляем соответствующие float.

В упрощенном варианте для фиксированной ширины сайта, стили будут такими:

div.menu-login {
	
	.bg(#777); // фон
	
	> div.wrap {
		width: @CONTENT_WIDTH;
		margin: 0 auto;
	}
	
	div.r1 {
		.left;
	}
	
	div.r2 {
		.right;
	}
}

Правила для wrap-блока следует задавать как:

div.menu-login > div.wrap { ... 

— эти стили применятся только к div.wrap, непосредственно прилегающему к div.menu-login. Если убрать символ >, то стили будут применены ко всем wrap-блокам, которые могут быть в компонентах меню и логина.

Для div.r1 и div.r2 мы указываем обычный float, но не указываем ширину. Это небольшая хитрость, которая заставит браузер выставить для этих блоков width: auto. Но это не всегда срабатывает, поэтому нужно проверять по ситуации.

Что касается полурезиновой верстки, то для данного компонента она реализуется точно также, как и для layouts.

> div.wrap {
	margin: 0 auto;
	width: 100%;
	max-width: @CONTENT_WIDTH;
}

Ну а ширина div.r1 и div.r2 определяется уже согласно дизайна. Очевидно, что она должна быть задана в процентах.

LESS-файлы компонентов

Нетрудно догадаться, что стили компонентов располагаются в css-less/components. Поскольку мы используем команду @MSO_IMPORT_ALL_COMPONENTS;, то подключать файлы компонентов вручную не нужно. Всё будет сделано автоматом.

На практике часто оказывается, что не все компоненты используются в шаблоне, поэтому лишние файлы лучше удалить чтобы он не попали в результирующий var_style.css.

Некоторые less-файлы компонентов могут использовать другие less-файлы компонентов. Пример — menu-icons.less, который подключает _social.less. Последний содержит микс .social(), задающий стили для иконок. Такое поведение объясняется тем, что .social() универсальный микс, готовый к использованию и в других компонентах.

Каталог mixins

В этом каталоге содержатся различные миксы и какие-то готовые наборы стилей. Некоторые миксы находятся в shared/css-less/mixins/. Их следует скопировать в cвой шаблон и подключать уже из него. Подключать из shared-каталога можно только helpers.less — это уже «устаканившаяся» версия, которая будет только увеличиваться по функционалу с сохранением совместимости для будущих версий MaxSite CMS.

Прочие less-каталоги

Как я уже отмечал, разделение на каталоги условное, поэтому вебмастер может использовать свой вариант. Стили, которые не попадают ни под какую «тематику» я размещаю в каталоге blocks.

Каталоги menu и responsive

Эти два каталога имеют особый смысл и явно завязаны на файлы menu.less и responsive.less. Такое разделение позволяет несколько упростить поддержку разных вариантов стилей в одном каталоге. Например два меню могут быть в div.MainMenu и div.MainMenu2, но сами стили определены по дизайну: menu-gray.less и menu-red.less.

div.MainMenu {
	@import url('menus/menu-gray.less');
}
 
div.MainMenu2 {
	@import url('menus/menu-red.less');
}

Таким образом можно сделать еще другие меню, переключая их в menu.less.

Аналогично устроен и responsive.less.

««« Урок 22 | Урок 20 »»»