Jabel / David Connolly
Style Guide
Our style guide used to build the Jabel / David Connolly brand.
05. Grids & Layout
Ingredients for on-brand layouts and composition. This section contains guidelines on spacing units, the grid system, and containers. Try to stick to these guidelines when creating new pages.
Spacing Units
8
12
16
24
32
48
64
80
96
128
160
Grid System
The grid system is made up of 8 columns with a gutter between columns & rows of 32px (2em). This grid system takes full advantage of the Webflow CSS Grid element and is responsive on every screen size. On mobile devices, change the column gap to 16px (1em). Leave the row gap at 32px (2em).
1/1
1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4
1/6
1/6
1/6
1/6
1/6
1/6
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
Container (dev only)
Section > Container > Content > This Text