Jump to content

Макет: колонки

Модуль колонки, в отличие от модуля сеток, предоставляет классы, которые активируют макеты, позволяющие создавать как фиксированные, так и резиновые колонки. Этот макет часто используется для фиксированных боковых блоков с резиновыми областями контента, например. Дополнительные классы используются для сворачивания макета на устройствах с небольшим экраном.

Использование

Макет колонки состоит из элемента оболочки (wrapper), с элементами колонок, являющихся прямыми потомками оболочки. Никакие другие классы макета не должны быть применены непосредственно к элементам столбцов.

Пример макета столбца:

<div class='ipsColumns'>
	<div class='ipsColumn ipsColumn_medium'>Фиксированный колонка</div>
	<div class='ipsColumn ipsColumn_fluid'>Резиновая колонка</div>
</div>

Этот код будет выглядеть следующим образом: (для понимая добавлены фоновые цвета и отступы):

Фиксированная колонка
Резиновая колонка

Оболочка получает класс ipsColumns (примечание: множественное число), в то время как отдельные столбцы получают ipsColumn (примечание: единственное число).

Размер колонок

Для изменения размера колонок доступно некоторое количество классов. Один из этих классов должен быть применён к каждой колонке в дополнение к основному классу ipsColumn.

  • ipsColumn_veryNarrow - 50 пикселей в ширину;
  • ipsColumn_narrow - 120 пикселей в ширину;
  • ipsColumn_medium - 200 пикселей в ширину;
  • ipsColumn_wide - 280 пикселей в ширину;
  • ipsColumn_veryWide - 360 пикселей в ширину;
  • ipsColumn_fluid - занимает оставшееся пространство; должен быть использован для всех резиновых колонок.

Расстояние между границами (border-spacing)

По умолчанию между колонками не предусмотрено никакого расстояния (смотри пример выше). Расстояние может быть включено вокруг колонок с помощью одного из трёх следующих классов, применённых для основного ipsColumns элемента:

  • ipsColumns_verticalSpacing - 15 пикселей вертикального расстояния;
  • ipsColumns_horizontalSpacing - 15 пикселей пикселей горизонтального расстояния;
  • ipsColumns_bothSpacing - 15 пикселей расстояния со всех сторон.

Расстояние может быть сокращено вдвое, указав в дополнение класс ipsColumns_halfSpacing.

<div class='ipsColumns ipsColumns_bothSpacing ipsColumns_halfSpacing'>
	<div class='ipsColumn ipsColumn_medium'>Фиксированная колонка</div>
	<div class='ipsColumn ipsColumn_fluid'>Резиновая колонка</div>
</div>
Фиксированная колонка
Резиновая колонка

Адаптивность

Для адаптивности макета на устройствах с небольшим экраном, добавьте класс ipsColumns_collapseTablet или ipsColumns_collapsePhone к элементу оболочки.