[Spacing] POC for Spacing logic

[oliviaflory]

User Story

As a Carbon for IBM.com developer I need to create a proof of concept of the spacing logic proposal.

Additional information

To support the explorations of the Spacing logic epic, we want to create a demo of the spacing logic proposal that the designers shared in the team huddle. This will help to see how our components look with consistent spacing applied throughout a page and will help the designers better define the rules for spacing.

• Figma of Spacing audit
• Figma to Spacing proposal we decided on during Huddle

Suggestion: dump a bunch of our components into a demo page to see how the spacing works.

Tasks:

• [ ] Build test page
• [ ] Review with designers

[oliviaflory]

Ideas

Content block 1

Recreate Content block mixed using modular components:

• Parent
• Content block
  • Children
  • Content group cards
  • Content group pictograms
  • Content group simple
    • image with caption as a child to content group simple

Content block 2

Recreate AEMs custom layout:

• Parent
• Content block
  • Children
  • Content item horizontal with featured media
  • Content item horizontal with media
  • Content item horizontal
  • Card group (5 or 6 cards)

Content block 3

Recreate AEMs custom layout:

• Parent
• Content block
  • Children
  • Callout quote
  • Card group with images (3 cards)

[oliviaflory]

Review 10/26

• Ari
• Rich
• Olivia

---

Custom component vs Pre-build component

When we attempt to recreate a pre-build component with the individual pieces we provide to adopters, they don't always come out the same.

Example Re-creating Content group pictograms with:

• Content group heading
• Pictogram item
• Pictogram item results in the Content group heading falling into the gutter, and Pictogram item is slightly off the grid.

Pre built components can have targeted styles that are controlling the alignment on the grid or targeting specific margin / padding.

Questions:

• What could we do to solve this issue of mis-alignment?
• Could we align all components to use the same logic so they fall onto the grid correctly?
  • How do we handle alignment to columns vs overhanging into the gutters

Styles, styles, styles

Can we get rid of some styles??

Example: Content group pictograms has styles targeting the pictogram item

Padding vs margin

Clarifying when padding vs margin should be used:

• Padding = internal / does not collapse
• Margin = external / does collapse

Content x are using margin and some are using padding

• Content block
• Content group
• Content item
• Content section

Questions:

• When do we want spacing to collapse?
  • Never = have padding stack and find ideal spacing system
  • Internal collapse = content blocks stack; only child items collapse (groups / items)
  • External collapse = only content blocks collapse and all children stack (groups / items)

[RichKummer]

Looked through the WC storybook and took a snapshot of whether the component overhangs or not. The overhang was most commonly from cards (even if optional), and bottom borders that extended into the gutter.

Overhang

• Card group
• Card in card
• Card link
• Card
• Carousel (when using cards)
• Content block cards
• Callout quote (currently)
• Callout with media (currently)
• Content block media (Card link)
• Content block mixed (Cards + Card link)
• Content block segmented (Card link)
• Content block simple (Card link optional, also border overhangs)
• Content block (Card link)
• Content group simple (Card link)
• Content group (Card link)
• Content group cards (Card)
• Content item horizontal (border)
• CTA block (when using link list or tabs)
• CTA section (when using bottom border)
• CTA (Card or Card link)
• Feature card - large
• Filter panel
• Link list - default + end of section (border)
• Logo grid (border)
• Quote (border + quotation mark)
• Search with typeahead
• Structured list (border)
• Table of contents (horizontal border)
• Tabs extended

No overhang

• Content item
• Content group banner
• Content group pictograms
• Content item
• Feature card - medium
• Image
• Link list - horizontal + vertical
• Link with icon
• Pictogram item
• Tabs extended - with media
• Video

N/A

• Back to top
• Background media
• Button group
• Sections
  • Card section carousel
  • Card section offset
  • Card section simple
  • Content section
  • Link list seciton
• Dotcom shell
• Expressive modal
• Feature section (unique overhang)
• Footer
• Horizontal rule
• Layout
• Lead spaces
  • Lead space search
  • Lead space block
  • Lead space
• Leaving IBM
• Lightbox media viewer
• Locale modal
• Masthead
• Scroll animations
• Tag group
• Tag link
• Universal banner

[ariellalgilmore]

Weird thing happening with cta cards...

[RichKummer]

Margin/Padding notes

Wanted to visualize some of the rules we reviewed (ignore the placeholder text):

1. When a margin value is stacked with a padding value, both are preserved and stacked:

2. When two margin values are stacked, only the largest value among them becomes the vertical spacing:

3. When two padding values are stacked, they are both preserved and stacked on one another:

More on Margins:

https://stackoverflow.com/questions/42652952/css-margins-not-collapsing

CSS margin collapsing only occurs vertically & under 3 circumstances:

1. Adjacent siblings: The margins of adjacent siblings are collapsed (except when the later sibling needs to be cleared past floats). For example:

The bottom margin of this paragraph is collapsed...

...with the top margin of this paragraph.

2. Parent and first/last child: If there is no border, padding, inline content, block_formatting_context created or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

3. Empty blocks: If there is no border, padding, inline content, height, or min-height to separate a block's margin-top from its margin-bottom, then its top and bottom margins collapse.