Основные стили модульной сетки уже заданы (см. начало), но остался нерешенным вопрос адаптивного дизайна. Здесь главное придерживаться правила, что «адаптивные» изменения определяются в каждом блоке индивидуально. То есть не нужно стремиться вынести всю «адаптивность» в отдельные файлы.
Для задания адаптивности удобно использовать @переменные. Рассмотрим как это использовать на практике.
Общая схема «адаптивности» будет выражаться в таком less-коде:
div.блок {
... обычные стили ...
@media @условие1
{
... адаптивные стили 1 ...
}
@media @условие2
{
... адаптивные стили 2 ...
}
... и т.д. ...
}
Количество @media-правил напрямую зависит от желания вебмастера охватить все возможные варианты экранов. Здесь следует отметить, что @media-правила должны суммарно перекрывать всю ширину экрана: от нуля до бесконечности. Например экраны обычно делятся на:
- 0..480px
- 481px..768px
- 769px..991px
- 992px..1199px
- 1200px и более
Это достаточно большой охват и детализация, который сейчас наиболее распространён при разработке адаптивного дизайна. С другой стороны, применительно к модульной сетке, такая детализация не требуется, поскольку у нас будeт меняться только div.content и div.sidebar1: при маленькой ширине экрана нужно будет разместить их последовательно на всю ширину экрана.
Таким образом мы зададим только одно media-правило в виде @переменой в начале layout.less
@MOBILE_SMALL: ~"(max-width: 768px)";
Используем её для контента и сайдбара (полный код):
div.content {
width: 70%;
float: left;
div.content-wrap {
margin: 20px 30px 30px 30px;
}
@media @MOBILE_SMALL
{
width: 100%;
float: none;
div.content-wrap {
margin: 20px 30px;
}
}
}
div.sidebar1 {
width: 30%;
float: right;
div.sidebar1-wrap {
padding: 20px 0;
margin: 0 30px 0 0;
}
@media @MOBILE_SMALL
{
width: 100%;
float: none;
div.sidebar1-wrap {
margin: 0;
padding: 20px;
background: #f0f0f0;
}
}
}
Для сайдбара я также добавил фон, чтобы зрительно отделить от контента. Но в общем-то такие вещи должны определяться дизайном сайта. Это же касается и отступов.
В таком варианте модульную сетку можно считать завершенной. Файл layout.less можно использовать как готовый каркас для новых шаблонов. При желании можно вынести размеры блоков в виде @переменных.
Модульная сетка — это не grid-сетка!
Модульную сетку нужно делать для любого шаблона. И это не зависит от используемых css-фреймворков или каких-то своих заготовок. Лишь только после отработки модульной сетки, можно приступать к следующим этапам вёрстки.
Вебмастера, использующие сторонние css-фреймворки, часто путают модульную сетку и grid-сетку. Grid-сетка используется только внутри какого-то контейнера для упорядоченного размещения элементов этого блока. Модульная сетка — задаёт расположение и поведение основополагающих блоков всего сайта, что на практике сводится в очень простым стилям в виде float и width.
Основное назначение grid-сетки — это разместить элементы внутри какого-то блока, например в компоненте шапки. Grid-сетка как правило имеет предопределенные css-классы, которые достаточно просто использовать, не задумываясь об их «устройстве». То есть grid-сетка достаточно удобна на этапе прототипирования, быстрого изменения и т.п.
Исходя из этого, если вебмастер использует сторонний css-фреймоворк, то не нужно пытаться использовать его grid-сетку для модульной. Это будет большой ошибкой.
Сторонние css-фреймворки
Уж коли мы затронули вопрос css-фреймворков, то остановимся на нём подробней. В варианте D3 можно подключить любой фреймворк к шаблону. Если фреймворк использует Less, то подключать лучше его, а не готовый css-файл. Если же такой возможности нет, то переименуйте css-файл в less-файл и разместите в каталоге css-less/20-core — обычно этого достаточно.
Также сразу уточните использует ли фреймворк сброс стилей. Если использует, то удалите файл normalize, который мы подключили раньше.
Понятно, что вся последующая верстка будет следовать правилам используемого фреймворка и есть одна сложность о которую спотыкаются даже опытные верстальщики.
CSS-фреймворков довольно много и в каждом из них используется своя идеология, именование классов, html-разметка, стили и т.д. В MaxSite CMS также используется свой вариант и кажется, что нельзя применить стили к существующим в MaxSite CMS css-классам без их переименования под классы фреймворка. На самом деле это не так.
Покажу на простом примере. Предположим в css-фреймворке определен класс .subpage. В MaxSite CMS например пусть будет блок div.info, который мы хотим сделать как .subpage. Проблема решается элементарно:
// класс задан в css-фреймворке
.subpage {
... стили класса ...
}
// класс задан в MaxSite CMS
div.info {
.subpage;
}
Это базовая основа LESS — когда стили одного класса включаются в стили другого. Используйте эту возможность если возникла похожая задача.
Файлы стилей MaxSite CMS
Каталог 30-maxsite содержит типовые стили MaxSite CMS. Файл mso-css-helpers.less содержит css-хелперы, которые могут использоваться редактором сайта при оформлении текстов. Поэтому желательно включать его в комплект шаблона.
Файл mso-style.less представляет собой каркас (без стилей) для основных блоков MaxSite CMS. То есть вместо того, чтобы «вытягивать» по исходным кодам html-разметку, вы можете использовать этот файл.
Файл mso-menu-vertical.less пересекается с каталогом 50-menu. Если вариант стилей в файле устраивает, то в каталоге достаточно разместить только дизайн меню (цвета, размеры и т.п.). Если по какой-то причине, стили не устраивают, то файл mso-menu-vertical.less можно удалить. Это же самое касается и любого другого файла.
LESS-миксы
Все профессиональные верстальщики уже перешли на css-препроцессоры (в нашем случае — LESS), поэтому использование миксов подразумевается по-умолчанию. Миксы бывают обычные (по сути — предопределенные css-классы) и параметизированные. Параметизированные миксы следует размещать в каталоге 10-mixins. В таком варианте они будут доступны во всех остальных less-файлах.
Если же миксы обычные (предопределенные css-классы), то их нужно размещать на более высоком уровне: 21-css-helpers. Таки миксы/стили автоматом попадут в результирующий css-файл.
Лично я рекомендую все миксы делать только параметизированными, и использовать их по мере необходимости. Например стили сбросов можно разместить в отдельных миксах и вызывать явно:
.normalize(); .border_box_set();
Такой подход серьёзно упрощает написание кода. В своей работе я использую собственную (закрытую) less-библиотеку, которая достаточно сложна для новичков, но при этом позволяет верстать примерно вот так:
body {
.bg(#eee);
.type(14px, #444, normal, 1.4em);
}
.type > .set_base_margin(10px);
.type > .heading > .margin(20px);
.type > .heading > .bold(normal);
.type > .heading > .size(2.0em, 1.6em, 1.3em, 1.2em, 1em, 0.9em);
.type > .heading > .color(#8C0000, #555, #444, #444, #444, #444);
a {
.link > .normal(#B30000, none);
.link > .hover(#238C00, underline);
.link > .visited(#69008C);
.link > .active(#FF0000);
}
Этот код я привожу только как пример того на что следует ориентироваться при создании своих less-миксов.
Например .set_base_margin определен так:.set_base_margin(@margin: 10px) { p, hr, ul, ol, dl, blockquote, pre, address, fieldset, figure, table { margin: 0 0 @margin 0; } * + p, * + hr, * + ul, * + ol, * + dl, * + blockquote, * + pre, * + address, * + fieldset, * + figure, * + table { margin-top: @margin; } }Это что-то вроде заготовки html-элементов с нужными стилями под заказные параметры.
Если же брать готовые less-библиотеки, то можно отметить всего ничего: LESSHat, LESS Elements и Bootstrap'овский файл mixins.less. Как вариант можно взять за основу файл helpers.less, который используется во многих MaxSite CMS шаблонах (включая Default). (Если знаете другие less-библиотеки, отметьтесь в комментариях!)
В любом случае я бы рекомендовал вебмастеру постепенно формировать свой вариант хелперов от каких-то простых к более сложным. Сами файлы хелперов следует размещать и подключать из каталога шаблона, а не из какого-то общего хранилища. Я столкнулся с этой проблемой, когда решил обновить хелперы, которые привели к проблеме совместимости со старым кодом. Если же файлы будут на уровне шаблона, то подобной проблемы не возникает.
См. начало, продолжение.