The Blueprint
A Webflow Build Bible
Category
Framework
Created by
Bram Brouwer
© 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

Lorem ipsum dolor sit amet consectetur. Lacus adipiscing nullam mattis vitae mattis maecenas aliquam nisl sollicitudin. Vel sed vitae consectetur quis tellus eu tortor.

.
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

Lorem ipsum dolor sit amet consectetur. Lacus adipiscing nullam mattis vitae mattis maecenas aliquam nisl sollicitudin. Vel sed vitae consectetur quis tellus eu tortor.

.
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