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

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

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

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

Ми запустили редактор пробілів! Інструмент веб-дизайну, який дозволяє генерувати масштаб міжряддя та встановлювати чуйні правила.

Встановлення системи інтервалу за допомогою змінних CSS

Перший крок встановлення системи інтервалу - це створення шкали значень (інтервал). Для створення шкали нелінійних значень вам потрібно 1) одиниця або базове значення та 2) множник. Ми вже говорили про створення модульної шкали у нашій статті про веб-типографіку.

Основний підхід до інтервалу виглядатиме так:

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

Примітка. Перший раз, коли я прочитав про застосування послідовності Фібоначчі до шкали значень міжряддя, був у цій чудовій статті The Scenery.

Мінус базового підходу полягає в тому, що, ну ... він є основним. Якщо ми хочемо змінити одне значення інтервалу, ми повинні зробити математику та оновити всі інші значення вручну.

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

Ми наближаємось! У наведеному вище прикладі ми визначили кожне значення інтервалу, помноживши номер одиниці на множник. Зауважимо, що послідовність Фібоначчі все ще застосовується до множників. Тепер, якщо ми хочемо оновити всю систему, ми можемо відредагувати одиничне значення.

Далі позбудемося абсолютної одиниці та замінимо її на одиницю em. Для цього ми можемо замінити 16px на 1em:

Те, що схоже на маленький твіст, насправді сильно змінюється! Одиниця em - відносна одиниця, що дорівнює поточному розміру шрифту. У більшості браузерів розмір шрифту за замовчуванням (до застосування стилю CSS) становить 16 пікселів. Тому ми можемо припустити 1em = 16px. Однак якщо ви редагуєте розмір шрифту для елемента, 1em більше не становить 16 пікселів (для цього елемента), але він дорівнює новому розміру шрифту. Те, що видається відсутністю контролю, - це потужна швидка швидкість реагування. Дозвольте показати вам, чому.

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

Оновивши лише одну змінну, ви отримуєте це:

Не тільки це! Оскільки одиниця інтервалу дорівнює 1em, а всі інші значення інтервалу є множниками величини одиниці, коли ми оновлюємо змінну розміру тексту-бази, ми також впливаємо на інтервал.

Подивіться, як цей метод впливає на типографію та пробіли одночасно:

Ми все ще оновлюємо єдину змінну (розмір тексту-бази). Додаткових запитів у медіа не потрібно! Все, що вам потрібно зробити, щоб скористатися цим потужним підходом до чуйності - це використання змінних інтервалів для встановлення прокладок і поля на рівні компонента:

Що робити, якщо ви хочете оновлювати всі значення інтервалу одразу, не змінюючи змінну розміру тексту-бази? Просто оновіть змінну простору:

Це правда, що, застосовуючи подібний метод, ви втрачаєте частину свого «візуального» контролю, але це на користь простоти та ремонтопридатності. Це правда, що ви не зможете встановити ідеальні для пікселів значення, але ви будете мати справу з чутливістю на абсолютно новий рівень: більша частина роботи буде встановлювати надійну шкалу значень для інтервалів і типографії. Потім ви можете редагувати 2–3 змінних у конкретних медіа-запитах, щоб створити ефект каскаду, на відміну від налаштування всіх компонентів та піделементів.

Як встановити прокладку за замовчуванням для всіх компонентів

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

Щоб було зрозуміло, я маю на увазі ті блокі, «контейнерні» компоненти.

Ось приклад:

Повертаючись до нашого файлу _spacing.scss, включимо змінну прокладки компонентів:

Тим самим ви створюєте інший "ярлик ярликів": якщо вам потрібно застосувати накладки до компонента, вам не потрібно перевіряти, яка змінна міжряддя використовувалася в інших подібних випадках. Просто використовуйте змінну набивання компонентів.

Маржинальні корисні класи

Хоча безпечне включення прокладки безпосередньо у свій компонентний CSS, включаючи поля, може спричинити проблеми з компонуванням. Ще раз ми посилаємось на основні компоненти, ті блоки, які визначають ваш основний макет (не компонент <кнопка>, а елемент <розділ class = "myComponent">).

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

З цих причин може бути зручно мати корисні класи за маржами:

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

Значення спеціального інтервалу

Що робити, якщо ви встановлюєте поле для елемента, а пробіл-sm виглядає занадто малим, тоді як space-md занадто великим? Робота з набором заздалегідь визначених змінних означає, що іноді доводиться йти на компроміс (заради ремонтопридатності системи).

АЛЕ! Якщо вам потрібно використовувати значення інтервалу, яке не входить до вашої шкали інтервалу, і ви не хочете редагувати або порушувати систему, ви можете скористатися функцією обчислення CSS:

Роблячи це, ви вводите нове значення інтервалу, але ви все одно переконуєтесь, що це нове значення "контролюється" тією ж системою.

Фіксовані значення інтервалу

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

Для цього потрібно визначити інтервал за допомогою іншого блоку: rem. На відміну від em, rem відносно розміру шрифту html (root). Тому це не впливає під час редагування розміру шрифту тіла (оновлення змінної розміру тексту-бази).

Щоб було зрозуміло, я не пропоную замінити їх на rem, а поєднати їх.

Найпростішим способом встановити значення "фіксованого" інтервалу було б:

Однак це означатиме введення ряду спеціальних, позасистемних значень проміжків. Якщо ми подумаємо про реальний сценарій випадку: новий розробник приєднується до вашої команди, вони відкривають файл CSS і помічають, що ви встановили на елемент 0,5 маржу. В ідеальному світі розробників ви повідомили свого нового колегу про систему інтервалу, або проект має (сучасні) інструкції щодо CSS, або колега просить отримати додаткову інформацію про те, як керується інтервалом у проекті. У реальному світі розробок шанси на те, що новий товариш по команді припустить, що інтервал встановлений за допомогою спеціальних значень rem.

Щоб уникнути плутанини, було б ідеально використовувати змінні. Якщо ми це зробимо, колега змушений перевірити файл _spacing.scss, де вони знайдуть (100%! ) ваші корисні коментарі.

Ось приклад того, як ви можете (за бажанням) встановити шкалу "фіксованих" значень інтервалу на додаток до відповідних:

_spacing.scss

З’єднавши все це, ось наш _spacing.scss файл:

Ось де ми знаходимося з системою міжряддя! Якщо у вас є відгуки / пропозиції, повідомте нас у коментарі!

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