Friday 15 March 2013

drupal - Zen grids produces too large elements -



drupal - Zen grids produces too large elements -

i'm having problem integration of zen-grids drupal. have installed sass , compass , using them. created content type 3 fields. give me construction in html that:

<article class="node-1 node node-layout1 node-promoted view-mode-full clearfix" typeof="sioc:item foaf:document" about="/node/1"> <div class="field field-name-field-topleft field-type-text-long field-label-above"> <div class="field field-name-field-topmid field-type-text-long field-label-above"> <div class="field field-name-field-topright field-type-text-long field-label-above"> </article>

then tryied utilize zen grids create layout that:

topleft___________topmid_______________topright

so used code:

$zen-column-count: 5; // set total number of columns in grid. .node-layout1{ max-width:1200px; @include zen-grid-container; // apply mixin container. } .field-name-field-topleft { @include zen-grid-item(2, 1); } .field-name-field-topmid { @include zen-grid-item(1, 2); } .field-name-field-topright { @include zen-grid-item(2, 3); }

all works kinda ok 3 elements in line widths , offsets way large, topmid starts topright should finish, page way big after that.

here css generated compass 3 elements:

.field-name-field-topleft { float: left; margin-left: 0; margin-right: -200%; width: 200%; } .field-name-field-topmid { float: left; margin-left: 100%; margin-right: -200%; width: 100%; } .field-name-field-topright { float: left; margin-left: 200%; margin-right: -400%; width: 200%; }

i found out problem in

$zen-column-count: 5;

not getting applied, set @ start 1 , seems can't alter it.

it sounds problem compass 1.0, documented here:

https://github.com/johnalbin/zen-grids/issues/68

a prepare add together $zen-float-direction, $zen-column-count zen-grid-item call, i.e.

@include zen-grid-item(2, 1, $zen-float-direction, $zen-column-count);

drupal grid zen

No comments:

Post a Comment