The 13 unit (Fibonacci grid) serves as the basis for everything ↓
Whenever possible, try to base the horizontal units on numbers in the Fibonacci sequence:
1
2
3
5
8
13
For example, these two columns are 37% each –columns of 5 units each. This leads to elements being a little off in a rigid grid and that is ok.
There is an additional 3 columns on the right side and that is ok too.
2 col
13%
3 col
21%
5 col
37%
8 col
60%
5 col
fill
Heading 1 with some longer lines
Heading 2 with some longer lines
Heading 3 with some longer lines
Heading 4 with some longer lines
Heading 5 with some longer lines
Paragraph 1: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Paragraph 2: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Box model
Page
Desktop: 1200
Tablet: 810
Mobile: 390
Overflow: visible
Gap: 64
Nav
Position type: sticky
Padding: 0
Variant: Desktop / Mobile (for tablet as well)
Width: fill
Height: fit
Z Index: 5
Section
Width: fill
Height: fit
Padding
Desktop: 0 96 96 96
Tablet: 0 64 64 64
Mobile: 16
Overflow: visible
Content
Width: fill
Height: fit
Max width: 1364px
Padding: 0
Overflow: visible
Sticky sidebar
Position type: sticky
Top Desktop: 128
Top Tablet: 64
Mobile: Not visible
Width: 21%
Height: fit
Gap: 32px
Sticky sidebar
Position type: sticky
Top Desktop: 128
Top Tablet: 64
Mobile: Not visible
Width: fill
Height: fit
Gap: 32px
Footer
Position type: Relative
Padding: 0
Variant: Desktop / Tablet / Mobile
