Модуль колонки, в отличие от модуля сеток, предоставляет классы, которые активируют макеты, позволяющие создавать как фиксированные, так и резиновые колонки. Этот макет часто используется для фиксированных боковых блоков с резиновыми областями контента, например. Дополнительные классы используются для сворачивания макета на устройствах с небольшим экраном.
Использование
Макет колонки состоит из элемента оболочки (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 к элементу оболочки.