This page contains instructions to help customize and further develop this template.

Class Naming Conventions

This template adheres to fairly strict class naming conventions that combines the best practices of BEM (Block Element Modifier) and naming conventions found in the Webflow's template guidelines (following a Title Case descriptive format).

Classes are composed of three main entities:

  • Block
  • Element
  • Modifier

The Block represents the overarching "container" or "parent" of an element, the Element is a nested part within the Block, and the Modifier is an optional addition that alters the styling of an element.

These naming conventions makes it easier to create, modify and manage the styles and functionality of elements throughout the project, promoting consistency and efficiency in the development process.


The 12-column grid (class: Grid) can easily be used for a variety of scenarios, whether you need 2, 3, 4, 6 or 8 column layouts. Webflow also offers the flexibility of manual child element placement, allowing you to create more advanced layouts with ease.

Grid column breakpoints:

  • Desktop - 12 columns
  • Tablet - 8 columns
  • Mobile landscape - 4 columns
  • Mobile - 2 columns

Combo classes (modifiers) can be used to change the amount of columns on different breakpoints, change column/row spacing or extend the grid's functionality in whatever way you may need.


Did you find a bug in the template or is there a part of the template that remains unclear on how to work with? Feel free to send me an email and I'll make sure to take a look at it as soon as possible.

Bugs related to Webflow itself should be directed to Webflow support. Design related help can be found on the Webflow discourse forum.