Статические сетки с помощью Susy 2

Reading time ~3 minutes

Иногда бываю ситуации, когда необходимо использовать сетки с фиксированной шириной, вместо обычного использования “резиновых” сеток.

Плагин Susy 2 предоставляет возможность для работы с такими сетками. Но первоначально, необходимо выполнить несколько базовых настроек плагина для того, чтобы начать работать с такими сетками:

Susy + Breakpoint

Эта статья является третьей частью из серии руководства по плагину Susy 2. Если вы впервые познакомились с плагином Susy 2, то рекомендую начать его изучение с первой статьи - “Краткое руководство по Susy 2”.

Настройка Susy 2 для работы с фиксированной шириной

Для того, чтобы начать работать с фиксированной шириной элементов в плагине Susy 2, необходимо изменить значение одного из его параметров c math: fluid на math: static. Также необходимо задать ширину колонки через параметр column-width, для этого подойдут единицы измерения px, em или rem. В примере этой статьи будут использоваться пиксели (px).

Если планируется создавать адаптивную сетку, то значением параметра column необходимо установить число колонок при самом маленьком размере окна браузера.

Для начала создадим новый проект через Compass, указав на необходимость использования плагина Susy в нем:

compass create -r susy -u susy susy_static

Затем откроем файл _grids.scss и добавим в него несколько следующих строк:

$susy: (
  math: static,
  columns: 4,
  column-width: 60px,
  gutters: 1/4,
  use-custom: (rem: true)
);

Создаем в Susy 2 статическую сетку

Шаги по созданию сетки с помощью плагина Susy 2 точно такие же, как если бы создавалась адаптивная сетка (по умолчанию). Первое, что необходимо сделать, это создать блок с классом .container. Однако, при этом не стоит забывать, что для статической сетки миксину container нужно передать аргумент в виде карты map через параметр $susy.

Когда плагин Susy 2 переключен в режим работы с фиксированной шириной сетки, ширина блока-обертки устанавливается в соотвествии с шириной колонки (column-width), число колонок (columns) и ширина gutter (gutters) также передаются в виде фиксированных величин. (Прим. переводчика: можно сказать немного по другому; все эти параметры с их значениями передаются миксину container через переменную $susy):

@import "grids";

.wrapper{
  @include container($susy);
}

Плагин Susy 2 автоматически высчитает максимальную ширину сетки. Скомпилированный CSS-вид будет выглядет следующим образом:

.wrapper {
  width: 285px;
  margin-left: auto;
  margin-right: auto;
}
.wrapper:after {
  content: " ";
  display: block;
  clear: both;
}

Единственное различие между статической и адаптивной сеткой заключается в том, в плагин Susy 2 расчитывает максимальную ширину блока-контейнера, в то время как в адаптивной сетке максимальная ширина всегда принимается равной 100%.

Преобразование статической сетки в адаптивную в Susy 2

Создание адаптивной сетки с помощью плагина Susy 2 в режиме статической сетки практически ничем не отличается от того, как это можно делать в адаптивном режиме. За исключением того, что вы уже догадались, это блок-обертка. В данной статье я затрону только изменение самого блока-контейнера. Если необходима более подробная информация об остальных моментах, вернитесь назад, к статье “Краткое введение в Susy 2 (Часть 2)”.

При создании адаптивной сетки ее ширина всегда равна 100%. Поэтому нет необходимости явно ее задавать. Но в данном случае мы все-таки это сделаем.

К счастью, проблем с этим в плагине Susy 2 нет. Ниже показан наилучший метод, который можно только представить.

.wrapper{
    @include breakpoint(600px){
    @include container(12)
  }
}

.wrapper{
    @include breakpoint(900px){
    @include container(16)
  }
}

В каждой из двух контрольных точек производится переопределение ширины блока-обертки путем задания числа колонок, которые будут входить с состав этого блока.

Скомпилированный CSS-код будет таким:

@media (min-width: 900px) {

  .wrapper {
    width: 1185px;
    margin-left: auto;
    margin-right: auto;
  }

  .wrapper:after {
    content: " ";
    display: block;
    clear: both;
  }
}

Все работает, но выглядит досаточно неприглядно. Имеются дополнительные margin-left и margin-right, а также clearfix; это происходит потому, что блок-обертка был переопределен.

На этом серия статей по Susy 2 завершена.


Различие между exports и module.exports

Попытка разобраться, в чем различие между exports и module.exports, основанная на статье Understanding module.exports ...Continue reading

Комментарии

Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке