v2.3.1 — zero-JS framework: full utility/component library, docs site, audit repair (browser-verified) - #5
Open
hesam-oxe wants to merge 10 commits into
Open
Conversation
- Added full 12-col grid, flex helpers, spacing/typography scales - Added zero-JS components: Tabs, Tooltips, Switch, Skeletons, Avatars, Timeline, Steps - Fixed broken dialog.modal, container-fluid, dark-mode toggles - Added universal focus-visible, prefers-contrast, print styles - Removed 708 important flags — utilities now win by cascade order - OKLCH color palettes for bg/text/border - Gzip: 14.4KB (was 15KB) - Min: 80.7KB raw
- Fix navbar-toggler never visible on mobile (couldn't open menu) - Fix anchor tooltips (missing anchor-name on .anchor) - Scope global p max-width to .prose instead of all paragraphs - Fix invalid .list-disc declaration - Renumber mislabeled utility sections (12-19 -> 41-48) - Add per-axis spacing (mt-6..py-px), full opacity & gray color scales - Add ring/divide/space/aspect/object/cursor/select/pointer/list/inset/ backdrop/transition/duration/line-clamp utilities - Add list-group, input-group, btn-close, offcanvas components - Add min-width responsive system (sm/md/lg/xl/xxl) - Rebuild dist/css/tani.min.css (was empty)
…rid, Premium Polish - Popover (zero-JS): hover/focus, 4 directions, glass + gold variants, arrows, a11y - Carousel (zero-JS): scroll-snap + anchor arrows/dots/touch, carousel-cols-2/3/4, autoplay marquee variant with pause-on-hover - Animations: animate-fade-in/slide-up/scale-in/pulse/float/bounce/spin/shimmer, hover-lift 3D, marquee, typewriter (all honor prefers-reduced-motion) - Container queries: .cq + .cq-sm/md/lg/xl-* utility classes - Subgrid: grid-subgrid / grid-cols-subgrid / grid-rows-subgrid - Premium polish: glass/glass-dark/glass-strong, gold tokens + gold-* utilities, text-gradient (brand/cool/sunset), glow-lg/xl/gold, shadow-colored, 3D tilt/rotate - index.html: live examples + code for every new feature - README: v2.2.0 changelog, updated comparison table, migration guide - Rebuilt dist/css/tani.min.css; bumped version to 2.2.0
…ency - New assets/docs.css: dark-default theme, gold accent, glassmorphic sidebar, sticky header, code blocks w/ copy, live preview demos, TOC, pager, responsive - New assets/docs.js: theme toggle (dark default + light), client-side search, copy-to-clipboard, self-contained syntax highlighter (html/css), mobile menu, TOC + active-nav via IntersectionObserver, prev/next pager - Rebuilt index.html: Getting Started, Core Concepts, Utilities, all Components (incl. Popover, Carousel, Animations, CQ, Subgrid), Responsive, RTL & Dark, Customization, Migration, FAQ, Changelog — every feature with live demos - Fixed highlighter token-restore bug (placeholder now ASCII-safe) - Verified: anchors resolve, JS runs without throwing, highlighter preserves text
…debar, search, TOC, live demos, copy buttons, prev/next, mobile nav
…earning path, extra pages - Playground: editable HTML/CSS + live iframe preview, device breakpoints, design-token color pickers, spacing & typography visualizers - Utility Reference: all 2075 classes parsed from tani.css, fuzzy search, category filter, printable quick-reference card - Templates: 10 page templates (landing, dashboard, blog, admin, login, pricing, portfolio, docs, ecommerce, 404) with live preview + download - Learn: beginner tutorial, advanced theming guide, scored quiz - Extra pages: 404, contributors, license, about - Framework: added gold buttons/text/border, sidebar-link, brand, carousel-cols-1 utilities; rebuilt tani.min.css - Perf: debounced header + reference search - Expanded FAQ; glass/gold nav polish Tested: highlighter preserves text, reference filter, category filter, template download decode, quiz scoring, JS runs without errors, all anchors resolve, all classes exist in framework, HTML well-formed.
…a parity) - Logical spacing ms/me/ps/pe (RTL-safe) - Full sizing scale: numeric w-/h-*, size-*, min/max-w/h, aspect ratios - Filters + backdrop-blur (combinable var stack): blur, brightness, contrast, grayscale, invert, saturate, sepia, hue-rotate - Transforms: per-axis translate/rotate/scale, skew, origin-*, transform-gpu - Transitions: property variants + full duration/delay/ease scales - Interactivity: appearance-none, resize, select-*, will-change-*, cursor-*, pointer-events-* - Typography scale, backgrounds/gradients, border styles + divide, responsive display - Form validation is-valid/valid-feedback, figure, floating labels, offcanvas (4 sides + backdrop), progress striped/animated, table variants - Animations library (ping, flash, heart-beat, fade/zoom/slide, shake, float, spin) - Docs: refreshed 2824-class reference, v2.3.0 changelog + demo section, CDN bump - Comprehensive tests: CSS integrity, feature presence, RTL/dark/a11y/reduced-motion, docs parity
- Responsive display utilities (.d-md-block etc.) were not wrapped in min-width media queries, so they applied at all widths. Now correctly scoped and overridable (base .d-none !important no longer blocks them). - skew-* used the unsupported individual 'skew' property; switched to transform: skewX()/skewY() (composes with translate/rotate/scale). - Dark mode never defined --surface, leaving .offcanvas background invalid; --surface now declared in :root and overridden in both dark contexts. - Added default .blur and .backdrop-blur (no-suffix) classes (only suffixed variants existed). - Docs: v2.3.0 demo section used bare 'flex' (-> d-flex); changelog notes fixes. Tests: add tests/visual/all-components.html (all new components) + tests/ smoke_selenium.py (Selenium + Chromium) asserting computed styles, responsive breakpoints via CDP, dark-mode toggle, RTL logical spacing, console errors, and screenshots. 28/28 smoke checks pass; 5/5 docs JS tests pass.
Framework (dist/css/tani.css, -700 lines): - add missing @Keyframes pulse (animate-pulse-slow was a silent no-op) - gradients: always-valid from/to fallbacks + working via-* via color-mix - .drop-shadow consumed by .filter chain (+ empty default declared) - restore standalone backdrop-blur-* while keeping .backdrop composition - define --text / --text-muted tokens (brand, sidebar-link, lead, floating labels, figure captions were silently unstyled) - real zero-JS wiring: navbar-toggle-check opens mobile menu, offcanvas-check drives panel+backdrop, toast dismiss via :has(.toast-hide-check:checked) - dedupe conflicting sections (forms/modal/pagination/progress/navs/tabs, v1 !important spacing block, tripled legacy responsive helpers) - unify spacing scale: mt-3 == lg-mt-3 == 0.75rem, monotonic 0..3rem - accordion rotated-minus glitch, breadcrumb styling regression, toggler icon double-background, brand margin, logical divide-*, d-xxl-* outside media query, data-tooltip-pos attribute, tabs x6, .display-1..3, --tw-* vars scoped to :root Docs: - docs.js search: fix malformed #section#anchor hrefs + smooth scroll - index.html: v2.3.1 version select, rem-based spacing table, dark-mode class in quick start, skip-link, tooltip demo, CDN tag bump - contributors.html: replace fabricated roster with real authors - README: unwrap code fence, honest sizes (183KB min/32KB gzip), zero-JS navbar/modal/offcanvas/toast examples, corrected comparison table - add CONTRIBUTING.md (was a dead link) Tooling/tests: - tools/minify.py: string-aware minifier (preserves calc() spaces); tani.min.css regenerated from source - smoke_selenium.py: portable paths (__file__ root, TANI_CHROME/ TANI_CHROMEDRIVER overrides) instead of hardcoded /home/kali paths Verified: tests/smoke_selenium.py 28/28 PASS on Chromium + 18 extra computed-style probes for the new fixes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Tani v2.3.1 — complete framework + full bug-audit repair
Brings the framework from v1.x to v2.3.1: a zero-JS, zero-build, utility-first CSS library with OKLCH colors, dark mode, RTL via logical properties, container queries and scroll-driven animations — followed by a complete bug audit in which every fix was verified in a real browser (Chromium).
Verification: Selenium smoke suite — 28/28 PASS (computed styles, breakpoints, dark-mode toggle, RTL mapping, console-error check) plus 18 extra computed-style probes for the new fixes.
What's included (release by release)
feat: v2.1 — utility + component library
12-col grid, full flexbox helpers, token-driven spacing scale, typography scale, full OKLCH palette utilities, shadows/glows, transforms & transitions, z-index/overflow/opacity/inset utilities.
feat: v2.1.1 — audit fixes
Responsive navbar breakpoint fix, anchor-tooltip wiring, scoped prose constraint, invalid-CSS corrections,
list-group/input-group/btn-close, min-width responsive prefix system (sm/md/lg/xl/xxl-).feat: v2.2.0 — premium polish
Zero-JS Popover (4 directions, glass/gold), Carousel (scroll-snap + marquee autoplay), animations library (all reduced-motion safe), container-query utilities, subgrid, glassmorphism/gold tokens, gradient text, 3D utilities.
feat: v2.3.0 — completeness release
Logical spacing (
ms/me/ps/pe-*), full numeric sizing scale (1–96 +size-*), filters & backdrop-filters, per-axis transforms, transitions/durations/eases, gradients withfrom/via/to-*, form validation states, floating labels, offcanvas (4 sides), striped/animated progress, extended animation set, responsive display utilities.fix: browser-verified v2.3.0 corrections
First smoke-test round caught 5 real bugs (filters, transforms, animations, figure, validation, progress, offcanvas, responsive display).
fix: v2.3.1 — THIS PR's core — full audit repair
@keyframes pulse; gradient fallbacks + workingvia-*;.drop-shadowconsumed by.filter; standalonebackdrop-blur-*restored (still composable)--text/--text-muted:has()!importantspacing block removed)divide-*; non-collidingdata-tooltip-pos; tabs ×6;.display-1..3Docs site (zero dependencies)
Interactive playground, live-searchable utility reference (2800+ classes extracted from source), 10 downloadable templates, learning path + quiz, search, TOC, prev/next pager, syntax highlighting, copy buttons, mobile nav.
Tooling & tests (new)
tools/minify.py— string-aware CSS minifier (preservescalc()spacing); min build regenerated from sourcetests/smoke_selenium.py— portable computed-style test suite (__file__root,TANI_CHROME/TANI_CHROMEDRIVERoverrides) with committed visual screenshotsCONTRIBUTING.mdaddedNo breaking renames: all pre-existing classes keep working (additive policy documented in CONTRIBUTING.md).