Создание Asymmetric Layout в Susy

От переводчика. Данная статья является вольным переводом поста Creating Asymmetric Layouts With Susy автора Zell Liew.

Цель статьи - на простом примере показать, каким образом можно создавать ассиметричную разметку (asymmetric layout) с помощью Susy 2. Обзор ни в коей мере не является каким-либо пособием - это просто очень краткий экскурс по возможностям Susy 2 в области (asymmetric layout). Далее - вольный перевод с разрешения автора.

Когда я впервые услышал об ассиметричной разметке (asymmetric layout), на тот момент такую можно было сделать только с помощью фреймворка Singularity GS. Подобная разметка была чем-то невероятно крутым и я очень захотел сделать подобную же - с неравной шириной столбцов columns. Но на тот момент я был полностью доволен системой Susyone и мне очень не хотелось переключаться на другой инструмент.

Можете представить мой восторг, когда вышла новая версия Susy 2, в которой была включена поддержка ассиметричной разметки (asymmetric layout).

В этой статье я покажу, как просто можно создавать ассиметричную разметку (asymmetric layout) с помощью Susy 2.

Что мы будем делать

В этой статье мы будем создавать с помощью Susy простую fluid-разметку. В этой разметке есть две боковых панели и два вложенных блока-потомка внутри центрального блока с контентом:

Глобальные переменные Susy

Для того, чтобы использовать возможность создания ассиметричной разметки (asymmetric layout) в Susy, в ее глобальной переменной $susyнужно внести два параметра: columns и output. Параметр columns должен быть Sass-списком для того, чтобы можно было работать с ассиметричной разметкой (asymmetric layouts).

Sass-список является строкой значений, разделенных пробелом и выглядит он примерно таким образом:

$list : 1 2 3 2 1;

Внутри данного списка $list располагаются пять значений: 1, 2, 3, 2, 1. Если поместить этот список в качестве параметра в глобальную переменную $susy, то в результате получим ассиметричную разметку (asymmetric layout), состоящую из пяти столбцов.

Также же необходимо добавить еще один параметр output: isolate:

$susy : (
  columns: 1 2 3 2 1,
  output: isolate
)

После установки этих параметров все готово для создания заметки с помощью Susy.

Создание ассиметричной разметки (asymmetric layout)

Как правило, первым важным шагом является добавление миксина container для блока-обертки. Помимо этого, в данном примере для блока-обертки добавим еще высоту на 100% viewport, так как внутри блока нет содержимого и иначе мы его просто не увидим:

.wrap {
  @include container(1140px);
  height: 100vh;
}

Прежде чем продолжить создание разметки, необходимо разобраться с еще одним вопросом.

Так как в глобальных настройках Susy используется параметр output: isolate, необходимо уточнить месторасположение каждой отдельной части разметки. Для этой цели нужно использовать параметр $location.

Параметр $location указывает месторасположение каждого отдельного span и может принимать следующие значения:

• first
• last
• at

Если какой-либо отдельный блок по разметке располагается первым, то для него необходимо использовать ключевое слово first. Если блок располагается последним, то для него нужно использовать слово last. Если же блок располагается в разметке, к примеру, начиная со 2-го столбца, то в миксине span нужно использовать ключевое слово at 2.

Теперь, обладая всеми этими знаниями, можно создать разметку для трех блоков: .sidebar-one, .content и .sidebar-two.

Блок .sidebar-one по нашей схеме располагается первым и занимает ширину в один столбец:

.sidebar-one {
  @include span(1 first);
}

Блок .sidebar-two является последним в схеме разметки и также занимает ширину в один столбец:

.sidebar-two {
  @include span(1 last);
}

Блок .content имеет ширину в три столбца и начинается со второго столбца:

.content {
  @include span(3 at 2);
}

Теперь все три блока должны точно расположиться в создаваемой нами ассиметричной разметке (asymmetric layout). Два оставшися блока .nest-one и .nest-two временно опустим для более ясной картины:

Создание разметки для вложенных блоков .nest-one и .nest-two немного сложнее, нежели для основных блоков разметки. Имеется ввиду, что при разметке блоков-потомков необходимо учитывать факт их вложенности.

Оба наших блока расположены внутри блока .content, а мы знаем, что данный блок имеет структуру (2 3 2), которая также является ассиметричной разметкой (asymmetric layout).

Поэтому, при создании разметки для вложенных элементов необходимо включить эти значения в качестве аргументов для миксина span.

Блок с классом .nest-one является первым блоком в разметке и занимает ширину в один (1) столбец ассиметричной сетки (asymmetric layout). Блок с классом .nest-two является последним блоком в разметке и занимает ширину в два (2) столбца.

Такая разметка создается с помощью следующего кода:

.nest-one{
  @include span(1 of (2 3 2) first);
}
.nest-two{
  @include span(2 of (2 3 2) last);
}

Как видим по исходному коду, при создании разметки нет необходимости указывать точную ширину (px,%) каждого блока. Благодаря Susy создание ассиметричной разметки (asymmetric layout) выполняется просто, с применением той теории, о которой только что говорилось. Достаточно только указать число столбцов, которое должен занимать каждый блок.

Более сложный пример разметки

Пример ассиметричной разметки, представленный в этой статье, достаточно простой. Более сложным случаем является создание адаптивной ассиметричной разметки (asymmetric layout).

В качестве примера могу привести образец ассиметричной разметки, созданной Nathan Ford с применением приложения GridsetApp. Этот образец является хорошим примером адаптивной страницы, которая дает представление о том, что может Susy.

Примечание переводчика: на этом самое существенное и интересное в этой статье заканчивается. Дальше идет реклама книги автора. Собственно, данная статья для этого и писалась, конечно. Но ради даже такого простого примера ассиметричной разметки (asymmetric layout) на Susy стоило превести этот пост.