Grids — это набор sass-функций для построения и использования собственных модульных сеток. Grids позволяет отказаться от абсолютных единиц измерения, используя, при этом, обычные css-конструкции. Библиотека дает возможность использовать более одной сетки на странице, что полезно, в частности, при адаптивной верстке.

Модель модульной сетки, о которой ведется речь:

Установка

Grids написан на ruby и требует наличие bundler в проекте. Добавьте grids в ваш Gemfile:

group :assets do
  gem 'sass' # or 'sass-rails'
  gem 'grids', '~> 1.1'
end

Если вы используете sass --watch, то добавьте параметр -rgrids.

Использование

Создайте файл gridname.scss или gridname.css.scss для rails (например, display.css.scss). gridname должен быть правильным css-идентификатором. Заполните его подобным содержимым:

$atom-x: 42px; // <css unit> — ширина ячейки сетки
$atom-y: 21px; // <css unit> — высота ячейки сетки
$module-width: 1; // <integer> — ширина модуля в ячейках сетки
$modules-x-count: 12; // <integer> — ширина страницы в модулях

// Опционально
$gutter-x: 42px; // <css unit> — ширина отступа между модулями, $atom-x по-умолчанию
$gutter-y: 21px; // <css unit> — высота отступа между модулями, $atom-y по-умолчанию
$module-height: 1; // <integer> — высота модуля в ячейках сетки, не используется, если не указано
$modules-y-count: 12; // <integer> — ширина страницы в модулях, не используется, если не указано

Добавьте в вашем sass-коде:

@import "gridname.grid" // .grid вместо .scss

После этого появится возможность использовать следующие sass-функции:

• gridname-x(n) — ширина n блоков
• gridname-y(n) — высота n блоков
• gridname-gutter-x(n) — ширина n отступов
• gridname-gutter-y(n) — высота n отступов
• gridname-modules-x(n) — ширина n модулей
• gridname-modules-y(n) — высота n модулей (если указано $module-height)
• gridname-modules-gap-x(n) — ширина n модулей плюс ширина одного отступа
• gridname-modules-gap-y(n) — высота n модулей плюс высота одного отступа (если указано $module-height)
• gridname-full-page-width() — ширина страницы
• gridname-full-page-height() — высота страницы (если указаны $module-height и $modules-y-count)

Пример

@include 'grids/display.grid';
@include 'grids/mobile.grid';

.page-content {
  width: display-full-page-width();
  margin-right: display-gutter-x(-1);

  .section {
    float: left;
    width: display-modules-x(2);
    margin: 0 display-gutter-x(1) display-gutter-y(1) 0;
  }
}

@media only screen and (max-width : 320px) {
  .page-content {
    width: mobile-full-page-width();
    margin-right: 0;

    .section {
      float: none;;
      width: 100%
      margin: 0 0 mobile-gutter-y(1) 0;
    }
  }
}

Лицензия

Grids выпущен под MIT-лицензией.