Flex grow same size containers
This is the perfect solution for wrapping, because you never have to use px, it’s the same on desktop, tablet and mobile and you can even change the element gap from 20 to 30px. Your backgrounds containers should be on boxed. Values used: 1120 for ultra wide & desktop, 80% for laptop, tablet extra, tablet, mobile extra, then mobile on 90%. Make sure to add the extra responsive breakpoints otherwise it’s not as my example.
Layouts
Container Content width: 1236px
Spacing | Padding | Margin
Spacing
Spacing Row: 24px
Spacing Colums: 24px
Padding left & right: 40px Desktop | 16px Tablet Up
Margin up & down: 64px Desktop | 40px Tablet Up
Padding
Padding Container: 24px
- 13,5%
- 13,5%
- 25%
- 25%
- 35%
1
2
3
4
5
6
7
8
9
10
11
- 16,5%
- 16,5%
- 25%
- 25%
- 35%
1
2
3
4
5
6
7
8
9
- 20%
- 20%
- 35%
- 35%
- 100%
1
2
3
4
5
6
7
- 25%
- 25%
- 35%
- 35%
- 100%
1
2
3
4
5
- 35%
- 35%
- 100%
- 100%
- 100%
1
2
3
- 100%
- 100%
- 100%
- 100%
- 100%
1
Responsive Typographie
Headings
- Roboto Condensed
- UPPERCASE
- 54px
- 54px
- 44px
- 44px
- 36px
- 1,15em
- 500/400
H1: This is a sample heading
- Roboto Condensed
- UPPERCASE
- 44px
- 44px
- 36px
- 36px
- 30px
- 1,15em
- 500/400
H2: This is a sample heading
- Roboto Condensed
- 36px
- 36px
- 30px
- 30px
- 24px
- 1,15em
- 400
H3: This is a sample heading
- Roboto Condensed
- 30px
- 30px
- 24px
- 24px
- 20px
- 1,15em
- 400
H4: This is a sample heading
- Roboto Condensed
- 30px
- 30px
- 24px
- 24px
- 20px
- 1,15em
- 400
H5: This is a sample heading
- Roboto Condensed
- 30px
- 30px
- 24px
- 24px
- 20px
- 1,15em
- 400
H6:This is a sample heading
P-Tags
- Roboto Condensed
- 1,1rem
- 1,1rem
- 1,1rem
- 1,1rem
- 1,1rem
- 1,5em
- 300
P X-Small: This is a sample heading
Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website. Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website. Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website.Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website. Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website. Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website. Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website. Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website.
- Roboto Condensed
- 1,2rem
- 1,2rem
- 1,2rem
- 1,2rem
- 1,2rem
- 1,5em
- 300
P Small: This is a sample heading
Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website. Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website. Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website.Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website. Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website. Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website. Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website. Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website.
P Normal: This is a sample heading
- Roboto Condensed
- 1,3rem
- 1,3rem
- 1,3rem
- 1,3rem
- 1,3rem
- 1,5em
- 300
Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website. Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website. Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website.Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website. Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website. Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website. Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website. Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website.
- Roboto Condensed
- 1,4rem
- 1,4rem
- 1,4rem
- 1,4rem
- 1,4rem
- 1,5em
- 300
P Large: This is a sample heading
Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website. Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website. Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website.Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website. Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website. Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website. Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website. Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website.
- Roboto Condensed
- 1,4rem
- 1,4rem
- 1,4rem
- 1,4rem
- 1,4rem
- 1,5em
- 300
P X-Large: This is a sample heading
Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website. Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website. Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website.Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website. Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website. Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website. Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website. Dies ist ein Beispieltext für den P-Tag des Fließtexts von dieser Website.
Captions
- Roboto Condensed
- 24px
- 24px
- 20px
- 20px
- 18px
- 1,3em
- 300
Caption S: This is a sample Caption for Heading or Subheading
- Roboto Condensed
- 26px
- 26px
- 22px
- 22px
- 20px
- 1,3em
- 300
Caption M: This is a sample Caption for Heading or Subheading
- Roboto Condensed
- 32px
- 32px
- 26px
- 26px
- 22px
- 1,3em
- 300
Caption L: This is a sample Caption for Heading or Subheading
Buttons
- Roboto Condensed
- Uppercase
- 16px
- 16px
- 16px
- 16px
- 16px
- 1em
- 300
Button S: This is a sample Caption for Heading or Subheading
- Roboto Condensed
- Uppercase
- 17px
- 17px
- 17px
- 17px
- 17px
- 1em
- 300
Button M: This is a sample Caption for Heading or Subheading
- Roboto Condensed
- Uppercase
- 18px
- 18px
- 18px
- 18px
- 18px
- 1em
- 300
Button L: This is a sample Caption for Heading or Subheading
Colors
Light Blue
Yellow
Black
White 100
White 200
White 300