Instructions

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

Interactions

The Search Modal

The only hidden component in this template is the search modal. You'll find it at the bottom of each page in a component called Search Modal. In order to customize it, double click yourself into the component, select the Search Modal div element and change its display setting from hidden to flex.

The vertical side navigation

The vertical side navigation consists of multiple collection lists. Each collection list is a separate category from the Article Categories collection, separated by using filters in the collection list settings. Each article link in the nav is automatically updated when adding, removing or modifying articles related to the category or modifying the category itself. Articles and categories are related using reference fields in the CMS.

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.

Grids

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.

Support

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.