Создаем свою модульную сетку по-быстрому.

В данном уроке мы разберемся с принципами организации модульной сетки, которая является очень популярным решением при построении различных шаблонов. В ходе усвоения материала вы сможете самостоятельно построить свою собственную модульную сетку. Полученный код можно будет использовать в других проектах. Ну а примеры модульных сеток на различных сайтах представлены в одном из уроков на нашем сайте.

Готовые рабочие среды для модульных сеток. Преимущества и недостатки.

Существует достаточно большое количество уже готовых к использованию рабочих сред для организации модульных сеток (например, 960.gs). такие готовые решения помогают ускорить разработку. Не надо думать над тем, как организовать колонки. Просто подключаем уже готовую систему к проекту, а освободившееся время посвящаем продумыванию дизайна.

Однако такие готовые решения имеют и недостатки. Для начинающих разработчиков большинство из них представляют достаточно громоздкие структуры кода и простота создания шаблона часто теряется за поиском наиболее подходящего стиля для элемента HTML.

Кроме того, модульные сетки в готовых рабочих окружениях имеют свои весьма ограниченные параметры. Вам придется играть по их правилам или вся стройная структура может быть нарушена. Корректировка кода так, как вам нравится может превратиться в длительный и довольно болезненный процесс, который перечеркнет все временные преимущества.

Ну и вдобавок, обобщенные расплывчатые имена классов могут смутить других членов вашей команды, которые являются приверженцами строгой семантики кода.

Строим свою модульную сетку.

Некоторым разработчикам нравятся рабочие среды для модульных сеток, а некоторым - нет. Данный урок предназначен для тех, кто занял положение между двух противоборствующих лагерей. Вам могут нравиться те преимущества, которые вы получаете от использования модульной сетки (особенно скорость построения шаблона). Но цена, которую приходится платить за готовое решение может смущать вас.

Такие рассуждения приобретают особенную силу при построении простых страниц. Конечно, очень здорово получить помощь при построении шаблона. Но тащить всю рабочую среду на одну страничку - это похоже на высаживание единственного маленького саженца с помощью здоровенного экскаватора.

Для такого типа систем логично будет отказаться от любых рабочих сред. Но вполне удобно будет построить вместо них подобие системы для построения колонок на лету.

Целью нашего урока является создание системы, которую можно будет многократно использовать в различных проектах для построения сложных шаблонов, состоящих из нескольких колонок. Система должна быть небольшой и не приводить к использованию избыточного кода. В ней не должно быть огромного списка классов, не вписывающихся в семантику кода и почти никогда не используемых. Система должна быть гибкой и способствовать тому, чтобы использовали ее в каждом проекте, а не положили в самый дальний угол своего хранилища, чтобы забыть навсегда. Если вы вдруг решите поменять ширину экрана для своего проекта, то наша модульная сетка должна измениться практически самостоятельно и без проблем. Наконец, реализация кода должна быть простой и быстрой.

Создаем колонки в CSS

Если вы новичок в деле создания шаблонов CSS, то создание многоколоночного шаблона может показаться для вас пугающим процессом. Очевидно, что если бы он был простым, то не существовало столько различных библиотек.

Допустим, вы хотите установить четыре колонки. Первое, что придется взять в расчет - ширина. Например, наш контейнер имеет ширину 900 px. Если разделить 900 px на 4 колонки, то получим 225 px на одну колонку. Все просто! Но такие колонки будут прилипать друг к другу. Поэтому между ними должны быть отступы. Но отступы раздуют наш шаблон и вытолкнут колонки за пределы контейнера.

Нам необходимо принять во внимание ширину отступов между колонками. Допустим, первая, вторая и третья колонки имеют отступ справа равный 3 px (свойство margin-right). Тогда три отступа будут занимать 9 px, а ширина колонки будет (900 px - 9 px)/4=225.75 px.

Ой!

Такая простая задача потребовала математических расчетов. Они, конечно, далеки от высшей математики, но изменение ширины родительского контейнера потребует от нас повторного проведения вычислений

Нужно использовать другой метод, который будет приводить к изменениям в потомках при изменении родительских элементов.

Используем проценты

Если вместо пикселей использовать проценты, то наши математические расчеты станут немного проще, а сетка приобретет оттенок интеллектуальности, достаточной, чтобы изменяться вместе с шириной родительского контейнера.

Вместо того, чтобы держать все вычисления в голове можно воспользоваться инструментом для вычислений. Существует достаточно удобный онлайновый программируемый калькулятор, который вполне подходит для решения таких простых задач - Instacalc.

Instacalc позволяет создавать формулы для повторных вычислений. Для наших расчетов создан специальный калькулятор (вы можете создать свой, если пожелаете), в котором можно изменять количество колонок, величину отступа между колонками и получать рассчитанные значения для ширины колонок. Для ширины используются проценты, 100% - ширина родительского контейнера.

Если нужно провести расчеты для трех колонок, то просто меняем в первой строке калькулятора 4 на 3 и получаем результат.

Построим нашу сетку

Достаточно теории. Ничто не поможет лучше понять материал, чем практическое решение насущного вопроса.

Допустим мы хотим расположить наш текст на странице в четыре колонки Код HTML будет достаточно простым. Нужно поместить содержание каждой колонки в элемент div, которому будет присваиваться определенный класс. Для последней колонки используется также класс last, который помогает отключить ненужные отступы.

<div class="wrapper">
 
	<div class="featuresColumn">
		<p>Lorem ipsum dolor sit amet...</p>
	</div>
 
	<div class="featuresColumn">
		<p>Lorem ipsum dolor sit amet...</p>
	</div>
    
	<div class="featuresColumn">
		<p>Lorem ipsum dolor sit amet...</p>
	</div>
 
	<div class="featuresColumn last">
		<p>Lorem ipsum dolor sit amet...</p>
	</div>
    
</div>

Теперь перейдем к CSS. Сначала установим ширину контейнера и свойство overflow: hidden. Затем зададим стиль класса с помощью результатов проделанных вычислений. Они хранятся в калькуляторе.

.wrapper {overflow: hidden; width: 600px;}
.featuresColumn {float: left; width: 22%; margin-right: 4%;}
.last {margin-right: 0;}

Вместо большой библиотеки у нас задано несколько строчек кода, которые также создают четыре колонки текста.

Можно менять ширину контейнера. Весь шаблон перестроится автоматически. Но для настоящего резинового шаблона нужно установить и ширину контейнера в процентах. Тогда при изменении ширины окна браузера все будет также пропорционально меняться.

.wrapper {overflow: hidden; width: 90%;}
.featuresColumn {float: left; width: 22%; margin-right: 4%;}
.last {margin-right: 0;}

Комбинируем колонки

А что если нам нужно будет две или несколько колонок в одну широкую? Нужно произвести расчеты и создать соответствующие классы, которые потом будут применяться к элементам div.

В калькуляторе есть формулы для расчета двух и трех объединенных колонок.

HTML код будет очень похожим на предыдущий. Но содержание последней колонки заключено в элемент с div классом широкой колонки.

<div class="wrapper">
 
    <div class="featuresColumn">
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
 
    <div class="featuresColumn">
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
    
    <div class="featuresColumnWide last">
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
    
</div>

В коде CSS надо добавить класс для широкой колонки:

.wrapper {overflow: hidden; width:700px; margin-bottom: 3%; }
.featuresColumn {float: left; width: 22%; margin-right: 4%;}
.featuresColumnWide {float: left; width: 48%; margin-right: 4%;}
.last {margin-right: 0}

Наш код в браузере будет выглядеть следующим образом:

Теперь можно комбинировать различные варианты размещения содержания, чтобы создавать интересные шаблоны.

Заключение

В результате у нас получилась модульная сетка. которая автоматически подстраивается под ширину контейнера. Код очень компактный и соответствует требованиям семантики.

Так можно строить и более сложные модульные сетки. Причем их создание не требует значительных усилий со стороны разработчика.

• Комментарии