Return to Question

Update 3

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:

1. Spreads s-prose headers out from paragraphs for better grouping.
2. Tightens up s-prose paragraphs a bit, and made sure spacing under headings are more consistent.
3. Replaces all s-prose margins 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.
4. Kills trailing margins in s-prose

You can see some examples of content at our Stacks documentation.

Update 2

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.

Update 1

This is now live.

Timeline

Update 3

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:

1. Spreads s-prose headers out from paragraphs for better grouping.
2. Tightens up s-prose paragraphs a bit, and made sure spacing under headings are more consistent consistent.
3. Replaces all s-prose margins 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.
4. Kills trailing margins in s-prose

You can see some examples of content at our Stacks documentation.

Update 2

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.

Update 1

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.

Our .s-prose component adds:

1. Proper formatting for definition lists

2. Further header support and better spacing there

3. Additional blockquote refinements.

4. 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 :hover interaction. 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

5. General refinements to spacing including nested lists, images within lists

6. Sizing variations for different contexts. We offer xs, sm, and md variations of the .s-prose component.

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.

Update 3

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:

1. Spreads s-prose headers out from paragraphs for better grouping.
2. Tightens up s-prose paragraphs a bit, and made sure spacing under headings are more consistent.
3. Replaces all s-prose margins 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.
4. Kills trailing margins in s-prose

You can see some examples of content at our Stacks documentation.

Update 2

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.

Update 1

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.

Our .s-prose component adds:

1. Proper formatting for definition lists

2. Further header support and better spacing there

3. Additional blockquote refinements.

4. 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 :hover interaction. 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

5. General refinements to spacing including nested lists, images within lists

6. Sizing variations for different contexts. We offer xs, sm, and md variations of the .s-prose component.

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.

Update, this is now live

Another update

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.

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.

Our .s-prose component adds:

1. Proper formatting for definition lists

2. Further header support and better spacing there

3. Additional blockquote refinements.

4. 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 :hover interaction. 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

5. General refinements to spacing including nested lists, images within lists

6. Sizing variations for different contexts. We offer xs, sm, and md variations of the .s-prose component.

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.

Update 3

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:

1. Spreads s-prose headers out from paragraphs for better grouping.
2. Tightens up s-prose paragraphs a bit, and made sure spacing under headings are more consistent consistent.
3. Replaces all s-prose margins 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.
4. Kills trailing margins in s-prose

You can see some examples of content at our Stacks documentation.

Update 2

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.

Update 1

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.

Our .s-prose component adds:

1. Proper formatting for definition lists

2. Further header support and better spacing there

3. Additional blockquote refinements.

4. 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 :hover interaction. 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

5. General refinements to spacing including nested lists, images within lists

6. Sizing variations for different contexts. We offer xs, sm, and md variations of the .s-prose component.

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.