Современная, быстрая и удобная система управления сайтом

Пример создания шаблона по принципу D3 (начало)

Архив записейКомментарии: 0Просмотров: 4708

Принципиальное отличие шаблона аля-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 901 (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 901. Ещё вы можете твитнуть эту запись.

См. продолжение.

Оставьте свой комментарий!

Комментарий будет опубликован после проверки

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)