User Tools

Site Tools

Responsive Grid Framework

The CE3 framework includes a built-in responsive grid framework. Using this framework – which requires some HTML and CSS coding – you can achieve column layouts within the block or via PHPlugins. For example:

Being an advanced feature, I'll not bother documenting in any great detail. Instead, I'll post some example code and some guidelines. It should be easy enough to figure out from there.

Being a /responsive/ grid, columns will automatically stack on small displays.

The grid framework supports either 12-column or 16-column layouts. Assign your container a class of either container_12 or container_16 to get started.

Columns should be assigned a “grid” class to determine how many columns in width they should be. A container with the class grid_4 will be four columns wide.

Columns may be positioned using “push” and “pull” classes. For example, push_3 or pull_3 would push or pull the column by three column-widths, respectively.

Assign the class clearfix to all containers.

Assign the class collapse to containers to nullify the margin-top of the first element therein, and margin-bottom of the last element therein. It helps to keep things lined up evenly. Use the classes collapse_top or collapse_bottom to nullify only the top or bottom margin, respectively.

Markdown should be nullified within any HTML element, so you can't use it here.