Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other grid system feedback Reply To: grid system feedback

#183667
__
Participant

http://codepen.io/adrian-enspired/pen/EsoBA

Mini-docs (straight from the code):

Attribute: [at-grid]
defines a grid container.
intended as a scripting hook for atjs; typically not used otherwise.
not used for styling.

Attribute: [at-grid-row]
defines a grid row.
– permitted context:
– any element intended as a horizontal container: div|section|etc.
– permitted values:
– [breakpoint values]:
control the transition from stacked (mobile-first) to grid display.
if none of these are present, the row will always display as a grid.
– “min” displays as a grid above the $atGrid_min breakpoint.
– “mid” displays as a grid above the $atGrid_mid breakpoint.
– “max” displays as a grid above the $atGrid_max breakpoint.
permitted children:
– [at-grid-col] elements only.

Attribute: [at-grid-col]
defines a full-height grid column.
– permitted context:
– any element intended as a vertical container.
– permitted values:
– [sizing values]:
control the width of the column, using an “{x}of{y}” pattern where:
– {y} is the number of total grid spaces in a row: 4, 6, 12, or 16
– {x} is the number of grid spaces the column spans
(must be less than {y}; Σ{x} should not exceed {y})
e.g., a “1of4” col will be 25% wide, a “9of12” col will be 75% wide.
cols are justified inside a row, so will be distributed if Σ{x}<{y}.
– [layout values]:
– “center” makes the column block-level and centered.
– “collapse” inside a row with a breakpoint,
column does not display below that breakpoint.
– “gutter” gives the column a 1.5em gutter (.75em on each side).
– permitted children:
– flow content.