Changelog

Definition clarity

Client-first v1.2

These terms have been added and updated throughout the documentation to more clearly define their use.

Utility class

A utility class is a class that is created with a specific, usually simple, combination of css properties that can be applied to elements globally across the project. For example, background-color-red or a class for font-size-large. Every class that comes with the Client-first start project cloneable is a utility class.

Global class

A global class is a class that is intended for use across the entire project. It can be a custom class or a utility class. Its purpose is to apply styles to elements that will remain 'global' or 'unified' across the project. A global class can be a custom class, like  items-list_background-layer or a utility class like font-size-large.

Component

A component in Client-first is a group of page elements that create a complete ui element. For example, a newsletter signup, team grid, pricing calculator, reusable 3 column grid, or a clients list. In previous version of Client-first we called everything with an underscore a 'component'. Now we will clearly define components by using the term 'component' as the element name, like  items-list_component or  contact-form_component.

Folder

A folder is a virtual self-organization tool to group and visually manage classes inside your Webflow project. Use one or more underscores in your class name to create a custom class folder. Each underscore creates a virtual folder inside Webflow Designer using Finsweet Extension. A folder may 'hold' a component as we see above. A folder does not need to hold a component. For example, a large multi-page style guide, style-guide_columns.