User Tools

Site Tools


responsive_grid_framework

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.

<div class="container_12 clearfix" style="font-size: smaller;">

<div class="grid_4 gutter_12px collapse clearfix">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper ipsum nibh. Proin vitae erat at enim semper placerat non in metus. Praesent et sodales orci. Maecenas tristique ultricies lorem non lacinia. Mauris sem elit, scelerisque vel laoreet at, placerat a nibh. In nec nunc vel neque sollicitudin euismod. Mauris vitae lorem dui.</p>
</div>

<div class="grid_4 gutter_12px collapse clearfix">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper ipsum nibh. Proin vitae erat at enim semper placerat non in metus. Praesent et sodales orci. Maecenas tristique ultricies lorem non lacinia. Mauris sem elit, scelerisque vel laoreet at, placerat a nibh. In nec nunc vel neque sollicitudin euismod. Mauris vitae lorem dui.</p>
</div>

<div class="grid_4 gutter_12px collapse clearfix">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper ipsum nibh. Proin vitae erat at enim semper placerat non in metus. Praesent et sodales orci. Maecenas tristique ultricies lorem non lacinia. Mauris sem elit, scelerisque vel laoreet at, placerat a nibh. In nec nunc vel neque sollicitudin euismod. Mauris vitae lorem dui.</p>
</div>

</div><!-- .container_12 -->
  • 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.
  • The grid framework includes gutter classes to set space between columns: gutter_4px, gutter_6px, gutter_8px, gutter_12px, gutter_16px, gutter_24px.
  • The class “alpha” will nullify margin-left on an element; the class “omega” will nullify margin-right on an element. Use these on first and last columns, respectively, if necessary.
responsive_grid_framework.txt · Last modified: 2013/05/15 06:05 by admin