search

mozilla / protocol

A design system for Mozilla websites.
https://protocol.mozilla.org/
Mozilla Public License 2.0
258 stars 77 forks source link

Update/revise card layouts #707

Open craigcook opened 3 years ago

craigcook commented 3 years ago

Our card layout templates have pretty tight spacing and we've since moved toward giving content a bit more breathing room. We should revise the card spacing to loosen things up.

Additionally, complex card layouts (especially the five-card hero layout) are using floats because CSS grid wasn't really supported at the time we initially built this stuff. We should consider reworking it to use grid (maybe with a basic float layout as a fallback) which should give us some more control over card placement and alignment.

maureenlholland commented 1 year ago

more spacing would help with https://github.com/mozilla/bedrock/pull/12344

we might also consider add overflow-wrap: word-break; for defensive coding

maureenlholland commented 1 year ago

updating recommendation to hyphens: auto with word-break fallback based on this comment: https://github.com/mozilla/bedrock/pull/12344#discussion_r1017640449

kind of related to: https://github.com/mozilla/protocol/issues/833