Колоночная верстка с технологией Zen Grids

Урок посвящен созданию колоночной CSS-верстки с помощью технологий SASS и Zen Grids. Технология Zen Grids поставляется вместе с дизайн-темой Zen. Документация и примеры создания колонок приведены на сайте документации технологии - zengrids.com - и в файле помощи подтемы Zen - sass-extentions/zen-grids/README.txt.

Альтернатива технологии Zen Grids - создание колоночной верстки с помощью модуля Views. Для вывода материалов вида в несколько колонок или рядов укажите в настройках блока формат вывода данных Grid и задайте необходимое кол-во колонок. Ограничением данного подхода является возможность использования только для материалов модуля Views и неадаптивность верстки (кол-во колонок не зависит от ширины экрана).

Для создания колоночной верстки по технологии Zen Grids в первую очередь подключите в SASS файле библиотеку zen с помощью команды @import "zen" и укажите значения параметров сетки: кол-во столбцов сетки ($zen-column-count) и ширину зазоров между столбцами ($zen-gutter-width). Далее примените для контейнера, содержащего данные будущих колонок, миксин zen-grid-container и укажите размеры и расположение колонок в сетке с помощью миксина zen-grid-item. Для правильного отображения новых рядов в сетке используйте миксин zen-clear. Таблицы стилей компилируются из SASS-файлов с помощью команды compass compile.

В ходе урока продемонстроировано создание из неотформатированного списка школьных предметов двух колонок с заданной шириной и отступами между ними. Рассмотрен альтернативный способ создания колоночной версти с помощью модуля Views.