Announcing Winduum 1.0 - Framework agnostic component library for TailwindCSS
Published: 2024-02-29 14:28:18

The question inevitably arises: Why introduce yet another UI component library into the mix? Simply because Winduum is different in a few areas than the others. 

**1.** It focuses on web standards, accessibility and minimum javascript
**2.** It's progressive, uses modern features and standards
**3.** It's framework-agnostic, so it can be used in any scenario
**4.** It's source code is plain CSS and JS, so it can be also used without a build step

In today's CSS frameworks, you only have a few choices when it comes to a framework-agnostic UI component library for **TailwindCSS** that also leverages [semantic class-names](https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply); for example great projects like **daisyUI** or **RippleUI**. However, both are heavily reliant on `@apply`, which is not standardized plain CSS.

This is why our approach is a little different. **Winduum** encourages writting components in **plain CSS** or other (pre/post)-processors and using utility classes to enhance the components.

Yes it's kind of against the main principle of TailwindCSS to use sematic classes, but sematic classes and utility classes can be a great combo!

As a CSS framework **Winduum** focuses on beautifully styled accessible components written in plain standardized CSS; components you can extend with your own components and use them in any framework, even as web components.

**TailwindCSS** is optional, but recommended. Winduum provides a **plugin** with a bunch of new handy utility classes. However, you don't need to use utility framework at all or you can choose an alternative such as UnoCSS. The choice is up to you!

## Themes, color-mix and P3 Color Gamut
Winduum embraces advanced color techniques, featuring the innovative **[color-mix()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix)** and support of the P3 color gamut. This ensures a vibrant and visually engaging user experience on supported devices.

Colors can be defined in any color space - `rgb`, `hsl`, `oklch`, whichever you prefer. With `color-mix`, you can easily change the opacity too.

```css
color: color-mix(
  in var(--space), 
  var(--color-primary) calc(var(--tw-bg-opacity) * 100%), 
  var(--tw-bg-mix)
)
```

Learn more about theming on [winduum.dev/docs/themes](https://winduum.dev/docs/themes)

## Accent Color
The idea is that you should be able to set accent color via `accent-color` CSS property. It is [discussed](https://github.com/w3c/csswg-drafts/issues/5900) that there should be access to the color value of this property, e.g. via `AccentColor` or `AccentColorText`. 

Most of the components are using this idea via `--color-accent` and `--color-accent-foreground` as an alternative for their accent color.

```css
.accent-primary {
  --color-accent: var(--color-primary);
  --color-accent-foreground: var(--color-primary-foreground);
  accent-color: var(--color-accent);
}
```

For example, this way you don't have to change `background-color` property for each component's color variant, you just change the accent color.

## Modern CSS Features
Staying ahead of the curve, Winduum leverages modern CSS features, allowing you to harness the power of the latest specifications and improve overall styling capabilities. All of these are supported in current browsers.

- **CSS Properties**
- **CSS Logical Properties**
- **CSS Nesting**
- **Modern pseudo selectors** such as `:where`, `:is` and `:has`
- **Modern CSS reset**
- **Low specifity or layers**
- **CSS color-mix**


## Modern CSS Reset
Winduum comes equipped with a modern CSS reset, providing a clean slate for consistent styling across various browsers and ensuring a solid foundation for customization.

The main difference from other resets is using `all: unset` which resets most of the styles. As a result, you have a clean slate and are free to style your components.

Learn more on [winduum.dev/docs/layout/reset](https://winduum.dev/docs/layout/reset)


## Accessible Components Based on Web Standards
Most of current libraries only reinvent the wheel and create new accessible components from the ground. While this can be good in some cases, in others it comes with bunch of overhead that is not really needed in others.

Do you need to build an easy product website? Perhaps in these scenarios you don't need to use a heavily reactive framework such as **React** or **Vue** with **Radix** primitives. And don't get me wrong, I love libraries such as **shadcn/ui**. But these are often the better choice for more complex projects. Does your basic website with one contact form really need a reinvented accessible functionality of a checkbox as a button?

You can choose something lighter such as **[Astro](https://astro.build/)** and leverage web standards as [input[type=checkbox]](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox), [view-transitions](https://docs.astro.build/en/guides/view-transitions/), [dialog](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog), [details](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details), [scroll-snap](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll_snap) etc.

And suddenly you can have a site that passes all **[Core Web Vitals](https://web.dev/explore/learn-core-web-vitals)**.

**Winduum** is all about web standards that can be used in any framework. And here are some components as an example:

- **[Dialog](https://winduum.dev/docs/components/dialog.html)** - leverages [dialog](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) with minimum javascript
- **[Carousel](https://winduum.dev/docs/components/carousel.html)** - leverages [scroll-snap](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll_snap) with minimum javascript
- **[Details](https://winduum.dev/docs/components/details.html)** - leverages [details](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) with minimum javasript
- **[Drawer](https://winduum.dev/docs/components/drawer.html)** - leverages [scroll-snap](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll_snap) with minimum javascript
- **[Form](https://winduum.dev/docs/components/form.html)** - leverages [checkValidity](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity) with miminum javascript
- **[Compare](https://winduum.dev/docs/components/compare.html)** leverages [input[type=range]](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range) with minimum javascript

Javascript API primitives are heavily customizable and can be used headless in any project.

## Form control for everything
The **[Control](https://winduum.dev/docs/ui/control.html)** component literally supports all possible input types, even [type=color](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color)! Thanks to `:has` support, you can use one sematic class `ui-control` for every input type, textarea or select. If you need a basic date picker, time picker or color picker, all of these are heavily standardized in modern browsers. **Winduum** has a form component for any usage you might possibly need.

```html
<div class="ui-control">
    <input type="color" id="color" oninput="this.nextElementSibling.textContent = this.value">
    <label for="color">#ffffff</label>
</div>
```

- **[Control](https://winduum.dev/docs/ui/control.html)** - including [floating label](https://winduum.dev/docs/ui/control.html#floating-label) and [icon](https://winduum.dev/docs/ui/control.html#icon) variants
- **[Range](https://winduum.dev/docs/ui/range.html)** - for accessible range sliders, including [vertical](https://winduum.dev/docs/ui/range.html#vertical) and [multi](https://winduum.dev/docs/ui/range.html#multi) variants!
- **[Check](https://winduum.dev/docs/ui/check.html)** - for accessible checkboxes and radios
- **[Switch](https://winduum.dev/docs/ui/switch.html)** - for switch things on and off as checkbox or radio
- **[Color](https://winduum.dev/docs/ui/color.html)** - in case you need to select a color as a checkbox or radio
- **[Rating](https://winduum.dev/docs/ui/rating.html)** - an accessible checkbox group for rating purposes
- **[Button](https://winduum.dev/docs/ui/button.html)** - rich button with multiple variants to submit your forms!


## New Tailwind CSS Utilities
**Winduum** includes a TailwindCSS plugin with some handy new utilities. Here are some examples:

- **CSS properties** - the plugin extends the tailwind config with CSS properties for colors, fontFamily, fontWeight, ease, zIndex, fontSize, spacing, borderRadius etc so that your CSS and TailwindCSS are more in pair. See default CSS properties in [cofing.css](https://github.com/winduum/winduum/tree/main/src/base/config)
- **accentColor** - adds a new `--color-accent` and `--color-accent-foreground` to `accent-` class for better accent support
- **divideGap** - easier gaps for the [divide](https://tailwindcss.com/docs/divide-width) utility class

Learn more about utilities on [winduum.dev](https://winduum.dev/docs/)

# New progressive aproach at containers
Winduum provides a new `grid-cols-container` utility class which leverages CSS `grid` and is inspired by [Kevin Powell](https://youtu.be/c13gpBrnGEw?si=FGoMS9FnWEOYohPi)

With this you can leverage CSS grid for better container styling with less markup.

Learn more at [winduum.dev/docs/utilities/container](https://winduum.dev/docs/utilities/container.html)

## Extended Media Breakpoints
The smalest breakpoint in **TailwindCSS** is `sm` at `640px`, which doesn't really cover a lot of mobile devices. And the biggest is `2xl` at `1536px`, which on other hand doesn't cover most of big displays. Winduum has its own scale reaching from `360px` to `2528px` to cover all possible resolutions and all defined in **em**.

- **xs** - 360px
- **sm** - 416px
- **md** - 768px
- **lg** - 960px
- **xl** - 1216px
- **2xl** - 1312px
- **3xl** - 1408px
- **4xl** - 1600px
- **xxl** - 2016px
- **2xxl** - 2528px

## Modular and Customizable
Take the code and copy and paste it to your project, or import it from npm and customize it with CSS properties!

All is really heavily modular and customizable. All components are sorted into variants in single files. So you can cherry-pick only what you want for your project.

## Framework-Agnostic CSS Library
As has already been mentioned, Winduum is framework-agnostic by design so that you can create your own components using your preferred framework. Javascript primitives can be also adapted in any framework.

If there is interest, simple pre-built components may be developed for popular frameworks. Currently, only [winduum-vue](https://github.com/winduum/winduum-vue) and [winduum-react](https://github.com/winduum/winduum-react) are in the process of development and most components have usage and installation examples in the docs. Want to help? We're open to pull requests!

You can also see various examples in many frameworks at [Trying Winduum Online](https://winduum.dev/docs/#trying-winduum-online) section in the docs.

## Compatible with Other UI Libraries
Since Winduum is written with standards in mind, it can also be easily adapted with existing solution such as **shadcn/ui** or add more complex functionality with **Radix primitives** or **Headless UI**.

It uses a similiar [variables](https://ui.shadcn.com/docs/theming#list-of-variables) naming pattern as **shadcn/ui** in order for you to easily add more complex components to your project when needed.

## Anything else?
Is this all? Not in the slightest! Visit [winduum.dev](https://winduum.dev/) to see everything Winduum has to offer! Check out the source code at [GitHub](https://github.com/winduum/winduum) and give us a star if you like it! We are also launching the project on [ProductHunt](https://www.producthunt.com/posts/winduum)!

This was a long road of a two-year, mostly free time, development as a modest small-side project. Also big thanks to  [Newlogic Digital](https://www.newlogic.cz/) which backed the project. 

I'm glad that I can say that **Winduum** is now feature complete in **1.0** version!