Рассмотрим модульную main-сетку, которая располагается в файле main/main.php. Как вы уже знаете, модульная сетка представляет собой html-каркас, в котором выводится результат type-файла в виде переменной $CONTENT_OUT, сайдбара (если есть), а также компоненты шапки и подвала.
В MaxSite CMS принято делать несколько main-сеток, с тем, чтобы пользователь мог переключиться на нужный вариант: правый сайдбар, левый, без сайдбара, сетка для landing и content-only для вывода «голого» контента записи. В процессе эволюции MaxSite CMS мы пришли к тому, что проще сделать несколько разных вариантов main-файлов, чем придумывать какой-то единый универсальный каркас. К тому же такой подход позволяет конечному пользователю легко изменить сетку, не затрагивая сложную верстку.
Итак, откроем main-файл. В нём присутствуют php-вставки в виде
if ($fn = mso_fe('main/blocks/_start.php')) require($fn);Данный код проверяет существование файла main/blocks/_start.php и если он есть, то происходит его подключение через стандартную функцию require(). Для функции mso_fe() путь задаётся относительно каталога текущего шаблона.
Каталог main/blocks содержит подключаемые файлы в которые вынесен служебный или «типовой» код. Это позволяет упростить код main-шаблона, что делает его более читабельным и понятным для верстальщика.
Рассмотрим html-структуру модульной сетки. Первое, что следует отметить — здесь нет общего контейнера и блоки шапки, контента и подвала расположены сами по себе.
<div class="header"> ... компоненты шапки ... </div> <div class="layout-center-wrap my-main-container"><div class="layout-wrap"> ... контент ... </div></div> <div class="footer"> ... компоненты подвала ... </div>
Классы .header, .footer и .content являются «семантичными» контейнерами для компонентов (для поисковиков), но могут использоваться и для создания общего оформления. Но, как правило, все компоненты будут иметь html-структуру, позволяющую обходиться без задания стилей контейнера. Об этом пойдет речь позже.
Контент задаётся через UniCSS-классы layout, как это я показал в предыдущей статье. Поскольку для контента нет других вариантов, то layout-классы мы прописываем прямо в main-файле. В данном примере мы видим, что блок контента будет центрирован по ширине браузера. Класс .my-main-container может пригодится, если потребуется прописать какие-то особые стили, например регулировать отступы от краёв браузера при адаптивном дизайне.
В блоке контента выводится сам контент из type-файла, а также сайдбар справа (типовое расположение) или слева.
<div class="layout-center-wrap my-main-container"><div class="layout-wrap">
<div class="flex flex-wrap-tablet my-container-content-sidebar">
<div class="w67 w100-tablet">
<div class="">
<div class="content">
<?php if ($fn = mso_fe('main/blocks/content.php')) require($fn) ?>
</div>
</div>
</div>
<div class="w30 w100-tablet mar20-l mar0-l-tablet">
<div class="flex-tablet-phone flex-wrap-tablet-phone flex-jc-around-tablet-phone"><?php mso_show_sidebar('1') ?></div>
</div>
</div>
</div></div>
Переменная$CONTENT_OUTвыводится в подключаемом файле main/blocks/content.php, а сайдбар выводится с помощью функцииmso_show_sidebar().
Здесь мы уже встречаемся с flex-сеткой. Её задача сделать две колонки по 67% и 30%. Если вы ещё незнакомы с flex, то можете почитайте мою статью Нормальное описание Flexbox-модели.
Flex-сетка задаётся с помощью класса .flex, который определён так:
.flex {
display: flex;
justify-content: space-between;
align-items: stretch;
}Если по простому, то это обычная «резиновая» сетка, где ячейки распределяются по краям контейнера, и выровнены по высоте.
Класс .flex-wrap-tablet разрешает перенос ячеек для tablet-устройств. Конкретное значение в пикселах задаётся в файле _variables.scss.
$SCREEN_TABLET: "(max-width: 768px)";
При этом следует обратить внимание на $screen_media_flex_step_list, где указываются нужно ли UniCSS генерировать «адаптивные» классы для flex (вроде .flex-wrap-tablet):
$screen_media_flex_step_list: ( "tablet": $SCREEN_TABLET, "tablet-phone": $SCREEN_TABLET, "phone": $SCREEN_PHONE, );
Такой подход в UniCSS используется и для генерации других классов.
Класс .my-container-content-sidebar вспомогательный на тот случай, если потребуется изменить внешний вид через css-стили и не править main-файл.
Непосредственные потомки .flex будут ячейками. У нас это два div-блока, где у первого задана ширина 67% (.w67), а у второго 30% (.w30). Одна из первых задач — это задание пропорций для сайдбара и как раз этими .w-классами вы можете это сделать.
Но, перед тем как подбирать пропорцию, желательно определиться с максимальным размером. Делается это через sass-переменную $layout_max_width. Какое именно значение — вы решаете сами и это зависит от потребностей заказчика. Если планируется в сайдбаре размещать рекламные блоки, то нужно рассчитать так, чтобы ширина сайдбара/виджета до tablet была не менее ширины рекламы, например 320px. При небольшой ширине, например 992px (сейчас это «типовое» значение), пропорции могут оказаться такими, что ячейка контента будет слишком узкой. Вопросы адаптивности мы рассмотрим несколько позже (это достаточно специфичная тема), поэтому подбор максимальной ширины и пропорций подбирайте по своему вкусу. Я лишь отмечу, что ширина 1024px — это ширина планшета в горизонтальном положении, а 1100px для десктопа уже достаточно для комфортного просмотра. Большие значения от 1200px слишком широки и подходят для случаев, когда используются два сайдбара или контент выводится очень крупным шрифтом.
Класс .w100-tablet делает 100%-размер блока в tablet-устройстве. То есть при ширине 768px (планшет в вертикальном положении) размеры ячеек станут 100% ширины, а поскольку для tablet разрешен перенос (.flex-wrap-tablet) то они расположатся один под другим: вначале контент, после сайдбар.
Для ячейки сайдбара определены еще два класса: .mar20-l и .mar0-l-tablet. Первый устанавливает отступ слева в 20px, а второй сбрасывает его для tablet (где 100% ширина).
Внутренний блок в сайдбаре имеет ряд классов:
flex-tablet-phone flex-wrap-tablet-phone flex-jc-around-tablet-phone
Сам по себе сайдбар состоит из виджетов, которые формируются MaxSite CMS автоматически. Каждый виджет — это div-блок и его «внутренности». Таким образом, если у основного контейнера задать flex, то все виджеты превратятся в flex-ячейки (где их ширина уже автоматическая). Но такое поведение нам нужно только для tablet-устройств. На десктопе оно будет лишним.
Чтобы включить flex только на планшетах и телефонах используется класс .flex-tablet-phone. Постфикс -tablet-phone как раз указывает границы действия. Класс .flex-jc-around-tablet-phone немного меняет действие flex-сетки: justify-content: space-around, то есть ячейки больше не прижимаются к краям контейнера, а распределяются равномерно с учетом отступов.
Теперь давайте рассмотрим модульную сетку left-sidebar. Здесь практически тоже самое, но сайдбар выводится перед контентом, что делает его «левым».
Классы flex-order позволяют менять порядок расположения flex-ячеек. На десктопе сайдбар должен выводиться слева, то есть первым, а на планшетах и телефонах, он должен оказаться уже после контента, то есть вторым.
Классы .flex-order1-tablet и .flex-order2-tablet указывают порядок для tablet (и phone).
Существует немного другой подход к верстке контента и сайдбара. При медленном соединении, посетитель вначале увидит сайдбар, а не контент, поскольку такое располжение блоков в html-коде. Можно поставить контент вначале, а сайдбар в конце, как в предудущей сетке, но поменять их отображение через order. В этом случае при медленном соединении посетитель вначале увидит контент. Проблема здесь в том, что вместо сайдбара будет пустая колонка (до полной загрузки), что эстетически выглядит не лучшим образом. Какой вариант выбрать — решать вам.
Как указать минимальную ширину сайдбара? Для этого следует добавить класс вроде .w340px-min у контейнера сайдбара (тот что .w30). Доступные ширины в px задаются в _variables.scss в переменой $width_list_px. Когда у вас возникнет потребность указать новое значение, просто добавьте его в список и перекомпилируйте UniCSS.