Skip to content

The builder

Pages and sections

A Flow site holds pages. A page holds an ordered list of sections. A section is the smallest thing the agent writes, and the unit everything else is built on.

The shape of a section

Every section is a fragment, not a document. It has one root <section> carrying its BEM block class, and that root is the wrapper — there is no extra wrapping div, and no <!DOCTYPE>, <html>, <head> or <body>.

section source
<section class="hero">
  <div class="hero__container">
    <h1 class="hero__title">Build without limits</h1>
    <p class="hero__subtitle">Prompt. Generate. Paste.</p>
  </div>
</section>

The section's CSS lives in its {% style %} block and its JavaScript in {% javascript %}. Both are scoped to that section, which is what lets one section be rewritten without touching its neighbours.

Class naming

Class names follow BEM within the section's own block: block, block__element, block--modifier. A section whose block is features may write .features__card and .features__card--highlighted, and nothing outside that block.

This is not housekeeping. Webflow's Designer shows classes as first-class objects, so the names the agent picks become the names a designer works with after the import.

Order and reordering

Sections are ordered within a page, and that order is what renders. Moving one is a first-class operation rather than a cut and paste, so it keeps its revision and its styles.

A Flow site must keep at least one page; deleting the last one is refused.