Spacing between elements - ariel-fer/Araena GitHub Wiki

[[TOC]]

List out elements

In order to show the spacing being used to separate from another element:

  • inspect the element in the browser
  • go to the computed tab
  • filter for margin or padding.

In order to maintain some organization, margins to separate from the next element will be taken into account only. this means that some elements in the template might have the separation applied on the next element instead of the current (for example in #2). This also means:

  • To look out to apply margin-bottoms or margin-left/right only.

List out properties

Text

  1. image.png
  2. image.png
  3. image.png
  4. image.png
  5. image.png
  6. image.png
  7. image.png
Element: margin-bottom Desktop Mobile
1 32px 32px
2 2rem 2rem
3 3rem 3rem
4 2rem 2rem
5 1rem 1rem
6 0.5rem 0.5rem
7 64px 64px

Titles

  1. image.png
  2. image.png
  3. image.png
  4. image.png
Element: margin-bottom Desktop Mobile
1 32px 32px
2 32px 32px
3 32px 32px
4 0.5rem 0.5rem

Links

Even though margins are applied to the text link or the link is part of the button or a link block, we will list them here to be organized.

  1. image.png
Link: margin bottom Desktop Mobile
1 2rem -

Buttons

Buttons can have both spacing on the bottom to separate from other text, but also margin right to separate from other buttons.

  1. image.png
  2. image.png
Buttons: 1 Desktop Mobile
margin-right set by flexbox(1rem) -
margin-bottom - set by flexbox(1rem)
Buttons: 2 Desktop Mobile
margin-right - -
margin-bottom - -

List

  1. image.png
List: 1 Desktop Mobile
margin-right - -
margin-bottom 3rem -
padding-right 1rem -
padding-bottom - -

Forms

Label Desktop Mobile
margin-bottom 0.5rem -
text field Desktop Mobile
margin-bottom 0 -
padding-left 16px
padding-right 40px
text Area Desktop Mobile
margin-bottom 0 -
padding-left 16px
padding-right 40px
Dropdown Desktop Mobile
margin-bottom 0 -
padding-left 16px
padding-right 48px

Icons

  1. image.png
  2. image.png
  3. image.png
Icon: 1 Desktop Mobile
padding-right 0,3125rem 0,3125rem
padding-bottom 0,3125rem 0,3125rem
padding-left 0,3125rem 0,3125rem
padding-right 0,3125rem 0,3125rem
Icon: 2 Desktop Mobile
margin-bottom 0 -
padding-left 0
padding-right 2rem
Icon: 3 Desktop Mobile
margin-bottom 0 -
padding-left 0.5rem
padding-right 0

Logo

1.image.png 2.image.png

Logo: 1 Desktop Mobile
margin-right - -
margin-bottom - -
padding-left 2.5rem -
padding-right 2.5rem -
Logo: 2 Desktop Mobile
margin-right - -
margin-bottom 3rem -

List out all spacings in order

This will help define later the layout variables.

To have in mind:

  • list all values in an excel
  • Convert values to rem to have a single measurement
  • remove duplicates
  • Order them from low to high
property 1 2 3 4 5 6 7 8
padding & margin 0.3125rem 0.5rem 1rem 1.5rem 2rem 2.5rem 3rem 4rem
⚠️ **GitHub.com Fallback** ⚠️