It took me longer than I wanted, but I’ve got some updates for you on our
s-prose component. You can see the pull request with my thinking over at our design system’s repo. It does the following:
s-proseheaders out from paragraphs for better grouping.
- Tightens up
s-proseparagraphs a bit, and made sure spacing under headings are more consistent.
- Replaces all
s-prosemargins internal to the component with a CSS variable
var(--s-prose-spacing)so our users can more easily tinker with it in their browsers and user scripts.
- Kills trailing margins in
You can see some examples of content at our Stacks documentation.
I’ve split the difference between the original
1.3 line-height and the proposed
1.6 line-height. We’re now at
1.5, with additional refinements to spacing between elements. I’ve also reduced line height within code blocks back to near the original value.
This is now live.
We’re doing a bit of refactoring on our post formatting. Currently, we apply a single class with both layout and styling called
.post-text. Our first goal is to separate layout from our text styles. Simple enough!
However, our current post styling has a few missing spots and areas for improvements. Using our design system as a sandbox, we’ve beefed up our styling and created a new component called
.s-prose. It’s designed to offer styling for everything the CommonMark spec allows. This should allow us to add Stack Overflow-flavored styling anywhere we need to consume Markdown—questions and answers, of course, but also things like user profiles.
.s-prose component adds:
Proper formatting for definition lists
Further header support and better spacing there
Refinements for revealing spoilers. We now reveal this on click / tap for a more consistent experience across devices—fewer accidental reveals as well, since it’s no longer a
:hoverinteraction. Clicking again does not hide the spoiler. We also now add a badge to the top right corner. You can see how these work on our design system documentation. It looks something like this:
This is a spoiler
It has two lines
General refinements to spacing including nested lists, images within lists
Sizing variations for different contexts. We offer
mdvariations of the .
As with everything, our prose component is a work in progress. We think we’ve got a heck of a start to a reusable component. We plan on going live with the new component network wide on Thursday, August 27, 2020. We’ll edit this post if that changes.
If you see something funky, let us know. Some things are intended but might feel like regressions—images have a slightly different baseline—but others may have slipped through the cracks.