CODEWITHSUNDEEP
csssassgrid-layoutbourbonneat
Mario del Valle
Mario del Valle

Reputation: 51

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

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

Answers (4)

byronyasgur
byronyasgur

Reputation: 4747

  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;

Upvotes: 1

Gabe Kopley
Gabe Kopley

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

Larry Dennis
Larry Dennis

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

Vivek Gani
Vivek Gani

Reputation: 1313

in container, you need to add

  $visual-grid: true;

This should show the grid column backgrounds for debugging.

Upvotes: 1

Related Questions