2. Задавая гибкое поле для элемента, принимайте за контекст
Поскольку мы хотим определить поле заголовка, в качестве контекста мы возьмем ширину самого элемента .lede. Ширина заголовка нам неизвестна, поэтому мы берем ширину модуля блога, то есть 900 пикселей. Снова открываем калькулятор и получаем:
48 / 900 = 0,0533333333
и переводим результат в:
.lede {
padding: 0.8em 5.33333333 %; /* 48px / 900px */
}
Наши 48 пикселей поля теперь выражены в относительных единицах измерения, как доля ширины заголовка.
С этим расправились, идем дальше. Давайте введем понятие пробела в наш контент. Но сначала вспомним, что каждая колонка фактически содержит меньший модуль: левая колонка .blog содержит модуль. article, а правая .other – список .recent-entries (рис. 2.21).
Рис. 2.21. Взглянув на колонки, мы можем достаточно быстро определить их ширину
Начнем с последнего. К счастью для нас, тут и делать нечего. Мы знаем ширину элемента (231px) и ширину содержащей ее колонки (331px), поэтому можем просто отцентрировать модуль по горизонтали:
.recent-entries {
margin: 0 auto;
width: 69.7885196 %; /* 231px / 331px */
}
Со статьей (модуль .article) мы можем поступить так же. Но давайте-ка попробуем кое-что другое.
Помните поле шириной 48px, которое мы задали в заголовке? Наша статья находится в той же колонке (рис. 2.22), поэтому вместо того, чтобы размещать ее по центру контейнера, создадим еще один пропорциональный промежуток.
Рис. 2.22. У заголовка и статьи одинаковые поля
Целевое значение – 48px. А поскольку мы работаем с относительным полем, в качестве контекста берем ширину самой статьи. Но, опять же, мы не знаем точной ширины модуля .article, поэтому используем ширину блока .blog, то есть 566px:
.article {
padding: 40px 8.48056537 %; /* 48px / 566px */
}
Вуаля! Гибкая сетка закончена (рис. 2.23).
Рис. 2.23. Гибкие поля и отступы! Ура!
Давайте обратим внимание на заголовок даты записи в блоге.
Пока он занимает всю ширину записи, а так быть не должно. К этому времени мы уже много чему научились, поэтому особых затруднений не возникнет. На первоначальном дизайне мы видим, что дата расположена слева и занимает одну колонку шириной 69px (вернемся к рис. 2.12). А поскольку дата входит в блок статьи шириной 474px, мы уже знаем и контекст.
Вооружившись этой информацией, напишем небольшой CSS:
.date {
float: left;
width: 14.556962 %; /* 69px / 474px */
}
Пока все хорошо и гибко. Но мы упустили один ключевой элемент: на данный момент дата расположена вплотную к левому краю статьи и окружена заголовком и текстом (рис. 2.24). А нам нужно вынести ее за пределы контейнера к левому краю целого модуля.
Рис. 2.24. Прогнило что-то в датском королевстве. (Под «датским королевством» я имею в виду дату записи, а когда я говорю «прогнило», то это значит, что она находится слишком близко к тексту.)
Мы сможем сделать это при помощи отрицательных отступов, причем нам даже не придется менять принцип действий. Как и прежде, все, что нам нужно, – это определить ширину отступа по отношению к ширине контейнера элемента.
На первоначальном дизайне расстояние от левого края даты до левого края статьи составляет 81 пиксель (рис. 2.25). Если бы это был дизайн с фиксированной шириной, эта величина стала бы нашим отрицательным отступом:
.date {
float: left;
margin-left: -81px;
width: 69 px;
}
Рис. 2.25. Необходимо сдвинуть дату влево на 81px (или соответствующий относительный эквивалент)
Но мы ведь пока еще ни разу не использовали пиксели, так давайте не будем и начинать. И хотя отступ должен быть отрицательным, это не меняет нашу формулу. Мы все еще хотим выразить целевое значение, то есть отступ шириной в 81px, как процентное отношение от ширины содержащего дату элемента в 474px. Переставьте запятую, поставьте минус перед числом – и вы получите пропорциональное отрицательное поле:
81 ÷ 474 =.170886076
