Zen Grids Background Grid Mixin

See STARTERKIT/sass-extensions/zen-grids/stylesheets/zen/_background-grid.scss
I haven't played with it since the beginning days of zen grids.

In _background-grid.scss it says, "This mixin currently requires the following markup at the top of the responsive container (e.g. body or div#page, etc.)"

I haven't been able to completely get it working(aligned) but here is what I did.

add to your .scss file
@import "zen/background-grid";

then add

.bg-grid{
@include -experimental-bg-grid();
}

Then add the html - This mixin currently requires the following markup at the top of the responsive container (e.g. body or div#page, etc.).

<p class="bg-grid">
<span class="bgcol-1">1</span><span class="bgcol-2">2</span><span class="bgcol-3">3</span><span class="bgcol-4">4</span><span class="bgcol-5">5</span><span class="bgcol-6">6</span><span class="bgcol-7">7</span><span class="bgcol-8">8</span><span class="bgcol-9">9</span><span class="bgcol-10">10</span><span class="bgcol-11">11</span><span class="bgcol-12">12</span><span class="bgcol-13">13</span><span class="bgcol-14">14</span><span class="bgcol-15">15</span><span class="bgcol-16">16</span><span class="bgcol-17">17</span><span class="bgcol-18">18</span><span class="bgcol-19">19</span><span class="bgcol-20">20</span><span class="bgcol-21">21</span><span class="bgcol-22">22</span><span class="bgcol-23">23</span><span class="bgcol-24">24</span><span class="bgcol-25">25</span><span class="bgcol-26">26</span><span class="bgcol-27">27</span><span class="bgcol-28">28</span><span class="bgcol-29">29</span><span class="bgcol-30">30</span>
<span class="bgcolrev-1">1</span><span class="bgcolrev-2">2</span><span class="bgcolrev-3">3</span><span class="bgcolrev-4">4</span><span class="bgcolrev-5">5</span><span class="bgcolrev-6">6</span><span class="bgcolrev-7">7</span><span class="bgcolrev-8">8</span><span class="bgcolrev-9">9</span><span class="bgcolrev-10">10</span><span class="bgcolrev-11">11</span><span class="bgcolrev-12">12</span><span class="bgcolrev-13">13</span><span class="bgcolrev-14">14</span><span class="bgcolrev-15">15</span><span class="bgcolrev-16">16</span><span class="bgcolrev-17">17</span><span class="bgcolrev-18">18</span><span class="bgcolrev-19">19</span><span class="bgcolrev-20">20</span><span class="bgcolrev-21">21</span><span class="bgcolrev-22">22</span><span class="bgcolrev-23">23</span><span class="bgcolrev-24">24</span><span class="bgcolrev-25">25</span><span class="bgcolrev-26">26</span><span class="bgcolrev-27">27</span><span class="bgcolrev-28">28</span><span class="bgcolrev-29">29</span><span class="bgcolrev-30">30</span>
</p>

Note: only use the markup needed for the amount of columns. If your total columns is 7 then the html should look like:

<p class="bg-grid">
<span class="bgcol-1">1</span><span class="bgcol-2">2</span><span class="bgcol-3">3</span><span class="bgcol-4">4</span><span class="bgcol-5">5</span><span class="bgcol-6">6</span><span class="bgcol-7">7</span>
</p>

Also for reference there is an issue for backgrounds on grids at https://github.com/JohnAlbin/zen-grids/issues/25

I can t get this to work, the columns all span over 100% of the whole page...
Simone

"This will be part of Zen Grids 2.0, btw." https://github.com/JohnAlbin/zen-grids/issues/25#issuecomment-13708737

Zen Grids 2.0.0-alpha2 is now out. https://github.com/JohnAlbin/zen-grids/tags

Update: Issues were removed from the repo(?). Update 2: fixed URLs!

uh? broken links

It seems the complete Issues section were removed from the repo(?)

However there are good news too. A new zen-grid-background() mixin is introduced in ZenGrids 1.4 too.

See: https://github.com/JohnAlbin/zen-grids/commit/46bd861da990431825b4cb8c58... and https://github.com/JohnAlbin/zen-grids/commit/a3d2524826ded9ed40729ef4b8... (hope these won't be removed… ;o))

If you're using the 7.x module, then you can simply drop the _background.scss file into your theme_name/sass-extensions/zen-grids/stylesheets/zen/ folder.

Then in your _base.scss add:
@import "zen/background";

Then add:
@include zen-grid-background();
to your grid container.

You may read more about the new grid background here.
You will need to be running compass 0.12 or later.

Thanks tseven. That worked for me. However, adding

@include zen-grid-background();

to my grid container gave me a separate grid for each section (header, main, footer) which wasn't exactly what I needed.

Instead, I added:

#page {
  @include zen-grid-background();
}

to responsive-sidebars.scss and it gave me a grid that displayed across the entire page which is more what I was looking for. Thanks again!

I couldn't get this to work. Also, the class="bg-grid" messed up all kinds of things in my theme.

I moved the repo to remove the "compass-" part of the URL. Sorry about that! I'll edit the comments to fix the links.

Zen Grids 1.4 is now included in 7.x-5.x-dev, so this is fixed!

On this url http://next.zengrids.com/reference/background/#mixins is says that you have to @import "zen-grids/background";.

On this url http://zengrids.com/help/#zen-grid-background it says that you have to @import "zen/background";.

The second one seems to work for me. I hope that helps.

For anyone still trying to get this working, I had to put the

#page {
		@include zen-grid-background();
	}

declaration in the top level of each media query in the responsive.scss file,