Push/pull style behaviour for reordering content at different breakpoints

[simonlayfield]

A layout for content that I use quite regularly is one that alternates the position/ordering of a design pattern for, let's say, an article with an accompanying image. On a larger screen this would look something like this (I have thrown borders around the rows for clarity's sake):

Most if not all grid systems I have used previously operate using floats (left being the default) and so on a smaller device this layout would translate to this:

You can see the problem. The order of the columns within the rows within the markup dictates the order when displayed as a singular column of content.

Ideally, though, we'd want this:

Would it be possible to add control of the float direction per container ('row') in Flint.gs so that the order of content in the markup remains consistent and can be reordered (left to right) with a simple sass inclusion?

I'm going to try to submit a pull request and implement this (I'm a total newb so bear with me), but thought I'd get other thoughts on this from @ezekg and other flint.gs users first in case it's not something anyone else sees as being useful.

Thanks.

[ezekg]

Thanks for the feedback. 👍 This is actually a duplicate of #34 and #24. This was a feature that was implemented in 1.0, but was dropped due to the myriad of different ways to accomplish a push/pull feature (e.g. transforms, relative positioning, positive/negative margins, etc.) — choosing just one as a catch-all never turned out to be a good move.

I do want to revisit this when I get some free time to allow more flexibility using a supplied mixin if available, like how the clearfix() mixin is set up. For now, you can use this mixin as a base (it uses positive/negative margins to push/pull):

/**
 * Shift columns
 *
 * @param {String} $breakpoint        - Breakpoint to apply shift to
 * @param {Number} $columns           - Amount to shift columns
 * @param {Bool}   $has-gutter (true) - Add gutter value to shift
 */
@mixin shift($breakpoint, $columns, $has-gutter: true) {
    // Get width
    $width-map: flint-calc-width($breakpoint, $columns);
    // Get gutter
    $gutter: if($has-gutter, flint-get-gutter(), 0);
    // Calculate
    @include _($breakpoint) {
        @if flint-map-fetch($flint, "settings", "grid") == "fluid" {
            margin-left: (map-get($width-map, "target") + $gutter) / map-get($width-map, "context") * 100%;
        } @else {
            margin-left: map-get($width-map, "target") + $gutter;
        }
    }
}

Use it like,

div {
    @include _(16 12 8 4, $gutter: none normal normal normal);

    &:nth-of-type(even) {
        @include shift("desktop", 4, false);
        @include shift("laptop", -8);
    }
}

Also, if you wanted to change float direction for even rows, you could do something like,

.row {
    @include _(16 12 8 4);

    &:nth-of-type(even) {
        float: right;
    }
}

Pull requests are always welcome if you have a better idea of how to accomplish this in a clean way!

[simonlayfield]

@ezekg I see, yeah - actually your second solution here solves the problem pretty efficiently. If I'd have dug deep I'd have probably been able to figure that out :/ I jumped the gun, it seems.

Apologies for the duplication. Anyhoo, hopefully the above provides some detail for anyone else who needs help with this specifically.

Thanks and great work with Flint!

[ezekg]

No problem. Glad you're enjoying Flint! 👍 I'll keep this one open and close the other since this has more information and is easier to search.