hackforla / hackforla/internship
[2026] Develop and update Design System Microsite with Tokens to match Material for Mkdocs
- Dominant language
- CSS
- Stars
- 20
- Forks
- 6
- PR merge metrics
- No merged PRs in 30d
Description
### Dependencies
- https://github.com/hackforla/internship/issues/397
- https://github.com/hackforla/internship/issues/446
- https://github.com/hackforla/internship/issues/455
### Overview
We need to develop a microsite to hold the Design System components.
This site should be based on Material for MKDocs and setup to run on the internship repo's Github Pages. Tokens should be implemented in place of raw values for design properties.
### Action Items
- [ ] [Create a consistent naming system for tokens that reduce redundancy, similarly to Material and other systems](https://github.com/hackforla/internship/issues/823)
- [ ] Develop Component microsite pages for the Issues below
### Resources/Instructions
- [Contributing to the Internship Design System](https://github.com/hackforla/internship-website-design-system/blob/main/CONTRIBUTING.md)
- [Current Live Version](https://hackforla.github.io/internship-website-design-system/)
- [Getting Started with Material for MkDocs](https://squidfunk.github.io/mkdocs-material/getting-started/)
- [Using snippets to include code](https://facelessuser.github.io/pymdown-extensions/extensions/snippets/#snippets-notation)
- [Material for MkDocs Snippets](https://squidfunk.github.io/mkdocs-material/reference/code-blocks/#snippets)
### Styles for the epic _(Style: Design Issue | Dev Issue)_
- [ ] Typography: #406 #528 | ~#487~ #742
- [ ] Colors: #407 | ~#488~ #746
- [ ] Elevations: #541 | #829
### Components for the epic _(Component: Design Issue | Dev Issue)_
- [x] Accordion: #404 | ~#484~ ~#544~ ~#544~ #821
- [x] Buttons: #400 | ~#736~ #815
- [x] Checkbox: #411 | ~#542~ ~#741~ #817
- [x] Input Fields: #416 | ~#751~ ~#540~ #818
- [x] Grid System: #415 | ~#743~ #750
- [x] Pagination: #424 | ~#753~ #816
- [x] Radio Button: #412 | #457 ~#471~
- [ ] Text Area: #417 | #822
- [ ] Toggles: #410 | #558
- [x] Tags/Chips: ~#413~ #622 | #557
- [x] Dropdown*: #399 #538 | ~#486~ ~#543~ #820
- [ ] Generic Homepage: #401 | #562
- [ ] Headers: #403 | #489
- [ ] Footers: #408 | #747
- [ ] Layout: #414 | #749
- [ ] Sliders: #420 | #825
- [ ] Snackbar: ~#510~ #464 | #827
- [ ] Badges: #693 | #828
- [ ] Icon Buttons: #731 | #752
- [ ] Tooltips: #425 (Incomplete?) | #826
- [ ] Date Pickers: #419 | Design Incomplete
- [ ] Icons: #426 | Design Incomplete
- [ ] Banner: #511 | Design Incomplete
- [ ] Progress Bars: #421 | Design Incomplete
- [ ] Breadcrumbs: #422 | Design Incomplete
- [ ] Cards*: ~#402~ #739 | Design Incomplete
- [ ] Dialogs (Modals / Pop-ups): #409 | Design Incomplete
Contributor guide
Assessment
This issue has not been assessed yet.