Створіть свою систему дизайну, частина 2: Сітка та макет

Вибір способу обробки макетів та розміщення вмісту - це, мабуть, одне з перших рішень, які ви приймете, будуючи систему дизайну.

Визначення сітки означає створення системи для структурування вашого вмісту, будь-якого компонента чи макета сторінки.

У цій статті ми розберемося, як можна реалізувати сітку та як деякі методи CSS можна використовувати для створення конкретних макетів.

Ось що ми будемо висвітлювати:
1) Макет із автоматично сформованою кількістю стовпців - за допомогою CSS Grid;
2) Одновимірний макет - за допомогою Flexbox;
3) двовимірний макет - за допомогою CSS Grid;
4) Двовимірний макет із елементами, що перекриваються - за допомогою CSS Grid.

Ця стаття є частиною серії про системи дизайну, натхненну нашою бібліотекою веб-компонентів. Бібліотека спирається на міцну систему глобальних CSS. Тож це ми ділимось тим, що ми дізналися, встановлюючи глобальний стиль нашої бібліотеки!

Серія статей:
- Частина 1: Типографія
- Частина 2: Сітка та макет
- Частина 3: Кольори
- Частина 4: Пробіли
- Частина 5: Ікони
- Частина 6: Кнопки

1 - Макет із автоматично сформованою кількістю стовпців

Скажімо, у вас є галерея продуктів, яку ви хочете викласти в сітку: всі ваші предмети повинні мати однакову ширину (це екземпляри одного компонента "продукт", тому вони мають однаковий розмір) і мають мінімальну ширину щоб конструкція не ламалася; припустимо, що ви хочете, при різних розмірах екрана, максимальну кількість елементів у рядку; щось на зразок бібліотеки CodyHouse (зміни розміру сторінки, щоб побачити зміну кількості елементів).

Ідеально було б знайти спосіб автоматичного визначення цієї максимальної кількості елементів без необхідності додавання нового CSS-коду при різних медіа-запитах.

Це можна зробити за допомогою CSS Grid.

Почнемо зі створення сітки mixin (ми будемо використовувати її також для макетів 3 і 4).

Цей мікс використовується для ініціалізації контейнера з сіткою (із відображенням сітки) та встановлення зазору сітки (який є вільним простором між двома сусідніми елементами).

Ми включили код CSS Grid всередину правила @supports для націлювання на браузери, які підтримують Grid (не залишаючи також браузерів, які підтримують стару специфікацію CSS Grid, наприклад IE 11).

Тепер ми можемо визначити міксин, який створить нашу галерею; мінімальна ширина елементів буде єдиним аргументом цієї суміші:

Функція minmax дозволяє нам встановити мінімальну ширину для наших елементів, в той час як функція повторення () піклується про фактичне створення сітки.

Тепер ми можемо використовувати такі міксини так:

Ось приклад таких сумішей в дії:

Визначені нами суміші не працюватимуть в IE та старіших версіях Edge (<= 15). Ваша галерея все ще буде доступною, але ваші предмети відображатимуться по одному в ряд (100% ширина).

Якщо вам потрібно забезпечити кращу віддачу, тоді ви можете використовувати властивість float для відтворення галереї, але ви не зможете змінити кількість елементів у рядку для різних розмірів екрана: вам потрібно буде встановити фіксовану кількість елементів у рядку (це число буде передано як другий аргумент до gridAuto () mixin).

Ось що таке сітка Mixin з доповненням:

Властивості CSS, визначені в праві @supports, застосовуються, коли браузер підтримує CSS Grid (нова специфікація); в той час як властивості, визначені за межами @supports, застосовуються у всіх браузерах (і саме тому всередині правила @supports нам довелося додати деякий додатковий стиль, щоб перезаписати ці властивості).

СіткаAuto () mixin стає:

Тепер Mixin приймає два аргументи: перший - це мінімальна ширина елементів у галереї (такий самий, як і раніше - він буде використовуватися лише в тому випадку, якщо браузери підтримують CSS Grid), другий (який є необов'язковим - значення за замовчуванням становить 3 ) - це кількість елементів на рядок у веб-переглядачах, які не підтримують сітку CSS (де застосовується резервний запас).

2— Одновимірна компонування

Це, мабуть, найпростіший макет, який ми можемо створити: у нас є елементи, які ми хочемо розташувати в стовпцях, з можливістю налаштувати їх ширину і все ще мати можливість розподілити простір між ними однаково.

Є кілька прийомів, які ми можемо використовувати для реалізації такого типу компонування. Ми будемо використовувати Flexbox у поєднанні з класами утиліти для налаштування ширини елементів.

Такий підхід існує вже давно. Це зручно, але якщо ви не хочете використовувати утилітні класи у своєму HTML (щось на зразок col - 1, col - 5,…), то інший метод - той, який я описав у розділі 3, де ми створюємо той самий макет за допомогою CSS Grid.

Перш ніж визначати наші класи сітки, давайте встановимо змінну, яку ми використовуватимемо як розрив сітки:

Давайте визначимо клас для нашого контейнера з сіткою:

Ми ініціалізуємо наш контейнер flex (використовуючи flex flex) і дозволяємо дітям перемотатися на кілька ліній, якщо потрібно (використовуючи властивість flex-wrap).
Від'ємні поля додаються для збалансування прокладки, яку ми використовуємо для створення сітки розриву (див. Визначення класу .col нижче), щоб між елементом .flex-grid та його контейнером не залишалося порожнього простору.

Наші елементи сітки матимуть клас .col:

Ми використовуємо прокладку, щоб створити зазор між елементами та фоновим кліпом, щоб колір / зображення елемента .col не було застосовано до прокладки (залишаючи проміжок видимим).

Вам не потрібно використовувати властивість фонового кліпу, якщо ви не плануєте додавати фоновий колір / зображення до свого .col елемента (або якщо у елемента .col є дочірня, ви можете застосувати цей стиль фону до).

За замовчуванням усі .col елементи мають 100% ширину (flex-основа 100%). Ми можемо використовувати класи для зміни цього значення ширини:

Функція круглої ширини використовується для округлення ширини стовпців до числа з двома знаками після коми (це запобігає розбитці макета в IE).

Це створює класи .col - 1 до .col - 12 (ви можете змінити значення змінної $ grid-column, якщо не використовуєте сітку 12 одиниць).

Якщо ви хочете створити макет з двома елементами, перший займає 9 з 12 доступних стовпців, а останній три інші, ви можете використовувати щось на зразок:

Ви також можете визначити різні класи для різних медіа-запитів, якщо ви хочете змінити ширину елементів при різних розмірах екрана. Щось на зразок:

Ось приклад гнучких класів у дії:

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

3 - двовимірна компонування

У макеті 2 ми розглянули випадок, коли нам потрібно було контролювати ширину елементів нашого ряду. Ми взагалі не враховували висоту елементів.

Якщо ми хочемо створити двовимірний макет, де ми також можемо контролювати висоту наших елементів, то CSS Grid - це, мабуть, найкраще рішення.

Ось приклад компонування, яке ви можете створити за допомогою цієї методики:

Ми будемо використовувати повторно сітки mixin (визначені в розділі 1) і додамо другий mixLayout () mixin.
Цей новий міксин прийме як аргумент список пар чисел:

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

У наведеному вище коді ми говоримо: перший елемент у макеті повинен займати 7 стовпців і 2 рядки; другий елемент 5 стовпців і 1 ряд; те саме для третього елемента; останній 12 стовпчиків (100% ширини) і 1 ряд.

Подивимося, як виглядає міксин:

Спочатку ми використовуємо сітку-шаблон-стовпці для визначення нашої сітки стовпців; це створить шаблон із 12 стовпців, усі мають однакову ширину.

Зауважте, ми не визначили рядки-шаблони-сітки-рядки (або сітки-автоматично-рядки). Це здебільшого тому, що висота рядка залежить від типу вмісту, який ви хочете показати: ви можете вирішити, що рядки мають фіксовану висоту, рядки, які є відсотком від вікна перегляду, або просто залишити вміст визначати висоту. Ви можете вказати це у своєму класі, коли дзвоните на міксин.

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

Ось приклад дії міксину:

Примітка: друге число у кожній парі не обов'язкове (у mixin ми перевіряємо, чи передано друге значення перед встановленням властивості grid-row-end).

Проходження всього одного номера на елемент дозволить створити одновимірний макет; це альтернатива методу, описаному в розділі 2 (класи корисних програм Flexbox +).

Ми можемо змінити gridLayout () mixin, щоб додати резервну копію для браузерів, які не підтримують CSS Grid. Пам’ятайте лише про те, що за допомогою резервної копії ви не зможете контролювати висоту елементів.

4 - двовимірна компонування з елементами, що перекриваються

Це досить конкретний випадок макета: скажімо, ви хочете створити двовимірний макет (як це було зроблено у випадку 3, де ви можете встановити ширину та висоту елементів), але ви хочете контролювати початкове / кінцеве положення свого також елементів (щоб вони могли перекриватися).

Завдяки gridLayout () mixin елементи автоматично розміщуються в сітці без перекриття. Ви не зможете створити щось подібне:

Ми можемо створити нову gridAdvanced () mixin, яка зробить наш макет на крок далі; ось як ми будемо використовувати його:

Цього разу нам потрібно буде пройти для кожного елемента нашого макета чотири числа: перші два - це початкова та кінцева позиція елемента в стовпцях сітки, а останні два - початкова та кінцева позиція.

У наведеному вище прикладі у нас є 3 елементи: перший починається з стовпця 1 і закінчується у стовпці 8 (а це означає, що він займає 7 стовпців у нашому макеті -> запам'ятайте стовпець 8 позначає кінець елемента, тому це не входить) і починається з рядка 1 і закінчується у рядку 3 (2 ряди); другий має ті самі стовпці, але починається з рядка 3 і закінчується в рядку 5 (2 ряди); третій починається з стовпця 5 і займає всі решта стовпців (-1 означає перехід до стовпця 12, але також включити його) і починається з рядка 2 і закінчується у рядку 4 (2 ряди).

Ось наш міксин:

Це досить схоже на gridLayout (); на цей раз, однак, ми використовуємо сітку-стовпчик (/ рядок) -start / end для визначення положення наших елементів.

Ось приклад дії міксину:

Ми також можемо забезпечити резервну віддачу цього міксину; майте на увазі, що ви не зможете створити ефект перекриття, а також налаштувати висоту елементів.

Це все, що я маю поділитися тим, як ми встановлюємо сітку для бібліотеки CodyHouse. Як завжди, ми відкриті для пропозицій! Будь-який відгук вітається.

Сподіваюся, вам сподобалася стаття! Щоб дізнатися більше про саморобки веб-дизайну, слідкуйте за нами тут на Medium або Twitter.