Can't seem to position elements using Zen Grids [#2076507]

I have installed the Beep Edition theme from Drupal admin but could not get the Zen Grids to display. I realized that I had no Zen files in my theme so I copied them from another Zen theme that I had created to get the background to display. Here's what I did:

- created a folder beep_edition -> sass -> zen and copied _grids.scss and _background.scss there.

- copied _zen.scss to my beep_edition -> sass folder.

- added @import "zen/background"; to my _zen.scss file.

- added @include zen-grid-background($zen-column-count,$zen-gutter-width); to the .page class for each media query

The background now changes nicely for the different view ports, however, the zen-grid-item mixin

@include zen-grid-item(6, 1);

doesn't seem to be working.

Would someone please point me in the right direction? Thanks.

Comments

Comment #1

jpamental CreditAttribution: jpamental commented 29 August 2013 at 01:41

Hi Stan -

I should have documented it better, but you need to install the Zen Grids 'gem': see instructions here: http://www.zengrids.com

That will get you sorted out (and you don't need to bring in any css files from the Zen theme)

Let me know if that sorts you out.

Jason

Comment #2

stanb CreditAttribution: stanb commented 29 August 2013 at 18:24

Hi Jason,

Thank you. It's working now.

I issued gem install zen-grids from within my theme dir and received the following output:

Fetching: zen-grids-1.4.gem (100%)
Successfully installed zen-grids-1.4
Parsing documentation for zen-grids-1.4
Installing ri documentation for zen-grids-1.4
Done installing documentation for zen-grids (1 sec).
1 gem installed

I was then able to move elements around using zen-grid-item in layout.scss.

I added @import "zen/background"; to layout.scss and using @include zen-grid-background($zen-column-count, $zen-gutter-width);, I was able to display the grid too. Cool!

What I don't get is why there are no Zen Grids files or folders in my theme.

A ls -a command reveals:

.                             beep_edition.info  htc          screenshot.png
..                            cd                 images       template.php
.sass-cache                   config.rb          js           templates
apple-touch-icon-114x114.png  css                LICENSE.txt  Thumbs.db
apple-touch-icon-144x144.png  favicon.ico        logo.png
apple-touch-icon-72x72.png    font               ls
apple-touch-icon.png          gem                sass

The cd, gem and ls files appear to be empty. I see that zen-grids installed here:

C:\Ruby200\lib\ruby\gems\2.0.0\gems\zen-grids-1.4

I'm guessing that the cd, gem and ls files provide the theme with some sort of pointers to the Zen Grids installation? Would I need to issue the gem command for each new theme in which I want to use Zen Grids?

Any enlightenment is welcome. Thanks.

BTW, I've been using the Zen theme exclusively and Zen Grids is included so I'm somewhat inept at using Zen Grids with another theme.

Stan

Comment #3

jpamental CreditAttribution: jpamental commented 29 August 2013 at 18:32

Hi Stan -

Glad you've got it working. The Zen Grids gem is a plugin for Compass, so you would never need to reinstall it for other projects - just the reference in the config.rb file is all you need! The gem does it's work when the CSS is compiled, so you wouldn't need anything in the theme folder itself. I'm not sure you actually need to add the @import for the backgrounds - that may be there already by simply requiring zengrids in the first place.

Hope that helps! I'm going to mark this one as closed, but let me know if you have any more questions!

Jason