​​Design tokens at your fingertips.

Classy-UI is CSS properties abstracted to design tokens. This abstraction does not only make your design consistent, but also discoverable and documented at your fingertips in the IDE.

Features:

- No runtime in production
- The application starts without a single line of CSS. Based on the API usage Classy-UI will automatically generate the CSS they represent
- Add decorators (pseudo selectors and media queries) directly on your tokens, and again Classy-UI will automatically build the necessary CSS
- Classy-UI completely gets rid of specificity issues
- When you write tokens you can search them right in the code. You also get documentation of what CSS the token produces, even without Typescript
- An excellent developer experience as your IDE writes the tokens for you, you just select them from the intellisense
- If you use invalid tokens Classy-UI will yell at you
- When adding themes that overrides tokens, they automatically become CSS variables
- In production Classy-UI will shorten all the CSS classnames, group media queries and themes, creating a highly optimized bundle

https://classy-ui.io/

#js #css #html

Interesting take on margin:

> We should ban margin from our components. Hear me out. Margin breaks component encapsulation. A well-built component should not affect anything outside itself. Margin makes reusability harder. Good components are usable in any context or layout.

#css #rant

> You’re creating a patient registration flow and your user is partway through the form wizard and needs more information on how to find and fill out their “insurance certificate number” in order to continue. Some users need to know what this means. Others need to know where to find it (hint: it’s on another piece of paper).

> You’ve come to a crossroads. Do you interrupt the flow? Add a page? A modal? How do you decide what to do?

This article offers a decision making framework: what component you should use and when.

#css

​​A minimalist stylesheet for #html elements.
No class names, no frameworks, just semantic HTML and you're done.

Example: https://andybrewer.github.io/mvp/mvp.html

https://github.com/andybrewer/mvp/

#css

pattern.css: #css only library to fill your empty background with beautiful patterns.

This library works with most of the frameworks including bootstrap. Supported by most browsers.

https://bansal.io/pattern-css

​​animate.css is a bunch of cool, fun, and cross-browser #css animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

https://github.com/daneden/animate.css

A ridiculously small responsive #css framework. lit is 395 bytes small.

Features:
- 12 Column Responsive Grid
- Typography for h1-h6, and body text
- Three types of buttons
- Cards
- Inputs
- Table Styles

https://github.com/ajusa/lit

​​A #css framework for building faithful recreations of operating system GUIs. XP.css is an extension of 98.css. A CSS file that takes semantic HTML and makes it look pretty. It does not ship with any JavaScript, so it is compatible with your frontend framework of choice.

https://botoxparty.github.io/XP.css/

​​Numl (nude elements) unity of design and code.

Your code is your design system.
Markup language to create modern high-quality interfaces with any look.

Features:
- A single language to describe styles and behaviour of your app
- Numl is not bound to the framework and is based on modern web standards, and also uses code generation techniques, which allows you to use the most advanced technologies and practices, as well as update them, updating the design system, rather than rewriting your entire codebase
- Numl can be integrated with vue.js, react, angular, and svelte
- With Numl you will be able to create high-quality web interfaces with the power of a small team of frontend engineers with the middle level of expertise

https://numl.design/

#js #css

​​Tabler Icons: 558 Fully customizable free SVG icons.

https://tablericons.com

#css #html

​​Flipping how we define typography in #css.

Features:
- It uses font metadata to crop space from text nodes above capital letters and below the baseline.
- It adjusts font-size so that the height of capital letters is a multiple of your grid.

https://seek-oss.github.io/capsize/

#html

​​The adaptive interface system for modern web experiences by Microsoft.

Features:
- Create reusable UI components based on web component standards.
- Use our standard library of pre-built web components in your apps.
- Choose between two adaptive design systems: Fluent Design and FAST Frame.
- Build your own design system without re-implementing component logic.
- Integrate with any front-end framework or build system.

FAST is a collection of JavaScript packages centered around web standards, designed to help you efficiently tackle some of the most common challenges in website and application design and development.

Have you ever needed a reusable set of UI components that you could drop into your app and have an amazing experience? That's FAST.

Have you ever needed to create your own components, and share them across your company, including across groups that use different, incompatible front-end frameworks? That's FAST.

Have you ever needed to implement a branded experience or a design language like Microsoft's Fluent UI or Google's Material Design? That's FAST.

Have you ever wanted to improve your app's startup time, render speed, or memory consumption? That's FAST.

Have you ever wanted to adopt more web standards and build your site or app on a native web foundation that's immune to the shifting sands of the modern JavaScript front-end landscape? That's FAST.

https://github.com/microsoft/fast

#ts #html #css

​​Futuristic Sci-Fi and Cyberpunk graphical user interface framework for web apps

Arwes is a web framework to build user interfaces for web applications based on futuristic science fiction and cyberpunk styles, animations, and sound effects. The concepts behind are opinionated and try to inspire advanced space technology and alien influence. It is built on top of #react, JSS, Anime, and Howler.

https://github.com/arwes/arwes

#js #css #html

​​The modern #css in #js styling library: near-zero runtime, server-side rendering, multi-variant support, and a best-in-class developer experience.

Features:
- Performant: Stitches avoids unnecessary prop interpolations at runtime, making it significantly more performant than other styling libraries.
- Lightweight: Both @stitches/core and @stitches/react libraries combined weigh in at around 6.5kb gzipped.
- Server-Side Rendering: Stitches supports cross-browser server-side rendering, even for responsive styles and variants.
- Variants: Variants are a first-class citizen of Stitches, so you can design composable component APIs which are typed automatically.
- Theming: Define multiple themes with CSS variables, then expose them to any part of your app.
- Developer experience: With a fully-typed API, token-aware properties, and custom utils, Stitches provides a fun and intuitive DX.
- Critical Path CSS: Stitches only injects the styles which are actually used, so your users don't download unnecessary CSS.
- Specificity. No more specificity issues due to the atomic output. Even extended components (via the as prop) won't contain duplicate CSS properties.
- Polymorphic as prop: Included in Components returned from the styled function.
- Easy overrides: Stitches provides a css prop, which allows style overrides to be applied in the consumption layer.

https://stitches.dev/

​​Generate color scheme from photos and use them in #css.

Upload your image and our tool will generate the right palettes for you.
Best with TailwindCSS.

https://palette-generators.vercel.app/

#html #css

​​Beautiful colour gradients for design and code.

uiGradients is a community contributed collection of beautiful multi-color #css gradients. This is an effort to give back to the community, by the community. Hopefully this will help you draw inspiration and serve as a resource for picking gradients for your own projects.

https://uigradients.com

#css only library to apply color filters.

Features:
- Only CSS. No JavaScript!
- ~1KB minified and gzipped!
- Supports all modern browsers
- Built with SCSS.
- Hover support.

https://github.com/bansal/filters.css

A case study on viable techniques for vanilla web development.

A TeuxDeux clone in plain HTML, CSS and JavaScript (no build steps). It's fully animated and runs smoothly at 60 FPS with a total transfer size of 44KB (unminified).

More importantly, it's a case study showing that vanilla web development is viable in terms of maintainability, and worthwhile in terms of user experience (100% faster loads and 90% less bandwidth in this case).

There's no custom framework invented here. Instead, the case study was designed to discover minimum viable patterns that are truly vanilla. The result is maintainable, albeit verbose and with considerable duplication (most of which may be mitigated by ES6).

To produce valid vanilla solutions, and because constraints spark creativity, I came up with a set of rules to follow throughout the process:

- Only use standard web technologies.
- Only use widely supported JS features unless they can be polyfilled (1).
- No runtime JS dependencies (except polyfills).
- No build steps.
- No general-purpose utility functions related to the DOM/UI (2).

If anything, the case study validates the value of build steps and frameworks, but also demonstrates that standard web technologies can be used effectively and there are only a few critical areas where a vanilla approach is clearly inferior (especially in browser testing).

https://github.com/morris/vanilla-todo

TLDR: this is totally possible: the result app is very small, fast, and portable.

#js #css

mlut - новое слово в подходе Atomic CSS

mlut (читается как млат) - это инструмент для верстки в подходе Atomic #css, с которым можно создавать стили любой сложности. Что-то похожее на Tailwind, но по некоторым параметрам превосходит все популярные аналоги.

Atomic CSS - это методология верстки, в которой мы используем маленькие атомарные классы, каждый из которых делает одно действие. Эти классы называют утилитами. Обычно они применяет одно CSS-свойство (например, цвет текста), но не обязательно одно. Выглядит в коде это примерно так:

<button class="D-ib P1r Bgc-blue_h">
  Submit
</button>

.D-ib {
  display: inline-block;
}

.P1r {
  padding: 1rem;
}

.Bgc-blue_h:hover {
  background-color: blue;
}

Преимущества такого подхода

1. Тратим меньше мыслетоплива: не думаем о нейминге сущностей, структуре каталогов
2. Меньше CSS на клиенте: реиспользуем одни и те же утилиты, а новые стили почти перестают добавляться
3. Быстрее пишем стили: короткие классы, нет переключения файлов
4. Можно применять на любом стеке: JS SPA, Ruby, Clojure, etc

Возвращаясь к mlut, вот чем он отличается от конкурентов

Строгий нейминг

Tailwind:
- flex => display: flex, но flex-auto => flex: 1 1 auto
- tracking-wide => letter-spacing: 0.025em
- justify-* => content, items, self?

mlut:
- Js-c => justify-self: center
- Bdr => border-right: 1px solid
- Bdrd1 => border-radius: 1px

Для всех сокращений используется единый алгоритм. Сокращения Emmet не имеют четких правил составления (подтвердил создатель), поэтому они не подошли.

Важность такого алгоритма еще и в том, что он помогает запоминать сокращения. Можно разобраться в нем однажды и выводить большую часть аббревиатур в голове, а не зазубривать их. Если пару раз мысленно развернуть одно сокращение, то оно быстро запомнится до автоматизма.

Почти произвольные значения by design

- значения утилит: Ml-1/7 =>

margin-left: -14.3%

- states: Bgc-red200_h,f =>

.Bgc-red200_h\,f:hover,
.Bgc-red200_h\,f:focus {
  /* ... */
}

- at-rules: @:p-c,w>=80r_D-f =>

@media (pointer: coarse), (min-width: 80rem) {
  /* ... */
}

Хорошая эргономика

Более короткие className:

<!-- Tailwind -->
<div class="relative -bottom-px col-span-full col-start-1 row-start-2 h-px bg-(--cardBg)"></div>

<!-- mlut -->
<div class="Ps B-1 Gc1/-1 Gcs1 Grs2 H1 Bgc-$cardBg"></div>

Удобный синтаксис для сложных утилит

Tailwindcss:
- [@media(any-hover:hover){&:hover}]:opacity-100
- text-[length:var(--myVar,1.3rem)]
- supports-[margin:1svw]:ml-[1svw]

mlut:
- @:ah_O1_h =>

@media (any-hover) {
  .\@\:ah_O1_h:hover {
    opacity: 1
  }
}

- Fns-$myVar?1.3 =>

font-size: var(--ml-myVar, 1.3rem);

- @s_Ml1svw =>

@supports (margin-left: 1svw) {
  .\@s_Ml1svw {
    margin-left: 1svw
  }
}

Удобно расширять

Утилиты, states и кастомные at-rules добавляются парой строк кода

@use 'mlut' with (
  $utils-data: (
    'utils': (
      'registry': (
        'Mil': margin-inline,
      ),
    ),
  ),
);

@include mlut.apply('Mil-13');

// CSS

.Mil-13 {
  margin-inline: -13px;
}

Чем еще может похвастаться mlut

- Написан на Sass, все плюсы которого идут в комплекте
- Доступен как JIT (on demand), так и AOT режим работы
- Отличная кастомизация

Состояние проекта

Что реализовано на сегодня:

- Генератор утилит почти любой сложности
- JIT-движок, который умеет генерировать утилиты из HTML/JSX/etc
- CLI с минификацией и автопрефиксером
- Плагины для сборщиков фронтенда: Webpack, Vite и Rollup
- Документация
- Интерактивный мини-курс по инструменту совместно с HTML Academy
- Больше технических деталей есть в расшифровке доклада с HolyJS.

Автор будет благодарен любому фидбеку и особенно звездам на гитхабе!