Будни разработчика

Open Props: sub-atomic styles

#библиотека дня

Атомарность пробивает новое дно (или берёт новые высоты, кому как).

Это было лишь вопросом времени, как быстро пользовательские свойства начнут собирать в библиотеки. И вот одна из них: https://open-props.style/


.noise-noise-noise {
  /* stack grain with a gradient */
  background-image: var(--gradient-3), var(--noise-3);
  /* force colors and noise to collide */
  filter: var(--noise-filter-3);
  /* fit noise image to element */
  background-size: cover;
}

Я честно не знаю, по мне так бред-бредом. Но кому-то может и понравится, особенно если это инкапсулировать в готовые компоненты…

Впрочем, многие дизайн-системы занимаются похожим на уровне своих токенов, да. Но это не значит, что идея действительно стоит того.

#css #atomic #var #tailwind

open-props.style

Open source CSS custom properties to help accelerate adaptive and consistent design. Available from a CDN or NPM, as CSS or Javascript.

👍1🤔1

2.78K views10:01

Introducing Tailwind CSS v3.0

#ссылка дня

Тут это, Tailwind CSS обновился до третьей версии. Я вынужден признать, что он стал даже слишком популярен и по этой причине всё сложнее находить аргументы против. Парни, возможно, нащупали баланс между атомарностью и семантикой.

https://youtu.be/TmWIrBPE6Bc

Но пользоваться я им конечно же не буду. Шутка, я, как минимум, попробую на паре пет-проектов.

В общем, список изменений весьма большой, но лично мне очень зашли обновлённая палитра, стили для печати и Scroll snap API. Прям удачно.

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

#css #tailwind

YouTube

Tailwind CSS v3.0 is here — bringing incredible performance gains, huge workflow improvements, and a seriously ridiculous number of new features.

https://tailwindcss.com/blog/tailwindcss-v3

❤1

3.03K views09:59

#такое дня

Давайте дадим слово защитникам Tailwind.

Что заставляет вас учить целый DSL вместо того, чтобы просто использовать CSS?

Пишете ли вы код на Tailwind вручную, или генерируете конструктором?

Пробовали ли другие Atomic-подходы? Пробовали ли БЭМ?

Вы все поголовно из бакенда?

Давайте, господа, вам слово. А то мне аж страшно.

#tailwind #atomic

😁13👏5👍1🔥1

2.63K views05:05

0:15

#ссылка дня

Продолжаем серию постов о Tailwind+React UI компонентах от Паскаля Витьелло!

У нас уже были поля ввода и кнопки. Настало время, очевидно, чекбоксов, радиокнопок и всякого рода переключателей!

На сей раз уже не 50, а даже побольше :)

Ссылка: https://originui.com/checks-radios-switches

Как обычно, основано на shadcn и Tailwind. Вообще, вышло мило и даже разнообразно.

#tailwind #shadcn #react #ui

🤩12👍6❤1

2.84K viewsSergey Bekharsky, 16:45

0:43

#инструмент дня

Этого следовало ожидать и оно свершилось!

Дамы и господа, без лишних слов: библиотека и конструктор анимаций для Tailwind — Motion.

Сходу ссылка: https://rombo.co/tailwind/#animator

Казалось бы, бери да используй CSS-анимации, но... тут уж как есть. Думаю, работающим с тейлвиндом людям должно быть удобно, да и для конструкторов самое то.

Но, кроме шуток, инструмент и правда довольно оригинальный и подход к построению его интерфейса мне очень зашёл.

#css #tailwind #motion #animation #ui

❤10👍7

2.87K viewsSergey Bekharsky, edited 07:58

0:24

#ссылка дня

Паскаля Витьелло и его очередная пачка Tailwind+React UI компонентов возвращается!

Давайте вспоминат: поля ввода, кнопки, чекбоксы, переключатели и радиокнопки.

Что на очереди? Правильно, выпадающие списки!

И опять 50, куда ж без этого.

Часть нативные, часть — shadcdn. К сожалению, без комбобоксов :( Потому, берём в руки react-downshift...

Ссылка: https://originui.com/selects

Как обычно, shadcn и Tailwind, без сюрпризов. Вдохновляемся, котаны?

#tailwind #shadcn #react #ui

👍9❤2🤡1

2.91K viewsSergey Bekharsky, 16:53

0:15

#инструмент дня

Не понимаешь гриды? Не проблема!

Ведь есть конструкторы. Например, https://cssgridgenerator.io/

Задал начальные условия, поперетаскивал мышкой блоки — и готово! Забирай CSS.

А для любителей Tailwind — присутствует аналогичный проект https://www.tailwindgen.com/, он просто распихает нужные классы по блокам. Ноль забот.

Кстати, о Tailwind. На днях вышла его четвёртая версия. Ещё меньше конфигурации (ну, буквально не нужна для старта), новые утилиты для работы с transform, поддержка контейнерных запросов и интеграция с Vite.

#css #grid #tailwind

👍34❤4

4.14K viewsSergey Bekharsky, 11:42