В предыдущей статье были рассмотрены краткие основы плагина Susy 2 и на примере создана с помощью Susy довольно сложная HTML-разметка.
В этой статье будет углубленное изучение плагина Susy 2. Сегодня предстоит изучить вопрос, каким образом можно легко и быстро создавать RWD (Responsive Web Design) с помощью Susy 2.
Если вы начали читать эту статью, но представления не имеете, что такое Susy 2 вообще, то вам стоит обратиться к предыдущей статье “Краткое руководство по Susy 2” - это стоит затраченного времени!
Контрольные точки (breakpoints)
По умолчанию, плагин Susy 2 не имеет в своем составе миксина для создания контрольных точек
. Наоборот, разработчики рекомендуют установить отдельно плагин Breakpoint и использовать его для создания медиа-запросов 1
breakpoints
.1
media-queries
Поэтому сначала произведем установку и импортирование этого плагина.
Прим. переводчика - имеется отдельная статья по установке и работе с плагином Breakpoint в Sass, расположенная по этому адресу - Медиа-запросы Breakpoint в Sass.
Плагин Breakpoint требует для своей работы наличия библиотеки Compass. Поэтому, сначала необходимо выполнить две команды по установке Compass и затем Breakpoint:
Прим. переводчика: непонятно, что автор имел ввиду, но плагин Breakpoint для своей работы не нуждается в наличии библиотеки Compass. А вот препроцессор Sass ему необходим однозначно.
Затем необходимо подключить плагин Breakpoint в конфигурационном файле
и в файле 1
config.rb
:1
style.scss
Теперь все готово для того, чтобы двигаться дальше.
Работаем с плагином Breakpoint
Если сказать одним предложением, что мне нравиться в использовании плагина Breakpoint, то это легкость, с которой можно создавать контрольные точки в веб-дизайнах под мобильные устройства. Давайте посмотрим, как это делается.
Для того, чтобы воспользоваться плагином Breakpoint, необходимо вызвать одноименный миксин и вставить его в код, передав требуемые аргументы. Эти аргументы преобразуются плагином Breakpoint в соответствующие медиа-запросы. Общий синтаксис миксина таков:
Прелесть плагина Breakpoint в том, что если вы передаете ему только один аргумент, то он автоматически преобразуется в
. Этот аргумент должен быть значением минимальной ширины (1
mobile-first
) разрабатываемого вами сайта, его контрольной точкой:1
min-width
… что при компиляции в CSS-код даст результат:
Миксин Breakpoint очень гибкий и с помощью него при необходимости можно создавать сложные медиа-запросы.
Использование Breakpoint совместно с Susy 2
Предположим, необходимо создать CSS-сетку, которая будет меняться в определенной контрольной точке
. Изначально все блоки CSS-сетки должны занимать всю ширину окна браузера в 900px. При превышении значения ширины окна в 900px CSS-сетка должна преобразовываться в 10-колоночный макет сайта, который был рассмотрен и создан в предыдущей статье.1
breakpoint
Прим. переводчика - все в точности с принципом MobileFirst.
Для того, чтобы осуществить такую задачу, достаточно просто добавить нужную контрольную точку
в уже существующую таблицу стилей SCSS.1
breakpoint
В конкретном случае это будет выглядеть таким образом:
То есть, для контрольной точки
создаются правила построения CSS-сетки с использованием плагина Susy 2. Если ширина окна браузера будет меньше 900px, все блоки будут располагаться на всю ширину вертикально (по умолчанию - ведь это и есть нормальный поток). При ширине окна больше 900px подключиться плагин Susy 2 и преобразует CSS-шаблон в 10-колоночный вид для Desktop. Все сделано с учетом принципа MobileFirst.1
min-width: 900px
Готовый пример переработанного кода можно посмотреть здесь - Susy 2 + Breakpoint.
Все выглядит достаточно просто и работает нормально. Но что, если требуется решить чуть более сложную задачу?
Примечание автора: Если вам не нравиться использовать контрольные точки с помощью плагина Breakpoint, вы можете свободно применять старые добрые медиа-запросы
, как это делается в CSS.
1 media queries
Добавляем несколько контрольных точек в Susy 2
Допустим, стоит задача создать еще одно состояние шаблона, промежуточное между состоянием “Mobile View” и состоянием “Desktop View”. Необходимо, чтобы при переходе от мобильного экрана к экрану монитора появилось еще одно состояние для планшетных компьютеров “Tablet View”, с отдельной информационной колонкой справа:
Этот случай выглядит немного сложнее, чем предыдущий. Главным образом потому, что блок
меняет свое положение и перемещается слева направо. Каким же образом можно осущесвить подобный маневр? Здесь необходимо применить небольшую хитрость.1
column_1
Немного проанализируем будущий шаблон Tablet View для планшетного дизайна. В нем блоки
и 1
column_1
будут занимать 2 колонки из общих 6 колонок; в тоже время как блок 1
column_3
будет занимать 4 колонки из 6. Кроме того, блок 1
column_2
будет располагаться над блоком 1
column_1
.1
column_3
Вся хитрость заключается в миксине
(прим. переводчика: логично предположить, если до этого момента внимательно изучался результирующий CSS-код работы плагина Susy 2. Вот и profit чтения исходных кодов страницы!).1
last
Давайте взглянем на готовый SCSS-код и сразу многое станет понятно:
Обратите внимание, что для блоков
и 1
.column_1
изменилась их ширина и добавился миксин 1
.column_3
. Если взглянуть на скомпилированный CSS-код, то увидим, что для этих блоков задано “плавание” вправо и убран правый 1
last
:1
margin
В то же время, для блока
изменилась только его ширина, а “плавание” осталось прежним - влево. Вот в этом и заключается маленький секрет изменения раскладки блоков в шаблоне:1
.column_2
В блоке
также были произведены изменения ширины некоторых блоков с тем, чтобы шаблон в этом виде максимально соответсвовал своему предназначению - использованию на планшетных компьютерах. В частности, была увеличена ширина блоков 1
.column_2
, 1
.column_2_2_1
, 1
.column_2_2_2
для того, чтобы ими было удобно пользоваться на небольшом экране.1
.column_2_4
Полный код получившегося примера можно посмотреть здесь - Susy 2 + Breakpoint = Mobile View + Tablet View + Desktop View.
Миксин Susy-Breakpoint
Плагин Susy 2 имеет в своем составе дополнительный миксин
. Цель создания и применения этого миксина - сокращенная форма записи кода контрольных точек в Sass, в точности следуя принципу этого препроцессора - DRY.1
susy-breakpoint
Чтобы быть более понятным, приведу ниже кусочек кода, написанный с помощью миксина
и точно такой же кусочек кода, написаный без этого миксина, как это делалось ранее в этой статье:1
susy-breakpoint
Видим, что миксин
действительно использует сокращенную запись, в которой первый аргумент - это значение 1
susy-breakpoint
(контрольной точки), а второй аргумент - число колонок, на которое разбита ширина шаблона.1
breakpoint
Тогда в миксине
достаточно указать число колонок из общего числа (которое равно 6), которое должен занимать указанный элемент. И что он является последним 1
span
с своем ряду (как дополнение).1
last
Приведем ниже измененый SCSS и CSS-код нашего разрабатываемого примера, с учетом использования миксина
:1
susy-breakpoint
Лично я предпочитаю использовать первый метод, с применением плагина Breakpoint (прим. переводчика: мне он также кажется более наглядным и интуитивно понятным). Естественно, можно с одинаковым успехом пользоваться обоими сопособами. Все зависит от того, какой вам больше нравиться и легче применять на практике.
В этом участке примеры вы, внимательный читатель, могли заметить, что допущена маленькая неточность, упущение. Связано оно с тем, что плавающему контейнеру разрешено занимать всю ширину окна браузера, даже если оно слишком большое. Давайте исправим этот недостаток.
Ограничение блока-контейнера по ширине
Так как в этом примере используется плавающий контейнер, то ограничить его по ширине очень просто:
В результате будет произведено ограничение блока с классом
по максимальной ео ширине:1
.container
Точно такого же результата можно добиться, если просто записать:
К сожалению, точно также нельзя поступить в случае с CSS-сетками фиксированной ширины
, потому что плагин Susy 2 производит все необходимые математические вычисления в CSS-сетке и расчет максимальной ширины блока-контейнера этой же CSS-сетки одновременно. Для построения CSS-сетки с фиксированной шириной необходим другой способ.1
static grid
Но рассмотрение этого способа оставим на следующий раз, так как на сегодня уже достаточно.
Окончательный результат рассмотренного в этой статье шаблона можно посмотреть здесь - Susy + Breakpoint = Final.
Данная статья является вольным переводом и обработкой оригинала - A Complete Tutorial to Susy 2 (Part 2).