0

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.

Strontium_99
  • 1,771
  • 6
  • 31
  • 52

1 Answers1

2

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.

alexbea
  • 1,311
  • 14
  • 25
  • Now I get it. I was assuming the shift mixin started from the very first column no matter what. Fantastic. Thanks for the clarification. – Strontium_99 Dec 09 '16 at 09:47
  • 1
    I can totally understand that. I've had to remind myself how whichever grid system I'm using works regularly. It's often helpful for me when something unexpected is happening to go right to the compiled CSS and see what happened. If the element was `position: absolute` and placed with the `left` property (as sometimes is the case) your approach would have been right. Here we have floats and left margin. – alexbea Dec 09 '16 at 14:40