Главная Блог Мой новый любимый CSS Framework - Tachyons

Мой новый любимый CSS Framework - Tachyons

Мой новый любимый CSS Framework - Tachyons

Tachyons - новый подход

Tachyons - это новый подход к традиционной CSS Framework. В прошлом было 2 основных варианта. Вы могли бы пойти с хорошо округленным, самоуверенным и законченным подходом как Bootstrap, который просто делает все это для вас.

Я годами не смотрел на Bootstrap, но помню, что его было очень сложно настраивать и настраивать, и что классы, которые они использовали, были очень многословны. Тогда есть более гибкий, минимальный вариант, как с Zurb's Foundation. Foundation предоставляет очень легкий дизайн и предоставляет вам довольно подробный файл конфигурации, в котором вы можете настроить все, что угодно.

Tachyons предлагает новый подход, которого я не видел нигде.

У них есть тонко детализированный набор инструментов, которые вы используете для создания своего дизайна. В то время как другие фреймворки, такие как Bootstrap и Foundation, похожи на создание веб-сайта с блоками Duplo, Tachyons похож на создание его с помощью Legos.

Даже те плоские кусочки 1/3 размера, которые вы должны вырвать с помощью миниатюры. Мне очень понравился набор космических кораблей в 80-х годах, который не был основан на каком-либо фильме, просто потрясающее воображение какого-то дизайнера. Но я отвлекся.

Так почему же мелкозернистый подход отличается и лучше? В прошлом я тяготел к таким фреймворкам, как Foundation и Ionic, которые дают вам надежную базовую линию, которую вы настраиваете. Дело в том, что конфигурации никогда не бывает достаточно. Я настраиваю конфигурацию, затем начинаю добавлять немного CSS, и еще немного, и еще немного, и так далее. Tachyons дает вам неубедительный дизайн, который позволяет вам полностью контролировать более гибкие фреймворки без настройки и настройки. Все, что вам нужно, можно изменить, просто изменив сами классы HTML. Я бы сказал, что для большинства дизайнов вам вообще не нужно трогать CSS.

Зачем мне нужно что-то новое? Было ли добавление немного CSS действительно так плохо? Это было совсем не плохо и, конечно, не достаточно плохо, чтобы заставить меня отказаться от своих старых рамок. Я искал что-то новое, потому что изменился внешний вид и изменились мои потребности. Я считаю, что даже гибкие CSS-фреймворки являются лишь внутренне гибкими. Основание может быть очень трудно внедрить в JS-фреймворки, такие как Angular 1 и React / React Native. Ionic построен на Angular и по своей сути не очень хорошо работает с React или другими. Поскольку я изучаю новые JS-фреймворки, я ищу CSS-фреймворк, который можно взять с собой.

Я хотел, чтобы что-то было гибким и по-прежнему чистым CSS, если это было возможно, поскольку я устал от перенастройки своих проектов для использования Sass, если фреймворк этого еще не сделал. Я посмотрел на несколько «минимальных» CSS-фреймворков и был не очень доволен. Шутки в сторону? Нет вложенных сеток? Следующий. Почему все фиолетовые? Следующий. Если ваш фреймворк настолько минимален, почему нет документации? Следующий. И так далее.

Я почти прекратил поиски, когда нашел Тахионы. Под капотом он использует PostCSS, который предлагает вам следующее поколение CSS, очень похожее на то, что Babel делает для JS. Но он также компилируется в простой минимизированный файл CSS. С Foundation вы теряете все свои возможности настройки, когда переходите на CSS. Настраиваемость Tachyons встраивается прямо в его классы, поэтому нет ничего удивительного, просто перетащив ссылку в ваш HTML-заголовок.

Почему вы не хотите атомного подхода? Это немного сложнее в дизайне и может сделать ваш HTML более многословным (да, я знаю, это та же проблема, что у меня была с Bootstrap.) В традиционной среде CSS вы можете иметь, скажем, общий заголовок, который вы можете вставить. С Tachyons вам нужно будет указать полную ширину, выровненный по центру.

Так что если у вас ноль дизайнерских отбивных, вы можете использовать Bootstrap. Кроме того, если у вас много похожих HTML-компонентов, есть много повторяющегося кода. Допустим, у вас есть кнопка на многих страницах, и вы хотите, чтобы она выглядела одинаково во всем приложении. Вы должны скопировать и вставить эту кнопку везде. Измените один, и все они должны измениться. Тьфу!

Где атомный подход работает лучше всего? Наблюдается сильная тенденция к более тонкой гранулированной компонентной архитектуре. Именно здесь, я полагаю, Тахионс действительно сияет. Эту кнопку, о которой я упоминал в предыдущем абзаце, не нужно копировать с помощью архитектуры стиля веб-компонента. Это может быть использовано повторно. Более того, это можно сделать без написания ни одной строки, часто громоздкой, CSS.

(Отредактируйте: я перестроил домашнюю страницу One Tap с помощью Tachyons. Мне потребовалось всего 35 строк CSS для пользовательских шрифтов, цветов и специальных эффектов.) И, поскольку это простой CSS, он может работать с существующими CSS-фреймворками. Хотите сделать ваши кнопки более или менее округлыми? Нет проблем! И нет необходимости настраивать CSS, просто добавьте соответствующий класс (ы) Tachyons и BLAM!

Я большой поклонник как программного обеспечения Ionic, так и компании Ionic. Тем не менее, я признаю рост популярности других фреймворков, в частности React Native. Я знаю, что мне нужно скоро переключиться. Что удивительно, так это то, что Tachyons также имеет первоклассную поддержку React Native, что делает его полностью переносимым, куда бы я ни захотел поехать. Это платформа CSS, которую я могу использовать как в своих мобильных приложениях, так и в своих веб-приложениях. Я провел несколько лет в мире front-end веб-разработчиков и испытал всю эту историю не понаслышке. Я начал с Less, затем я перешел на Sass. Мне пришлось научиться устанавливать Sass в Grunt, затем год спустя, Gulp, а год спустя, Webpack. Конечно, у меня был похожий опыт работы с JS, например, от Underscore до LoDash и от Angular 1 до Angular 2. Я узнал, что простая, стабильная и перспективная технология на вес золота. И Тахионы - это все эти вещи.

автор Lee Nathan

Ссылки