Skip to content

Update examples HTML files to use dry2.css #2

Description

@bjinwright

Description

Migrate all example HTML files from Tailwind CDN to the new dry2.css framework. This involves removing Tailwind dependencies, converting utility classes to dry2.css semantic classes and CSS variables, and ensuring all showcase pages maintain their functionality and appearance while showcasing the dry2.css capabilities.

Acceptance Criteria

  • All example HTML files (~27 files) use dry2.css instead of Tailwind CDN
  • Tailwind CDN script tags removed from all files
  • Existing Tailwind utility classes converted to dry2.css equivalents
  • CSS custom styles removed where dry2.css provides alternatives
  • All component showcases remain functional and visually consistent
  • Navigation and partial files (nav.inc.html, footer.inc.html) updated
  • Responsive behavior maintained across all breakpoints
  • No visual regressions compared to Tailwind version

Implementation Plan

Commits

  • Commit 1: docs: create dry2.css migration reference guide - Document mapping between Tailwind classes and dry2.css equivalents for consistency across all HTML files
  • Commit 2: refactor: migrate main index.html to dry2.css - Convert examples/index.html as pilot implementation to establish patterns
  • Commit 3: refactor: migrate navigation partials to dry2.css - Update nav.inc.html and footer.inc.html with dry2.css classes
  • Commit 4: refactor: migrate button and form showcases to dry2.css - Convert button-showcase.html, toggle-switch-showcase.html, select-showcase.html
  • Commit 5: refactor: migrate layout component showcases to dry2.css - Convert card-showcase.html, accordion-showcase.html, tabs-showcase.html, dialog-showcase.html, drawer-showcase.html
  • Commit 6: refactor: migrate content component showcases to dry2.css - Convert avatar-showcase.html, badge-showcase.html, chat-bubble-showcase.html, timeline-showcase.html, breadcrumbs-showcase.html
  • Commit 7: refactor: migrate utility component showcases to dry2.css - Convert stat-showcase.html, countdown-showcase.html, qr-showcase.html, toast-showcase.html, code-showcase.html
  • Commit 8: refactor: migrate remaining showcases and partials to dry2.css - Convert template-showcase.html, component-builder-showcase.html, and dialog partials
  • Commit 9: style: update base.css for dry2.css compatibility - Refactor examples/static/css/base.css to use dry2.css variables and remove Tailwind-specific styles
  • Commit 10: docs: update examples documentation - Add comments and documentation about dry2.css usage in example files

Technical Notes

  • dry2.css Location: src/dry2/css/dry2.css (3133 lines)
  • Migration Strategy: Replace Tailwind CDN with local dry2.css link: <link rel="stylesheet" href="../src/dry2/css/dry2.css">
  • Variable Usage: Use CSS variables like var(--stem-spacing-md), var(--stem-color-primary) instead of Tailwind utility classes
  • Semantic Classes: Prefer semantic HTML with dry2.css classes over utility-first approach
  • Responsive: dry2.css is mobile-first, use breakpoint variables --stem-breakpoint-md, etc.
  • Components Affected: 21 component showcases + index + 3 partials
  • Preserve Functionality: All HTMX, Alpine.js, and web component functionality must remain intact

Created via octoflow TDD workflow

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions