0

I'm trying to integrate Neat 2.0 into an existing code base (which in itself is basically from Web Starter Kit). For some reason, when I turn on grid-visual I'm seeing 13 columns instead of 12.

Is there any particular reason why this might occur? Pulling hair out trying to debug.

It also seems that the columns and gutters are reversed somehow.

To replicate, I've downloaded a fresh Google Web Starter Kit and it gives me the same weird results. Perhaps I'm implementing Neat incorrectly?

All I did was add node-neat with npm i -D node-neat and updated my gulpfile.babel.js within the styles gulp task: 

   .pipe($.sass({
      precision: 10,
      includePaths: require('node-neat').includePaths
    }).on('error', $.sass.logError))

Then added the following to my 'main.scss' :

@import 'neat';
.container {
  @include grid-container;
  @include grid-visual;
  > .col {
    @include grid-column(2);
  }
}

Here's an example of what's happening enter image description here

skube
  • 5,867
  • 9
  • 53
  • 77

1 Answers1

2

looks like your mistaking the guttering (blue columns between the actual columns) for the actual columns (White) I've doctored your screen capture to illustrate - columns are numbered in red. Regarding reversal of columns there is a direction property in custom grids that maybe of use? It allows you to select between ltr (left to right) and rtl. It defaults to ltr which is what your example appears to be doing.

Loomernescent
  • 81
  • 2
  • 7