Reputation: 51
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.
Upvotes: 5
Views: 8665
Reputation: 4747
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;
Upvotes: 1
Reputation: 16687
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.
Upvotes: 14
Reputation: 111
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.
Upvotes: 11
Reputation: 1313
in container, you need to add
$visual-grid: true;
This should show the grid column backgrounds for debugging.
Upvotes: 1