How do I show the columns of the grid of Bourbon Neat?

Question

In my CSS file apply the commands of Bourbon Neat and not show columns in html file, if show the result of apply but not show columns.

.container{
    @include outer-container;
    @include span-columns(2 of 8, table);
    border: 1px solid red;
    margin: 0 auto;
    position: relative;
    width: 960px;
}

When show the css generated for sass not show background property of Bourbon Neat columns.

Could you also post generated CSS and target HTML? – juanignaciosl Feb 04 '13 at 21:52 — juanignaciosl, Feb 04 '13 at 21:52

Gabe Kopley · Answer 1 · 2015-04-08T19:10:55.523

The important thing is to both set $visual-grid: true; and define your breakpoints before your line @import "neat";

From https://github.com/thoughtbot/neat#using-neat:

The visual grid reflects the changes applied to the grid via the new-breakpoint() mixin, as long as the media contexts are defined before importing Neat.

Whether or not you choose to use a _grid-settings.scss file (as the docs recommend) is up to you. But in order to see the visual grid at all you definitely need to set $visual-grid: true; before importing neat. And in order for the visual grid to behave responsively, you also need to define your breakpoints before importing neat.

Thank you. The downside of using a variable as opposed to a mixin to show grids. — RobW, Oct 24 '13 at 14:02

score 11 · Answer 2 · answered Sep 09 '13 at 22:01

Unfortunately, just adding "$visual-grid: true;" in the container won't work. Or at least it doesn't work for me. However, adding a "_getting-settings.scss" file with the following settings in the file worked for me:

$visual-grid: true;
$visual-grid-color: yellow;
$visual-grid-index: front;
$visual-grid-opacity: 0.5;

The documentation isn't very clear where $visual-gridL should go, so it's hard to tell if that is as the developers intended. I think they need to provide better examples in this case.

score 1 · Answer 3 · answered Apr 04 '13 at 20:35

1

in container, you need to add

  $visual-grid: true;

This should show the grid column backgrounds for debugging.

answered Apr 04 '13 at 20:35

Vivek Gani

1,283
14
28

score 1 · Answer 4 · answered Jun 01 '15 at 18:29

1

Make a file like below ( adjust settings to your own requirements ). This file overwrites the neat default settings that are in _visual-grid.scss in neat's settings directory.
Add an import to the file you just created the line Before ( after will not work ) you import the main neat file into your main project SCSS file.

_neatsettings.scss

// Neat Settings

$visual-grid: true;
$visual-grid-color: #faa;
$visual-grid-index: front;

answered Jun 01 '15 at 18:29

byronyasgur

4,627
13
52
96

How does this add anything over the existing answers? – cimmanon Jun 01 '15 at 18:42
I would think it's more clear and more authoritative. The existing answers didn't really help me that much when I was working it out myself that's why I put the answer up – byronyasgur Jun 01 '15 at 21:41
Ok, but [this answer](http://stackoverflow.com/a/18707737/1652962) shows which settings you need to use and [this answer](http://stackoverflow.com/a/18709461/1652962) clarifies that the variables have to be before you import neat. You're just rehashing existing answers. – cimmanon Jun 01 '15 at 21:44
that answer a) implies that you have to add visual-grid to the container and b) doesn't specify that the settings has to be added before the neat import and also includes some confusion `it's hard to tell if that is as the developers intended.` plus there's a typo as far as I can tell ... It didn't fix my problem anyway at the time as I spent an hour or so trying to figure it out – byronyasgur Jun 01 '15 at 23:33

How do I show the columns of the grid of Bourbon Neat?

4 Answers4