ifmeorg / ifme

Free, open source mental health communication web app to share experiences with loved ones

http://www.if-me.org/

GNU Affero General Public License v3.0

1.46k stars 734 forks source link

CSS Shared Classes / Styleguide #1149

Closed LMulvey closed 5 years ago

LMulvey commented 5 years ago

Description

Incorporate a presentational Styleguide section in Storybook that presents commonly used CSS classes for building out static pages/page elements matching the rest of the site. This could include:

Grid helper classes (GridMany / GridItem, GridThree / GridThreeItem, etc)
Typography - any preset classes for typography around the site
General helper classes (div.spacer)

This could be a one-page presentation featuring a visual of the CSS class + the class names and when/where to use them. The intent is to speed up development for contributors who are new (me!) to the project and may not be familiar with all the design systems in place. This could quickly get them up to speed, or help them rapidly put pages together that play nicely with the rest of the site.

Examples

Starbucks Styleguide Yelp Styleguide

Do you want to be the assignee to work on this?

🚫 (well, maybe, but this may be a good first issue/Hacktoberfest/for beginners issue)

welcome[bot] commented 5 years ago

Thank you for opening this issue with us! If you haven't already, please follow these next steps to officially join our contributor community.

julianguyen commented 5 years ago

This is a great suggestion! We should most definitely update our Storybook!

alexmanzo commented 5 years ago

I'm happy to give this a shot and get some work done on it.

KatieFujihara commented 5 years ago

Hello! Would I be able to work on this?

julianguyen commented 5 years ago

@KatieOfCode Yes! That would be great :D