canonical / canonical/vanilla-framework
[block margin amendment]: <Basic section>
- Dominant language
- HTML
- Stars
- 983
- Forks
- 216
- Avg merge
- 3d 13h
- Merged PRs (30d)
- 3
Description
## Component/pattern to amend
[Basic section](https://vanillaframework.io/docs/patterns/basic-section)
## Visual
Remove shallow bottom margin from these three blocks:
- [List](https://vanillaframework.io/docs/patterns/basic-section#:~:text=for%20more%20info.-,List,-Lists%20use%20the)
- [Code](https://vanillaframework.io/docs/patterns/basic-section#:~:text=nested%20list%20configuration.-,Code,-The%20code%20pattern)
- [Notification](https://vanillaframework.io/docs/patterns/basic-section#:~:text=for%20more%20info.-,Notification,-The%20Notification%20block)
## Context
In what context does your amendment solve a problem?
**Concept of blocks**
- Blocks in the Basic Section is a flexible content unit (e.g. text, image, logo blocks, list, CTA) placed inside the section’s items, with optional padding control to adjust spacing without affecting the whole pattern.
**Issue**
- Some components (three in this case) come with baked-in shallow margin.
- This makes it impossible to adjust spacing at the pattern level, which makes duplicated spacing and limits flexibility.
**Impact on existing pages**
- If we remove the padding directly from the components, it could cause glitches on existing pages where those components are already in use.
**Solution**
- Remove bottom margin from the block
- In the Basic Section, blocks can be set to padding: shallow to control spacing around items, so it is more appropriate to manage spacing at the pattern level.
**Result**
- Spacing can be adjusted without breaking the pattern
- When a block is placed at the bottom of a section, it avoids duplicated spacing with the section’s own bottom padding.
Contributor guide
Research direction
Start with the Basic section documentation and inspect the implementations of the List, Code, and Notification blocks. Compare their bottom spacing in the rendered examples; done means those three blocks no longer add shallow bottom margin inside Basic section while section-level padding still controls the spacing.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, sass
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 56/100