Component

• Standalone element that is meaningful on its own.
  

• Components start with “name” (ie. hero)
  

• Use descriptive names
  

• Only 1 per element
  

Children

• Parts of a component and they should also have standalone meaning.
  

• Starts with “__” (ie. 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 “--” (ie. hero--big)
  

• Use descriptive names
  

• Ideally use 1 per element (there are exceptions)
  

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:

• Section →hero section footer
  

• Container →container
  

• Elements → anything you want
  

Sections

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

• hero‍
  

• section →Most used for general sections
  

• nav
  

• 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: hero  hero--about

Containers

Containers in our templates are predefined using the class
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:

• container
  

• container container--12cols
  

• container container--8cols
  

• container container--6cols
  

• container container--282cols 2 columns, plus 8, plus 2, equals 12 columns.
  

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:

• title-1
  

• title-2
  

• title-3
  

• title-4
  

• title-5
  

  title-6
  

• text-1
  

• text-2
  

• text-3
  

• text-4
  

• text-5
  

Each text must have a wrapper text-wrapper or 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.

• button-l
  

• button-m
  

• 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 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:component-name__{breakpoint}--{type of fix}

‍For example, if we have a blue button that, because the text is too long, you may want to adjust the font-size to be smaller. For this case, your button should have the following classes:
‍
button-m  button-m--blue  button-m__portrait--font-size