Skip to content

About ​

Winduum is a mix of words Tailwind (Popular CSS utility framework) and Tuum (Estonian word for "core").

It essentially provides ways to leverage use of CSS properties as much possible and do more in CSS. Because we ❀️ CSS and this is a small modest CSS component framework.

Its approach to TailwindCSS is a little different. It encourages to write components in CSS or other (pre/post)-processors and to use utility classes to enhance the components.

As a CSS framework it provides beautifully styled accessible components. Which you can extend with your own components.

Or you could only use TailwindCSS plugin with its benefits and make your own complex UX/UI project written mostly in CSS/SASS/LESS.

Framework-agnostic ​

Winduum is framework-agnostic, so you are able to create your own components using your preferred framework. Javascript primitives can be also adapted in any framework.

If there is interest, pre-built components may be developed for popular frameworks. Currently, only winduum-vue is in the process of development and some components have usage and installation examples in the docs.

Naming ​

In your projects it's recommended to prefix component classes for better clarity. Some of these are already used for various components.

  • UI - ui-name (ui components)
  • Component - c-name (regular components)
  • Section - s-name (wraps the previous two)
  • Module - m-name (wraps sections)
  • Layout - l-name (layout components - header, footer etc.)
  • Utilities - name (without prefix, utility classes for common styles)

CSS Properties ​

Each CSS property follows the same naming, for example --ui-name-font-size

Directory structure ​

To help navigating your project easily, it's recommended to follow the same naming principles for your directory structure, for example like this:

  • πŸ“ components
    • πŸ“ ui
      • πŸ“„ btn.vue
      • πŸ“„ input.vue
    • πŸ“„ form.html
    • πŸ“„ form.css
    • πŸ“„ form.js

You could also have your .css and .js files in separate directories like styles or scripts, but that's up to you and your framework that you use. You might use SFC too.

Examples ​

Using the components ​

You can use any of the components easily in html without the need to write complex TailwindCSS classes.

Each component is written with low specificity in mind, so any property can be easily enhanced with TailwindCSS utility classes.

html
<button class="ui-btn accent-secondary">This is a Button</button>
css
.ui-btn:where(.bordered) {
    --ui-btn-font-size: 0.875rem;
    
    /* CSS styles */
}

Writing the components ​

You can write your own components using the same approach

html
<div class="c-hello-world bg-dark rounded-md">Hello world</div>
css
.c-hello-world {
    --c-hello-world-font-size: 2rem;
    
    /* CSS styles */
}

It's recommended to use TailwindCSS utility classes for most cases. If you want to style some elements in CSS inside the component, consider creating a new component.

If you don't want to create a new component, don't use complex conventions like BEM. Just use helper classes such as .c_item, .c_head, .c_body, .c_foot etc.

This way you can tell that it's a element related to the parent component.

In rare cases you want to prevent possible class conflicts you can add name of the component inside the class like this .c_hello_world_item.

Released under the MIT License.