Open oliviaflory opened 2 years ago
Recreate Content block mixed using modular components:
Recreate AEMs custom layout:
Recreate AEMs custom layout:
Review 10/26
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:
Pre built components can have targeted styles that are controlling the alignment on the grid or targeting specific margin / padding.
Questions:
Can we get rid of some styles??
Example: Content group pictograms has styles targeting the pictogram item
Clarifying when padding vs margin should be used:
Content x are using margin and some are using padding
Questions:
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.
Weird thing happening with cta cards...
Wanted to visualize some of the rules we reviewed (ignore the placeholder text):
When two margin values are stacked, only the largest value among them becomes the vertical spacing:
When two padding values are stacked, they are both preserved and stacked on one another:
https://stackoverflow.com/questions/42652952/css-margins-not-collapsing
CSS margin collapsing only occurs vertically & under 3 circumstances:
The bottom margin of this paragraph is collapsed...
...with the top margin of this paragraph.
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.
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.
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.
Suggestion: dump a bunch of our components into a demo page to see how the spacing works.
Tasks: