Создание гибкой сетки

Представьте, что дизайнер настолько впечатлен вашей быстрой и качественной работой над заголовком, что прислал вам другой макет, и теперь вам нужно написать код для блога сайта Robot or Not (рис. 2.9).

^{Рис. 2.9. Новое задание – превращение эскиза в гибкий макет}

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

^{Рис. 2.10. Схема расположения элементов для нашего блога}

Мы можем быстро и ловко перевести его схему в базовую структуру верстки:

<div id="page">

<div class="blog section">

<h1 class="lede">Recently in <a href="#">The Bot Blog</a></h1>

<div class="main">

…

</div><!– /end.main – >

<div class="other">

…

</div><!– /end.other – >

</div><!– /end.blog.section – >

</div><!– /end #page – >

Наша разметка получилась простой и аккуратной, семантически верной и превосходно подходит для контента. Мы создали основной контейнер для всей страницы (#page), который, в свою очередь, содержит модуль. blog. Внутрь него мы поместили еще два блока: один с классом. main для главного содержания статьи, а второй с классом. other для всего остального. Звучит, конечно, не слишком поэтично, но, с другой стороны, это и не сборник стихов.

А теперь пропустим несколько этапов – как это делается на кулинарных шоу, где повар кладет в кастрюлю сырые продукты, а через минуту вынимает из духовки полностью готовую индейку. (Эта метафора прекрасно демонстрирует то, как часто я смотрю кулинарные шоу… или готовлю индейку.)

И все же предположим, что мы уже создали все CSS, связанные со шрифтами, фоновыми изображениями и всеми элементами нашего дизайна, не имеющими отношения к макету (рис. 2.11). Теперь мы можем сосредоточиться исключительно на создании «резиновой» сетки.

^{Рис. 2.11. Работа над шаблоном закончена! Если, конечно, не принимать во внимание то, как он должен выглядеть в самом конце}

Так как же нам превратить эти блоки. main и. other в нужные колонки? У нас уже есть схема контента и основная разметка, теперь давайте внимательнее взглянем на физические параметры сетки в оригинальном дизайне (рис. 2.12).

^{Рис. 2.12. Теперь наша страница основана на сетке!}

Сама сетка разделена на 12 колонок по 69 пикселей каждая, отделенных друг от друга промежутками шириной в 12 пикселей (12px). В сумме колонки и промежутки дают нам полную ширину в 960px. Сам же блог шириной 900 пикселей отцентрирован по горизонтали в пределах холста.

Вот они, детали высокого уровня. И если мы внимательно рассмотрим две колонки в блоге (рис. 2.13), то увидим, что ширина левой основной колонки (.main в нашей разметке) составляет 566 пикселей, в то время как ширина правой вспомогательной (.other) – только 331 пиксель.

^{Рис. 2.13. Давайте‑ка изучим детали и измерим ширину внутренних колонок}

Что‑то слишком много пикселей вокруг, да? И если бы пиксели нас устраивали, мы могли бы просто перенести их в CSS. (Эй! Это очень важно!)

#page {

margin: 36px auto;

width: 960px;

}

.blog {

margin: 0 auto 53px;

width: 900px;

}

.blog.main {

float: left;

width: 566px;

}

.blog.other {

float: right;

width: 331px;

}

Отлично. Мы установили ширину #page в 960 пикселей, отцентрировали в ней модуль.blog шириной 900 пикселей, задали ширину. main (566) и. other (331) и наконец‑то разместили эти колонки рядом. Результат выглядит шикарно (рис. 2.14).

^{Рис. 2.14. Мы избавились от ненужных пикселей, и наш дизайн почти готов. Или нет?}

И хотя наш макет идеально совпадает с оригинал‑макетом, он получился совсем негибким. Фиксированная ширина в 960px делает нашу страницу совершенно безразличной к изменениям размеров области просмотра. Иными словами, если ширина окна будет меньше 1024 пикселей, перед читателем появится полоса горизонтальной прокрутки (рис. 2.15).

И нас это, мягко говоря, не устраивает.

^{Рис. 2.15. Дизайн выглядит отлично, но он совсем негибкий. Давайте это исправим}