grid system feedback

[__]

Okay, I’m trying not to get too fragmented, here. This is a design (in the engineering sense) oriented question and will apply to either the table or inline-block based plan. Plus, I am writing this as a sass module, so in the end I’ll be able to use it how I like regardless of what I choose here.

As you’ve seen in the demos, I am using a “xofy” attribute value scheme for predefined column widths. “1of4” would be 25% wide, “6of12” would be 50% wide, and so on. I am planning on predefined y values of 2-12, or maybe through 16, and x values from 1-y.

My original idea was to make the system mobile-first, with all columns having 100% width by default and then getting their “grid” widths at a certain breakpoint.

Now, this is how I got trapped by my own logic:

Should a “xof4″ column become full-width at the same breakpoint as a “xof16″ column? Probably not, right? So, here’s a new idea: three or four breakpoints, and they kick in for different rows based on the y value. So, “1of4” and “3of12” are both 25% wide, but they switch to their “mobile” (full-width) display at different breakpoints.

From there, it only makes sense that you could assign multiple values to a column, maybe like “1of2 1of4 1of12”, and have each break at a different point: so on large screens the column would be 8.33% wide, on mid-size screens this same column would be 25% wide, 50% on smaller screens, and full-width on very small screens.

From a technical standpoint, I like this very much, and I have figured out how to do it. My question for all of you is whether anyone thinks this is worth it.

1. Would you like a grid system that give this kind of fine control? would these features see much use?
2. Since it is sass and you can do it any way you want manually, do you think it is useful to have this kind of system predefined?

[__]

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.

[__]

Just an update:

For the grid module, I’m going with the display:inline-block approach. I’ve been refining it and tweaking features. Here’s a new demo. Be sure to open this in a full page and check out the responsive features (breakpoints) —there’s a lot more to them than I have demonstrated so far.

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

I have a more complete documentation page in the works. All this will appear on the github-pages site soon.

The unique capabilities of the display:table-*-based system will be used in other modules: a “sticky bar” module and a “modal” module, for example.

Thanks for your feedback, guys!

[Author]

Posts