bloom-works / guides-template

Placeholder repo for work on Bloom Guides

https://bloom-guides-template.netlify.app/

MIT License

2 stars 0 forks source link

Styles: Typography #12

Closed jeffmaher closed 1 year ago

jeffmaher commented 1 year ago

Stories

As a reader of a guide, I want to different kinds of text to appear different so that I can understand how the content is organized and follow it more easily.

Notes

See the component doc for more information
This ticket covers both design and development tasks. Change assignee of the ticket based on who has the next action, and remove the person or people that no longer have an action. It's expected that a ticket will get passed back and forth a few times.

Done When

[ ] UX: Design is drafted and shared for review
[ ] Dev: Design is reviewed and approved
[ ] Peer UX: Design is reviewed and approved
[ ] Dev: Style is developed and shared for PR review
[ ] UX: Style is reviewed and approved
[ ] Peer Dev: Style and markup is reviewed and approved
[ ] Style is available for use

jrubenoff commented 1 year ago

Development Status

I've committed typography styles to the storybook branch. Once #5 and #6 are done, I can open a PR with just the typography styles for review.

I've tried to use the same general visual design as the Visual Style Guide doc:

I use The Stack from "Every Layout" to handle spacing. I feel like my starter template is pretty well-commented but will definitely try to heavily annotate my PR as well.

Open questions

@admoorgit H1s, H2s and H3s are all capitalized. So words like "SMEs" aren't decipherable:

How would you prefer to handle cases like this?

admoorgit commented 1 year ago

Will get on this today or tomorrow @jrubenoff. I will definitely have some tweaks, since the styles have diverged from the site and haven't been backfilled. STAY TUNED

admoorgit commented 1 year ago

Also — is there an instance I can access to review CSS directly? Or can you paste it here? Would prefer to give you updates in that format.

jrubenoff commented 1 year ago

~~Sure, here you go:~~

~~CSS variables~~
~~Typography.css~~

~~--t-paragraph refers to the spacing between paragraphs.~~

Since I'm still waiting on #5 and #6 to open a PR here, you can give feedback by clicking on line numbers in the links above. That will give you anchor links you can reference them in a reply to this comment.

(On second thought, I decided to open a PR for these styles now, since all my other component styles depend on them. It's probably easiest to give feedback there!)

admoorgit commented 1 year ago

Sorry for the delay — will get you specifics this week. We'll definitely bulk up H3 and get rid of all caps for readability though!

jeffmaher commented 1 year ago

Adam working on today/tomorrow.

admoorgit commented 1 year ago

see https://github.com/bloom-works/guides-template/pull/20