Бесплатная CMS для вашего сайта Разумная альтернатива WordPress

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

20-12-2013Reading time ~ 8 min.Roadmap 5048

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

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

Related Posts
Leave a comment!