freeCodeCamp
Chapter Style Guide Documentation
Kudos to the original wireframes https://www.figma.com/file/ehgBfxoLKrlSZH0uftD6dA/Chapter-Trial?node-id=0%3A1 https://www.figma.com/file/q7DikyL3N0c4CUWxHNa97i/Chapter-Prototype?node-id=1%3A2
With new features and new idea being suggested, it's better to have a style guide works as a base for future ideas, suggestions and wireframes
This style guide prototype should include
- [ ] Colors a good tool for this is mycolor.space here is the colors with our dominate one
- [ ] Dominate
- [ ] Complementary
- [ ] Accent
- [ ] Typography
- [ ] Font Families
- [ ] Headings style
- [ ] Paragraphs styles
-
[ ] Interactions
- [ ] Nav Bar states
- [ ] General Button states
- [ ] Pagination State
After including these basics, we can add how to add tags, icons, layout and more. I am wondering if we should create a static site for the guide?
Useful Links
Customize component theme building your color palette
@Sboonny given's Quincy's suggestion to ship something sooner than later, it sounds like this wouldn't be an MVP issue.
Are there any quick things we could do to the CSS colors, fonts, etc to give it more consistency and visual appeal before a full style-guide is created?
@allella yes, I am planning to use primary color and fonts mentioned in the figma.
I will push a watered down version of these files to pick up the speed
https://github.com/freeCodeCamp/freeCodeCamp/blob/c7c8aa58cb5d71cb0c7453e452a39e02a17bca6f/client/src/components/layouts/variables.css https://github.com/freeCodeCamp/freeCodeCamp/blob/c7c8aa58cb5d71cb0c7453e452a39e02a17bca6f/client/src/components/layouts/global.css https://github.com/freeCodeCamp/freeCodeCamp/blob/c7c8aa58cb5d71cb0c7453e452a39e02a17bca6f/client/src/components/layouts/fonts.css
So as far as the plan go, less chakra usage if it isn't beneficial, and make every button paragraph and type carry primary color, and red color only for delete and transfer buttons.
We can push planning and ui components after MVP