Grid System

[loganfranken]

Web Blocks will need a grid system.

The discussion was started in #103

Wiki article here:
https://github.com/ucla/WebBlocks/wiki/Grid-Strategy

[alicetseng]

Just posted proposal after reviewing 7 Grid Systems. Proposal and Notes located here: https://github.com/ucla/WebBlocks/wiki/Grid-Strategy

[ebollens]

@atsengucla took some time to read through all of this. My thought is to slate this as a major item for tomorrow's meeting.

[ebollens]

I have committed a version of the fluid grid.

A few mechanics to consider...

There are three control variables:

$structure-panels:              12 !default;
$structure-panel-gutter:       2.5641% !default;
$structure-panel-width:        (100% - ($structure-panels - 1) * $structure-panels-gutter) / $structure_panels;

Generally, I would recommend only modifying $structure-panels and $structure-panel-gutter, as the last one is derived as a division of the panels being considered while excluding the sum total of the gutter widths.

Based on this, we then get the following:

• .row a containing element for a horizontal portion of the grid
• .panel-X is contained by .row, where X specifies a proportion up to the $structure-panels value, which is 100% of the total width - similar to spanX in Bootstrap native

My implementation uses the Bootstrap mixin grid-fluid-span() because it handles the annoying math. However, if I break this out, we should be able to move this into the core adapter instead - which is something I'll probably do tomorrow (so reopening this ticket).

Another point is that width controls that are a percentage of the screen are defined with the media query min-width: $breakpoint-small. Below this value, they all default to 100% instead, meaning that they appear inline.

For continuity in Bootstrap, I also bind the width and gutter settings to its definitions of spans and the like:

$gridColumns:                       $structure-panels;
$fluidGridColumnWidth:              $structure-panel-width;
$fluidGridGutterWidth:              $structure-panel-gutter;

This means that .row-fluid .spanX is equivalent to .row .panel-X.

Also for Bootstrap, I scoped this so that the .row class is .row:not(.bootstrap) - this will mean the same semantics hold true for WebBlocks itself, as well as for WebBlocks with Bootstrap, except that for Bootstrap-native stuff, you have to tweak your .row to .row.bootstrap if you want the original, fixed width version. If someone wants to use the fixed width Bootstrap row, they can do so simply by creating an element that is .row.bootstrap rather than .row. This isn't zero switching cost, but it is close - and it is probably a pattern we'll use elsewhere when we run into actual namespace disagreements (as opposed to just tweaking presentation of the same semantics).

While working on this, I also made a few changes to the .container (attn: @loganfranken):

• .container now supports a .bootstrap flag (when run with the Bootstrap adapter), just like .row.
• .container supports a $structure-container-gutter setting that is a percentage of the width of the element
• .container now supports a minimum padding constraint when it slips below $breakpoint-small.
• .container in Bootstrap is now aware of its width and it is aware of Bootstrap forcing a left and right padding of 20px on the body below 768px so that it does not redundantly pad - kind of like the minimum padding constraint when not using the Bootstrap adapter

It is also worth note that I made the container configurable with two options:

$structure-container-gutter:    2%;               /* minimum spacing on either side of container */
$structure-container-width-max: 1024px !default;  /* pixel-based to limit max size (or false) */

For $structure-container-gutter, this sets the percentage of padding on either side of the container. The definition of .container itself is sophisticated to adjust the width of the content area to play nice with the box model. As for $structure-container-width-max, this allows you to set a maximum width at which point it cannot grow any more.

[ebollens]

My latest commit b109f52 adds grid supports to WebBlocks core, although both mixins are overwritten by the Bootstrap adapter in Bootstrap's case - and will probably be overridden in most other adapters as well.

[ebollens]

I've updated the documentation for the Grid system based on this.