Сетки Zen производят слишком большие элементы

У меня проблема с интеграцией zen-grids в drupal. Я установил sass и компас и использую их. Затем я создал тип контента с 3 полями. Это дает мне такую ​​структуру в html:

<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>

Затем я попытался использовать сетки дзен для создания такого макета:

topleft___________topmid_______________topright

Поэтому я использовал этот код:

$zen-column-count: 5; // Set the total number of columns in the grid.
.node-layout1{
   max-width:1200px;
  @include zen-grid-container; // Apply this mixin to the 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);
}

Все работает вроде нормально. Я получаю все 3 элемента в линию, но их ширина и смещения слишком велики, topmid начинается там, где должен заканчиваться topright, поэтому после этого моя страница становится слишком большой.

Вот css, который я получаю из компаса для всех трех элементов:

.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%;
}

Я узнал, что проблема в

$zen-column-count: 5;

не применяется, при запуске было установлено значение 1, и кажется, что я не могу его изменить.


person gabrjan    schedule 07.10.2014    source источник


Ответы (2)


Звучит как проблема с компасом 1.0, как описано здесь:

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

Исправление состоит в том, чтобы добавить $zen-float-direction, $zen-column-count к вашему вызову zen-grid-item, т.е.

@include zen-grid-item(2, 1, $zen-float-direction, $zen-column-count);
person Matt Frear    schedule 29.10.2014

используйте !global в конце «$zen-column-count: 5», исправив это для меня. кажется, вы должны заставить дзен использовать новую переменную.

$zen-column-count: 5 !global;

https://www.drupal.org/node/2346291#comment-9475791

person shayank    schedule 02.01.2015