DEV Community: Lubomír Blažek

Announcing Winduum 1.0 - Framework agnostic component library for TailwindCSS

Lubomír Blažek — Thu, 29 Feb 2024 14:28:18 +0000

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; 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() 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.

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

Accent Color

The idea is that you should be able to set accent color via accent-color CSS property. It is discussed 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.

.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

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 and leverage web standards as input[type=checkbox], view-transitions, dialog, details, scroll-snap etc.

And suddenly you can have a site that passes all 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 - leverages dialog with minimum javascript
Carousel - leverages scroll-snap with minimum javascript
Details - leverages details with minimum javasript
Drawer - leverages scroll-snap with minimum javascript
Form - leverages checkValidity with miminum javascript
Compare leverages input[type=range] with minimum javascript

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

Form control for everything

The Control component literally supports all possible input types, even type=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.

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

Control - including floating label and icon variants
Range - for accessible range sliders, including vertical and multi variants!
Check - for accessible checkboxes and radios
Switch - for switch things on and off as checkbox or radio
Color - in case you need to select a color as a checkbox or radio
Rating - an accessible checkbox group for rating purposes
Button - 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
accentColor - adds a new --color-accent and --color-accent-foreground to accent- class for better accent support
divideGap - easier gaps for the divide utility class

Learn more about utilities on winduum.dev

New progressive aproach at containers

Winduum provides a new grid-cols-container utility class which leverages CSS grid and is inspired by Kevin Powell

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

Learn more at winduum.dev/docs/utilities/container

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 and 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 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 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 to see everything Winduum has to offer! Check out the source code at GitHub and give us a star if you like it! We are also launching the project on ProductHunt!

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 which backed the project.

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

Announcing Vituum - Template engines and more in Vite

Lubomír Blažek — Tue, 30 Aug 2022 14:37:44 +0000

For the last months, we at Newlogic Digital have been working on our own open-source project built around Vite.

It's called Vituum, combination of the words Vite (French word for "quick") and Tuum (Estonian word for "core").

Give it a try!

If you want to try it all out right now, visit the Trying Vituum Online section on the official website. Here you can try lots of online examples right away on StackBlitz.

So what is Vituum?

It's a small wrapper around Vite which includes predefined config and integrations. The main goal is to add some additional features on top of Vite.

The primary focus is on easy backend integration but can be used for anything.
Modified build command vituum build is used, which supports building of template engine files ending with ext-name such as .twig, .pug or .latte

Think of it like a Vite starter pack ready to go.

It's also a bridge for developers who still depend on template engines or older front-end tools like gulp or grunt and want to migrate to Vite.

Template engines

Today frontend tools are awesome, but the good old template engines don't get enough love anymore.

Vituum tries to change that with support for template engines in Vite. Gotta go fast with the templates!

Twig, Liquid, Pug, Nunjucks, Handlebars, Latte - there are a bunch of them!

Template engines are great for fast prototyping and preparing templates fast for backend integrations like Symfony, Laravel or Nette.

Learn more about template engines at vituum.dev

Multi-page support

Vituum makes it easy to use multiple .html files in src/views directory out of the box. Even with nesting.

You can use this to prototype fast without the need to change anything in the config.

You can even enhance this with PostHTML syntax like <include> to include small html components or use other template engines.

Project structure

Vituum has a pre-defined optional structure for your project files. You can always change the structure to your own liking via config.

📁 public - place for static files and dist files
📁 src
- 📁 assets - your static files as .png, .svg
- 📁 data - your .json data used in templates
- 📁 emails - your email templates
- 📁 scripts - your script files as .js, .ts
- 📁 styles - your styles files as .css, .scss
- 📁 templates - your template files as .twig, .latte
- 📁 views - your pages as .html, you can also nest and define page as .json or .twig, .latte and other

Imports

In vanilla css and js you can import one file at a time. Globs like *.css or *.js are not possible.

To help import multiple files automatically, Vituum uses an internal plugin which adds all file imports in the directories into a single file.

This is great if you have a complex project with a lot of styles or script files.

You can learn more about this at vituum.dev

Emails

Writing email templates was always tricky. Vituum tries to make it easier for you.

You can add @vituum/juice integration and then write styles in PostCSS or any pre-processor you want. Everything will be inlined to html via Juice.

Html can be written with any template engine, including PostHTML.

You can even test sending your email via vituum send command.

You can learn more about this at vituum.dev

Integrations

All modules can be optionally added using Integrations API. Using this API, you can even write your own command and then run it via vituum my-command

Among our integrations is also popular TailwindCSS. You can add it easily via vite.config.js, tailwind.config.cjs and you can start using this library to the fullest without complicated configuration.

We wrote our own integration at Newlogic - @newlogic-digital/core with pre-prepared config, integrations and extensions for templating engines for easy use on our projects.

You can learn more about integrations at vituum.dev

Like it?

Vituum is also great as a static site generator. However, if you are looking for a complete solution for purely static pages, we definitely recommend trying Astro.

The entire project has complete documentation on vituum.dev and you can also follow it on Twitter under @vituum_dev.

If you want to support the project, please give us a star on GitHub. And if you really want to support the project a lot, you can also become our partner and support further development financially. In that case, contact me at lubomir.blazek@newlogic.cz and your logo can appear on the project pages.

Also, any help whether by adding issues or pull requests is much welcome!