Markup and styles for upcoming task UI
See original GitHub issueProblem
- 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-board
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
)
Subtasks
-
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)
References
Progress on: #2 (design repo)
Issue Analytics
- State:
- Created 7 years ago
- Reactions:3
- Comments:16 (12 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Sounds good! let’s not let semantics paralysis get to us! (btw I checked Trello and they use board, list and card) 👍
I agree that the axis probably would not flip. I do think though that
swim lane
andlane
are too methodology-specific and not as friendly for ESOL speakers. I think eitherlist
orcolumn
wins out, and preferlist
since it matches closer to theTaskList
object we’re likely to have on the backend.