diff --git a/404.html b/404.html new file mode 100644 index 0000000..190b155 --- /dev/null +++ b/404.html @@ -0,0 +1,30 @@ + + + + +404 — Tani CSS Framework + + + + + +
+ TTani.css +
Docs★
+
+
+ +
+
404
+

Page not found

+

The page you are looking for drifted into the void. Let us get you back.

+
+ Back to docs + Open playground +
+
+
+ + + + \ No newline at end of file diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..5140362 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,46 @@ +# Contributing to Tani + +Thanks for your interest in improving Tani! + +## Ground rules + +1. **Additive by default** — new versions only add classes, never rename or remove existing ones. +2. **Zero-JS first** — prefer CSS-only mechanisms (`:checked`, `:target`, `:focus-within`, `
`, ``) over scripts. +3. **Logical properties** — use `margin-inline`/`padding-block`/`inset-*` so RTL works for free. +4. **Respect reduced motion** — every new animation needs a `prefers-reduced-motion` story. +5. **One source of truth** — before adding a rule, search the stylesheet. If the selector already exists, extend it instead of appending a competing definition (duplicate definitions are how most of our historical bugs happened). + +## Workflow + +```bash +git clone https://github.com/TaniCSS/Tani.git +cd Tani +# open index.html in a browser — that's the whole toolchain +``` + +- Edit `dist/css/tani.css` (the single source file). +- Regenerate the minified build after changes: + +```bash +python3 tools/minify.py dist/css/tani.css dist/css/tani.min.css +``` + +- Run the smoke test if you have Chrome/Chromium available (paths auto-detected): + +```bash +python3 tests/smoke_selenium.py +``` + +## Submitting + +1. Fork, then create a feature branch (`feat/my-component` or `fix/issue-123`). +2. Include a live demo built with Tani classes — screenshots are appreciated. +3. Keep PRs focused; one component/fix per PR. +4. Update `README.md` and `index.html` docs when you add user-facing classes. + +## Reporting bugs + +Open a [GitHub issue](https://github.com/TaniCSS/Tani/issues) with: +- the exact HTML/classes involved, +- browser + version, +- expected vs actual behavior. diff --git a/README.md b/README.md index 8bf2095..5e19aaf 100644 --- a/README.md +++ b/README.md @@ -1,41 +1,106 @@ -# Tani CSS Framework +
+ +# 🚀 Tani CSS Framework + +### The Advanced Zero-JS, Zero-Build CSS Framework + +[![Version](https://img.shields.io/badge/version-2.3.1-orange?style=for-the-badge&logo=semver)](https://github.com/TaniCSS/Tani/releases) +[![License](https://img.shields.io/badge/license-MIT-blue?style=for-the-badge)](LICENSE) +[![Size](https://img.shields.io/badge/min-~183KB-green?style=for-the-badge)](https://github.com/TaniCSS/Tani) +[![Size](https://img.shields.io/badge/gzip-~32KB-green?style=for-the-badge)](https://github.com/TaniCSS/Tani) +[![CSS Modern](https://img.shields.io/badge/CSS-Modern%202026-purple?style=for-the-badge)](https://developer.mozilla.org/en-US/docs/Web/CSS) +[![Zero JS](https://img.shields.io/badge/Zero-JS%20Components-red?style=for-the-badge)](#-god-mode-features) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen?style=for-the-badge)](CONTRIBUTING.md) **A lightweight, utility-first CSS framework with God Mode features that no other framework offers.** +[📖 Documentation](#-documentation) • [🚀 Quick Start](#-quick-start) • [✨ Features](#-god-mode-features) • [📊 Comparison](#-comparison) • [🎯 Examples](#-examples) • [🤝 Contributing](CONTRIBUTING.md) + +
+ --- -## Overview +## 🆕 What's New in v2.3.1 (bug-fix release) + +A full audit of the stylesheet and docs. Highlights: + +- 🐛 **Fixed** `.animate-pulse-slow` (referenced keyframes that didn't exist), gradient utilities (`from/to` now have fallbacks, `via-*` actually works via `color-mix`), `.drop-shadow` (now consumed by the `.filter` chain), and the `backdrop-blur-*` regression (standalone again, still composable with `.backdrop`) +- 🐛 **Fixed** undefined `--text` / `--text-muted` tokens that silently broke navbar brands, sidebar links, floating labels, `.lead`, figure captions +- ✨ **Real zero-JS wiring**: mobile navbar toggle (`navbar-toggle-check` checkbox pattern), offcanvas open/close + backdrop (`offcanvas-check`), toast close button (`toast:has(.toast-hide-check:checked)` via `:has()`) +- 🧹 **Deduplicated**: forms/modal/pagination/progress/nav sections existed 2–3× each with conflicting values — one canonical definition now wins everywhere +- 📐 **One spacing scale**: `m-1…m-12` now use the design-token scale (0.25 → 3rem, monotonic) consistently across base and responsive-prefixed utilities +- ♻️ Removed ~800 lines of dead/duplicate rules; minified build regenerated from source (`tools/minify.py`) +- 🌐 RTL-safe divide utilities restored to logical properties; tooltips gained a non-colliding `data-tooltip-pos` attribute; tabs support up to 6 panels; `.display-1..3` added + +--- + +## 🆕 What's New in v2.3.0 + +The "completeness" release — closing the gap with Tailwind v4, Bootstrap 5, and Bulma, plus full RTL / dark / a11y coverage: + +- ✅ **Logical spacing** — `ms-/me-/ps-/pe-*` (RTL-safe margins & padding) +- ✅ **Full Sizing scale** — numeric `w-/h-*` (1–96), `size-*`, `min-w/h-*`, `max-w/h-*` (prose/sm–2xl/screen) +- ✅ **Filters** — `blur`, `brightness`, `contrast`, `grayscale`, `invert`, `saturate`, `sepia`, `hue-rotate` + `backdrop-blur` (combine multiple with the `.filter` / `.backdrop` classes) +- ✅ **Transforms** — per-axis `translate-x/y`, `rotate`, `scale-x/y`, `skew-x/y`, `origin-*`, `transform-gpu` +- ✅ **Transitions** — property variants + full `duration-*` / `delay-*` / `ease-*` +- ✅ **Interactivity** — `appearance-none`, `resize`, `select-*`, `will-change-*`, `cursor-*`, `pointer-events-*` +- ✅ **Typography scale** — `tracking-*` / `leading-*` / `text-wrap` / `truncate` / `font-*` +- ✅ **Backgrounds & gradients** — `bg-cover/contain`, `bg-clip-text`, `bg-gradient-to-*` + `from/via/to-*` +- ✅ **Borders & divide** — `border-*` styles, `border-x/y-*`, `divide-x/y` + color variants +- ✅ **Form validation** — `is-valid` / `.valid-feedback` (symmetric with `is-invalid`) +- ✅ **Components** — `figure`, floating labels, full `offcanvas` (4 sides + backdrop), `progress` striped/animated, `table` striped/bordered/sm +- ✅ **Animations library** — `ping`, `flash`, `heart-beat`, `fade-in-*`, `zoom-*`, `slide-in-*`, `shake`, `float`, `spin-slow` (+ reduced-motion safe) +- ✅ **Responsive display** at `md / lg / xl / xxl` + +--- + +## 🎯 Overview Tani is a **next-generation CSS framework** that combines the best of modern CSS features with a utility-first approach. Built with **2026 standards**, it includes features that **no other framework offers**: -- **Scroll-Driven Animations** (Pure CSS, no JS) -- **Container Queries** (Component-aware responsiveness) -- **OKLCH Color System** (Perceptually uniform colors with auto-generated variants) -- **Native Dark Mode** (System-preference based, zero JS) -- **RTL/LTR Support** (Logical Properties, built-in) -- **Fluid Typography** (clamp-based scaling, no media queries) -- **GPU-Accelerated Utilities** (Hardware-accelerated animations) -- **Anchor Positioning** (Smart tooltips without JS) +- ✅ **Scroll-Driven Animations** (Pure CSS, no JS) +- ✅ **Container Queries** (Component-aware responsiveness) +- ✅ **OKLCH Color System** (Perceptually uniform colors with auto-generated variants) +- ✅ **Zero-JS Components** (Modal, Accordion, Dropdown, Tabs, Tooltip, Offcanvas, Toast using native HTML/CSS) +- ✅ **Native Dark Mode** (System-preference based, zero JS) +- ✅ **RTL/LTR Support** (Logical Properties, built-in) +- ✅ **Fluid Typography** (clamp-based scaling, no media queries) +- ✅ **Debug Mode** (Visual layout inspector) +- ✅ **GPU-Accelerated Utilities** (Hardware-accelerated animations) +- ✅ **Anchor Positioning** (Smart tooltips without JS) +- ✅ **Complete Grid System** (12-col, spans, placement) +- ✅ **Skeletons, Avatars, Stat Cards, Timeline, Steps** +- ✅ **Print & High-Contrast support** + +--- -## Quick Start +## ⚡ Quick Start ### Installation -**Option 1: Download** +**Option 1: CDN** +```html + +``` +**Option 2: Download** ```html ``` +**Option 3: NPM (Coming Soon)** +```bash +npm install tanicss +``` + ### Basic Usage ```html - + - My App @@ -47,49 +112,580 @@ Tani is a **next-generation CSS framework** that combines the best of modern CSS ``` -## Comparison +--- + +## 🔥 God Mode Features + +### 1. 🌊 Scroll-Driven Animations + +Animate elements as they scroll into view — **no JavaScript required**! + +```html +
+ This card fades in as you scroll down +
+ +
+ This card scales up as you scroll +
+``` + +```css +/* How it works (built into Tani) */ +.tani-fade-in { + animation: taniFadeIn linear both; + animation-timeline: view(); + animation-range: entry 0% cover 40%; +} +``` + +**Browser Support:** Chrome 115+, Edge 115+ + +--- + +### 2. 📦 Container Queries + +Components adapt based on their **container size**, not viewport: + +```css +.card { + container-type: inline-size; + container-name: tani-card; +} + +@container tani-card (min-width: 400px) { + .card-horizontal-layout { + display: grid; + grid-template-columns: 1fr 2fr; + } +} +``` + +**Use Case:** A card component that displays vertically in a sidebar and horizontally in main content — without writing separate media queries. + +--- + +### 3. 🎨 OKLCH Color System + +Perceptually uniform colors with **automatic hover states**: + +```css +:root { + --primary: oklch(70% 0.18 70); + --primary-hover: oklch(from var(--primary) calc(l - 8%) c h); +} + +.btn-primary:hover { + background-color: var(--primary-hover); +} +``` + +**Benefits:** +- Better color accuracy than HEX/RGB +- Automatic variant generation +- Zero extra code for hover states +- Perfect dark mode compatibility + +--- + +### 4. ⚡ Zero-JS Components + +Modals, accordions, dropdowns and offcanvas panels work **without JavaScript**: + +```html + +Open Modal + + +
+

Modal Title

+

Modal content here...

+ Close +
+ +``` + +```html + +
+ Click to expand +
+

Content here...

+
+
+``` + +**Benefits:** +- Works even with JavaScript disabled +- Better accessibility (keyboard navigation built-in) +- Smaller bundle size +- Progressive enhancement + +--- + +### 5. 🌙 Native Dark Mode + +Automatically adapts to system preferences — **no toggle needed**: + +```css +@media (prefers-color-scheme: dark) { + :root:not(.light-mode) { + --body-bg: oklch(15% 0.01 250); + --body-color: oklch(95% 0.01 250); + } +} +``` + +Just include Tani, and dark mode works automatically based on the user's OS settings. Force either mode with the `dark-mode` / `light-mode` classes on ``. + +--- + +### 6. 🌐 RTL/LTR Support + +Built-in support for right-to-left languages using **Logical Properties**: + +```css +.container { + margin-inline: auto; /* Works in both LTR and RTL */ + padding-inline: 1rem; +} + +.text-start { + text-align: start; /* left in LTR, right in RTL */ +} +``` + +**Usage:** +```html + + + + +``` + +**No extra RTL stylesheet needed!** + +--- + +### 7. 📏 Fluid Typography + +Smooth scaling from mobile to 4K using `clamp()`: + +```css +:root { + --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); + --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); +} +``` + +--- + +### 8. 🐛 Debug Mode + +Visual layout inspector for debugging: + +```html + + + +``` + +Adds colored outlines to all elements for easy debugging of spacing, alignment, and layout issues. + +--- -| Feature | Tani v2.0 | Tailwind v4 | Bootstrap 5 | Bulma | -|---------|-----------|-------------|-------------|-------| +### 9. 🎯 Anchor Positioning + +Smart tooltips that automatically find the best position: + +```css +.tooltip { + position: absolute; + position-anchor: --trigger; + top: anchor(bottom); + left: anchor(center); + position-try-fallbacks: flip-block, flip-inline; +} +``` + +--- + +### 10. 🚀 GPU-Accelerated Utilities + +Hardware-accelerated animations for 60fps performance: + +```html +
+ +
+ +
+ +
+``` + +--- + +## 📊 Comparison + +| Feature | Tani 2.3 | Tailwind v4 | Bootstrap 5 | Bulma | +|---------|----------|-------------|-------------|-------| | **Scroll-Driven Animations** | ✅ | ❌ | ❌ | ❌ | -| **Container Queries** | ✅ | ❌ | ❌ | ❌ | -| **OKLCH Colors** | ✅ | ❌ | ❌ | ❌ | -| **Zero-JS Modal** | ✅ | ❌ | ❌ | ❌ | -| **Zero-JS Accordion** | ✅ | ❌ | ❌ | ❌ | +| **Container Queries** | ✅ | ✅ | ❌ | ❌ | +| **OKLCH Colors** | ✅ | ✅ | ❌ | ❌ | +| **Ships interactive components with no JS runtime** | ✅ | ❌ | ❌ (JS bundle) | ❌ (JS bundle) | | **Native RTL/LTR** | ✅ | ⚠️ Plugin | ⚠️ Partial | ✅ | -| **Native Dark Mode** | ✅ | ✅ | ❌ | ❌ | +| **Native Dark Mode** | ✅ | ✅ | ✅ | ❌ | | **Debug Mode** | ✅ | ❌ | ❌ | ❌ | | **Anchor Positioning** | ✅ | ❌ | ❌ | ❌ | -| **Size (Gzip)** | ~15KB | ~10KB | ~25KB | ~20KB | -| **JS Dependency** | ❌ None | ⚠️ Purge | ✅ Bundle | ❌ None | +| **Grid System** | ✅ | ✅ | ✅ | ✅ | +| **Skeletons & Avatars** | ✅ | Manual | ❌ | ❌ | +| **Timeline & Steps** | ✅ | Manual | ❌ | ❌ | +| **Build step required** | ❌ None | ✅ CLI (or CDN play) | ❌ (CDN) | ❌ (CDN) | + +*Honest footnote:* Tailwind ships no components at all (it's a utility language), so the "zero-JS components" row compares Tani against frameworks that ship component libraries requiring JavaScript runtimes. --- -## Browser Support +## 🎨 Components -Tani supports all modern browsers: +### Buttons + +```html + + + + + +``` + +### Cards + +```html +
+
+
Card Title
+

Card content...

+ Go somewhere +
+
+``` + +### Alerts + +```html + +``` -- Chrome (latest) -- Firefox (latest) -- Safari (latest) -- Edge (latest) -- Opera (latest) +### Forms -**Note:** Some advanced features (Scroll-Driven Animations, Container Queries, Anchor Positioning) require modern browsers. Graceful fallbacks are provided for older browsers. +```html +
+
+ + +
+ +
+``` + +### Tables + +```html + + + + + + + + + + + + + + + +
#NameEmail
1John Doejohn@example.com
+``` + +### Navigation (with zero-JS mobile menu) + +The toggler is a `