Posted by mrynearson on August 6, 2012 at 10:12pm
6 followers
Jump to:
| Project: | Zen |
| Version: | 7.x-6.x-dev |
| Component: | CSS/SASS/HTML markup |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Issue Summary
Is it possible to get a zen grid mixin similar to the susy mixin "susy-grid-background"? Basically so in dev you can see the zen grids overlayed similar to the grid overlay in zen grid 960. Thanks.
Comments
#1
See STARTERKIT/sass-extensions/zen-grids/stylesheets/zen/_background-grid.scss
I haven't played with it since the beginning days of zen grids.
#2
@echoz thanks for the pointer. In that file there appears to be a mixin -experimental-bg-grid that you can't call unless you add it to the zen mixin file _grids.scss but it doesn't appear to work, at least for me. Either way the developer notes in STARTERKIT/sass-extensions/zen-grids clearly say do not modify anyway. Maybe someone else can chime in on how to show the background grids using zen grids.
#3
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.)"
#4
Yea I tried that earlier, it just added the text numbers. Didn't seem to display a grid.
#5
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>
#6
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/compass-zen-grids/issues/25
#7
I can t get this to work, the columns all span over 100% of the whole page...
Simone
#8
#9
"This will be part of Zen Grids 2.0, btw."
https://github.com/JohnAlbin/compass-zen-grids/issues/25#issuecomment-13708737Zen Grids 2.0.0-alpha2 is now out.
https://github.com/JohnAlbin/compass-zen-grids/tagsUpdate: Issues were removed from the repo(?).
#10
uh? broken links
#11
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/compass-zen-grids/commit/46bd861da990431825... and https://github.com/JohnAlbin/compass-zen-grids/commit/a3d2524826ded9ed40... (hope these won't be removed… ;o))
#12
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.