Layout elements is what structures the way other basic elements like titles, texts, buttons can be placed in a specific place in the website. What is typically used for these are:

• Divs
• Flexbox
• Grids
• Section tags
• Container tags

Examples:

Here it is difficult to list out pictures of each layout. so in order to properly list them out, we will list out components:

Id	Component
1

And then for each component, list out all the different layouts found like this:

Id	layout	Description
1	All component (left/right)	Refers to the spacing applied to left/right that affects the whole component
1	All component (top/bottom)	Refers to the spacing applied to top/bottom that affects the whole component
1	Left Column	Generic name to refer to a part in the component
1	Horizontal flex	Generic name to refer to a part in the component
1	Right column	Generic name to refer to a part in the component
1	Right Column box	Generic name to refer to a part in the component

Using the table previously defined, Start defining properties for each:

Id: 1 All Component (left/right)	Desktop	Mobile Landscape	Mobile
margin-left
margin-right
padding-left
padding-right
width

Id: 1 All Component (up/down)	Desktop	Mobile Landscape	Mobile
margin-top
margin-bottom
padding-top
padding-bottom
height

Id: 1 Left Column	Desktop	Mobile Landscape	Mobile
margin-top
margin-bottom
margin-left
margin-right
padding-top
padding-bottom
padding-left
padding-right
width
height

This will help define later the layout variables.

To have in mind:

• list all values in an excel, grouped by property
• Convert values to rem to have a single measurement
• remove duplicates
• Order them from low to high

Property	1	2	3	4
margins & paddings	0.5rem	0.8rem	2rem
widths & heights	100px	20rem	800px	50%

Using the following categories as well. This will help identify what type of spacings Sections and Containers will need have later on.

Property	1	2	3	4
All Components (Left/Right)
All Components (top/bottom)