Делаем шаблон на всю ширину браузера

Текущий Default-шаблон MaxSite CMS имеет фиксированную ширину и общий контейнер для основного контента, шапки и подвала. Это достаточно типовой вариант современного блога. Существует еще один похожий вариант, где нет общего контейнера, а шапка и подвал растягиваются на всю ширину браузера.

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

В предыдущей статье Методика создания шаблона я обрисовал основные этапы, на них и будем основываться.

Сделаем копию default-шаблона

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

Это означает, что опции ещё не определены. Оптимальным было бы сразу выставить какие-то базовые, например для шапки указать компонент top1. На начальном этапе это не принципиально.

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

Первая задача — отработка модульной сетки. Это файл main/main.php. Остальные main-файлы нас пока не интересуют.

Открыв файл мы увидим, что общий контейнер это

<div class="my-all-container layout-center-wrap">
	<div class="wrap shadow bg-white"> 
...

Поскольку у нас UniCSS, то мы знаем, что layout-center-wrap — это и есть центрирующий блок модульной сетки. Этот блок требует наличия wrap-блока и мы видим, что для этого блока задана тень (класс shadow) и белый фон (bg-white).

Поскольку у нас общего контейнера быть не должно, то мы его просто удаляем (не забываем про закрывающие /div).

Обновляем страницу и видим, что сайт стал растягиваться на всю ширину браузера.

Общая структура получилась такая:

• div.header — это компоненты шапки
• div.main — это контент (div.content) и сайдбар (div.sidebar)
• div.footer — это компоненты подвала

Теперь определим поведение каждого блока.

Блок контента обычно центрируют, чтобы он не «расползался». Для этого к div.main добавляем еще один класс layout-center. Блоки div.content и div.sidebar уже определены, так что там ничего и менять ну нужно.

C шапкой и подвалом поступим немного по-другому. Здесь есть очень простой вариант — вынести верстку на уровень компонента. То есть в модульной сетке вообще ничего не делаем чтобы никак не влиять на вложенные блоки компонентов.

Блок div.header уже готов, а в div.footer нужно удалить все оформительские классы, чтобы осталось только

<div class="footer"> ...

Фон браузера

Серый фон остался от исходного default-шаблона. Он прописан в my-template.less для BODY. Можно его там убрать, а можно кинуть в Настройках шаблона — CSS стили

body { background: white; }

Без разницы, как это будет сделано.

Компоненты

Как правило компоненты — это законченные модули для конкретного шаблона. Тот же top1 в общем-то расчитан только на default-шаблон. Если мы захотим его применить к нашему новому шаблону, то потребуется изменить верстку самого компонента.

Но, у нас не так давно появились универсальные компоненты: Any1 (и дубль Any2), File1 (и дубль File2) и Footer_any1, которые не создают своей html-разметки. Компоненты Any1, Any2 и Footer_any1 определяются своими опциями. То есть html-разметку нужно задавать прямо в админ-панели.

Компоненты File1 и File2 просто подключают указанный файл. Если это базовый элемент шапки, то удобно использовать именно эти компоненты. Тогда при обновлении шаблона достаточно заменить файл (или отредактировать через админ-панель в Файлах).

Компоненты any удобно использовать для дополнительных блоков с небольшим кодом.

Формально — это просто вопрос удобства. Пусть File1 будет в шапке, а File2 в подвале. В настройках, соответственно укажем custom/top.php и custom/bottom.php. Эти файлы, конечно же нужно предварительно создать.

Шапка

Попробуем сделать вот такой несложный вариант:

На что следует обратить внимание. В первую очередь — это модульная сетка шапки. Здесь два блока: родительский растягивается на всю ширину браузера и заливается синим цветом, а вложенный — центрируется. Поскольку у нас UniCSS, то это всё тот же layout-center-wrap.

<div class="layout-center-wrap clearfix bg-blue700">
	<div class="layout-wrap pad20-rl">
		...
	</div>
</div>

Здесь я указал pad20-rl для того, чтобы сделать отступ от краёв браузера. Точно такой же отступ задан и в main.php для сайдбара и контента.

Класс clearfix используется на случай, если внутри будет использован какой-то float-блок. Если такого нет, то класс можно убрать.

Фон задан через bg-blue700. В UniCSS масса предопределенных цветов, можно указать другой, а вообще их настройка осуществляется в less-файлах шаблона.

Внтури у нас будет два блока: название/слоган и меню. Для их размещения будем использовать flex-сетку. Что касается ширины ячеек, то можно задать их явно в процентах или пикселах, а можно упростить задачу и указать только «жадность» (grow). Тогда ширина будет подстроена под содержимое. Ещё можно было бы выровнять блоки по вертикали и задать отступы снизу и сверху.

Сразу же определяем адаптивность. Здесь достаточно лишь задать для блока меню для планшетов и телефонов 100% ширину.

Вот такой код будет на этом этапе:

<div class="layout-center-wrap clearfix bg-blue700">
	<div class="layout-wrap pad20-rl">
		<div class="flex flex-vcenter pad20-tb flex-wrap-tablet">
			<div class="flex-grow1">
				Название / слоган
			</div>
	
			<div class="flex-grow1 w100-phone">
				МЕНЮ
			</div>
		</div>
	</div>
</div>

Я рекомендую хорошо разобраться с этим кодом, посколько это фактически «типовой» и универсальный вариант для компонентов и модульных сеток.

Блок «Название/слоган» достаточно простой и состоит только из оформительских классов:

<div class="t200 bold"><a class="hover-no-underline" href="<?= getinfo('siteurl') ?>"><span class="t-white">MY</span><span class="t-blue200">SITE</span></a></div>
 
<div class="t90 t-gray400">Мой лучший сайт</div>

Здесь обращу внимание только на hover-no-underline, который убирает подчеркивание ссылки. Внутренние span явно задают цвет, так что тут всё просто. В UniCSS ссылками можно управлять разными способами, здесь же получился простой вариант.

Блок меню — это готовый компонент _menu. Его подключение стандартное.

<div class="b-right b-float-none-tablet">
	<?php if ($fn = mso_fe('components/_menu/_menu.php')) require($fn); ?>
</div>

Сам контейнер выравниваем вправо (b-right), а для планшетов его убираем (b-float-none-tablet).

Вёрстка самого меню находится в assets/less/component/menu.less. Именно в этом файле следует задавать размеры, цвета и прочее оформление меню.

Бонус: фиксированная вверху шапка

Если нужно зафиксировать шапку, то к контейнеру шапки (который layout-center-wrap) добавляем класс pos-fixed. По-умолчанию он как раз фиксируется вверху. Но, поскольку fixed-блок выводится из общего потока вывода браузера, то нужно добавить блок равный высоте шапки, который сместит нижний блок контента (div.main). Тут много вариантов, но проще всего добавить в конце компонента еще один div с нужной высотой (её нужно подобрать по дизайну).

<div class="layout-center-wrap clearfix bg-blue700 pos-fixed">
...
</div></div>
<div style="margin-top: 100px"></div>  

Я указал 100px. Отмечу, что следует сразу проверять такие вещи на малых экранах. Если для планшета или телефона должен быть другой отступ, то можно добавить еще div-блоки, управляя их видимостью.

Подвал

Подвал строится по точно такому же принципу, что и шапка. Точно также задаётся модульная сетка (layout), а в ней уже блоки во flex-сетке.

Если нужно вывести копирайты и статистику, как это обычно принято в MaxSite CMS, то отошлю к компоненту footer_any1/footer_any1.php. Посмотрите как в этом файле формируются переменные $copy_maxsite и $login. Если нужен такой функционал, то просто скопируйте этот код в свой компонент.