Начну с вопроса. Как быстро создать отзывчивый дизайн без написания 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

• Каждый модуль тщательно задокументирован. Есть удобная статистика о количестве классов, стилей и размере модуля

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

• Огромный массив доступных цветовых комбинаций. Их около 490, хватит с избытком для любого дизайна

• Встроенные инструменты отладки позволяют тестировать интерфейс что называется не отходя от кассы

• Достаточно легкий (~ 85kB). По умолчанию уже встроена библиотека 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 поможет быстро найти подсказку