Winduum is a small CSS component library that uses plain CSS and TailwindCSS for utility classes. It emphasizes modern CSS usage, modularity, accessibility, and compatibility with any framework. It extends TailwindCSS and focuses on minimizing JavaScript for speed.
Features
Modern and progressive
Leverages the use of modern CSS syntax, such as CSS properties, modern pseudo selectors, modern CSS reset, nesting, low specificity, color-mix, view transitions and more.
Modular and customizable
Each component is written in plain CSS, so you can copy and paste it, or import it from npm and customize it with CSS properties.
Accessible web standards
Components are accessible and based on web standards, allowing you to build complex UI/UX projects. Modern approaches like dialog, popover, or details are leveraged.
Framework agnostic
Everything is written in plain CSS and JS, so you can use it with any framework. Pre-built components for Vue, optional TailwindCSS support.
Extends TailwindCSS
Adds a plugin for TailwindCSS which adds new handy utilities and CSS properties. You don't need to use TailwindCSS, but it is recommended for full experience.
Small and fast
Uses optimized standards and minimizes JavaScript code to ensure efficiency and speed.
NPM Installation
Install Winduum via npm using the command `npm i winduum`. This allows for easy integration into Node.js projects.
TailwindCSS Integration
Winduum can be used with or without TailwindCSS. Includes customizable CSS with TailwindCSS to match utility classes.
PostCSS/LightingCSS Compatibility
Winduum components are compatible with PostCSS and LightingCSS to enhance CSS processing in browsers.
Stylelint Support
Integration with Stylelint to enforce coding standards and maintain consistent styles.
CDN Links
Use Winduum from a CDN for straightforward inclusion of stylesheets and components without local installation.
Online Tryout
Allows users to try Winduum online with frameworks like Vite, Astro, Nuxt, and others.
Framework-agnostic
Winduum is framework-agnostic, allowing you to create components using your preferred framework or adapt JavaScript primitives in any framework.
Modern CSS Features
Leverages modern CSS features including properties like CSS Logical Properties, CSS Nesting, CSS color-mix, and modern pseudo selectors like :where, :is, :has. It also includes a modern CSS reset and APIs like View Transition API, Dialog API, and Popover API.
Component Naming Convention
Recommends prefixing component classes and utility classes for clarity, such as 'component: x-name' and 'utilities: name'.
CSS Property Naming
Encourages a consistent naming style for CSS properties, using a common pattern like 'x-name-font-size'.
Directory Structure Recommendation
Suggests organizing your project with directories like 'base', 'components', 'theme', and 'utilities' for ease of navigation.
Component Usage Examples
Provides examples of how to use components in HTML without writing complex TailwindCSS classes and how to write your own components.
Common Colors
Defines basic colors like primary, light, and dark. These can be used throughout the design to maintain consistency.
Main Colors
Includes colors for main elements, offering primary, secondary, and tertiary shades. Helps in designing main sections of a page.
Body Colors
Body colors have specific shades for background elements, ensuring the body of the page has a clear visual style.
State Colors
State colors like success, error, warning, and info indicate status messages, enhancing UI feedback.
Foreground Colors
Each color has a foreground variant for better visibility against backgrounds, using a ':foreground' postfix.
Accent Colors
Allows setting of an accent color via accent-color property. Useful for components that need a distinct highlight color.
SVG Icon Usage
You can use icons as SVGs such as Heroicons. Winduum uses these internally via CSS llke Mask utility class.
CSS Masking
Defines CSS mask properties to create icon masks using data URLs for masks. Example uses mask variable for icon.
<svg> and <use> Method
Shows how to define and use SVG icons via <use> method. Use <svg> and <symbol> to declare icons, then <use href="#icon-id"> in components.
Vue and React Support for Heroicons
Integration with Vue and React libraries to use Heroicons easily within projects.
Grid
Provides a grid layout system using TailwindCSS to organize your content in structured columns and rows.
Flex
Allows flexible layouts through TailwindCSS, making it easy to create dynamic and adaptable designs with flexbox capabilities.
Gap
Enables spacing between grid items or flex items, enhancing visual clarity and organization.
Container
Offers a utility to center and contain your content within a specified width using TailwindCSS.
Divide Gap
Provides additional spacing utilities to evenly divide space between elements.
CSS Layers Integration
The page introduces CSS Layers as a method to have better control over specificity. The CSS Layers feature can be used with TailwindCSS layers to manage how different layers of styling are applied.
TailwindCSS v3 Layer Usage
For TailwindCSS v3, users can define specific layers for base styles, components, utilities, and variants. The example provided shows how to import specific layers from the source CSS files and apply them using the @layer directive.
TailwindCSS v4 Default Layering
TailwindCSS v4 uses layers by default, meaning no additional configuration for layer control is necessary.
CSS Configuration
Allows configuration of CSS using Tailwind CSS settings in JSON format to customize the appearance of alerts and modals.
Tailwind CSS v3 Support
Includes support for the Tailwind CSS v3 through configuration files and extends it by setting up theme properties in the JavaScript file.
Customizable colors and fonts
Allows users to define custom color schemes and font families by specifying keys and values in the provided configuration language. Default values are also provided for reference.
Size configuration
Provides users the ability to customize sizes such as border width and spacing through specifying explicit values, with defaults available for guidance.
Default Theme
Provides color customization using the \:root selector for easy theme extension. Supports TailwindCSS v3 and v4 with links to default CSS files.
Default P3 Theme
Offers high-range colors compatible with P3 displays, allowing enhanced color support on newer devices.
Dark Theme
Defines a dark color scheme for use with TailwindCSS, utilizing CSS variables for easy theme management.
Compatibility Support
Supports 95% global usage of the style system, with options to use RGB variants for improved compatibility, specifically with TailwindCSS v3.
Modern CSS Reset
Includes a modern CSS reset that disables the default TailwindCSS reset to provide a more minimalist styling approach.
Pre-defined Style Resets
Provides pre-defined styles for various HTML elements to ensure everything displays consistently without default browser styles.
Improved Font Consistency
Ensures consistency of default fonts across all browsers by using a standard font stack.
Box-sizing inheritance
Sets box-sizing inheritance to ensure consistent behavior of layout and design.
Link Style Removal
Removes link styles for specific forms and elements to create a uniform appearance.
Table Layout Reset
Resets table layout to prevent default vertical alignment issues and ensure consistent display.
Pointer Cursor for Links
Forces the pointer cursor for elements with an ":where(a, button)" to indicate interactiveness.
Defaults
Defines default styles or rules applied to certain HTML elements or pseudo-elements with TailwindCSS 3. This includes default color and background styles.
Cursor
Allows you to change the default cursor appearance for clickable elements, such as setting it to a pointer.
Svg
Sets the default size of an SVG as a small square if neither width nor height is specified.
Hr
Uses default styling for horizontal rules (<hr> elements).
Code
Provides styles for displaying code blocks with padding, background, and border styling.
Kbd
Applies styles for keyboard input elements, displaying them with a specific font style, padding, and background.
Html & Body
Provides default styles for basic text and color properties for the <html> and <body> elements.
Breakpoints Definition
A set of predefined breakpoints with specific pixel values to cover various screen resolutions. The breakpoints are defined similarly to TailwindCSS but with some variations in values. Examples include xs at 360px, sm at 416px, and so on up to 2xxl at 2528px. These are utilized for responsive design.
Responsive Design Principles
The breakpoints extend the same principles of responsive design, allowing developers to design web pages that adapt to different screen sizes. This allows for creating a single website layout that works on multiple devices.
Custom Media Specification
Utilizes the Custom Media Specification which requires either PostCSS or LightningCSS. This allows developers to define and re-use media queries in CSS stylesheets effectively.
spin
A keyframe animation that rotates an element 360 degrees.
fade-in
A keyframe animation that transitions an element's opacity from 0% to visible.
fade-out
A keyframe animation that transitions an element's opacity from fully visible to 0%.
View Transitions API Integration
Activates the View Transitions API to enable cross-document animations.
Customizable CSS Properties
Allows the CSS properties to be modified through configuration files.
Animation Classes
Provides classes like 'view-transition-main' to elements for animating page navigation.
Transition Timing Control
Enables control over animation duration and delay using CSS variables 'animation-duration' and 'animation-delay'.
Variants
Allows customization of badges with various display styles like solid or outline to suit different design needs.
Sizes
Badges can be adjusted in size (xs, sm, md, lg, xl) for responsiveness and visual hierarchy.
Colors
Supports multiple predefined colors like blue, green, red, etc., to visually differentiate badges.
Icons
Integration with icons to enhance visual communication within badges, making them more descriptive.
Ellipsis
Allows for text truncation with ellipsis to manage long text within badges.
Usage
Provides the CSS import statement needed to use the Breadcrumb component: `@import "winduum/src/components/breadcrumb/index.css" layer(components);`.
Variants
Offers a default styling option for the breadcrumb component.
Props
Details available properties for the component customization. It provides a default configuration.
Installation
Guides on installing the Breadcrumb component for different frameworks: Winduum, Winduum-Vue, and Winduum-React.
Variants
The Button component supports different variants such as default, outline, ghost, and link which dictate the button's appearance and behavior.
Sizes
Buttons can be configured in different sizes like small, medium, and large to fit various UI requirements.
Colors
Button colors can be customized, offering a range of predefined color options such as primary, secondary, and more.
Icons
Buttons can include icons, allowing them to be placed before or after the button text for visual enhancement.
Loading State
The Button component supports a loading state, visually indicating that an operation is in progress.
Disabled State
Buttons can be disabled, making them non-interactive and grayed out to prevent user interaction.
Usage
Guides on how to import and use the card component in a project. The component can be imported using the provided CSS path.
Variants
Different preset styles available for the card component. You can choose from the 'default' variant.
Props
Properties that can be applied to the card component to customize its appearance or functionality. Available as 'default'.
Installation
Instructions on how to install the card component within different frameworks including winduum, winduum-vue, and winduum-react.
Examples
Code snippets with visual examples demonstrating how to implement the card component in a project. Examples include a default card and a card with an image.
Basic Usage
Provides the basic implementation of the carousel component using <Carousel> component.
Variants
Allows customization of the carousel appearance through different variants.
JavaScript API
Enables advanced customization and interaction using functions like next(), prev(), and setActive().