Почну з питання. Як швидко створити чутливий дизайн без написання css? Взагалі жодного рядка не писати, жодної властивості. Й зробити це потрібно за всіма правилами — тобто ніяких пікселів, тільки відносні одиниці вимірювання, користувацькі системні шрифти за замовчуванням і контрольні точки. Інтерфейс повинен швидко завантажуватися, без складних оптимізацій і танців із бубном.

Кмітливі хлопці відразу скажуть, що мова йде про якийсь css фреймворк. Усі чули про Bootstrap або ж Materialize. Підключаєш їх до проєкту та отримуєш чутливий інтерфейс. От тільки писати css все одно доведеться. Тому що захочеться змінити стандартне відображення елементів. Кнопки й форми будуть першими в черзі на перевизначення стилів. Їх можна не чіпати й залишити як є, але навряд чи це всім підійде.

Напевно, в самому питанні про чутливий дизайн без написання css, криється підступ, подумаєте ви. Може для того, щоб чогось не робити, потрібно робити що-небудь інше — наприклад писати javascript замість css? Але тоді не вийде зробити дизайн швидко. Можливо відповідь на питання ховається в препроцесорах? Але ж вони не скасовують написання css. Прискорюють і спрощують, але не скасовують. У чому річ тоді?

Ніякої таємниці тут немає. Потрібно просто користуватися спеціальними інструментами.

Познайомимося ближче з css фреймворком Tachyons. В опису проєкту на github кажуть, що це функціональний CSS для людей. На сайті проєкту написано ще більш лаконічно — built for designing, що перекладається по-різному, але суть не змінюється. Фреймворк вирішує завдання дизайну.

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

Основні принципи Tachyons:

• інтерфейс повинен бути на 100% чутливим
• все має читатися на будь-якому пристрої
• коду має бути якомога менше

На перший погляд, такі ж тези вказані в описі будь-якого іншого css фреймворку. Навіщо витрачати час на вивчення ще одного, запитаєте ви, якщо Tachyons не пропонує нічого нового? Ось тут не погоджуся — фреймворк заснований на нестандартному підході в роботі зі стилями. Разом із Tachyons не доведеться писати css. Більше ніяких нагромаджень вкладених селекторів і виснажливого рефакторінгу коду. Дизайн інтерфейсів без втрати часу.

Функціональний css

У функціональному css класи більше не є складними істотностями, а являють собою прості функції, які виконують тільки одну річ. Уявіть собі конструктор LEGO. З маленьких цеглинок збираються величезні замки, нескінченні залізниці й космічні кораблі. Будь-яка модель в LEGO складається з обмеженої кількості повторюваних блоків. Той самий принцип лежить у функціональному css. З готових частинок ви збираєте інтерфейси. Основна частка, атом функціонального css - це клас.

<h1 class="f3 f2-m f1-l">Основна частка — це клас</h1>

Це як із вбудованими стилями, тільки замість правил вказується клас — його неподільна частинка, його тахіон. У чому ж тоді різниця між вбудованими стилями та підходом Tachyons? Вбудовані стилі не підтримують медіа-запити й псевдоелементи, не перевизначаються і програють в продуктивності класам.

Відносна шкала розмірів

Весь фреймворк це набір класів і відповідних стилів. Візьмемо, наприклад, текстові блоки. Щоб спроєктувати інтерфейс, що легко читається, потрібно не більше 8 варіантів розмірів шрифту. В Tachyons існує проста відносна шкала розмірів:

.f1 { font-size: 3rem; }
.f2 { font-size: 2.25rem; }
.f3 { font-size: 1.5rem; }
.f4 { font-size: 1.25rem; }

Якщо не подобається стандартний розмір шрифту заголовка, то зробити текст більше чи менше можна майже миттєво, треба додати до верстки клас від f1 до f7:

• <h1 class="f1">Вам потрібно не більше 8 варіантів розмірів шрифту</h1>

  Вам потрібно не більше 8 варіантів розмірів шрифту

• <h1 class="f2">Вам потрібно не більше 8 варіантів розмірів шрифту</h1>

  Вам потрібно не більше 8 варіантів розмірів шрифту

• <h1 class="f3">Вам потрібно не більше 8 варіантів розмірів шрифту</h1>

  Вам потрібно не більше 8 варіантів розмірів шрифту

• <h1 class="f4">Вам потрібно не більше 8 варіантів розмірів шрифту</h1>

  Вам потрібно не більше 8 варіантів розмірів шрифту

Позиціювання елементів

Гарний дизайн заснований на математиці. Але ж ми іноді забуваємо про це, коли верстаємо макет, зроблений в фотошопі чи ілюстраторі. Щоб верстка відповідала макету, доводиться використовувати "магічні числа" в padding та margin. Тому немає впевнености, що дизайн буде показуватися однаково на різних пристроях. Швидше за все буде навпаки - якщо взяти "магічні числа", дизайн стане 100% непередбачуваний. Tachyons розв'язує цю проблему. Інтервали й відступи масштабуються на основі шкали відстаней за допомогою одиниць rem.

Додавання класу в інтервалі від pa0 до pa6 збільшить padding від 0 до 4rem:

<div class="pa0">pa0</div> <div class="pa1">pa1</div> <div class="pa2">pa2</div> <div class="pa3">pa3</div> <div class="pa4">pa4</div> <div class="pa5">pa5</div> <div class="pa6">pa6</div>

Збільшимо padding по горизонталі:

<div class="ph0">ph0</div> <div class="ph1">ph1</div> <div class="ph2">ph2</div> <div class="ph3">ph3</div> <div class="ph4">ph4</div> <div class="ph5">ph5</div> <div class="ph6">ph6</div>

Відтепер для порівняння пробіжимось по margin від m0 до m5:

<div class="ma0">ma0</div> <div class="ma1">ma1</div> <div class="ma2">ma2</div> <div class="ma3">ma3</div> <div class="ma4">ma4</div> <div class="ma5">ma5</div>

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

Міць та гнучкість на зрозумілому прикладі

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

Міць та гнучкість фреймворку добре видно на цікавих прикладах. Вони є у вкладці компоненти на сайті Tachyons. Для прикладу візьмемо одну з них звідти. Це стандартна маркетингова сторінка для мобільного додатку:

Connect in a whole new way.

Rated the #1 app for communicating with customers.

Download

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

<section class="sans-serif flex-ns vh-100 items-center">
<div class="mw6 ph5">
<img src="iPhone7.jpg">
</div>
<div class="tc tl-ns ph3">
<h1 class="f3 f1-l fw2 mb3 mt4 mt0-ns">Connect in a whole new way.</h1>
<h2 class="f5 f3-l fw1 mb4 mb5-l lh-title">Rated the #1 app for communicating with customers.</h2>
<a href="#0" class="dib grow f6 br2 ph3 pv2 white bg-black"></a>
</div>
</section>

Переваги Tachyons

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

• Стратегія mobile-first. Усі базові класи за замовчуванням оптимізовані для мобільних пристроїв

• Добре працює як зі звичайним html, так із React, Ember, Angular, Rails

• Кожен модуль ретельно задокументований. Tachyons має зручну статистику про кількість класів, стилів і розмір модулів

• Бібліотека компонентів з відкритим вихідним кодом поповнюється новими екземплярами. Ви можете ділитися своїм досвідом і лайфхаками

• Величезний масив доступних кольорових комбінацій. Їх близько 490, вистачить для будь-якого дизайну

• Вбудовані інструменти налагодження дозволяють тестувати інтерфейс, як то говорять, не відходячи від каси

• Досить легкий (~ 85 kB). За замовчуванням вже вбудована бібліотека Normalize.css

• Легко змінювати назви класів, значення, media queries і нічого не зламається

• Весь цей механізм обслуговується Postcss. Не подобається Postcss? Можете використовувати SASS

Як розпочати новий проєкт разом із Tachyons

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

• за допомогою пакетного менеджера bower:

bower install -D tachyons

• за допомогою npm:

npm install --save-dev tachyons

• зібрати самому:

git clone git@github.com:tachyons-css/tachyons.git
cd tachyons
npm install && npm start

• можна підключити до <head>:

<link rel="stylesheet" href="https://unpkg.com/tachyons@4.7.0/css/tachyons.min.css"/>

Tachyons допоможе не тільки з новими проєктами, він розв'яже проблеми тих, що вже існують. Щоб зробити адаптивну верстку, скажімо. Або довести до ладу текстові блоки. Або позбутися "магічних чисел" і перейти на flexbox. Підключайте необхідні модулі Tachyons і створюйте інтерфейси за всіма правилами. Вам сподобається.

Замість післямови

Деяким людям Tachyons може здаватися складним, інші навпаки знайдуть його занадто спрощеним. Фреймворк та принципи, що в ньому закладені, варті того, щоб витратити час на вивчення. Свій блог merryfreelance.com я робив виходячи з функціонального підходу до css. Операція пройшла швидко й безболісно.

Корисне

• Слово тахіон походить від грецького ταχύς - що означає швидкий

• Важко запам'ятовувати назви класів Tachyons? Зайдіть до tachyons.pro і станьте tachyons-ніндзей

• Зручна база даних класів та властивостей tachyons-tldr допоможе знайти підказку