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

Reading time ~6 minutes

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

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


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

1
columns
. Но на тот момент я был полностью доволен системой Susyone и мне очень не хотелось переключаться на другой инструмент.

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

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

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

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

Asymmetric Layout Basic Setup

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

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

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

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

$list : 1 2 3 2 1;

Внутри данного списка

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

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

1
output: isolate
:

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

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

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

Как правило, первым важным шагом является добавление миксина

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

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

Asymmetric Layout

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

Так как в глобальных настройках Susy используется параметр

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

Параметр

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

  • 1
    
    first
    
  • 1
    
    last
    
  • 1
    
    at <number>
    

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

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

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

1
.sidebar-one
,
1
.content
и
1
.sidebar-two
.

Блок

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

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

Блок

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

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

Блок

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

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

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

1
.nest-one
и
1
.nest-two
временно опустим для более ясной картины:

Созданная Asymmetric Layout

Создание разметки для вложенных блоков

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

Оба наших блока расположены внутри блока

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

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

1
span
.

Блок с классом

1
.nest-one
является первым блоком в разметке и занимает ширину в один (1) столбец ассиметричной сетки (asymmetric layout). Блок с классом
1
.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 стоило превести этот пост.


Mangling Angular

Angular Builder поддерживает параметры среды:- NG_BUILD_MANGLE- NG_BUILD_MINIFY- NG_BUILD_BEAUTIFYМожно установить их при запуске скрипта...… Continue reading

Constructor parameter without access modifier

Published on February 04, 2024

RxJs and DestroyRef Provider

Published on January 24, 2024