Шаблоны для новичков. Урок 17. Базовый шаблон MaxSite CMS. Адаптивный дизайн

Настала пора сделать что-то более практичное. Основную теорию мы уже рассмотрели, на её основе попробуем сделать какой-нибудь простенький шаблончик. В предыдущих уроках мы уже обсудили структуру каталогов, но чтобы у нас не было разночтений, я предлагаю скачать мой вариант: les02-00 ⁹⁴⁸. Это что-то вроде «рыбы», которую вы можете взять за основу.

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

Подключение LESS мы уже разобрали, поэтому кратко пройдемся по основным файлам.

• Главный файл var_style.less. В нём мы только выполняем подключение других файлов.
• Переменные («глобальные») хранятся в variables.less.
• Хелперы в каталоге mixins. Пока у нас там только helpers.less.
• Основные базовые настройки размещаем в base.less.
• Основная разметка в layouts/layout01.less. Сейчас там пустая «рыба» под «типовой» шаблон MaxSite CMS.
• Все меню подключаем в menu.less. Стили меню будут находиться в раздельных файлах каталога menus. Их может быть много. В menu.less и будем указывать какие именно файлы.
• Адаптивный дизайн определяется в responsive.less. У него такая же схема подключения как и меню.

Почти все файлы пустые и не содержат рабочих стилей. Это означает, что на выходе мы должны получить пустой var_style.css.

После переключения на этот шаблон, при том, что у нас нет своих стилей, мы всё-равно получим рабочий сайт. Это происходит из-за того, что шаблон заимствует часть функционала и css-стилей из default-шаблона. В частности он подключает style-all-mini.css (отформатированная версия - это style-all.css).

Файл style-all-mini.css представляет собой набор некоторых css-стилей, которые в 99% случаев используются в любом шаблоне. В частности это т.н. сброс стилей, небольшую типографику, стили для форм, меню, а также некоторые стили плагинов и type-файлов MaxSite CMS. Я не буду подробно останавливаться на этом вопросе, интересующихся адресую к Wiki MaxSite CMS.

Текстовый редактор

Если вы используете Notepad++ или аналогичную программу, то я рекомендую держать открытыми сразу несколько less-файлов. На начальном этапе вёрстке приходится задавать стили одновременно в нескольких файлах.

Переключаться между вкладками проще, чем по файловому менеджеру.

Базовый стиль

Давайте для начала зададим какой-то базовый шрифт, например Arial, 13px, #111. Поскольку это будет глобальный шрифт для всего сайта, то стиль следует указать для тэга BODY в файле base.less.

body {
	.f > arial;
	.f > size(13px);
	.f > color(#111);
}

Здесь я использую микс .f, в котором собраны «подмиксы» для работы с текстами. Из контекста несложно догадаться какой микс для чего предназначен.

В этом файле также можно задать цвета ссылок, заголовком и т.п. Тут уже наступает очередь дизайна, а поскольку мы всё придумываем «на лету», то эти элементы оставим без изменений.

Структура сайта

Структура сайта у нас определена в layout01.less. Сразу же отметим, что в variables.less у нас есть две переменные, которые явно относятся к этому файлу: @content_width и @sidebar_width. Это наводит на мысль, что расчитывать все размеры мы поручим LESS. Если нужно будет сменить размер, то правим только переменные.

Задавать стили мы будем через микс .layout(). Обратите внимание, что это параметизированный микс, а значит его нужно явно вызвать. Общая схема такая:

.layout(
		@content: 960px, // общая ширина сайта
		@sidebar: 250px, // сайдбар
	)
{
	... стили ...
}
 
.layout(@content_width, @sidebar_width);

Казалось бы зачем такие сложности? Ведь можно просто прописать стили без миксов, результат-то будет тем же! Но, всё дело в том, что наш шаблон будет адаптивным, то есть меняться под разные устройства: браузер, мобильный телефон, планшет - и мы можем использовать этот же микс повторно, только подставляя нужные размеры.

Стили для .layout()

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

.layout(
		@content: 960px, // общая ширина сайта
		@sidebar: 250px // сайдбар
	)
{
	div.all {
		.bg(#eee);
	}
	
	div.header {
		
		.bg(#ccc);
		
		div.header-wrap {
			width: @content;
			margin: 0 auto;
			.bg(white);
		}
	}
	
	div.main {
		width: @content;
		margin: 0 auto;
		.bg(white);
	}
	
	div.content {
		width: @content - @sidebar;
		float: right;
		
		div.content-wrap {
			margin: 20px;
		}
	}
	
	div.sidebar1 {
		width: @sidebar;
		float: right;
		
		div.sidebar1-wrap {
			margin: 20px;
		}
	}
	
	div.footer {
		.bg(#ccc);
		
		div.footer-wrap {
			width: @content;
			margin: 0 auto;
			.bg(white);
		}
	}
}

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

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

Сейчас главное понять основной подход: уже на этом этапе мы создали модульную структуру сайта. Теперь в variables.less можно «поиграться» с произвольными размерами через @content_width и @sidebar_width. Все изменения сразу же вступают в силу.

Адаптивный дизайн

Вообще что подразумевают под этой фразой? Предполагается, что посетители могут просматривать сайт с устройств, имеющих разное разрешение экрана. Для телефона, у которого типовое разрешение 480px, наш сайт не поместится целиком по ширине. Посетителю придется пользоваться скролингом.

Таким образом для таких посетителей можно было бы по-другому скомпоновать страницу. Например расположить сайдбар под контентом и установить ширину в 100%, то есть по ширине браузера.

На текущий день «типовых» разрешений очень много. В основном это связано с обилием мобильных телефонов. На мой взгляд нет смысла на них ориентироваться, а взять только самые базовые: менее 768px, от 768px до 960px и более 960px. Поскольку наш шаблон 960px, то диапазоны я указал с его учетом.

В файле responsive.less у нас подключается responsive-layout.less. В нем мы указываем нужные значения. В CSS для этого используется специальное правило @media, в блоке которого прописываются стили под заданное разрешение.

Мы уже указали основную разметку. Будем считать, что она годится для экранов более 960px. Следовательно нам нужно теперь указать стили для 769-960 и менее 769.

@media (min-width: 769px) and (max-width: 960px) {
	body {
		color: red;
	}
}
 
@media (max-width: 768px) {
	body {
		color: blue;
	}
}

Чтобы проверить его работу, меняйте ширину своего браузера: цвет текста будет меняться. В FireFox'е можно выбрать «Адаптивный дизайн» (Ctrl+Shift+M), где указывается размер экрана. Это достаточно удобный инструмент.

Пример простенький для теста, давайте теперь сделаем стили ближе к реальности.

Для этого используем микс .layout():

@media (min-width: 769px) and (max-width: 960px) {
	.layout(769px, 200px);
}

Здесь я указал новые значения сайта и сайдбара.

Что касается разрешения до 768px, то тут немного сложнее, поскольку в нашей модульной сетке уже заданы float-блоки и т.п.

Самым простым вариантом было бы в layout01.less вызвать микс .layout() также с @media для экрана более 960px.

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

@media (max-width: 768px) {
	
	div.header {
		div.header-wrap {
			width: 100%;
		}
	}
	
	div.main {
		width: 100%;
	}
	
	div.content {
		width: 100%;
		float: none;
		
		div.content-wrap {
			margin: 20px;
		}
	}
	
	div.sidebar1 {
		width: 100%;
		float: none;
		
		div.sidebar1-wrap {
			margin: 20px;
		}
	}
	
	div.footer {
		div.footer-wrap {
			width: 100%;
		}
	}
}

Здесь мы переопределяем ширину на 100%, и убираем все float. Теперь сайдбар окажется под основным текстом. Поскольку мы задали ширину 100%, то это охватывает все разрешения менее 768px. Если же нужно зафиксировать какой-то минимум ширины, то можно указать min-width: 400px.

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

Скачать les02-01.zip ⁸¹⁶

««« Урок 18 | Урок 16 »»»