Shifting elements using Bourbon Neat

Question

Just starting out with SASS/Bourbon/Neat.

I've got 3 items, all taking up 3 columns. I want to shift 2 of them to the right, and leave 1 to the left. This is the sass/SCSS I'm using:

    #mod-header{
    background-color: $primaryColor;
    color: $primaryTextColor;

    header{
        @include outer-container();

        .social{
            @include shift(9);
            @include span-columns(3);
        }

        .contactDetails{
            @include shift(9);
            @include span-columns(3);
        }

        .dealerLogo{
            @include span-columns(3);
        }

    }
}

But this is the result I'm getting:

https://jsfiddle.net/2qfm6dnd/

IE. It's knocking .social and .contactDetails down by the height of .dealerLogo. How can I stop this happening please?

I know the answer could be very simple.

Answer 1

By default Neat uses 12 columns. So if the first element takes up three, you have 9 left. By your description, I take it to mean you want an open quarter of the row, followed by the second and third elements. Please correct me if I'm wrong there.

With those nine columns left, the two final elements will take up 6 columns together (3 each). The Neat shift mixin moves elements over by adding margin-left. So if we shift the second element over 3 columns, the third element doesn't need to be shifted at all!

See this demo: https://codepen.io/alexbea/pen/JbZVjV

If you really wanted the second element (.social) to be in the far-right column, with the third element (.contactDetails) under it, you'd need to shift social over 6 (3 + 6 + 3). But Neat includes right margin on all but the final element in your row. That's where the omega() mixin comes in, to remove it. It's a confusing one, and might not be necessary, so I'll link it and add a variation showing that in the Codepen demo.