search

connectivedx / Phoenix

http://connectivedx.github.io/Phoenix/
33 stars 5 forks source link

Shifted Column Margin Calculation #134

Closed ajmueller closed 9 years ago

ajmueller commented 9 years ago

When push is used without pull, margins can be calculated incorrectly. As seen below, the Secondary column does not sit flush against the right side of the containing row despite the sum of the Primary width, Secondary width, and Secondary push equaling the total number of columns in the grid. The push amount is exactly one $gutterWidth short of pushing the Secondary column to be flush against the right side of the containing row.

image

The solution we've implemented on another project is to have a Boolean option for push called "omega" that tells the mixin whether or not the column being pushed should be the last element in the row, thus getting set flush against the right side of the row.

ajmueller commented 9 years ago

NOTE: This only happens when includeGutterWidth is set to its default of true. When set to false, this issue doesn't appear.

ajmueller commented 9 years ago

The issue also affects pull. Essentially when a container is pushed and intended to be visually last/flush against the right side (a.k.a. "omega") or when a container is pulled and intended to be visually first/flush against the left side (a.k.a. "alpha"), we need to add an additional gutter to the push or pull calculation, respectively. This will be captured by adding optional omega and alpha parameters to the $options map for each mixin and function. Looking at a grid system below makes this easier to visualize (white is gutter, dark pink is padding, light pink is content).

image

ajmueller commented 9 years ago

Based on some reading and discussions today with @chadian, some fundamental changes to our grid system could really easily solve this. I'm going to work on removing push and pull in favor of a "position" concept that's detailed here:

https://www.palantir.net/blog/responsive-design-s-dirty-little-secret