-
Notifications
You must be signed in to change notification settings - Fork 14
Grid Strategy
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 to create a comprehensive Grid Strategy for WebBlocks. Refs Ticket #103: https://github.com/ucla/WebBlocks/issues/103#issuecomment-9044802
- 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
- [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]
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
.container = parent width setting element for page .row = float clearing element
- Naming scheme (some use spanX, some col, columns)
- 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