От автора: можно уверенно сказать, что система сеток – одна из лучших частей Foundation. Система составляет костяк адаптивного дизайна фреймворка, с помощью которого вы можете строить совершенно любой дизайн, начиная от простых двухколоночных макетов и до многоуровневых интерактивных крупных дизайнов.
Сетка построена на адаптивной, плавающей системе из строк, колонок, смещений, классов очистки стилей (стандартный элемент во многих фреймворках). Система отлично себя показывает и довольно проста для начинающих дизайнеров, кто хочет быстро начать ее использовать для устройств с разными экранами, а также кто хочет улучшить UI от своего сайта. И в Foundation 6 была добавлена новая система.
Вашему вниманию представляется: Новая гибкая сетка
В Foundation 6 Zurb представили Flex Grid, опциональная замена стандартной сетке. Flex Grid, как вы могли догадаться, работает под управлением Flexbox. Вместо обтеканий и смещений в стандартных сетках новая система позволяет воспользоваться всеми преимуществами одного из самых мощных инструментов – свойствами макета в модели flexbox.
Небольшое предупреждение: Так как новая система работает из-под flexbox, то она будет работать только в поддерживающих flexbox браузерах. Если вам нужна поддержка старых браузеров IE8 и IE9, вам придется довольствоваться стандартной сеткой.
Flex Grid — необязательный инструмент
Zurb не поставляют фреймворк с Flex Grid по умолчанию – это опциональный компонент. Если вы работаете в Sass версии Foundation, найдите файл app.scss и откройте его. Внутри вы увидите выражения @include. Тут вам нужно удалить или закомментировать стандартную сетку и подключить Flex Grid, как показано ниже:
|
1 2 |
// @include foundation-grid; @include foundation-flex-grid; |
Если у вас не Sass версия, а свой билд, вы можете подключить flex grid через панель настроек на сайте и загрузить файл CSS.
Flex grid задумывался, как замена стандартной сетке, так что обоими вариантами одновременно воспользоваться не получится, так как у них общие классы типа .row и .column.
Если вы хотите использовать две сетки одновременно, вам придется установить Sass версию Foundation 6 и создать свою собственную сетку с помощью миксина от стандартной сетки. Так вы можете определить свою собственную структуру, а значит, использовать обе сетки в одном проекте (к примеру, можно назвать ряды .row-old, а колонки .column-old).
Базовый макет Flex Grid
Чтобы использовать новую сетку необходимо задать область из rows и columns и задать настройки размеров под каждый профиль устройства. Ниже базовая разметка для трехколоночной сетки:
|
1 2 3 4 5 |
<div class="row"> <div class="column small-12 medium-6 large-4">Column 1</div> <div class="column small-12 medium-6 large-4">Column 2</div> <div class="column small-12 medium-6 large-4">Column 3</div> </div> |
К .row и .columns можно добавлять и другие классы для изменения макета. Одно из удивительных свойств flexbox в том, что с его помощью очень легко контролировать порядок элементов. Со стандартными обтеканиями сортировка до определенного элемента, а потом сортировка оставшихся элементов по какому-то другому фактору была за гранью невозможного. В Foundation с помощью flexbox для сортировки элементов мы можем воспользоваться опциями source ordering. Для упорядочения каждой колонке colimn добавляется свойство order-{value}.
|
1 2 3 4 |
<div class="row"> <div class="column order-2">I come second!</div> <div class="column order-1">I come first!</div> </div> |
Более полезно свойство {size}-order-{value}, с помощью которого можно задать размер устройства, на котором мы хотим изменить порядок элементов. Размеры наследуются вверх, т.е. если задать small-order-1, то такой порядок применится к маленьким экранам, средним, большим и т.д.
|
1 2 3 4 5 6 7 8 |
<div class="row"> <div class="column small-order-1 medium-order-2"> I come first on small, but second on anything larger </div> <div class="column small-order-2 medium-order-1"> I come second on small, but first on anything larger </div> </div> |
В демо демонстрируется, как можно использовать свойства сортировки для изменения UI на разных устройствах.
Горизонтальное и вертикальное позиционирование
В стандартной сетке элементы тоже можно центрировать, но это бывает крайне трудно. Обычно это требует много времени или фокусов с margin. С flexbox же все просто – вы просто выставляете контент по обеим осям, горизонтальной и вертикальной.
Для начала необходимо добавить классы горизонтального выравнивания и/или вертикального выравнивания к элементу row. Так вы выровняете все элементы в строке, как вам необходимо. Если нет необходимости выравнивать все элементы, эти классы можно добавить к каждой ячейки по отдельности.
Для выравнивания по горизонтали необходимо добавить один из классов align-right, align-left, align-center, align-justify или align-spaced. К примеру, для создания равномерно распределенных пунктов меню, чтобы между ними было одинаковое расстояние, можно воспользоваться классом align-spaced.
|
1 2 3 4 5 |
<div class="row align-spaced"> <div class="column small-3">Home</div> <div class="column small-3">About</div> <div class="column small-3">Contact</div> </div> |
Так как внутри 12-ти колоночной сетки пространство добавляется к 9 ячейкам, то у нас будет 3 отступа слева от всех ячеек, равномерно распределенных на всю ширину.
Вертикальное выравнивания также не составляет труда. Это должно порадовать многих разработчиков (так как обычно кроме слез вертикальное выравнивание ничего не вызывает). Для выравнивания необходимо добавить один из поддерживаемых классов так же, как в предыдущем примере. Поддерживаемые классы — align-top, align-middle, align-bottom и align-stretch.
Если необходимо во всем ряду выровнять элементы по вертикали по центру, к row необходимо добавить класс align-middle.
|
1 2 3 4 5 6 7 8 9 |
<div class="row align-spaced"> <div class="column small-6"> I am a big big column with heaps of text. My siblings will be positioned in the center of the row based on my height. </div> <div class="column small-6"> I'm going to be vertically centered. </div> </div> |
То, что можно сделать с помощью flexbox не поддается воображению. Если вам понравились примеры с выравниванием, можете взглянуть не демо.
Пересмотренная Sass система сеток
Foundation grid – ключевой компонент в создании адаптивного дизайна. Это довольно стандартная сетка с поддержкой различной ширины и макетов под разные устройства.
В каждой версии фреймворка Zurb исправляли работу сетки. В новой версии они полностью пересмотрели основной миксин, и теперь сетку можно использовать различными способами.
В предыдущей версии вы могли задать количество колонок. У вас был выбор между стандартной 12-ти колоночной системой или любым другим количеством колонок. Вроде бы все было хорошо, но это означало, что, если вы хотели воспользоваться системой сеток, то вас ставили в рамки одной системы (все должно задаваться в 12-ти колоночном макете и т.д.).
В новой версии миксин был переработан, что позволяет вам с легкостью задавать элементы из нескольких сеток, каждый со своим макетом. К примеру, можно задать новую группу макетов с 18 колонками:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.row-listing { // строка из 18 колонок @include grid-row(18) { // основной элемент для контента страницы .primary { @include grid-column(10); } // используется для списка статей в блоге .secondary { @include grid-column(4); } // третий по значимости – для рекламы в сайдбарах .tertiary { @include grid-column(4); } } } |
Это существенное нововведение в систему сеток, которое поможет множеству людей настроить макет именно так, как они этого хотят.
Заключение
Flex Grid – та же самая всеми любимая стандартная сетка Foundation, только более гибкая и настраиваемая. Можно изменять порядок элементов, горизонтальное и вертикальное позиционирование и т.д. Если вы можете отказаться от старых браузеров типа IE8/IE9, то вы обязаны попробовать новую систему сеток в Foundation 6. Эта система сильно упростит ваш процесс разработки и позволит вам создавать по-настоящему гибкие макеты и дизайны.
Автор: Simon Codrington
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
