Создание Vertical Rhythm в Compass

Приступаем к интересной теме - вертикальному ритму “Vertical Rhythm” в веб-дизайне и способе его создания с помощью библиотеки Compass.

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

Ну, во-первых, в Интернете на момент написания статьи не так уж и много материалов по этой тематике; в немногочисленных материалах сущность вопроса преподносится как нечто очень сложное.

На самом деле это не так. Все мы когда-то учились в школе и наверное, помним тетрадки в линейку по русскому языку, в которых строгие учительницы заставляли нас писать:

Так вот - сами не зная об этом, мы уже тогда использовали вертикальный ритм (Vertical Rhythm) на практике! Слово вертикальный ритм говорит само за себя - текст или контент на странице должен размещаться в определенном ритме, по определенному правилу; а не хаотично.

В данном случае все строки на такой странице должны размещаться по нарисованным линейкам - это и есть суть пресловутого Vertical Rhythm.

В типографике вертикальный ритм применяется с незапамятных времен; и только с недавних пор о вертикальном ритме заговорили применительно к веб-дизайну. Использование вертикального ритма в веб-дизайне подразумевает применение CSS-свойств, управляющих вертикальными параметрами элементов страницы: размером шрифта (

1

font-size

1

line-height

1

padding

1

margin

1

border

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

В библиотеке Compass имеется модуль “Vertical Rhythm”, задача которого - максимально упростить создание и настройку вертикального ритма в проекте. Модуль Vertical Rhythm в Compass - это набор функций и миксинов, облегчающих вычисление высоты строк, вертикального

1

padding

1

margin

1

border

Вычисления основаны на базовой высоте строки

1

line-height

1

font-size

Первое, что необходимо сделать - это установить (если еще не установлена) Compass версии

1

1.0.0 alpha 19

Установка Compass этой версии под Windows 7 на момент написания статьи является достаточно непростой задачей, поэтому рекомендую обратиться к статье “Медиа-запросы Breakpoint в Sass”.

Создаем и настраиваем проект в Compass

Создаем новый проект в командной строке с помощью Compass:

compass create vertical_rhythm_example --bare

Ключ

1

--bare

1

print.scss

1

ie.scss

Производим неодходимые настройки в файле

1

config.rb

1

sass/style.scss

1

css/style.css

1

index.html

HTML-файл наполним структурой вида:

<div class="wrapper">
  <h1>header 1</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, architecto laborum quas iste nam maxime tempora temporibus inventore? Rerum, obcaecati porro officiis temporibus assumenda dicta odit ullam dolore vero laborum!</p>
  <h2>header 2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, accusantium, amet, molestiae quas dolore deleniti non aut quis inventore repudiandae nostrum porro alias dolor pariatur rem sequi ea consequatur perferendis.</p>
  <h3>header 3</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, iusto, iure, quia ipsum dolore ea exercitationem porro et nostrum nam cumque hic possimus dolorem deleniti distinctio incidunt magnam earum quis.</p>
  <h4>header 4</h4>
  <img src="http://placehold.it/700x300" />
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, omnis, ut, quis, nesciunt voluptatum rem dolor dolores amet vel sit error laboriosam quasi accusamus magnam neque sunt exercitationem molestias! Aperiam!</p>
  <h5>header 5</h5>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, libero illum numquam sed quas. Assumenda, porro, suscipit, veniam, cum deleniti illo magnam harum ab earum obcaecati odit ad quo laudantium?</p>
  <img src="http://placehold.it/500x200" />
  <h6>header 6</h6>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, consectetur quod saepe unde corrupti tenetur minus nesciunt obcaecati tempore ut facere iusto pariatur corporis itaque eius? Doloribus, quaerat modi nihil.</p>
</div>

То есть, для чистоты эксперимента, создаем заголовки с первого по шестой уровень, несколько параграфов и два изображения. В процессе работы с модулем вертикального ритма будем пользоваться официальной документацией по адресу - Vertical Rhythm.

В файле

1

style.scss

@import "compass/reset";
@import "compass/typography/vertical_rhythm";

Сделаем небольшую стилизацию для блока

1

.wrapper

.wrapper{
  max-width: 960px;
  margin: 0 auto;
  background-color: hsla(240,100%,50%,.2);
}

h1,h2,h3,h4,h5,h6{
  font-weight: 700;
  text-transform: capitalize;
  background-color: hsla(120,100%,50%,.2);
}

p{
  background-color: hsla(0,100%,50%,.1);
}

img{
  max-width: 100%;
  margin: auto;
  display: block;
}

Основные переменные в Vertical Rhythm

В модуле “Vertical Rhythm” библиотеки Compass имеется множество переменных, но среди них есть только две основные, которые необходимы для расчетов внутри этого модуля:

$base-font-size: 22px;    // базовый размер шрифта
$base-line-height: 33px;  // базовое межстрочное расстояние

Значение переменной

1

$base-line-height

1

$base-font-size * 1.5

1

22px * 1.5 = 33px

1

$base-font-size

1

22px

Помимо этого, есть еще две дополнительные переменные:

$rhythm-unit: "rem";         // базовая единица измерения (по умолчанию em)
$rem-with-px-fallback: true; // откат к единицам измерения px в браузерах, которые не понимают единицу rem

Включаем Vertical Rhythm

После ввода четырех вышеперечисленных переменных осталось только инициализировать модуль Vertical Rhythm” с помощью миксина:

@include establish-baseline;

Миксин

1

establish-baseline

1

font-size

1

line-height

1

<html>

Допустим, в своем проекте мы установили размер шрифта

1

22px

1

33px

html {
  font-size: 137.5%;
  line-height: 1.5em;
}

Размер шрифта

1

16px

1

16px = 100%

1

22px = 137.5%

Относительная величина

1

line-height

1

font-size

1

22px * 1.5 = 33px

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

Чтобы еще более наглядно представить картину структурированного контента, воспользуемся миксином:

body{
  @include debug-vertical-alignment;
}

Обрисовались строки, ну прямо как на школьном тетрадном листке! Хорошо видно, как все строки текста и изображение выстроились четко по линеечкам. Думаю, если читатель дошел до этого места, то ему стала понятна суть и принцип вертикального ритма без каких-либо объяснений!

Margin и padding в Vertical Rhythm

Но строки, заголовки и изображения все равно тесно прижаты друг к другу. В модуле Vertical Rhythm имеются свои собственные инструменты для создания отступов у элементов контента, в основе которых лежит опять таки базовый размер шрифта (вот он - тот самый ритм!):

$base-font-size * 1

Для элемента страницы можно задать

1

margin-top

1

padding-top

1

margin-bottom

1

padding-bottom

p{
  background-color: hsla(0,100%,50%,.1);

  @include margin-trailer;  // margin-bottom
  @include margin-leader;   // margin-top

  @include padding-trailer; // padding-bottom
  @include padding-leader;  // padding-top
}

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

p{
  background-color: hsla(0,100%,50%,.1);

  @include trailer($lines: 2, $property: margin); // margin-bottom на 2 строки
  @include trailer($lines: 2, $property: padding); // padding-bottom на 2 строки

  @include leader($lines: 2, $property: margin); // margin-top на 2 строки
  @include leader($lines:3, $property: padding); // padding-top на 3 строки
}

Одновременно задать

1

margin-top + margin-bottom

1

padding-top + padding-bottom

p{
  background-color: hsla(0,100%,50%,.1);

  @include rhythm-margins; // margin-top + margin-bottom
  @include rhythm-padding; // padding-top + padding-bottom
}

Миксин

1

@include rhythm

1

margin

1

padding

Создание границ в Vertical Rhythm

Отступы можно совмещать с границами

1

border

1

padding

1

border

Толщина границы и ее стиль управляются через переменные

1

$default-rhythm-border-width

1

$default-rhythm-border-style

1

1px

1

solid

p{
  background-color: hsla(0,100%,50%,.1);

  @include leading-border; // padding-top + border-top
  @include trailing-border; // padding-bottom + border-bottom
  @include horizontal-borders; // padding-top + border-top и padding-bottom + border-bottom
  @include h-borders; // alias для horizontal-borders
}

Одновременно задать

1

padding

1

border

p{
  background-color: hsla(0,100%,50%,.1);
  @include rhythm-borders; // padding + border
}

Указать границу и отступ для какой-то одной стороны можно с помощью миксина:

p{
  background-color: hsla(0,100%,50%,.1);
  @include apply-side-rhythm-border($side: left);
}

Произвольный размер шрифта в Vertical Rhythm

Можно произвольно поменять размер шрифта любого элемента страницы, но делать это также нужно, исходя из ритма - с помощью соответствующего миксина

1

adjust-fonts-size-to

Давайте изменим размер заголовков таким образом, чтобы они отличались от основного текста (и были действительно заголовками):

h1{
  @include adjust-font-size-to(2.074rem);
}

h2{
  @include adjust-font-size-to(1.728rem);
}

h3{
  @include adjust-font-size-to(1.44rem);
}

h4{
  @include adjust-font-size-to(1.2rem);
}

h5{
  @include adjust-font-size-to(1rem);
}

h6{
  @include adjust-font-size-to(0.833rem);
}

Или же, допустим, нужно установить для заголовка первого уровня

1

h1

1

42px

h1{
  @include adjust-font-size-to(42px);
}

Первым делом, этот миксин делает размер шрифта элемента

1

h1

1

html

1

22px

1

h1

1

42 / 22 = 1.90909

font-size: 1.90909rem;

Вторым делом миксин заново вычисляет высоту строки для нашего заголовка

1

h1

1.90909rem * 1.5 = 3rem (округленно)
22 * 3rem = 66px

Конечный результат показан ниже:

h1 {
  font-size: 42px;
  font-size: 1.90909rem;
  line-height: 66px;
  line-height: 3rem;
}

Отлично, правда? Вся прелесть в том, что показанные выше расчеты можно с легкостью забыть - модуль “Vertical Rhythm” каждый раз будет вычислять размер шрифта и высоту строки сам, не “напрягая” нас.

Помимо указания размера шрифта в качестве аргумента, миксину

1

adjust-fonts-size-to

h3{
  @include adjust-font-size-to(1.44rem,1);
}

Если вы попробуете у себя, то сразу увидите результат.

Выравнивание изображений в Vertical Rhythm

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

А именно - первое изображение своим верхним краем совпадает с линией ритма. А вот нижняя граница не попадает на линию. Из-за этого весь дальнейший контент также смещается и вертикальный ритм нарушается.

Происходит это потому, что изображение мы сделали блочным элементом и присвоили ему фиксированные размеры в пикселях в HTML-коде:

<img src="http://placehold.it/700x350" />
...
<img src="http://placehold.it/500x250" />
...

Исправить ситуацию можно с помощью плагина “Keep The Rhythm” под jQuery - Keep The Rhythm. Вдаваться в подробности работы этого плагина я не буду, а сразу покажу, как он подключается и результат его работы.

Получаем с GitHub библиотеку jQuery и сам плагин к ней:

jquery-1.9.1.min.js
jquery.keeptherhythm.js

Подключаем к HTML-странице в ее конце. И затем создаем небольшой скрипт. Смотрим результат:

Все получилось! Однако, стоит заметить, что приведенный выше пример является упрощенным. Достаточно изменить масштаб страницы в окне браузера, и вертикальный ритм поломается.

Поэтому плагин “Keep The Rhythm” необходимо применять в связке с медиа-запросами для правильной его работы. По крайней мере, если возникнет вопрос по работе этого плагина, то документация на официальной странице всегда под рукой.

Заключение

Основой для написания этой статьи послужили два материала (видео и статья):

• Compass (Sass) — вертикальный ритм (vertical rhythm)
• Vertical Rhythm with Compass