- PVSM.RU - https://www.pvsm.ru -
Susy — тулкит для создания сеток, с помощью которого можно решать множество разнообразных задач по расположению контента. В отличии от фреймворков, таких как Bootstrap или Foundation, Susy не предоставляет предопределенных классов для использования, а только лишь набор функций и миксин, после знакомства с которыми можно сделать много большее.
В этой публикации будут рассмотрены основные возможности Susy на примерах, а так же будет добавлен вывод с использованием flexbox.
Susy может использоваться как дополнение к Compass, но это не является основным требованием. Поэтому можно обойтись одним SASS, при этом сделав импорт исходников. А здесь все примеры будут на CodePen, который уже месяца как два имеет встроенную поддержку.
Может оказаться, что все те возможности, которые предоставляет этот инструмент, окажутся лишними и надуманными для решения задачи.
Пример:
<div class="grid">
<div class="col-2-3">
Main Content
</div>
<div class="col-1-3">
Sidebar
</div>
</div>
Использование Susy тут явно неоправданно. Don’t Overthink It Grids [1].
Хочу обратить внимание на то, что не буду дублировать сюда фрагменты SASS кода, где задействуется тулкит. Поэтому смотрите пример, там я всю основную часть вынес наверх.
Здесь использовался следующий функционал Susy:
В этом описании я старался показать основное назначение средств тулкита, избегая подробностей о различных настройках и особенностях реализации. Первое всегда можно посмотреть в документации [3], а второе в репозитории [4] на GitHub.
Этого для “достаточно полного” обзора будет явно мало, поэтому рассмотрим некоторые части более подробно. Но хотелось бы чтобы это все не обратилось в перевод документации.
В зависимости от конфигурации мы получаем различный вывод от миксинов и функций. И так получается, что чуть ли не весь результат может контролироваться через эти настройки, при этом даже не затрагивая параметры. Поэтому понимание конфигурации — понимание работы тулкита и его возможностей.
Есть два основных способа задания конфигурации:
$susy: (
flow: ltr,
math: fluid,
output: float,
gutter-position: after,
container: auto,
container-position: center,
columns: 4,
gutters: .25,
column-width: false,
global-box-sizing: content-box,
last-flow: to,
debug: (
image: hide,
color: rgba(#66f, .25),
output: background,
toggle: top right,
),
use-custom: (
background-image: true,
background-options: false,
box-sizing: true,
clearfix: false,
rem: true,
)
);
Есть два типа данного синтаксиса: layout и span.
Пример:
12 столбцов, коэффициент отступа 0.25, ширина в процентах, фоновое изображение для отладки
$layout: 12 .25 fluid show
2 колонки начиная с 4-ой позиции асимметричной сетки, без отступов
$span: 2 at 4 of (1 2 3 2 1) no-gutters
можно и так, чтобы в list был map
$span: 2 at 4 (columns: (1 2 3 2 1), gutters: no-gutters)
На первый взгляд может показаться что такое задание криптографично, но после нескольких примеров это будет выглядеть весьма натурально. Более полное описание можно посмотреть в разделе Shorthand [5] документации.
Теперь давайте пробежимся по основным свойствам, которые есть в конфигурации:
span(1 of 2)
span(6 of 12)
Здесь можно ожидать одинакового результата, но это не так. И дело как раз в отступах, в том что их размер зависит от размера колонок и коэффициента (коэффициент в этих случаях одинаков).
Тут действует следующая закономерность:
Чем больше колонок задано, тем каждая колонка меньше по ширине. А чем меньше колонка — тем меньше отступ.
Получится что в первом случае отступ будет больше, чем во втором. И значит ширина элемента в первом случае будет меньше, чем во втором. Это будет показано дальше на примере.
В примере хочется обратить внимание на независимое от других элементов позиционирование, при котором теряется горизонтальный поток. Поэтому необходимо указывать позицию для вывода (location) после at:
span(2 of 4 at 1 isolate)
И получается, что мы можем задавать порядок расположения прямо в CSS. Справа вверху есть кнопка backward, которая показывает данную возможность. Но order в flexbox конечно же будет лучше, потому что он был сделан специально для этого, да и с isolate мы можем менять порядок только у элементов одной строки.
В отличии от привычного случая, когда все колонки равны, асимметричная сетка позволяет задавать колонки разного размера. Сетка задается коэффициентами, и отношение ширины колонок равно отношению коэффициентов. Здесь тоже нужно указывать позицию для вывода (location) после at, для того чтобы можно было расcчитать ширину элемента.
элемент занимает 2 колонки, начиная с первой позиции (3 2)
span(2 at 1 of (3 2 3))
элемент занимает 1 колонку, начиная с третьей позиции (3)
span(1 at 3 of (3 2 3))
А теперь пример. В статье о сетках конечно же следовало упомянуть о золотом сечении. Можно было бы сделать две колонки с асимметрией как (1 1.618), но это неинтересно. Нужно больше прямоугольников! Поэтому есть пример использования асимметричной сетки с биномиальными коэффициентами, которые как раз сюда подходят. Треугольник Паскаля:
В скрипте и стилях в самом начале есть переменная timeout. Ее можно сбросить в false, тем самым увеличив количество строк. Последнее время мне выдавался timeout на препроцессинг стилей, поэтому уменьшил количество.
В этом примере глобально включен debug inspect, вывод которого можно увидеть в инспекторе.
Пример по порядку:
Flexbox предоставляет много интересных возможностей для расположения контента, но основной проблемой здесь был выбор общих и очевидных вариантов использования. И скажу, что получилось найти таких вариантов не так много, и они вполне могут быть сделаны старыми способами.
Вариант применения justify-content в Susy сразу не имеет смысла, потому что тулкит основывается на использовании всего пространства. Так же из списка исключаем flex-grow и flex-shrink.
Возможность переноса элементов на другие строки не подходит для работы с системой сеток. Минус flex-wrap. И align-content тоже.
Как использовать column и column-reverse тоже неизвестно.
Остальное остается. Вот как это можно применить:
Теперь в $susy-keywords изменился output и был добавлен align:
$susy-keywords: (
container: auto,
math: static fluid,
output: isolate float flexbox,
align: stretch start center end baseline,
container-position: left center right,
flow: ltr rtl,
gutter-position: before after split inside inside-static,
box-sizing: border-box content-box,
span: full,
edge: first alpha last omega full,
spread: narrow wide wider,
gutter-override: no-gutters no-gutter,
role: nest,
clear: break nobreak,
debug image: show hide show-columns show-baseline,
debug output: background overlay,
);
На этом все. Make grids, not war.
Автор: shy_frog
Источник [13]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/sass/73024
Ссылки в тексте:
[1] Don’t Overthink It Grids: http://css-tricks.com/dont-overthink-it-grids/
[2] Image: http://codepen.io/markuper/pen/dFfKp
[3] документации: http://susy.readthedocs.org/en/latest/
[4] репозитории: https://github.com/ericam/susy
[5] разделе Shorthand: http://susy.readthedocs.org/en/latest/shorthand/
[6] писали: http://ejohn.org/blog/sub-pixel-problems-in-css/
[7] было найдено: http://www.palantir.net/blog/responsive-design-s-dirty-little-secret
[8] здесь: http://johnalbin.github.io/fluid-grid-rounding-errors/
[9] Image: http://codepen.io/markuper/pen/BmbtC
[10] Image: http://codepen.io/markuper/pen/LKmkf
[11] Image: http://codepen.io/markuper/pen/jBAKw
[12] Image: http://codepen.io/markuper/pen/prnAh
[13] Источник: http://habrahabr.ru/post/241844/
Нажмите здесь для печати.