FLO
Webflow Framework
Ben's Profile Picture
Ben Löcsei
Designer & Webflow Developer
+36702498619
ben@benlocsei.design
webflow experts icon

Summary

Simplifying Webflow

  1. FLO standardizes layouting with the absolute minimum number of classes necessary to achieve any layout.
  2. A comprehensive stylekit includes all standard elements (like typography, buttons etc.) and provides style variants for size, color, and style, utilizing simple conventions such as alphabetical sizing (XXS-XXL) or clear labels (e.g., Style 01, Style 02).
  3. Variables for font sizes, spacing, color palette and other basic values are used throughout the framework.

Layouting 

There are 9 layout classes and 21 content classes. These have variants with simple names (S, L, XXL etc.). You insert an element, pick a class from a list and 

Examples:

  • Headings. Global class: Heading. Variants for sizes: XS to XXL
  • Buttons: Global Class: Button. Variants for styles: Style 01 - Style 05
  • Spacers: Global Class: Spacer. Variants for sizes: XS to XXL
  • Containers. Global Class: Container. Variants for width and padding: Narrow, Wide, Less Padding, More Padding etc.
  • Section. Global Class: Section. Variants: Fullscreen, Sticky etc.

No context-specific classes. No “homepage-aboutsection-about section2-v3-padding2-full-background-blue-blue02-sticky”

Just Section/Sticky. If you want a background, you insert a fill and pick a color. Or image.

Layouting

There aren’t infinite ways to arrange elements within a box. Top left, centered, bottom right, space between, etc. Right? So why would every layout need a new set of classes? They don’t.

Here are the classes FLO uses to achieve any possible layout:

1. Layout Classes

  • Section: Defines a section vertically. Variants include minimum heights (e.g., Fullscreen) and padding options for certain usecases.
  • Container: Defines the maximum width of the content and adds padding. Variants for Max Width (Narrow/Full) and different padding options (more, less)
  • Grid: A 12-column grid to arrange child elements and handle mobile behavior.
  • Block: Fills the full height of the parent. Used to space out content (Top, Center, Bottom) and also can add frames of different sizes with padding
  • Content Wrapper: The div you put the content into. Aligns content (Left, Center, Right).
  • Spacer: We use physical spacer divs because it’s the most intuitive. Variants XXS to XXL.

2. Layout Helpers

  • H Flex / V flex: For lists of elements with a gap (Icons, Tags), wraps when too narrow. Variants for gap size.
  • Clip: Akin to Horizontal Array, but never breaks to vertical. Perfect for [Icon + Text].
  • Bar: Horizontal bar arranging two pieces of content left and right. Turns vertical on mobile.

Voila. Every layout you can imagine, with 9 global classes.

3. Content Elements

  • Typography: Heading (XXS-XXL), Paragraph (S-XL), Text (S-XL) Block Quote, List, Rich Text. All have Inverted variants for dark backgrounds.
  • Buttons: 6 Button Styles + some other link types.
  • Backgrounds: "Fill" class, variants for every color in the palette. Image background with optional parallax effect.
  • Forms: Inputs, Radios, Checkboxes, Labels, blocks aligned in a grid
  • Icons: Regular icons and "Boxed" icons. Sizes XS to XL.

4. Media (Images & Video)

  • Image Frame: A wrapper that allows for overlays. Handles aspect ratios, different shapes, or to be used as a background.
  • Image Fill: Fills the image frame, variations for different fits (contain, cover, etc.). 
  • Video: As background or within the content. Streamed externally (no page load bloat). Auto-muting logic included.
  • Image Overlay: Darken images to make text readable.

Further simplification. The actual Workflow

Creating a new section in practice:

  1. Open the Components Panel.
  2. Drag and drop a pre-built Section onto the canvas.
  3. Unlink the instance.
  4. Delete unneeded content.
  5. Select variants for layout and content elements to customize the look.
  6. Swap images and text.
  7. Done.

The Exceptions

Certain modules use special classes because using the core system would be counterproductive.

  • Navigation: The Navbar and Mobile Menu require specific styles.
  • Custom Code Modules: Complex interactive elements come with their own class names. That being said, even these use the Global Variables for spacing, gaps, colors, fonts, etc. so nothing ever looks out of place.

This site (and every other site I build with FLO) also contains some special global and special combo classes for unique elements. Is as exactly as intended. Build the foundation with the Core Classes, create special classes for special design solutions where necessary. Just use the available variables for sizing and color and don’t touch the core classes and you’ll be fine.

Layouting

Section → Container → Grid → Block → Content → ...

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Heading

Lorem ipsum dolor sit amet

Heading

Lorem ipsum dolor sit amet

Spacer

Bar

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique

V Flex, H Flex

Clip

Heading

This is some text inside of a div block.

Content

Fill

Typography

Lorem ipsum

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Eyebrow
Eyebrow
Text Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript


Lorem ipsum

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript


Forms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Work

Transparent Pricing

Partnership Protocol

My Zero-Waste Workflow

About Me / CV

The FLO Webflow Framework

FAQ

SVG Icon, Icon Box

Image Frame, Image Fit

Components

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Eyebrow

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

This is some text inside of a div block.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique

Button

Heading

Etele City Center
Print Design
Hoss Nouhi Real Estate
Peak Mobile DAW
Semilab
Logofolio
MNDWRK
Real Problem Generator
Flybyguys
Cycle Cleaners
Wallpapers
Magenta TV
Heli Luxembourg
ESMO
Logiac
Nuvolo
Ben's Webflow Workshops
DFO
Compact Disco - Without You
Telekom
Bosch.com
Sagebrains

Background Image

Parallax Background Image

Accordion Component

Can I call you real quick?

Plus

Do you use templates?

Plus

Sprichst du Deutsch?

Plus

I built the website myself. Can you just make a few quick fixes?

Plus

Where are you from?

Plus

Do you do SEO?

Plus

What do you need to start working on our website?

Plus
Cards Component