Layout in Webflow

Getting to grips with a layout concept before firing up Webflow, saves plenty of time.

One of the biggest challenges when starting a new project in Webflow is figuring out a re-usable framework for consistent layouts.

Frameworks offer a systematic CSS codebase which helps to achieve a consistent layout.

Before I get into the Webflow designer, I sketch out a rough idea of the layout in Sketch or Figma. The idea is to find a universal structure within the design that will form the basic foundation across the whole site.

Quite often, I tend to think in a Beaver Builder / WordPress kind of way, laying out my pages in a top-down, desktop-first fashion; header, content, footer and sidebar. But with Webflow, I tend to start as a coder would — right at the HTML tag. How do you build on from this? What are the best practice principles?

Typical thinking for me in WordPress

By creating a wireframe, I tend to see consistent blocks forming… these will be the sections and containers in my Webflow design. I start by adding the top-level components onto the canvas; sections followed by containers and element wrappers. These are the blocks that will hold the content. For me, content shouldn’t be inserted directly into Sections and Containers.

Ran Segall published a super helpful video tutorial on this topic and it’s helped me a lot in understanding the importance of proper layout. Check it out here:

Sections

Sections divide the page into primary components. From an SEO perspective, they also offer a way to indicate what the section contains. I often don’t apply any CSS to Sections, leaving them as raw as possible.

Containers

I nest my Containers in my section DIVs and generally only define widths and positions. I don’t tend to use them for any other CSS declarations.

Wrappers

My Wrappers are nested in my Containers and go around blocks of content that need to follow similar rules; Headings and sub-headings, Introductory paragraphs, meta info etc. Each wrapper may have a unique layout requirement: flex or grid.

Content

By now I’m adding my headings, paragraph text, images etc within the wrappers. The CSS definitions for the text and images are already cascading down from the default values I’ve set on the body tag. So again, very little CSS at this level of the site.

By following these basic layout rules, I keep things organised and consistent.

If you want to use more completely defined frameworks, Stock is a great starting point.

Stock is a utility-first CSS library made just for Webflow.
«
»