Refokus Styleguide for Webflow

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

• 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

• 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)

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

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

• Section → c-hero c-section c-footer
• Container → c-container‍
• Elements → anything you want

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

• c-hero
• ‍c-section
• ‍c-nav → Most used for general sections
• ‍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:

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

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) 

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

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)