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 6 (+3) 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.

‍