Description
The column module, unlike the grids module, provides classes that enable layouts comprising both fixed and fluid columns to be easily created. This is a layout often used for fixed sidebars with fluid content areas, for example. Additional classes are available to collapse the layout on smaller devices.
Usage
A column layout consists of a wrapper element, with the column elements as direct descendants of the wrapper. No other layout classes should be applied directly to the column elements.
An example of a column layout:
<div class='ipsColumns'> <div class='ipsColumn ipsColumn_medium'>Fixed column</div> <div class='ipsColumn ipsColumn_fluid'>Fluid column</div> </div>
This would render as follows (background colors and padding added for clarity):
The wrapper receives the classname ipsColumns (note: plural), while individual columns receive the classname ipsColumn (note: singular).
Column Sizing
A number of different classnames are available to change the column sizing. One of these classes should be applied to each column in addition to the base ipsColumn classname.
- ipsColumn_veryNarrow - 50 pixels wide
- ipsColumn_narrow - 120 pixels wide
- ipsColumn_medium - 200 pixels wide
- ipsColumn_wide - 280 pixels wide
- ipsColumn_veryWide - 360 pixels wide
- ipsColumn_fluid - Takes up remaining space; should be used on all fluid columns
Border Spacing
By default, no spacing is provided between columns (see example above). Spacing can be included around columns by using one of the three following classnames on the root ipsColumns element:
- ipsColumns_verticalSpacing - 15 pixels vertical spacing
- ipsColumns_horizontalSpacing - 15 pixels horizontal spacing
- ipsColumns_bothSpacing - 15 pixels spacing on all sides
The spacing can be halved by also including the ipsColumns_halfSpacing classname.
<div class='ipsColumns ipsColumns_bothSpacing ipsColumns_halfSpacing'> <div class='ipsColumn ipsColumn_medium'>Fixed column</div> <div class='ipsColumn ipsColumn_fluid'>Fluid column</div> </div>
Responsiveness
To cause the layout to collapse on smaller devices, add the classnames ipsColumns_collapseTablet or ipsColumns_collapsePhone to the wrapper element. Columns will collapse into source-order, one after the other.
Report Guide