Когда я понял, как устанавливать размеры текста в единицах

, на меня снизошло прозрение: ведь мы можем применять тот же принцип пропорционального мышления и в отношении самих макетов. Другими словами, все элементы нашей сетки – строки, колонки и накладываемые на них модули – могут быть выражены как пропорция содержащихся в них элементов, а не в неизменных, жестких пикселях.

И в этом нам снова поможет наша формула

. Идем дальше.

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

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

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

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

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

Наша разметка получилась простой и аккуратной, семантически верной и превосходно подходит для контента. Мы создали основной контейнер для всей страницы (

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

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

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

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

Так как же нам превратить эти блоки

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

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

Сама сетка разделена на 12 колонок по 69 пикселей каждая, отделенных друг от друга промежутками шириной в 12 пикселей (

). В сумме колонки и промежутки дают нам полную ширину в . Сам же блог шириной 900 пикселей отцентрирован по горизонтали в пределах холста.

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

в нашей разметке) составляет 566 пикселей, в то время как ширина правой вспомогательной () – только 331 пиксель.

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

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