diff --git a/submissions/examples/kanban-task-board/README.md b/submissions/examples/kanban-task-board/README.md new file mode 100644 index 00000000..74cf0cfd --- /dev/null +++ b/submissions/examples/kanban-task-board/README.md @@ -0,0 +1,71 @@ +# Kanban Task Board Component + +A modern Kanban-style task management component with columns for organizing tasks by status (To Do, In Progress, Completed). Task cards feature staggered reveal animations, hover lift effects, and color-coded tags. + +## Classes + +| Class | Description | +|---|---| +| `ease-kanban` | Horizontal board container with scroll support | +| `ease-kanban-column` | Status column (To Do / In Progress / Completed) | +| `ease-kanban-header` | Column header with dot indicator, title, and count | +| `ease-kanban-dot` | Status indicator dot | +| `ease-kanban-dot-todo` | Blue dot for To Do column | +| `ease-kanban-dot-progress` | Amber dot with pulse for In Progress column | +| `ease-kanban-dot-done` | Green dot for Completed column | +| `ease-kanban-count` | Task count badge | +| `ease-task-card` | Individual task card with entrance animation and hover lift | +| `ease-task-title` | Task title text | +| `ease-task-meta` | Due date or status metadata | +| `ease-task-tag` | Category tag badge | +| `ease-task-tag-dev` | Purple tag for development tasks | +| `ease-task-tag-design` | Pink tag for design tasks | + +## Usage + +```html +
+
+
+ +

To Do

+ 3 +
+
+ Dev +

Create API documentation

+ Due Jun 12 +
+
+ +
+
+ +

In Progress

+ 2 +
+
+ Dev +

Authentication system

+ Due Jun 8 +
+
+ +
+
+ +

Completed

+ 4 +
+
+ Dev +

Project setup

+ Done +
+
+
+``` + +## Why it fits EaseMotion CSS + +Pure CSS Kanban board with staggered column and card entrance animations, pulsing status indicators, and hover lift effects. Uses design tokens for colors and spacing. Respects `prefers-reduced-motion`. diff --git a/submissions/examples/kanban-task-board/demo.html b/submissions/examples/kanban-task-board/demo.html new file mode 100644 index 00000000..e2dd989b --- /dev/null +++ b/submissions/examples/kanban-task-board/demo.html @@ -0,0 +1,110 @@ + + + + + + Kanban Task Board — EaseMotion CSS + + + + +

Kanban Task Board

+

Column-based task management component — Issue #1165

+ +
+ +
+
+ +

To Do

+ 3 +
+ +
+ Design +

Design landing page

+ Due Jun 10 +
+ +
+ Dev +

Create API documentation

+ Due Jun 12 +
+ +
+ Dev +

Set up CI/CD pipeline

+ Due Jun 15 +
+
+ +
+
+ +

In Progress

+ 2 +
+ +
+ Dev +

Authentication system

+ Due Jun 8 +
+ +
+ Design +

Dashboard wireframes

+ Due Jun 11 +
+
+ +
+
+ +

Completed

+ 4 +
+ +
+ Dev +

Project setup

+ Done +
+ +
+ Design +

Color palette

+ Done +
+ +
+ Dev +

Database schema

+ Done +
+ +
+ Dev +

API endpoints

+ Done +
+
+ +
+ + diff --git a/submissions/examples/kanban-task-board/style.css b/submissions/examples/kanban-task-board/style.css new file mode 100644 index 00000000..6833e629 --- /dev/null +++ b/submissions/examples/kanban-task-board/style.css @@ -0,0 +1,192 @@ +/* ============================================================ + EaseMotion CSS — Kanban Task Board Component + Issue #1165 + ============================================================ */ + +/* ── Board container ─────────────────────────────────────── */ + +.ease-kanban { + display: flex; + gap: var(--ease-space-5, 1.25rem); + max-width: 960px; + width: 100%; + overflow-x: auto; + padding-bottom: var(--ease-space-2, 0.5rem); +} + +/* ── Column ───────────────────────────────────────────────── */ + +.ease-kanban-column { + flex: 1; + min-width: 260px; + background: rgba(255, 255, 255, 0.03); + border: 1.5px solid rgba(255, 255, 255, 0.06); + border-radius: var(--ease-radius-lg, 0.75rem); + padding: var(--ease-space-4, 1rem); + display: flex; + flex-direction: column; + gap: var(--ease-space-3, 0.75rem); + animation: ease-kf-kanban-fade-in var(--ease-speed-slow, 600ms) var(--ease-ease, cubic-bezier(0.4,0,0.2,1)) both; +} + +.ease-kanban-column:nth-child(2) { animation-delay: 100ms; } +.ease-kanban-column:nth-child(3) { animation-delay: 200ms; } + +/* ── Column header ───────────────────────────────────────── */ + +.ease-kanban-header { + display: flex; + align-items: center; + gap: var(--ease-space-2, 0.5rem); + padding-bottom: var(--ease-space-3, 0.75rem); + border-bottom: 1.5px solid rgba(255, 255, 255, 0.06); + margin-bottom: var(--ease-space-1, 0.25rem); +} + +.ease-kanban-header h3 { + margin: 0; + font-size: var(--ease-text-sm, 0.875rem); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + flex: 1; +} + +.ease-kanban-count { + font-size: var(--ease-text-xs, 0.75rem); + padding: 0.125rem 0.5rem; + border-radius: var(--ease-radius-full, 999px); + background: rgba(255, 255, 255, 0.08); + color: rgba(255, 255, 255, 0.5); + font-weight: 500; +} + +/* ── Column dot indicators ───────────────────────────────── */ + +.ease-kanban-dot { + width: 10px; + height: 10px; + border-radius: 50%; + flex-shrink: 0; +} + +.ease-kanban-dot-todo { + background: var(--ease-color-info, #3b82f6); +} + +.ease-kanban-dot-progress { + background: var(--ease-color-warning, #f59e0b); + animation: ease-kf-kanban-pulse 2s var(--ease-ease, cubic-bezier(0.4,0,0.2,1)) infinite; +} + +.ease-kanban-dot-done { + background: var(--ease-color-success, #22c55e); +} + +/* ── Task card ───────────────────────────────────────────── */ + +.ease-task-card { + background: rgba(255, 255, 255, 0.05); + border: 1.5px solid rgba(255, 255, 255, 0.08); + border-radius: var(--ease-radius-md, 0.5rem); + padding: var(--ease-space-3, 0.75rem) var(--ease-space-4, 1rem); + animation: ease-kf-kanban-card-in var(--ease-speed-medium, 300ms) var(--ease-ease-out, cubic-bezier(0,0,0.2,1)) both; + transition: + transform var(--ease-speed-medium, 300ms) var(--ease-ease, cubic-bezier(0.4,0,0.2,1)), + border-color var(--ease-speed-medium, 300ms) var(--ease-ease, cubic-bezier(0.4,0,0.2,1)), + box-shadow var(--ease-speed-medium, 300ms) var(--ease-ease, cubic-bezier(0.4,0,0.2,1)); +} + +.ease-task-card:nth-child(2) { animation-delay: 50ms; } +.ease-task-card:nth-child(3) { animation-delay: 100ms; } +.ease-task-card:nth-child(4) { animation-delay: 150ms; } + +.ease-task-card:hover { + transform: translateY(-3px); + border-color: rgba(255, 255, 255, 0.2); + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); +} + +.ease-task-title { + margin: var(--ease-space-1, 0.25rem) 0; + font-size: var(--ease-text-sm, 0.875rem); + line-height: 1.5; + font-weight: 500; +} + +.ease-task-meta { + display: block; + font-size: var(--ease-text-xs, 0.75rem); + color: rgba(255, 255, 255, 0.35); + margin-top: var(--ease-space-1, 0.25rem); +} + +/* ── Task tags ───────────────────────────────────────────── */ + +.ease-task-tag { + display: inline-block; + font-size: 0.625rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.06em; + padding: 0.125rem 0.5rem; + border-radius: var(--ease-radius-full, 999px); +} + +.ease-task-tag-dev { + background: rgba(108, 99, 255, 0.15); + color: var(--ease-color-primary-light, #a09af8); +} + +.ease-task-tag-design { + background: rgba(236, 72, 153, 0.15); + color: #f472b6; +} + +/* ── Keyframes ───────────────────────────────────────────── */ + +@keyframes ease-kf-kanban-fade-in { + from { + opacity: 0; + transform: translateY(8px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes ease-kf-kanban-card-in { + from { + opacity: 0; + transform: translateY(6px) scale(0.98); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +@keyframes ease-kf-kanban-pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.5; } +} + +/* ── Reduced motion ──────────────────────────────────────── */ + +@media (prefers-reduced-motion: reduce) { + .ease-kanban-column, + .ease-task-card { + animation: none; + } + .ease-task-card { + transition: none; + } + .ease-task-card:hover { + transform: none; + box-shadow: none; + } + .ease-kanban-dot-progress { + animation: none; + } +}