Instructions
Introduction
This template is built using the Client-First naming convention. The Client-First naming convention is based on the idea of naming CSS classes after the client-facing elements that they style. The structure of a Client-First class name is as follows:
[keyword]-[element]-[modifier]
- The keyword is a short, descriptive word that identifies the purpose of the class. For example, the keyword header would be used to style the header of a website.
- The element is the name of the HTML element that the class is styling. For example, the element .header would be used to style the <header> element.
- The modifier is an optional word that can be used to further refine the purpose of the class. For example, the modifier .sticky could be used to style a header that sticks to the top of the page when the user scrolls down.
Obs: Webflow's guideline requires classes to be Title Case, therefore, they have been renamed to meet Webflow's standard, but the structure was kept. For instance, instead of a class named [padding-container], as per FinSweet style, the class was renamed to [Padding Container]
Here are some examples of Client-First class renamed:
- .text-style-link becomes Text Style Link
- .page-wrapper becomes Page Wrapper
- .button becomes Button
- .button-center-alignment becomes Button Center Alignment
Combo classes
A combo class is a class that is created as a variant to a base class. A combo class inherits styles from the base class and adds more styles on top of it. The is- prefix is used to define a combo class in Client-First.
For example, let's say we have a base class called .button. We can create a combo class called .button-primary by adding the is-primary modifier. The .button-primary class will inherit all of the styles from the .button class, and it will also add the following styles:
- The background color will be red.
- The text color will be white.
- The border will be a thin, solid line.
We can also create combo classes by stacking multiple modifiers. For example, we can create a combo class called .button-primary-large by adding the is-primary and is-large modifiers. The .button-primary-large class will inherit all of the styles from the .button class, and it will also add the following styles:
- The background color will be red.
- The text color will be white.
- The border will be a thin, solid line.
- The font size will be larger.
Combo classes are a powerful way to create reusable and customizable styles. They can be used to create a variety of different button styles, as well as other types of styles.
Here are some of the benefits of using combo classes:
- They are reusable. Once you create a combo class, you can use it over and over again. This can save you time and effort when building websites.
- They are customizable. You can change the modifiers on a combo class to create different variations of the style. This gives you a lot of flexibility when styling your website.
- They are organized. Combo classes are organized by their base class. This makes it easy to find the classes you need.
If you are looking to create reusable and customizable styles, then combo classes are a great option.
Custom classes
The spacings for margin and paddings are define by wrappers with classes like .padding-small . margin-xxlarge. This ensures consistency across your project when creating new pages. However, if you require to create custom spacings, you may modify the custom classes. Custom classes are named like .padding-custom1 .padding-custom2 .padding-custom3 . There are also custom classes created for margin and icon size.
Variables
This template uses Webflow's variables to store style values, like color. To start customising your design, update the variables values in the Variables panel. When you update a variable value, that change will update everywhere it’s used on the site. And they’re available in a central location for more visibility into your site’s styles. Read Webflow's article on Variables for further information.
