Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Markup and styles for upcoming task UI

See original GitHub issue

Issue Description


  • hardcode any component you’re working on
  • test it out without having whole models instantiated
  • CSS class naming should go as follow, following BEM conventions.


task-list task-list__title

task-card task-card__title task-card__number task-card__type task-card__time

And the modifiers could be: --inbox, --backlog, --progress, --done (e.g. task__card--done)


  • task-board (holds the four columns, never taller than window, scrolls left/right to show columns)
  • task-list (the column)
  • task-card (the individual task)


Progress on: #2 (design repo)

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:3
  • Comments:16 (12 by maintainers)

github_iconTop GitHub Comments

rluedercommented, Dec 8, 2016

Sounds good! let’s not let semantics paralysis get to us! (btw I checked Trello and they use board, list and card) 👍

joshsmithcommented, Dec 8, 2016

I agree that the axis probably would not flip. I do think though that swim lane and lane are too methodology-specific and not as friendly for ESOL speakers. I think either list or column wins out, and prefer list since it matches closer to the TaskList object we’re likely to have on the backend.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Task List - Dribbble
Task List. 1,035 inspirational designs, illustrations, and graphic elements from the world's best designers. Want more inspiration?
Read more >
UI style guide for editor add-ons | Apps Script
Editor add-ons build user interfaces (menus, sidebars, and dialogs) using Apps Script's HTML service. Because the interfaces are developed in HTML and CSS, ......
Read more >
Bootstrap To Do List - free examples, templates & tutorial
A template of a ToDo list card with ALL, ACTIVE and COMPLETED tasks tabs - for organizing your tasklist. New task... Add.
Read more >
57 Best To-do List Apps of 2023 for Personal Task Management
Calendar view to keep an eye on all upcoming tasks. Drag and drop tasks in the calendar to ... Multiple text formatting options...
Read more >
Designing your app with UI templates - Teams - Microsoft Learn
Learn to design your app faster with standardized UI components, layouts, and patterns commonly seen across Microsoft Teams.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found