Margin between columns using Neat

Question

It appears to me that the default behavior for Neat should be that each span column should have a margin (or gutter) between adjacent span columns. Every example that I've found online simply installs Neat, does a quick demo, and the result has a gutter between adjacent elements. No settings changed.

Would anyone know why that is not happening for me? I have a clean install of Bourbon and Neat. My html is as follows...

<footer class="col-2">
  <section class="left">
    content
  </section>
  <section class="right">
    content
  </section>
</footer>

My sass looks like...

.col-3 {
  @include outer-container;

  .left {
    @include span-columns(6);
  }

  .right {
    @include span-columns(6);
  }
}

Here's a link to the rendered output:

enter image description here

So I actually have 2 questions.

Why are the columns stacked on top of each other, even if I float the left column?
Why are my columns ignoring the gutter between each column?

score 0 · Answer 1 · answered Jan 28 '15 at 21:04

0

It looks like you misnamed your class (div has class .col-2 and scss has .col-3) and since you nested your classes the column mixin isn't applied to child div.

code works with matching class names here http://sassmeister.com/gist/0c1963fef94a14d5268f

answered Jan 28 '15 at 21:04

JustH

1,372
8
8

1

Thanks for the answer, but that was just a result of me screwing around trying different things. I had the elements classed appropriately. However, I did just copy and paste your code into my project and it was still misbehaving, so that made me have another thought. Apparently my normalize stylesheet was messing with my Neat rules. I disable normalize and it behaves as expected. Thanks for the push! – m_reese Jan 28 '15 at 21:49

score 0 · Answer 2 · answered Jan 28 '15 at 21:57

0

The issue was related to my normalize stylesheet. Had some rules overriding Neat.

answered Jan 28 '15 at 21:57

m_reese

13
2

Margin between columns using Neat

2 Answers2