Итан Маркотт - Отзывчивый веб-дизайн

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

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

(Конечно, на самом деле мы без них страдаем.)

Рис. 2.18.Наш заголовок отчаянно нуждается в полях

Рис. 2.19.Отступы? Мы не признаем никаких отступов!

Рис. 2.20.Согласно параметрам эскиза, нам нужно задать горизонтальное поле в 48 пикселей с левой стороны заголовка

Ну что ж, давайте начнем с заголовка. В оригинальном макете между началом заголовка и левым краем контейнера есть промежуток в 48 пикселей ( рис. 2.20). Мы, конечно, могли бы задать поле ( padding-left) в пикселях или em:

.lede {

padding: 0.8em 48px;

}

Это хорошее решение. Но это фиксированное значение левого поля ( padding-left) создаст промежуток, который не будет сочетаться со всей «резиновой» сеткой. И когда гибкие колонки будут становиться у́же или шире, это поле проигнорирует остальные пропорции дизайна, и ширина его всегда окажется 48 пикселей ( 48px), независимо от того, насколько уменьшился или увеличился весь макет.

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

target ÷ context = result

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

1. Задавая гибкие отступыдля элемента, принимайте за контекст ширину контейнера элемента.

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.У заголовка и статьи одинаковые поля