User Tools

Site Tools


responsive_grid_framework

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

responsive_grid_framework [2013/05/03 07:10]
admin
responsive_grid_framework [2013/05/15 06:05] (current)
admin
Line 10: Line 10:
 <div class="container_12 clearfix" style="font-size: smaller;"> <div class="container_12 clearfix" style="font-size: smaller;">
  
-<div class="grid_4 gutter_12px typographic-content clearfix">+<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> <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>
  
-<div class="grid_4 gutter_12px typographic-content clearfix">+<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> <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>
  
-<div class="grid_4 gutter_12px typographic-content clearfix">+<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> <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>
Line 30: Line 30:
   * 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.   * 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 ''%%clearfix%%'' to all containers.
-  * Assign the class ''%%typographic-content%%'' to containers to nullify the margin-top of the first element therein. It helps to keep things lined up evenly.+  * 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.   * 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 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.   * 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