Grid Strategy

Definition

The semantics of our grid strategy have been defined as follows:

• .container width controlling element (recommended but optional)
• .row float clearing element that contains a set of panels
• .panel-X element contained within a .row that is a certain proportion of the width of the row

Because Bootstrap already uses .row in a different context, the Bootstrap adapter defines .row as .row:not(.bootstrap), meaning that if the .boostrap class is attached to .row, then it will use the fixed width context defined by Bootstrap instead. The same is true for .container, which is defined as .container:not(.bootstrap) so that one may attach the .bootstrap class to .container to get the original Bootstrap variant rather than the fluid width variety provided by WebBlocks.

Implementation discussion may be found here: https://github.com/ucla/WebBlocks/issues/113

This is based on the problem rational and proposal discussion below.

Discussion

Discussion to create a comprehensive Grid Strategy for WebBlocks. Refs Ticket #103: https://github.com/ucla/WebBlocks/issues/103#issuecomment-9044802

Grid Frameworks to Consult:

• Notes Taken 10/13 GridPak http://gridpak.com/
• Notes Taken 10/13 Semantic Grid System http://semantic.gs/
• Not a framework but a Tool -- Gridset http://www.gridsetapp.com/
• Notes Taken 10/13 -- Golden Grid System http://goldengridsystem.com/
• Simple Grid System http://simplegrid.info/
• Foldy960 https://github.com/davatron5000/Foldy960 (responsive extension of 960.gs)
• Less Framework http://lessframework.com/
• Notes Taken 10/13 -- Columnal http://www.columnal.com/
• Notes Taken 10/13 -- Skeleton http://www.getskeleton.com/
• Notes Taken 10/13 -- Bootstrap http://twitter.github.com/bootstrap/
• Notes Taken 10/13 -- Foundation http://foundation.zurb.com/
• HTML5 Boilerplate http://html5boilerplate.com
• Recent Update on Grids Roundup

Grid Frameworks Patterns:

• [Research Notes on Foundation Patterns]
• [Research Notes on Bootstrap Patterns]
• [Research Notes on Skeleton Patterns]
• [Research Notes on Columnal Patterns -- To finish posting]
• [Research Notes Golden Grid system Patterns]
• [Research Notes on Semantic Grid System]
• [GridPack Patterns -- To post]

Technical Models/Issues with Responsive Grids:

Simple Overview Article of the Various Points and a tutorial showing the concepts

• Breakpoints
• Sub Pixel Rounding, a Visual Example
• Nested Floats: Clearfixing, Gutters/Margins (see subpixel issues)
• Float and Content Order
• Box Model & Box Sizing
• Decoupling Layout from Content: 2 Approaches-- Abstracted Layout Classes, and Preprocessor Layout Variables
• Preprocessor Variable Libraries: Susy, Semantic Grid System

Naming Conventions Agreed Upon from 10/01/2012 Meeting:

.container = parent width setting element for page .row = float clearing element

Next Steps: Everyone Submit Proposals for dealing with the nested unit element:

1. Naming scheme (some use spanX, some col, columns)
2. Incrementing logic for children elements (numerical, spelled number, separate class ?)

Alice Grid Strategy Proposal Based on Above Research -- in short I'm for the following:

• .segmentX, where X=variable (1-12)
• small set of core layout (adaptor) classes supported; advance users can use their own fav grid framework.
• 2 prong strategy for novice vs. advanced. Use a regular patterned layout(markup) convention (wrapper classes like .row and .container for beginners). For advanced let them clearfix on their own and/or give them SASS vars to use.
• Decouple layout/grid from content/entities
• see extended notes for the whys