Skip to content

feat: add Kanban Task Board Component (#1165) #1240

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SAPTARSHI-coder merged 1 commit into from
Jun 4, 2026
+373 −0
Merged

feat: add Kanban Task Board Component (#1165) #1240

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 71 additions & 0 deletions submissions/examples/kanban-task-board/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
<div class="ease-kanban">
<div class="ease-kanban-column">
<div class="ease-kanban-header">
<span class="ease-kanban-dot ease-kanban-dot-todo"></span>
<h3>To Do</h3>
<span class="ease-kanban-count">3</span>
</div>
<div class="ease-task-card">
<span class="ease-task-tag ease-task-tag-dev">Dev</span>
<p class="ease-task-title">Create API documentation</p>
<span class="ease-task-meta">Due Jun 12</span>
</div>
</div>

<div class="ease-kanban-column">
<div class="ease-kanban-header">
<span class="ease-kanban-dot ease-kanban-dot-progress"></span>
<h3>In Progress</h3>
<span class="ease-kanban-count">2</span>
</div>
<div class="ease-task-card">
<span class="ease-task-tag ease-task-tag-dev">Dev</span>
<p class="ease-task-title">Authentication system</p>
<span class="ease-task-meta">Due Jun 8</span>
</div>
</div>

<div class="ease-kanban-column">
<div class="ease-kanban-header">
<span class="ease-kanban-dot ease-kanban-dot-done"></span>
<h3>Completed</h3>
<span class="ease-kanban-count">4</span>
</div>
<div class="ease-task-card">
<span class="ease-task-tag ease-task-tag-dev">Dev</span>
<p class="ease-task-title">Project setup</p>
<span class="ease-task-meta">Done</span>
</div>
</div>
</div>
```

## 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`.
110 changes: 110 additions & 0 deletions submissions/examples/kanban-task-board/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kanban Task Board — EaseMotion CSS</title>
<link rel="stylesheet" href="style.css" />
<style>
*, *::before, *::after { box-sizing: border-box; }
body {
background: #0f0e17;
color: #fff;
font-family: 'Inter', system-ui, sans-serif;
padding: 3rem 2rem;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}
h1 { font-size: 2rem; margin-bottom: 0.25rem; text-align: center; }
.subtitle { color: rgba(255,255,255,0.5); margin-bottom: 3rem; text-align: center; }
</style>
</head>
<body>
<h1>Kanban Task Board</h1>
<p class="subtitle">Column-based task management component — Issue #1165</p>

<div class="ease-kanban">

<div class="ease-kanban-column">
<div class="ease-kanban-header">
<span class="ease-kanban-dot ease-kanban-dot-todo"></span>
<h3>To Do</h3>
<span class="ease-kanban-count">3</span>
</div>

<div class="ease-task-card">
<span class="ease-task-tag ease-task-tag-design">Design</span>
<p class="ease-task-title">Design landing page</p>
<span class="ease-task-meta">Due Jun 10</span>
</div>

<div class="ease-task-card">
<span class="ease-task-tag ease-task-tag-dev">Dev</span>
<p class="ease-task-title">Create API documentation</p>
<span class="ease-task-meta">Due Jun 12</span>
</div>

<div class="ease-task-card">
<span class="ease-task-tag ease-task-tag-dev">Dev</span>
<p class="ease-task-title">Set up CI/CD pipeline</p>
<span class="ease-task-meta">Due Jun 15</span>
</div>
</div>

<div class="ease-kanban-column">
<div class="ease-kanban-header">
<span class="ease-kanban-dot ease-kanban-dot-progress"></span>
<h3>In Progress</h3>
<span class="ease-kanban-count">2</span>
</div>

<div class="ease-task-card">
<span class="ease-task-tag ease-task-tag-dev">Dev</span>
<p class="ease-task-title">Authentication system</p>
<span class="ease-task-meta">Due Jun 8</span>
</div>

<div class="ease-task-card">
<span class="ease-task-tag ease-task-tag-design">Design</span>
<p class="ease-task-title">Dashboard wireframes</p>
<span class="ease-task-meta">Due Jun 11</span>
</div>
</div>

<div class="ease-kanban-column">
<div class="ease-kanban-header">
<span class="ease-kanban-dot ease-kanban-dot-done"></span>
<h3>Completed</h3>
<span class="ease-kanban-count">4</span>
</div>

<div class="ease-task-card">
<span class="ease-task-tag ease-task-tag-dev">Dev</span>
<p class="ease-task-title">Project setup</p>
<span class="ease-task-meta">Done</span>
</div>

<div class="ease-task-card">
<span class="ease-task-tag ease-task-tag-design">Design</span>
<p class="ease-task-title">Color palette</p>
<span class="ease-task-meta">Done</span>
</div>

<div class="ease-task-card">
<span class="ease-task-tag ease-task-tag-dev">Dev</span>
<p class="ease-task-title">Database schema</p>
<span class="ease-task-meta">Done</span>
</div>

<div class="ease-task-card">
<span class="ease-task-tag ease-task-tag-dev">Dev</span>
<p class="ease-task-title">API endpoints</p>
<span class="ease-task-meta">Done</span>
</div>
</div>

</div>
</body>
</html>
192 changes: 192 additions & 0 deletions submissions/examples/kanban-task-board/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
Loading