Foundation 6: Нова гнучка сітка

25

Від автора: можна впевнено сказати, що система сіток – одна з кращих частин 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, як показано нижче:

// @include foundation-grid;
@include foundation-flex-grid;

Якщо у вас не Sass версія, а свій білд, ви можете підключити flex grid через панель налаштувань на сайті та завантажити файл CSS.

Foundation 6: Нова гнучка сітка

Flex grid замислювався як заміна стандартної сітки, так що обома варіантами одночасно скористатися не вийде, так як у них загальні класи типу .row і .column.

Якщо ви хочете використовувати дві сітки одночасно, вам доведеться встановити Sass версію Foundation 6 і створити свою власну сітку з допомогою міксина від стандартної сітки. Так ви можете визначити свою власну структуру, а значить, використовувати обидві сітки в одному проекті (приміром, можна назвати ряди .row-old, а колонки .column-old).

Базовий макет Flex Grid

Щоб використовувати нову сітку необхідно задати область з rows і columns і задати налаштування розмірів під кожен профіль пристрою. Нижче базова розмітка для трьохколонковою сітки:

Column 1
Column 2
Column 3

До .row і .columns можна додавати й інші класи для зміни макета. Одне з дивовижних властивостей flexbox в тому, що з його допомогою дуже легко контролювати порядок елементів. Зі стандартними обтеканиями сортування до певного елемента, а потім сортування решти елементів по якомусь іншому фактору була за межею неможливого. У Foundation з допомогою flexbox для сортування елементів ми можемо скористатися опціями source ordering. Для впорядкування кожній колонці colimn додається властивість order-{value}.

I come second!
I come first!

Більш корисне властивість {size}-order-{value}, з допомогою якого можна задати розмір пристрою, на якому ми хочемо змінити порядок елементів. Розміри успадковуються вгору, тобто якщо задати small-order-1, то такий порядок застосується до маленьких екранів, середнім, великим і т. д.

I come first on small, but on second anything larger
I come on second small, but first on anything larger

У демо демонструється, як можна використовувати сортування для зміни UI на різних пристроях.

Горизонтальне і вертикальне позиціонування

У стандартній сітці елементи теж можна центрувати, але це буває вкрай важко. Зазвичай це вимагає багато часу або фокусів з margin. З flexbox ж все просто – ви просто виставляєте контент по обох осях, горизонтальної та вертикальної.

Для початку необхідно додати класи горизонтального вирівнювання та/або вертикального вирівнювання елементу row. Так ви вирівняє всі елементи в рядку, як вам необхідно. Якщо немає необхідності вирівнювати всі елементи, ці класи можна додати до кожної комірки окремо.

Для вирівнювання по горизонталі необхідно додати один із класів align-right, align-left, align-center, align-justify або align-spaced. Наприклад, для створення рівномірно розподілених пунктів меню, щоб між ними було однакову відстань, можна скористатися класом align-spaced.

Home
About
Contact

Так як усередині 12-ти колонковою сітки простір додається до 9 клітинок, то в нас буде 3 відступу ліворуч від всіх клітинок, рівномірно розподілених на всю ширину.

Вертикальне вирівнювання також не становить праці. Це повинно порадувати багатьох розробників (так як зазвичай, крім сліз вертикальне вирівнювання нічого не викликає). Для вирівнювання необхідно додати один з підтримуваних класів так само, як у попередньому прикладі. Підтримувані класи — align-top, align-middle, align-bottom та align-stretch.
Якщо необхідно у всьому ряду вирівняти елементи по вертикалі по центру, до row необхідно додати клас align-middle.

I am a big big column with heaps of text. My will be siblings
positioned in the center of the row based on my height.
I’m going to be vertically centered.

Те, що можна зробити за допомогою flexbox не піддається уяві. Якщо вам сподобалися приклади з вирівнюванням, можете поглянути не демо.

Переглянута Sass система сіток

Foundation grid – ключовий компонент у створенні адаптивного дизайну. Це досить стандартна сітка з підтримкою різної ширини і макетів під різні пристрої.

Foundation 6: Нова гнучка сітка

У кожній версії фреймворку Zurb виправляли роботу сітки. У новій версії вони повністю переглянули основний міксин, і тепер сітку можна використовувати різними способами.

У попередній версії ви могли задати кількість колонок. У вас був вибір між стандартною 12-ти колонковою системою або будь-яким іншим кількістю колонок. Начебто все було добре, але це означало, що, якщо ви хотіли скористатися системою сіток, то вас ставили в рамках однієї системи (все повинне задаватися в 12-ти колоночном макеті і т. д.).

У новій версії міксин був перероблений, що дозволяє вам з легкістю задавати елементи з декількох сіток, кожен зі своїм макетом. Наприклад, можна задати нову групу макетів з 18 колонками:

.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. Ця система сильно спростить ваш процес розробки і дозволить вам створювати по-справжньому гнучкі макети і дизайни.