Create documentation on spacing

[sherakama]

Document and explain the rules behind using:

• gutters
• modular spacing
• screen margin

and publish to the web somewhere. Either as a wiki entry in github or on the website somewhere.

[sherakama]

Spacing rules:

1. Gutters

• Gaps between cells in a grid layout not including the outside edge.
• Gutters are set at each breakpoint
• Values are curated and do not mathematically scale.
• config is stored in a sass map.
• namespace: flex_, grid_, or gutter_

2. Screen Edge

• The minimal amount of space between the outside edge of a layout and the window frame.
• Screen edge margins are set at each breakpoint up to and not including the biggest breakpoint
• Values are curated and do not mathematically scale.
• config is stored in a sass map.
• namespace: screen_

3. Element Spacing

• The space between elements within a component. This could be between several elements or between an element and the edge of the component's container.
• Gap values are set at each breakpoint and scale value off of a base value
• Values are curated and do not mathematically scale.
• Base values are set on each breakpoint size
• There are 10 scale ratios: 0.1666666, 0.3333, 0.5, 0.6666, 1, 1.4444, 2, 2.5, 4, 6
• Config is stored in three sass maps
• namespace: modular_, space_

4. Vertical Rhythm

• The amount of space between the baseline of a text element and the next element.
• The space value is set at each breakpoint for each heading level
• The value is a calculation of the relative font size for the text element multiplied by the corresponding breakpoint scale value.
• The scale value is set in a sass map
• namespace: typography_

5. Typography Scale

• Not directly related to whitespace but a sizing system related to vertical rhythm
• The amount to scale the font size of the text element at a fixed ratio
• Typography scale follows the Bourbon modular-scale mixin formula with a 1.25 scale ratio between each step
• Bi-directional as font sizes can scale up or down
• Not dependant on breakpoint
• The scale ratio is set in a single sass variable
• namespace: modular_typography_

[sherakama]

@yvonnetangsu @kerri-augenstein @JohnHolleman @josephgknox

I've started to put together the public documentation for the spacing systems. These will benefit from screenshots of the figma documentation but let me know if I have captured the general use case and methodology for application for each of these space/size systems.

[yvonnetangsu]

@sherakama :
1, 2 looks great
3 - about namespace, are we going with modular_space or modular_spacing? I'm fine either way. Space is shorter which is nice but we've been using spacing so just want to confirm.
4, 5 - I actually thought modular_typography means the font size scaling (what you defined in #5) but I could be totally wrong. Could we get confirmation from @JohnHolleman @kerri-augenstein @josephgknox ?
Thanks for working on the documentation!

[sherakama]

for item 3 (element spacing) the namespace should be modular_spacing. I have modular and space but I do think it best to have the single term.

For 4 & 5, you are right, I got those backwards.

[josephgknox]

Chatted with both John H and Kerri via Slack on this. All three of us are happy with the state of this, with thanks to Shea for stubbing it out. One semi-related comment that John brought up, which I am re-posting here is:

did we get the concept that the total width of the 12 columns is not fixed at each breakpoint but expands as the viewport expands (with the exception of XXL which is a centered 1500px); would be under screen edge.

[sherakama]

Oh, that would be a good addition. Thanks for the feedback. Next steps for this will be to flush it out so that they are not just bullet points and to add pretty pictures and examples.

[josephgknox]

I have created a "Spacing" page on the Wiki at https://github.com/SU-SWS/decanter/wiki/Spacing, which is now also linked to from the "Standards and Conventions" page under "Spacing Rules." Let me know if this organization of the documentation is OK or if it should change.

I have refactored the bullets on this thread into sentences on the new Wiki page, placing the content for each rule in an appropriate order and separating definitions from developer notes. Also, I have begun adding images/visual guides that highlight each rule.

I can continue to add more images and visual guides to the rules without any, but can also use another set of eyes on this to see if we're on the right path.

[yvonnetangsu]

Thank you for putting this together, @josephgknox! This looks very nice and the images really help - totally on the right path.

I only saw a couple minor things. I asked @sherakama about namespace for Element Spacing, and he said it should be modular_spacing.

For Screen Edges, I believe the max centered container width 1500px doesn't immediately kick in at the beginning of 2XL breakpoint, but rather at 1700px since it's still honoring the 100px screen edge on each side.

[josephgknox]

Thanks, @yvonnetangsu! Good catch on the distinction between 1500px and 1700px, too. Those two items have been edited.

[sherakama]

Thank you both so much. This looks great. I'm going to call this done. We can create new tickets for revisions.