search

springernature / ux-elements-docs

UX Documentation for Elements design system
MIT License
1 stars 3 forks source link

Improve vertical spacing on documentation pages #58

Closed foxintherain closed 2 years ago

foxintherain commented 2 years ago

What

Improve the vertical spacing on documentation pages by increasing the top/bottom margins between headings, paragraphs and code blocks. The aim is to increase the amount of white space on the page.

Spacing units show follow the 8px grid with the following rules:

8px: AfterH2 titles, H3 titles and between a <p> and code block 16px: After the H1 titles and paragraphs 24px: Before a new H3 Title 48px: Before a new H2 Title

Why

During our recent user interviews for the elements website, we have had feedback from a few users that the information on our pages is very dense and hard to scan.

Done when

Anything else

An example of the new spacing applied:

1 elements guide

sturobson commented 2 years ago

As mentioned on Slack if the spacing for the content here is something that needs to be consistent across all brands moving forward we could look at creating a 'content' component that would address spacing changes when an h2 is followed by a img rather than a p or when a h2 follows a block of code etc.

I did this when consulting with EMBL on their Design System

The only caveat would be the requirement of a class being added to a parent so that the CSS can target the relevant things to add spacing too.

foxintherain commented 2 years ago

@sturobson Sounds like a great idea to me! And I think we can apply this across all brands. Maybe we can discuss this next week with @amyhupe ? Would this be a complex thing implement if it requires a class being added?

amyhupe commented 2 years ago

@sturobson just to clarify, we're talking about applying this to the Elements website rather than to Springer Nature's websites / services. Does it still make sense to create this as a component given that it's just something for the design system?

sturobson commented 2 years ago

@amyhupe with long form content across SN being user generated from a wysiwyg text editor in the CMS - I think it would a good thing to have a component that normalises the spacing to an agreed design.

I had a call with Alex who thought this a good candidate for something inside of toolkits and the SPA team are soon to be working on rendering articles with the new SPA renderer - https://jira.springernature.com/browse/SPA-359

It could have the default/base spacing values from this image, or a more generic one which could be used in Elements and have (as needed) changes for brands that want to use it which can come from tokens.

amyhupe commented 2 years ago

This all makes sense!

foxintherain commented 2 years ago

@amyhupe Shall I close this and create a new ticket for what Stuart is doing?

amyhupe commented 2 years ago

Discussed in planning today with @foxintherain and @sturobson

James has noticed a few outstanding issues on the Elements website and needs to pick this up with @sangitamane who is on leave until 31 March.

foxintherain commented 2 years ago

Reviewed this with @sangitamane on the outstanding issues; we agreed to add the following:

8px:

24px: