# Water.css — Classless CSS Framework for Simple Websites

> Water.css is a drop-in collection of CSS styles that makes simple websites look clean without adding classes, providing automatic dark mode and styling for all standard HTML elements.

## Install

Save as a script file and run:

# Water.css — Classless CSS Framework for Simple Websites

## Quick Use
```html
<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css">
```
No classes needed. Write standard HTML and it looks good.

## Introduction
Water.css is a classless CSS framework that styles bare HTML elements. Drop a single `<link>` tag into any page and every heading, paragraph, form, table, and code block gets clean, modern styling with automatic dark mode support—no class names required.

## What Water.css Does
- Styles all standard HTML5 elements without requiring any CSS classes
- Provides automatic dark and light themes based on system preferences
- Handles responsive typography and spacing out of the box
- Styles form elements (inputs, selects, textareas, buttons) consistently
- Formats code blocks, tables, blockquotes, and details/summary elements

## Architecture Overview
Water.css is a single CSS file built from PostCSS source modules. It uses CSS custom properties for theming (colors, spacing, fonts) and the `prefers-color-scheme` media query for automatic dark mode. Every rule targets bare HTML element selectors—no class or ID selectors—making it truly classless. The build produces three variants: light-only, dark-only, and automatic.

## Installation & Configuration
- Link from a CDN for instant setup with no build step
- Install via npm: `npm install water.css` for local builds
- Choose between `water.min.css` (auto), `light.min.css`, or `dark.min.css`
- Override CSS custom properties (`--background-body`, `--text-main`, etc.) for custom themes
- Works with any static site generator, documentation tool, or plain HTML page

## Key Features
- Zero-class approach: write semantic HTML and get styled output
- Automatic dark/light mode via `prefers-color-scheme`
- Tiny file size under 2KB gzipped
- CSS custom properties for easy theme customization
- Accessibility-focused defaults with proper contrast ratios

## Comparison with Similar Tools
- **Milligram** — provides a grid system and utility classes; Water.css is purely classless
- **Pico CSS** — similar classless concept with more components; Water.css is simpler and smaller
- **MVP.css** — another classless framework; Water.css has better dark mode and broader element coverage
- **new.css** — minimalist classless styles; Water.css offers more theming options via custom properties
- **Sakura** — classless CSS with a different aesthetic; Water.css provides automatic dark mode

## FAQ
**Q: Do I need to add any CSS classes to my HTML?**
A: No. Water.css targets element selectors only. Standard HTML elements are styled automatically.

**Q: How does automatic dark mode work?**
A: The default `water.css` file uses `prefers-color-scheme` to match the user's system preference, switching colors via CSS custom properties.

**Q: Can I use Water.css alongside other CSS frameworks?**
A: It can conflict with frameworks that style the same elements. It works best as the sole stylesheet or as a base with custom overrides.

**Q: Is Water.css suitable for complex web applications?**
A: It is designed for simple content pages, documentation, and prototypes. Applications with custom layouts typically need a class-based framework.

## Sources
- https://github.com/kognise/water.css
- https://watercss.kognise.dev/

---
Source: https://tokrepo.com/en/workflows/asset-bfb29eba
Author: Script Depot