Пример создания шаблона по принципу D3 (начало)
Принципиальное отличие шаблона аля-D3 от типового, в способе использования CSS-стилей. Традиционно шаблоны MaxSite CMS использовали css-фреймворк в виде style-all-mini.css с набором уже готовых стилей под разные задачи. В D3 предполагается создание одного результирующего css-файла без привязки к style-all-mini.css.
Технически возможность использовать один css-файл в MaxSite CMS существовала всегда, но только в 0.86 появилась «заготовка» файлов, упрощающая создание шаблона в таком варианте.
Идея D3 возникла не на ровном месте, а исходя из практических потребностей. Основная проблема использования style-all-mini.css в том, что в нём используется сброс браузера reset, который верой и правдой служит уже много лет. Но сегодня на сцену выходит новый вариант — normalize, который в большей мере учитывает специфику браузеров и обладает достаточно неплохой типографикой. Сбросы несовместимы между собой, поэтому нельзя просто так взять и заменить один на другой — это приведёт к «развалу» шаблонов. Сложность здесь ещё и в том, что многие сторонние CSS-фреймворки уже содержат свой вариант сброса стилей и это создает некоторые проблемы их интеграции с MaxSite CMS (в типовом варианте).
Таким образом концепция D3 устраняет все эти противоречия и предлагает вебмастеру полную свободу в написании CSS, но при этом предоставляет уже готовые стили (в виде less-файлов), используемые MaxSite CMS на разном уровне (ядро, плагины, хелперы и т.д.).
Поскольку D3 — всего лишь концепция, то практическая реализация будет осуществляться на базе какого-то другого шаблона. Я за основу беру Default, поскольку его функциональности достаточно для большинства задач.
Ниже приведу последовательность своих действий, но вы можете предварительно скачать уже готовый вариант D3 967 (less-файлы), чтобы сразу видеть готовый код.
Основа — Default-шаблон
Делаем копию Default-шаблона. У меня это D3. Сразу меняем данные в info.php, чтобы не путаться. Можно сразу переключиться на этот шаблон в панели управления. Все дальнейшие действия выполняем в новом шаблоне.
Используем заготовку D3
Удаляем каталоги css и css-less — они от default и нам не нужны. В shared/blanks/d3/ будут нужные нам css и css-less. Копируем в наш шаблон.
Файл css/style.php
Этот файл выполняет less-компиляцию из css-less/style.less в css/style.css. Если style.css после обновления сайта в браузере не создаётся, то создайте файл вручную и установите права на запись (обычно 666).
Less-компиляция выполняется автоматически. Система сама следит за изменениями в исходных less-файлах и не будет выполнять компиляцию, если она не требуется. Отмечу только, что если по какой-то причине нужно выполнить компиляцию принудительно, то самый простой способ — это удалить результирующий style.css.
Less-файлы
Основной файл css-less/style.less и он выполняет роль диспетчера остальных подключаемых файлов. Код:
@MSO_IMPORT_ALL(10-mixins);
укажет less-компилятору подключить все файлы из подкаталога 10-mixins. Каталоги для less-файлов основаны на типовых рабочих этапах вёрстки сайтов. Для удобства они снабжены числовой нумерацией.
Сразу отмечу, что организация less-файлов целиком и полностью ложится на вебмастера. Это значит, что описываемый мной вариант, всего-лишь мой вариант и не более того.
Подключение файлов происходит последовательно в алфавитном порядке. Там, где важен порядок, нумеруйте имена файлов. Например сброс стилей есть смысл подключать в первую очередь. Если less-файл вообще не нужно подключать, то его имя должно начинаться с «-» или «_».
В отличие от «тематического» разделения каталогов для стилей, я использую деление по этапам вёрстки. То есть вначале подключаются сбросы, делается типографика, модульная сетка и т.д. Такой подход интересен тем, что исключает двусмысленности, когда неясно к какой группе отнести стили элемента.
Особенность такого подхода ещё в том, что не нужно заботиться о подключении less-файлов: файл просто размещается в нужном каталоге.
Подключаем сбросы браузера
Файл normalize.css размещаем как 20-core/01-normalize.less.
Уровень 10 и ниже используются только для параметизированных миксов, например хелперов. В нашем случае мы сразу же отдаем стили normalize, поэтому используем уровень выше (20).
Также я использую еще боксовую модель border-box для всех элементов. Файл 20-core/02-border-box-set.less
*,
*:before,
*:after {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Теперь обновляем сайт (F5) и видим работу normalize. Для удобства отладки можно использовать BB-код text-demo или text-normalize (код доступен в MaxSite CMS 0.861) в тексте записи и сразу выстраивать нужную типографику.
Стили MaxSite CMS
Обратите внимание, что в каталогах 30-maxsite и 40-plugins размещены типовые стили элементов MaxSite CMS. По сути это те же самые стили, что добавляются в style-all-mini.css, только теперь их можно менять на уровне шаблона. В текущем варианте шаблона эти стили позволяют сразу получить рабочие варианты плагинов, меню, форм и т.п. Стили завязаны на предопределенные css-классы и здесь они собраны в одном месте.
Модульная сетка (layout). База
Физически модульная сетка задаётся в main-файлах и также содержит предопределенные css-классы и html-разметку. Как правило менять это дело не требуется, поскольку всё прекрасно настраивается через css-стили.
Рассмотрим вариант «типового» вывода. Но перед этим определимся как будет размещаться сайт в браузере. По сути есть два основных варианта:
- сайт на всю ширину браузера (full-width)
- сайт по центру браузера (center)
Здесь важный момент в том что следует рассматривать всё содержимое сайта, а не отдельных его частей. Например может быть вариант, когда шапка будет на всю ширину браузера, а всё остальное по центру с фиксированой шириной. Такой сайт будет однозначно использовать модель full-width. Но, если всё содержимое сайта размещается в неком центральном блоке, то это уже может быть модель center.
Принципиальное отличие этих подходов в том, что при full-width все блоки задаются 100% ширины и центрируются, если необходимо, строго индивидуально (например за счёт wrap-блока). В модели center центрируется только основной родительский блок, а все остальные автоматом получают 100% от его ширины.
В main-файлах родительский блок — div.all (и его wrap-блок div.all-wrap). Таким образом, чтобы получить «center-вариант» достаточно указать:
div.all {
margin: 0 auto; // центрируем
width: 100%; // ширина
max-width: 1140px; // максимальная ширина
}
Разместим этот код в 23-layout/layout.less и убедимся, что он работает как положено.
Что касается варианта full-width, то он делается по-другому. Поскольку все блоки будут 100% ширины, то стили для них не нужны (это дефолтное поведение в CSS). Но при этом следует центрировать только нужные блоки индивидуально. В нашем примере шапка (div.header) и подвал (div.footer) размещаются на всю ширину, а основное содержимое (div.main) как раз и нужно разместить по центру. Меняем layout.less на
div.main {
margin: 0 auto;
width: 100%;
max-width: 1140px;
}
Видим, что центрируется только основное содержимое.
Какой вариант выбрать, зависит только от дизайна шаблона. Но отмечу, что вариант full-width более универсальный, поскольку каждый блок задается независимо от родителя. С другой стороны, если сайт имеет какую-то визуальную единую окантовку шапки, контента и подвала, то получится использовать только center-вариант.
И ещё одно замечание для тех, кто делает универсальные шаблоны, рассчитанные на разные компоненты. Стили компонентов могут быть завязаны на модульную сетку шаблона. В этом случае стили компонентов несколько упрощаются, но при этом теряется их универсальность. Например компонент может быть расчитан на center-сетку. Тогда для div-блока компонента не имеет смысла задавать ширину, поскольку она автоматом будет 100%. Но, если этот же компонент разместить в full-width, то скорее всего потребуется его дополнительно отцентрировать. Таким образом для компонентов лучше всего выбирать вариант именно full-width, поскольку он одинаково размещается в любом варианте модульной сетки и не потребует постоянного переписывания css-кода компонентов.
Для наших примеров мы будем использовать center-вариант, поскольку он немного проще для понимания. Но если вы планируете создавать шаблоны, то сделайте эти два варианта и используйте их как заготовки новых шаблонов.
Контент и сайдбар
В MaxSite CMS в типовом варианте используется один сайдбар справа. Но можно выбрать варианты без сайдбара и сайдбар слева. Для начала зададим стили для правого сайдбара (В настройках — «обычный»).
Основное содержимое — это div.main. Внутри блока размещаются div.content и div.sidebar1. Чтобы их разместить рядом используем обычный float, но при этом следует явно задать ширину каждого блока. Поскольку у нас используется адаптивный дизайн, то размеры лучше всего задавать в процентах. Скажем для контента 70%, для сайдбара 30%. Отступы между блоками мы будем задавать в фиксированных px — этот вариант наиболее оптимальный.
Отступы мы делаем за счёт margin и padding wrap-блоков. Полный код layout.less:
body {
background: #eee;
}
div.all {
margin: 0 auto;
width: 100%;
max-width: 1140px;
}
div.main {
background: #fff;
}
div.content {
width: 70%;
float: left;
div.content-wrap {
margin: 20px 30px 30px 30px;
}
}
div.sidebar1 {
width: 30%;
float: right;
div.sidebar1-wrap {
padding: 20px 0;
margin: 0 30px 0 0;
}
}
Я сразу задал фон браузера и основного содержимого. Поскольку мы используем модель border-box, то отступы не влияют на ширину блока.
Сайдбар слева
Очевидно, для того, чтобы разместить сайдбар слева, нужно указать другие значения float и отступы с другой стороны. Поскольку у нас уже есть готовый main-файл left-sidebar, то выбираем его в настройках шаблона:
Технически различие между обычным сайдбаром и левым только в дополнительном css-классе body.left-sidebar. То есть теперь мы должны переопределить стили div.content и div.sidebar1, если они будут потомками body.left-sidebar:
body.left-sidebar div.content { ... }
body.left-sidebar div.sidebar1 { ... }
Дописываем к layout.less:
body.left-sidebar {
div.content {
float: right;
div.content-wrap {
margin: 20px 30px 30px 30px;
}
}
div.sidebar1 {
float: left;
div.sidebar1-wrap {
padding: 20px 0;
margin: 0 0 0 30px;
}
}
}
Без сайдбара
Вариант без сайдбара (no-sidebar) строится аналогично, только в этом main-шаблоне сайдбар вообще не выводится. То есть принудительно скрывать и делать стили для div.sidebar1 уже не нужно. Все стили только для контента, который будет 100% ширины без float и немного другие отступы.
body.no-sidebar {
div.content {
width: 100%;
float: none;
div.content-wrap {
margin: 0 30px;
padding: 10px 0;
}
}
}
По этому же принципу строятся стили и других main-шаблонов: переопределяем их для специфичного класса BODY.
Скачать текущий вариант D3 967. Ещё вы можете твитнуть эту запись.
См. продолжение.