The Blueprint
A Webflow Build Bible
© 0000
ARR
Framework
Aspect Ratio
.
aspect-ratio-
2.39:1
.
aspect-ratio-
21:9
.
aspect-ratio-
2:1
.
aspect-ratio-
16:9
.
aspect-ratio-
8:5
.
aspect-ratio-
3:2
.
aspect-ratio-
4:3
.
aspect-ratio-
1:1
.
aspect-ratio-
2:3
Spacing Directions
To define a specific number of pixels for your padding and/or margin direction, just add a combo class with .margin-... or .padding-... indicating the desired number of px.
.
padding-
horizontal
.
padding-
vertical
.
padding-
top
.
padding-
bottom
.
padding-
left
.
padding-
right
.
margin-
horizontal
.
margin-
vertical
.
margin-
top
.
margin-
bottom
.
margin-
left
.
margin-
right
Padding
.
padding-
320px
.
padding-
256px
.
padding-
224px
.
padding-
192px
.
padding-
160px
.
padding-
128px
.
padding-
96px
.
padding-
88px
.
padding-
80px
.
padding-
72px
.
padding-
64px
.
padding-
56px
.
padding-
48px
.
padding-
40px
.
padding-
32px
.
padding-
24px
.
padding-
16px
.
padding-
12px
.
padding-
8px
.
padding-
4px
.
padding-
2px
Margin
.
margin-
320px
.
margin-
256px
.
margin-
224px
.
margin-
192px
.
margin-
160px
.
margin-
128px
.
margin-
96px
.
margin-
88px
.
margin-
80px
.
margin-
72px
.
margin-
64px
.
margin-
56px
.
margin-
48px
.
margin-
40px
.
margin-
32px
.
margin-
24px
.
margin-
16px
.
margin-
12px
.
margin-
8px
.
margin-
4px
.
margin-
2px
Section-Padding
.
section-padding-
320px
.
section-padding-
256px
.
section-padding-
224px
.
section-padding-
192px
.
section-padding-
160px
.
section-padding-
128px
.
section-padding-
96px
Containers
To determine the width of a container, we chose to divide it into columns and let the max-width be determined by the percentage that the number of columns will fill the viewport. By using percentages, the width of a container remains dynamic and will therefore always display the correct width for the number of columns based on the global padding you set.
.
container-col-
12
.
container-col-
11
.
container-col-
10
.
container-col-
09
.
container-col-
08
.
container-col-
07
.
container-col-
06
Grids
.
grid-column-
02
.
grid-column-
02
.
grid-column-
02
Max-width Columns
.
max-width-col-
12
.
max-width-col-
11
.
max-width-col-
10
.
max-width-col-
09
.
max-width-col-
08
.
max-width-col-
07
.
max-width-col-
06
.
max-width-col-
05
.
max-width-col-
04
.
max-width-col-
03
.
max-width-col-
02
Max-width Sizes
.
max-width-
960px
.
max-width-
880px
.
max-width-
800px
.
max-width-
720px
.
max-width-
640px
.
max-width-
512px
.
max-width-
448px
.
max-width-
384px
.
max-width-
320px
.
max-width-
256px
.
max-width-
224px
Max-width Sizes
.
max-width-
30ch
.
max-width-
35ch
.
max-width-
40ch
.
max-width-
45ch
.
max-width-
50ch
.
max-width-
55ch
.
max-width-
60ch
Images
.
image
image-
parallax_default
image-
parallax_hero
image-
parallax_section
image-
parallax_section-100vh