Push and pull columns

[zanonnicola]

Hi,

how can you change column order?
There are any mixins for pushing and pulling columns?

Thanks!

[ezekg]

As of 2.0, the $shift modifier has been removed. I felt that its implementation was sloppy and a lot of what it did was never used in our projects here. It was also a pain to maintain. If there is a need for a push/pull modifier, I can look into adding them before 2.0 is released.

[ezekg]

@zanonnicola if enough users need this, I don't have an issue with adding it back into Flint. I just didn't think it warranted being a feature. We didn't use it very often, and when we did it was usually because of a deeper issue. It's pretty simple to implement for the odd-case:

// For a specific breakpoint
@include _(desktop) {
    // This creates a target/context map for an 8 column span on desktop
    $width-map: flint-calc-width("desktop", 8);
    // Fixed
    margin-left: map-get($width-map, "target") + 10px; // Or whatever your gutter value is
    // Fluid
    margin-left: (map-get($width-map, "target") + 10px) / map-get($width-map, "context") * 100%;
}

Basically, you're overriding the already set margin-left and manually calculating the width the same way Flint would. This lets you do the same for translates or positioning instead of margin hacks. Feel free to make your own mixin to use it elsewhere.

[zanonnicola]

@ezekg This is great! Thanks! It's true that most of the time you don't need to push or pull columns but there are some odd cases that you would find useful having that little future.

[ezekg]

@zanonnicola Yep, agreed. I don't think it warrants being a full fledge feature like it was before. Maybe a helper mixin to do something like the code above to suit your needs, whether that be using translate, position or margins. I'll look into doing something like that in the future.

Remember that you can pass in a context argument to flint-calc-width(), including auto if you're within the scope of a parent instance and it'll spit out the correct width for that breakpoint.

https://github.com/ezekg/flint/blob/master/stylesheets/flint/functions/lib/_calc-width.scss

[ezekg]

@zanonnicola (and anybody else who reads this issue), here's a mixin that I made for a recent project that needed to move around a few elements on desktop. Uses negative margins.

/**
 * 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,

dev {
    @include shift("desktop", 4);
    @include shift("laptop", -8);
}

[zanonnicola]

@ezekg that's handy! Thanks for sharing!