Внимание! Данная запись отмечена как устаревшая и/или потерявшая актуальность! Возможно автор уже передумал и теперь придерживается другой точки зрения, нежели изложенная в тексте ниже.

Рассуждения о модульной сетке в web-дизайне

Дневник / Вёрстка сайтов: CSS, HTML, LESSПросмотров: 18021 (208)

Статью написал скорее из желания сохранить свои идеи для дальнейшего развития. Речь идет о верстке по модульной сетке: теория, практика. Текст расчитан на подготовленного читателя.

Предыдущие рассуждения: «Верстка с помощью Grid» и «Концепция: верстка HTML-страниц ячейками» потихонечку претерпевают изменения и теперь речь пойдет об основах, на которых может базироваться html-верстка.

Вообще стоит задуматься с чего это вдруг сыр-бор вокруг использования модульной сетки в веб-дизайне? Если так подумать, то как таковой «сетки» в HTML нет и вряд ли будет. Всё, что сейчас можно предложить, - это лишь имитация, слабая пародия на настоящую модульную сетку. Так стоит ли вообще об этом думать? Не проще ли делать каждый проект индивидуально, или как вариант, по отработанным шаблонам?

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

Например уже есть сверстанный сайт. Если нужно что-то изменить, то это затрагивает сразу несколько частей: html-структуру и css-стили. Сложность еще заключается в том, что html-структура по сути и есть модульная сетка и привязка вложенных элементов со своими css-правилами может быть сделана к ячейкам модульной сетки. Меняя сетку, мы меняем и css-правила всех внутренних частей.

Задача, собственно и состоит в том, чтобы каким-то способом отделить модульную сетку от её внутренних блоков.

Тут еще важный момент. Модульная сетка, ту, о которой постоянно рассказывают на сайтах и в книжках; ту, которая позаимствована из издательских программ, ни к черту не годится для веб-дизайна. В веб-дизайне доступны только строки и колонки. Причем такие которые не имеют между собой отступов и границ. Грубо говоря - это просто ячейки.

Почему так? На веб-странице все элементы прямоугольные. Таков уж HTML. Глядя на отступ визуально никто не сможет сказать: внутрений ли это отступ внешнего элемента (padding) или внешний отступ внутреннего элемента (margin). В обычном дизайне такой проблемы просто не возникает - отступ это отступ, например расстояние между колонками. А в веб-дизайне, из-за особой блочной модели, внутренний отступ приплюсовывается к установленной ширине блока. Любой нормальный человек (и IE, кстати) будет считать ширину блока по его границе (border), но стандарт HTML имеет на сей счет другое мнение.

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

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

Вот так:

Модульная сетка не имеет отступов и границ

Теперь, когда стала ясна основа модульной сетки, стоит подумать о том, как её задать средствами HTML.

Пожалуй главное правило - это то, что модульная сетка веб-страницы будет описывать только расположение своих ячеек/блоков. То есть, нам нельзя задавать в модульной сетке шрифты, цвета и прочее оформление. Модульная сетка имеет ячейки у которых задаются только размеры и положение. Таким образом решается раз и навсегда вопросы с «переверсткой» вложенных блоков: они являются как-бы наполнителями ячеек и не зависят от других элементов.

Тут, я бы хотел кинуть камень в огород различных css-фреймворков, в которых вроде как есть некая сетка. Ну например, известная многим верстальщикам 960 Grid System. На самом деле это просто некий предопределенный размер колонок, который даже с натяжкой нельзя назвать модульной сеткой. В таких фреймворках невозможно решить нестандартные задачи с позиционированием. Обязательно придется придумывать какие-то свои стили, и тогда непонятно, зачем вообще использовать css-фреймворк.

Технически позиционирование выполняется элементарно. Для этого задаются ширины блоков (width), они делаются плавающими (float) и при необходимости - отступы (margin, например для центрирования по странице). Если же нужно визуально контролировать расположение блоков, то для этих целей можно использовать фоновую картинку для body. Например в вышеприведенной картинке используются квадраты 10x10px. Я её часто использую для своих проектов.

Расположив ячейки/блоки модульной сетки, можно приступать непосредственно к оформлению каждого вложенного блока. Поскольку у нас в модульной сетке нулевые отсупы и нет border, то для внутренних блоков снимается проблема как их разместить.

<div id="header">
    <div class="header-wrap">
        <div>
            <h1>Мой сайт</h1>
            <h2><span>Описание в шапке</span></h2>
        </div>
    
        <div id="header-menu">меню</div>
  
    </div><!-- div class="header-wrap" -->
</div><!-- div id="header" -->

В данном примере div#header - ячейка модульной сетки. А div.header-wrap - внутрений блок в котором и осуществляется вывод. При создании сетки удобно сразу делать блок «wrap» и тем самым сразу снять вопросы «позиционирования» внутреннего блока при любых изменениях родительской ячейки.

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

Для описания модульной сетки я использую свой скрипт grid.php. В предыдущих статьях я приводил одну из первых версий. Поскольку особого интереса она не вызвала, то не вижу смысла публиковать новую. В текущем варианте модульная сетка строится с помощью функций, в которых задаются нужные параметры. Например по какому алгоритму генерировать html-код: div'ы или table. Можно задать class, id, внутренний wrap и т.д. Тут же задается и содержимое блока: текст, файл, php-функция.

Впрочем, это не так и принципиально. HTML можно и вручную создать, главное это четко указать div-блоки, которые и будут являться ячейками.

После этого я задаю структуру в struct.css, в котором выполняется позиционирование блоков. Причем, поскольку html-структура (для меня - сделаная с помощью grid.php) во многих случаях может быть одной, то можно сделать несколько struct.css, которые будут по разному позиционировать html-блоки. Что-то вроде Zen Garden.

Вся дальнейшая кастомизация осуществляется в style.css и прочих css-файлах. Например у меня это меню, стили для печати и т.п.

Общая схема получается примерно такой.

Тут, собственно есть еще один важный момент - свободное именование блоков и стилей. Если я использую свои наработанные стили, то я их и дальше использую. Если кто-то использует css-фреймворк, то он использует его именование. Это очень удобно. А вот, что касается «внутренних» стилей (style.css), то для MaxSite CMS они практически все предопределены: единые type-файлы, плагины, виджеты предполагают использование сгенерированных системой html и css-классов.

Комментариев: 4 RSS

1Yurbasik04-03-2010 14:15

Все так классно расписано, осталось это все как следует понять и применить на деле..

2Snegurka25-03-2010 06:20

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

3RodgerFox24-05-2010 10:45

А я только так и пишу, очень удобно, особенно можно посомтреть как делают фреймворки свою работу, пару фишичек можно себе взять)

4webstroymaster02-07-2010 14:31

Интересно. Можно попробовать, реализовать подобные идеи т.е. всевозможные методы (так сказать быстрой верстки) в видеоформате, где наглядно будет видно какой из существующих методов, реально гибче, быстрей в разработке и освоении.

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

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

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

О сайте

Здесь вы получите самую полную информацию о создании сайтов на MaxSite CMS.

Рейтинг@Mail.ru