Work in progress
This page is a work in progress.
Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).
Use to increase or decrease the proximity of one object to another. This adjusts the white space between two elements to suggest whether items are related or unrelated. Additionally, these classes allow grid and non-grid content to exist in the same row.
Design and coding
↥ Margin top
Increase or decrease the default top margin of an element (heading, table, list) or design object (panel, well, grid...).
↧ Margin bottom
Increase or decrease the default bottom margin of an element (heading, table, list) or design object (panel, well, grid...).
↤ Margin left
Increase or decrease the default left margin of an element (heading, table, list) or design object (panel, well, grid...).
↦ Margin right
Increase or decrease the default right margin of an element (heading, table, list) or design object (panel, well, grid...).
- Use to increase or decrease the white space in between objects
- Understand and implement the related supporting principles
- Do not use this component in a way that conflicts with the preceding compliance point(s)
Additional add-on features and behaviours are available.
Increasing or decreasing proximity and white space suggests that content is either associated or unrelated.
The principle of proximity in visual perception is a very simple one: things that are spatially close to each other are seen as related. We can use this principle to make it clear when elements ... have an association, and when they are separate.
Put things that are related close together, and space things that need to be seen as separate.
We can apply the principle of proximity in reverse: elements that are spaced apart from each other are seen as separate.
The principle of proximity calls for related items to be grouped visually, creating less clutter and making for a more organized layout. Items unrelated to each other should be placed further apart, to emphasize their lack of relationship.
Using white space effectively and grouping related elements are critical to giving your website a clear visual hierarchy.
- Date modified: