Краткое введение в Susy 2 (Часть 2)

В предыдущей статье были рассмотрены краткие основы плагина Susy 2 и на примере создана с помощью Susy довольно сложная HTML-разметка.

В этой статье будет углубленное изучение плагина Susy 2. Сегодня предстоит изучить вопрос, каким образом можно легко и быстро создавать RWD (Responsive Web Design) с помощью Susy 2.

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

Контрольные точки (breakpoints)

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

Поэтому сначала произведем установку и импортирование этого плагина.

Прим. переводчика - имеется отдельная статья по установке и работе с плагином Breakpoint в Sass, расположенная по этому адресу - Медиа-запросы Breakpoint в Sass.

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

Прим. переводчика: непонятно, что автор имел ввиду, но плагин Breakpoint для своей работы не нуждается в наличии библиотеки Compass. А вот препроцессор Sass ему необходим однозначно.

Затем необходимо подключить плагин Breakpoint в конфигурационном файле и в файле :

Теперь все готово для того, чтобы двигаться дальше.

Работаем с плагином Breakpoint

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

Для того, чтобы воспользоваться плагином Breakpoint, необходимо вызвать одноименный миксин и вставить его в код, передав требуемые аргументы. Эти аргументы преобразуются плагином Breakpoint в соответствующие медиа-запросы. Общий синтаксис миксина таков:

Прелесть плагина Breakpoint в том, что если вы передаете ему только один аргумент, то он автоматически преобразуется в . Этот аргумент должен быть значением минимальной ширины ( ) разрабатываемого вами сайта, его контрольной точкой:

… что при компиляции в CSS-код даст результат:

Миксин Breakpoint очень гибкий и с помощью него при необходимости можно создавать сложные медиа-запросы.

Использование Breakpoint совместно с Susy 2

Предположим, необходимо создать CSS-сетку, которая будет меняться в определенной контрольной точке . Изначально все блоки CSS-сетки должны занимать всю ширину окна браузера в 900px. При превышении значения ширины окна в 900px CSS-сетка должна преобразовываться в 10-колоночный макет сайта, который был рассмотрен и создан в предыдущей статье.

Прим. переводчика - все в точности с принципом MobileFirst.

Для того, чтобы осуществить такую задачу, достаточно просто добавить нужную контрольную точку в уже существующую таблицу стилей SCSS.

В конкретном случае это будет выглядеть таким образом:

То есть, для контрольной точки создаются правила построения CSS-сетки с использованием плагина Susy 2. Если ширина окна браузера будет меньше 900px, все блоки будут располагаться на всю ширину вертикально (по умолчанию - ведь это и есть нормальный поток). При ширине окна больше 900px подключиться плагин Susy 2 и преобразует CSS-шаблон в 10-колоночный вид для Desktop. Все сделано с учетом принципа MobileFirst.

Готовый пример переработанного кода можно посмотреть здесь - Susy 2 + Breakpoint.

Все выглядит достаточно просто и работает нормально. Но что, если требуется решить чуть более сложную задачу?

Примечание автора: Если вам не нравиться использовать контрольные точки с помощью плагина Breakpoint, вы можете свободно применять старые добрые медиа-запросы , как это делается в CSS.

Добавляем несколько контрольных точек в Susy 2

Допустим, стоит задача создать еще одно состояние шаблона, промежуточное между состоянием “Mobile View” и состоянием “Desktop View”. Необходимо, чтобы при переходе от мобильного экрана к экрану монитора появилось еще одно состояние для планшетных компьютеров “Tablet View”, с отдельной информационной колонкой справа:

Этот случай выглядит немного сложнее, чем предыдущий. Главным образом потому, что блок меняет свое положение и перемещается слева направо. Каким же образом можно осущесвить подобный маневр? Здесь необходимо применить небольшую хитрость.

Немного проанализируем будущий шаблон Tablet View для планшетного дизайна. В нем блоки и будут занимать 2 колонки из общих 6 колонок; в тоже время как блок будет занимать 4 колонки из 6. Кроме того, блок будет располагаться над блоком .

Вся хитрость заключается в миксине (прим. переводчика: логично предположить, если до этого момента внимательно изучался результирующий CSS-код работы плагина Susy 2. Вот и profit чтения исходных кодов страницы!).

Давайте взглянем на готовый SCSS-код и сразу многое станет понятно:

Обратите внимание, что для блоков и изменилась их ширина и добавился миксин . Если взглянуть на скомпилированный CSS-код, то увидим, что для этих блоков задано “плавание” вправо и убран правый :

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

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

Полный код получившегося примера можно посмотреть здесь - Susy 2 + Breakpoint = Mobile View + Tablet View + Desktop View.

Миксин Susy-Breakpoint

Плагин Susy 2 имеет в своем составе дополнительный миксин . Цель создания и применения этого миксина - сокращенная форма записи кода контрольных точек в Sass, в точности следуя принципу этого препроцессора - DRY.

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

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

Тогда в миксине достаточно указать число колонок из общего числа (которое равно 6), которое должен занимать указанный элемент. И что он является последним с своем ряду (как дополнение).

Приведем ниже измененый SCSS и CSS-код нашего разрабатываемого примера, с учетом использования миксина :

Лично я предпочитаю использовать первый метод, с применением плагина Breakpoint (прим. переводчика: мне он также кажется более наглядным и интуитивно понятным). Естественно, можно с одинаковым успехом пользоваться обоими сопособами. Все зависит от того, какой вам больше нравиться и легче применять на практике.

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

Ограничение блока-контейнера по ширине

Так как в этом примере используется плавающий контейнер, то ограничить его по ширине очень просто:

В результате будет произведено ограничение блока с классом по максимальной ео ширине:

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

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

Но рассмотрение этого способа оставим на следующий раз, так как на сегодня уже достаточно.

Окончательный результат рассмотренного в этой статье шаблона можно посмотреть здесь - Susy + Breakpoint = Final.

Данная статья является вольным переводом и обработкой оригинала - A Complete Tutorial to Susy 2 (Part 2).

"Back-end for front-end" - сервис-прослойка между фронтом и бэком, который обращается к микросервисам и собирает из них данные в удобной . … Continue reading