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.

Secateurs

Could you also post generated CSS and target HTML? – Albumen

Answer 1

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.

Gylys

Thank you. The downside of using a variable as opposed to a mixin to show grids. – Detainer

Answer 2

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.

Oldwife

Answer 3

in container, you need to add

  $visual-grid: true;

This should show the grid column backgrounds for debugging.

Wirth

Answer 4

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.

2. 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;

Photoactive

How does this add anything over the existing answers? – Marchese

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 – Photoactive

Ok, but this answer shows which settings you need to use and this answer clarifies that the variables have to be before you import neat. You're just rehashing existing answers. – Marchese

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 – Photoactive