Большая привлекательность CSS-фреймворков (таких как Bootstrap и Foundation) заключается в том, что они поставляются с гибкой сеточной системой, готовой к работе. Недостатком является то, что вы должны быть довольны количеством их столбцов, шириной их желобов и всеми их классами в разметке. Что, если требования вашего проекта выходят за рамки стандартных сборных каркасов CSS? Эта статья покажет, как вы можете создавать и поддерживать свои собственные уникальные адаптивные сетки с двумя библиотеками Sass: Susy и Breakpoint.
Основы Сьюзи
Для более подробного ознакомления с использованием Susy для управления сетками, ознакомьтесь с этой статьей SitePoint или этой слайд-палубой . Мы просто дойдем до вершин, чтобы у вас был некоторый контекст для дальнейшего.
Все ваши настройки конфигурации сетки $susy на карте с именем $susy . Вы можете использовать пары ключ-значение на этой карте, чтобы установить максимальную ширину ( container ), количество columns ( columns ) и ширину gutters ( gutters ).
С помощью Susy вы задаете элемент контейнера для элементов сетки, используя mixin container() . Селектору, включающему этот миксин, будет назначена максимальная ширина из значения container в $susy с центром в левом и правом полях, установленном на auto , и заданным clearfix.
Каждый столбец внутри этого контейнера контролируется с помощью span() . Этот миксин обычно принимает три аргумента: span (количество родительских столбцов, которые он заполнит), layout (количество родительских столбцов, если оно отличается от значения по умолчанию) и location (first / alpha, last / omega или номер столбца).
$susy: ( container: 70em, columns: 12, gutters: 1/6 ); .main { @include container; } .content { @include span(8 of 12 first); } .sidebar { @include span(4 of 12 last); }
Если вы хотите заглянуть под капот более подробной сетки Сьюзи, вот вам суть Sassmeister для игры.
Основы точки останова
Если вы хотите подробно ознакомиться с тем, как использовать точку останова, плагин Sass для управления медиа-запросами, эта статья SitePoint должна ответить на большинство ваших вопросов. Опять же, мы рассмотрим некоторые основы для ознакомления.
Точка останова предоставляет единый мощный миксин для обработки практически любого вида медиа-запроса: breakpoint() . Если вы передадите микс в одном измерении (например, 960 пикселей), он будет использовать это число в качестве медиазапроса минимальной ширины. Если вы предоставите два измерения, он будет использовать их как значения min-width и max-width. Если вы передаете пару «ключевое слово / значение», вы можете создать любой медиазапрос, который вам нужен: высота, ориентация, разрешение и т. Д. Вы также можете передать несколько пар «ключевое слово / значение» для создания сложных запросов: просто заключите каждую пару в скобки:
.element { font-size: 1.3em; @include breakpoint((min-width 30em) (max-width 60em) (orientation portrait)) { font-size: 1.5em; } }
susy-breakpoint() : susy-breakpoint()
Теперь, когда у нас есть основы Susy & Breakpoint, давайте посмотрим, как они работают вместе, чтобы помочь нам быстро построить адаптивные макеты сетки. Если вы оба импортировали в свой проект, вы можете использовать susy-breakpoint() для объединения их функций.
susy-breakpoint() оборачивает медиа-запросы Breakpoint вокруг вывода сетки Сьюзи. Требуется два параметра (и необязательный третий параметр).
Первый параметр, который вы передадите в susy-breakpoint() это данные susy-breakpoint() вы планируете передать в точку останова. Эти данные передаются прямо в миксин Breakpoint и используются для генерации медиазапроса для этой части вашего кода.
Второй параметр — это сетка Сьюзи: в простейшем случае это может быть число: количество столбцов. Вы также можете передать ему карту, содержащую те же ключи, что и $susy . Этот столбец устанавливает «контекст» для всего, что рассчитывает Сьюзи внутри этого миксина. Например, если вы передадите «16» в качестве макета, все susy-breakpoint() и функции сетки Susy внутри susy-breakpoint() будут использовать 16 в качестве значения числа столбцов, независимо от того, какое значение columns находится в карте конфигурации $susy .
Если вы знакомы с концепцией переменных области видимости, это просто способ добавить новое число столбцов в текущий медиа-запрос. Фактически, если вы передадите карту, которая следует $susy , все значения в этой карте будут видны в контексте сгенерированного $susy .
Третий (необязательный) параметр для susy-breakpoint() — это значение точки запроса без запроса. Этот параметр позволяет обрабатывать резервные копии для браузеров, которые не поддерживают медиазапросы. Если вы включите $breakpoint-no-query-fallbacks и передадите класс в качестве этого третьего параметра, он будет использоваться как класс-оболочка для текущего селектора (вместо медиазапроса).
$breakpoint-no-query-fallbacks: true; .element { color: blue; @include susy-breakpoint(480px, $susy, '.no-mq') { color: red; } } // output .element { color: blue; } @media screen and (min-width: 480px) { .element { color: red; } } .no-mq .element { color: red; }
Примечание. В приведенном выше примере не используются сеточные миксины Susy внутри запроса: он просто демонстрирует, как использовать точку останова без запроса.
Одна контейнерная сетка с изменяющимися элементами колонны
Есть два способа управления адаптивными сетками. Вероятно, вы больше всего знакомы с первым: все измерения столбцов основаны на одном и том же количестве столбцов, а количество элементов изменяется на разных точках останова. Именно так работает почти каждый CSS-фреймворк. Давайте посмотрим, как мы можем создать это с помощью Susy и Breakpoint.
Первое, что нам нужно, это наша карта $susy и пара переменных точки останова. Мы также включим функцию без запроса точки останова.
$susy: ( container: 64em, columns: 12, gutters: 1/6 ); $bp-medium: 32em; $bp-large: 60em; $breakpoint-no-query-fallbacks: true;
После того, как наша карта настроена, мы объявим наш контейнерный элемент:
.container { @include container; }
Внутри этого контейнера мы настроим два наших дочерних элемента как полноразмерные промежутки. Это будет по умолчанию для маленьких экранов: «столбцы» располагаются вертикально.
.content { @include span(12 last); } .sidebar { @include span(12 last); }
Давайте перейдем к средним и крупным точкам останова. Мы сделаем это с помощью susy-breakpoint() . Мы $susy в качестве параметра макета. Мы также можем использовать 12 (значение columns в $susy ). Я знаю, это может показаться немного излишним, но позже мы увидим, насколько полезной может быть передача новой карты в качестве макета.
.content { @include span(12 last); @include susy-breakpoint($bp-medium, $susy) { @include span(6 first); } @include susy-breakpoint($bp-large, $susy) { @include span(8 first); } } .sidebar { @include span(12 last); @include susy-breakpoint($bp-medium, $susy) { @include span(6 last); } @include susy-breakpoint($bp-large, $susy) { @include span(4 last); } }
Теперь у нас есть базовая адаптивная сетка. На любом экране, меньшем 32em, содержимое и боковая панель будут иметь полную ширину и располагаться вертикально. На 32em эти элементы будут отображаться бок о бок на половине общей ширины. На 60em соотношение между их ширинами изменяется от 1/1 до 2/1. В 64em контейнер перестанет расширяться и будет центрирован внутри области просмотра.
Изменение сетки контейнера со стабильными пролетами колонн
Другой (и, по общему признанию, более сложный) способ настройки адаптивных сеток — установить фиксированные значения диапазона для столбцов и изменить свойства столбца контейнера. Для этого вам нужно изменить соотношения столбцов в каждой точке останова, используя список columns значении $susy карт типа $susy для каждой точки останова:
$susy: ( container: 70em, columns: 1, gutters: 1/16 ); $medium: ( columns: 1 1 ); $large: ( columns: 2 1 ); $bp-medium: 32em; $bp-large: 60em;
Помещение списка чисел в значение columns говорит Сьюзи создать ширину столбцов, соответствующую пропорциям этих чисел. Миксины span() будут определять размер элементов в соответствии с их пропорциями в зависимости от их расположения. Итак, columns: 1 1 создает два столбца равной ширины (точно так же, как columns: 2 ), в то время как columns: 2 1 создает два столбца и делает первый в два раза шире второго.
Чтобы использовать эти отношения, мы бы susy-breakpoint() и span() следующим образом:
.container { @include container; } .primary { @include span(1 at 1); @include susy-breakpoint($bp-medium, $medium) { @include span(1 at 1); } @include susy-breakpoint($bp-large, $large) { @include span(1 at 1); } } .secondary { @include span(1 at 1); @include susy-breakpoint($bp-medium, $medium) { @include span(1 at 2); } @include susy-breakpoint($bp-large, $large) { @include span(1 at 2); } }
Местоположение at обеспечивает магию: в большой точке останова первый столбец шире второго, поэтому при указании расположения Susy .primary сделать ширину первого числа в списке columns . Указание того, что элемент .secondary находится в местоположении 2 сообщает Susy, что оно должно соответствовать отношению второго числа в списке columns (и что это последний элемент, и его margin-right должно быть удалено). Мы должны повторить span() mixin внутри каждой susy-breakpoint() потому что Susy нужны новые измерения columns чтобы пересчитать проценты ширины в каждой точке останова. Испытайте это в реальной жизни с помощью этих сасмейстеров: один , два .
Вывод
Сьюзи и Точка останова делают здесь довольно сильную команду. Вы можете не только создавать сетки, которые настолько просты или сложны, насколько вам это необходимо, вы также можете изменять эти сетки настолько, насколько требуется вашему проекту в любой точке останова. Пожалуйста, задавайте любые дополнительные вопросы, которые у вас есть в комментариях, или оставьте комментарий, чтобы поделиться умной сеткой, которую вы создали с Susy и Breakpoint!