Refokus Styleguide for Webflow

Webflow Standards

Why do we need this?

At Refokus, we use Webflow as an implementation tool, and as such we follow implementation best practices. Having a pre-define Style System allows us to keep things organized, keeping to our high-quality standards, and allowing our clients to scale their Website with proper guidelines.

faster to scale Webflow Projects

Easier and faster to scale projects by everyone

Using a pre-defined system allows anyone (not only developers) to scale a project and add more pages on top.

Integrate Webflow with custom code

Integrate with custom code solutions

Our Style System is created based on BEM, but tailored to Webflow's environment nuances to allow easily coding on top of it.

Webflow Engineering Standards

Keep high-quality engineering standards

We deeply care about quality and make sure that everything we do meets the highest engineering standards.

Classes

Our class nomenclature system is a variation from BEM (Block Element Modifier), a methodology that helps you to create reusable components and code sharing in front-end development.

Component

  • Standalone element that is meaningful on its own.
  • Components start with “c-” (ie. c-hero)
  • Use descriptive names
  • Only 1 per element

Children

  • Parts of a component and have no standalone meaning.
  • Starts with “c-component-name_” (ie. c-hero_content).
  • Use descriptive names
  • Only 1 per element

Modifier

  • Use them to change a component or children’s appearance.
  • Also known as “combo classes”
  • Modifiers start with “cc-” (ie. cc-hero-big)
  • Use descriptive names
  • Ideally use 1 per element (there are exceptions)

Best Practices

Lower Case, no spaces

When publishing, Webflow automatically transform all classes into lowercases, and all spaces into underscores. So it makes sense to already do it in the Designer and have the class names as they will be output. Tip: This is also great to work with custom code when you need to use that class.

Automatically-created classes = NOT GOOD!

The moment you begin styling an element, a class is automatically created and applied to the selected element. These classes are created using really bad practices, such as caps, spaces, and are not descriptive to be reusable.

What to do? You can recognize classes that are created automatically by names like Div Block 2, or Paragraph 2 . If you find a class that was created automatically, simply replace it by a proper Class Nomenclature

Layout

Webflow elements are basically HTML elements that you can drag and drop inside your Canvas, so when building using Webflow we need to keep in mind the HTML Markup best practices. 

Hierarchy

When creating a new section on your site we need to create the structure first. At its core, it should look something like this:

  • Sectionc-hero  c-section  c-footer
  • Containerc-container
  • Elements → anything you want

Sections

To keep naming as standards, we define these names for the most common elements:

  • c-hero
  • c-section → Most used for general sections
  • c-nav
  • c-footer

With sections, you can use combo classes to add other styles. For example, when you need to change the hero image on internal pages: c-hero  cc-about

Containers

Containers in our templates are predefined using the class c-container

  • Should be a <div> 
  • Do not use Webflow Container Element
  • Do not change the style of the containers: All further styling should be added as children element
  • Don’t add combo classes to containers

We have some predefined containers based on our grid 12 columns grid:

  • c-container
  • c-container cc-10cols
  • c-container cc-8cols
  • c-container cc-6cols

Standards

At Refokus, we have a couple of standardizations to make sure we are all doing things the same way, and anyone can jump in a project with the ability to understand what/how was done and why.

Typography

Define styles for each type element. Don’t use H1, H2, etc for style. The headings define the structure/markup, not the style.  These are the default names we are using for fonts are:

  • c-title-1
  • c-title-2
  • c-title-3
  • c-title-4
  • c-title-5
  • c-title-6
  • c-text-1
  • c-text-2
  • c-text-3
  • c-text-4
  • c-text-5

Each text must have a wrapper c-text-wrapper or c-title-wrapper. On top of these classes we can add Combo Classes to update specific styles : 

  • paddings and margins
  • size (width, height, etc)
  • position (absolute, float, fixed, etc)

Create a new class for the text or title if you need to update some of the followings styles:

  • font-weight
  • font-color
  • Color
  • font-size (only under extenuating circumstances)
  • line-height (only under extenuating circumstances)

Buttons

We have defined 3 different size buttons (L, M, S). You could add a div wrapper with class c-button-wrapper, you can add Combo Classes to add variables (ie: changing position).If you have a button with a unique style please create a new class.

  • c-button-l
  • c-button-m
  • c-button-s

Best Practices

  • Buttons should always be included in the Style System.
  • Buttons are built with Link Blocks and Text Blocks (not Buttons).
  • If possible, to position the button on a specific position (ie. float left on the nav) create a parent  <div> element and set the styles to that div (adding a new class. ie c-button-nav

Responsive

It’s important that everything you build it’s working on smaller size screens, all the way down to mobile. 

When updating a style to fix a responsive view, to make sure we are not breaking every other element with the same class, we use combo-classes (aka modifiers).

The nomenclature of the combo class should be:

cc-{breakpoint}_{type of fix}

For example, if we have a button that, because the text is too long (cof cof German language), you may want to adjust the font-size to be smaller. For this case, your button should have the following classes:

c-button-m  cc-blue  cc-portrait_font-size

Clone Webflow Base Project

Refokus Styleguide for Webflow
Copyright © 2021
Refokus GmbH

You are strictly prohibited to replicate, edit, remix, redistribute, resell, or make any type of modification to this project.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.