Main Colours

Secondary Colours

Typography (Class Powered)

90%

class: "type-number"
size: 6em
height: 108%

H1 - Reckless Neue Book

class: "heading-1"
size: 3em
height: 125%

H2 - Roobert Bold

class: "heading-2"
size: 3em
height: 116%

H3 - Roobert Bold

class: "heading-3"
size: 2.25em
height: 133%

H4 - Roobert Bold

class: "heading-4"
size: 1.5em
height: 133%

H5 - Roobert Medium

class: "heading-5"
size: 0.85em
height: 114%
style: CAP

Subtitle - Roobert Medium

class: "subtitle"
size: 1.25em
height: 120%

Button 1 - Roober Bold

class: "type-button-1"
size: 1.25em
height: 125%

Navigation - Roober Medium

class: "type-nav"
size: 1.25em
height: 125%

Buttons

Col-4

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Col-4

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Webflow Repsonsive Flexbox Grid v1.2

A Webflow ready, Responsive Flexbox grid system based on a 12 column layout.

Clone Flexbox Grid Get Started with Webflow

Getting Started

Columns need to be nested within a "row" and a direct child of a "container". All columns start off at equal-widths by defining the class of "col" and auto-collapse at the mobile portrait breakpoint if no responsive classes are defined.

col

col

col

col

col

col

col

col

col

col

Remove Gutters

To remove all padding from columns, use the "no-gutters" class preceded by the initial class of "col".

no-gutters

no-gutters

no-gutters

no-gutters

Full Width Container

Define your div with a class of "container-fluid" for full width.

col

col

col

col

Responsive Grid

Grid - Desktop

To define our 12 column grid, all classes must precede with the initial class of "col"

col-1

col-11

col-2

col-10

col-3

col-9

col-4

col-8

col-5

col-7

col-6

col-6

col-12

Grid - Tablet (Breakpoint)

Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop class of "col-(1-12)"

col-m-1

col-m-11

col-m-2

col-m-10

col-m-3

col-m-9

col-m-4

col-m-8

col-m-5

col-m-7

col-m-6

col-m-6

col-m-12

Grid - Mobile Landscape (Breakpoint)

Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop and tablet classes of "col-(1-12)"

col-sm-1

col-sm-11

col-sm-2

col-sm-10

col-sm-3

col-sm-9

col-sm-4

col-sm-8

col-sm-5

col-sm-7

col-sm-6

col-sm-6

col-sm-12

Grid - Mobile Portrait (Breakpoint)

Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop, tablet and mobile landscape classes of "col-(1-12)"

col-xs-1

col-xs-11

col-xs-2

col-xs-10

col-xs-3

col-xs-9

col-xs-4

col-xs-8

col-xs-5

col-xs-7

col-xs-6

col-xs-6

col-xs-12

Column Wrapping

If responsive columns are placed within a single row and which the total result in greater then 12, they will automatically wrap onto a new line.

col-4

col-8

col-6

col-6

col-3

col-2

col-7

Vertical Alignment

Align-Start

To align columns from the top, combine a class of "align-start" preceded by the class of "row"

align-start

align-start

align-start

Align-Center

To align columns from the center, combine a class of "align-center" preceded by the class of "row"

align-center

align-center

align-center

Align-End

To align columns from the bottom, combine a class of "align-end" preceded by the class of "row"

align-end

align-end

align-end

Horizontal Alignment

Justify-Start

To align columns from the left, combine a class of "justify-start" preceded by the by class of "row"

justify-start

justify-start

Justify-Center

To align columns from the right, combine a class of "justify-center" preceded by the class of "row"

justify-center

justify-center

Justify-End

To align columns from the right, combine a class of "justify-end" preceded by the class of "row"

justify-end

justify-end

Justify-Between

To evenly space columns between each-other, combine a class of "justify-between" preceded by the class of "row"

justify-between

justify-between

Justify-Around

To evenly space columns around each-other, combine a class of "justify-around" preceded by the class of "row"

justify-around

justify-around

Self-Align Columns

To individually self-align columns, combine a class of "self-start", "self-center", "self-end" preceded by the by class of "col"

self-start

self-center

self-end

Column Reordering

To individually reorder columns, combine a class of either "order-first", "order-last", preceded by the by class of "col"

order-last

order-first

Book your intro Contact Us