Bourbon NEAT: 4rth column not being inline

Question

I can't understand what I'm missing in my sass, but my 4rth column in my grid wont go inline, but only 3 cols will do:

I want a simple 4 column grid, so I did:

My Markup

<section id="spots" class="row">
    <li class="item">My item</li>
    <li class="item">My item</li>
    <li class="item">My item</li>
    <li class="item">My item</li>
</section>

My sass:

.item {
    @include span-columns(3);
    @include omega(4);

This should create a 4-columns grid that will linebreak every 4 columns, right?

mknadler · Answer 1 · 2014-10-20T19:52:04.497

1

According to the docs:

You need to use the same format for that parameter as you would for a normal nth-child call. So, in this case, '4n', not '4':

.item {
    @include span-columns(3);
    @include omega(4n);
}

Otherwise, with the way Neat's omega mixin is written, it tries to output nth-child(4+1), which fails to compile.

Edited to add: you also need to scrap the class 'row' for the parent, as that's taken by Neat. Working example: http://codepen.io/anon/pen/lewJj

edited Oct 20 '14 at 19:52

answered Oct 20 '14 at 05:23

mknadler

208
1
8

Did you include outer-container? – mknadler Oct 20 '14 at 19:28
The issue was with the 'row' class; see edited answer for functional implementation. – mknadler Oct 20 '14 at 19:52

score 0 · Answer 2 · answered Oct 26 '14 at 19:38

This should do the job..

$grid-columns: 12; must be set to 12 not 10..

HTML code..

<div class="fifth">

    <div class="box">
        <p> Box 1 </p>
    </div>
    <div class="box">
        <p> Box 2 </p>
    </div>
    <div class="box">
        <p> Box 3 </p>
    </div>
    <div class="box">
        <p> Box 4 </p>
    </div>
    <div class="box">
        <p> Box 5 </p>
    </div>
    <div class="box">
        <p> Box 6 </p>
    </div>
    <div class="box">
        <p> Box 7 </p>
    </div>
    <div class="box">
        <p> Box 8 </p>
    </div>
    <div class="box">
        <p> Box 9 </p>
    </div>
    <div class="box">
        <p> Box 10 </p>
    </div>
    <div class="box">
        <p> Box 11 </p>
    </div>
      <div class="box">
        <p> Box 12 </p>
    </div>  
</div>

SCSS Code

.fifth {
    @include outer-container;
    div.box {
        font-size: 0.78em;
        height: 8em;
        background-color: #faa;
        margin-top: 2em;
        @include span-columns(3);
        @include omega(4n);
    }
}

Bourbon NEAT: 4rth column not being inline

2 Answers2