Поиск сообщества

Модуль сетки предоставляет классы для построения макетов, основанных гибкой 12-ти колоночной сетке, с автоматическими полями и с дополнительными классами для корректного сворачивания макета на устройствах с небольшими экранами. Использование Сетка должна быть сделана из элемента оболочки с классом ipsGrid, и прямыми потомками с классами соответствующего размера (указаны ниже). Например: <div class='ipsGrid'> <div class='ipsGrid_span3'>Span 3</div> <div class='ipsGrid_span3'>Span 3</div> <div class='ipsGrid_span4'>Span 4</div> <div class='ipsGrid_span2'>Span 2</div> </div> Будет визуализировано как: Span 3 Span 3 Span 4 Span 2 Классы сетки ipsGrid_span1 по ipsGrid_span12 доступны для столбцов различных размеров. Оборачивание элементов сетки Элементы в сетке будут автоматически обёрнуты в новые строки, предоставляя каждому элементу в сетке использование span одинаковой ширины и высоты, без необходимости вручную создавать новую структуру. Например: <div class='ipsGrid'> <div class='ipsGrid_span6'>Span 6</div> <div class='ipsGrid_span6'>Span 6</div> <div class='ipsGrid_span6'>Span 6</div> <div class='ipsGrid_span6'>Span 6</div> </div> Span 6 Span 6 Span 6 Span 6 Для сеток, у которых элементы могут иметь разную ширину или высоту, рассмотрите использование виджета ips.ui.grid widget. Адаптивность Чтобы адаптировать макет сетки на устройства с небольшими экранами, добавьте класс ipsGrid_collapseTablet или ipsGrid_collapsePhone к списку классов элемента оболочки, например так: <div class='ipsGrid ipsGrid_collapsePhone'> ... </div> Дополнительно data-ipsGrid <div class='ipsGrid' data-ipsGrid> ... </div> Такая запись позволяет задать одинаковую ширину дочерним ipsGrid_spanX, например, код <div class='ipsGrid' data-ipsGrid> <div class='ipsGrid_span5'></div> <div class='ipsGrid_span7'></div> </div> На самом деле будет вот такой: <div class='ipsGrid' data-ipsGrid> <div class='ipsGrid_span5'></div> <div class='ipsGrid_span5'></div> </div> То есть все дочерние ipsGrid_span будут такие же, как первый ipsGrid_span. data-ipsGrid-equalHeights='row' Выравнивает все дочерние ipsGrid_span по высоте. <div class='ipsGrid' data-ipsGrid-equalHeights='row'> <div class='ipsGrid_span5'></div> <div class='ipsGrid_span7'></div> </div> Такая запись сделает все ipsGrid_span одинаковыми по высоте, не зависимо от их содержимого.

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