Working with Finsweet Tools

In this doc you’ll learn about:

1. Finsweet Attributes
2. Finsweet Chrome Extension

Finsweet Attributes

We’ve built various components with Finsweet Attributes in mind, and there are a few attributes that could be useful depending on the scope or goals of your project.

In short, Finsweet Attributes is built using Javascript and allows you to layer additional functionality on top of your Webflow project.

With Finsweet’s 39 Attributes solutions and counting, there are too many to cover here, but we encourage you to dive into them so that if you run into a challenge, you’ll know there is a solution ready for you to pick up. You can see all Finsweet Attribute solutions here.

Components using Attributes

Here are some examples of the various types of components that were built with Attributes in mind.

• Using the CMS Filters for filter components.
• Using CMS Slider for slider components.
• Using Disable Scrolling for navbar components.
• Table of Contents attributes for long form content components.
• Smart Lightbox for more advanced modal component implementations.
• Social Share for some long form content components.

You can also see within the Relume Webflow Library whether a component was built with Attributes in mind by the icon on the cover of the component.

Troubleshooting Finsweet Attributes

Finsweet has created an automated self-serve support tool for Attributes. Its recommended to try this before reaching out to Finsweet or Relume support.

Learn more about Automated Support Service

Finsweet Chrome Extension

Finsweet has developed the Chrome extension which layers additional tools and functionality right inside of the Webflow Designer to help speed up your workflow. The most relevant and most useful of these tools is called Folders. Coming in just behind that would be Merge Combo Classes, and Unbind CMS, among many other tools.

You can download the Finsweet extension here.

Folders

Folders allows you to quickly rename groups of classes that get imported into your Webflow project from things like layout1 and layout522, to things that are specific to your project like home_about-us or cta-demo.

If you are new to this naming convention and to folders, it can be a bit tricky to wrap your arms around so let’s jump into it a little bit.

As you can see we have two blog components in our project right now. Let’s say they live on the homepage. We’ll use blog34 for press releases and blog66 for a general blog.

We have two layers to our organization. We have the section, and we have the component. In theory you could have more than one component to a section, so that is why its important to separate these two concepts. So every section within your project should start with section_ and this creates a section folder.

Since these sections will be unique to the homepage, we’ll first want to group them with section_home_. This will put them in a folder called home under the section folder.

Each underscore is going to be a folder. Each dash could be considered a space for longer names. We’ll want to be concise with these names as they’ll translate to classes within the Webflow Navigator. It’s important that they are short and sweet. home_about-us or services_services-list or contact_contact-form - you get the idea.

Now that we understand how folders work, let’s finish renaming the last blog component to be for the press release section on the homepage: home_press-releases. If we save this, the extension will rename all of the classes that originally had blog66 in it to home_press-releases_ and whatever the element classes were before we renamed them will come after the second underscore.

You can learn more about the folders strategy of Client-First in this documentation.

Merge combo classes

To avoid stacking too many classes on top of each other (deep stacking), we’ll want to use the Merge Combo Classes tool to help us take a set of combo classes and create a custom class from that.

Here is a practical example: We have a Heading H2 that has margin-bottom, margin-small, text-color-primary and we want to also add a 4th class to this. We’re getting dangerously close to the deep stacking guidelines for Client-First and we generally should avoid getting this close to that line. So we’ll use the Merge Combo Class tool to take all of those combo classes and their styles and merge them into a single custom class - hero_title is an example of a custom class.

When we select the element with the combo classes that we want to merge, and run the Merge Combo Classes tool, we have a few options:

• Only create class
• Replace selected element
• Replace all elements

The most common option would be the Replace selected element because in this instance, its just an isolated combo class and a specific element where we want to merge this combo class, create the new custom class, and then add any additional styles to this heading and move on.

Summary

This doc covers working with Finsweet tools and Relume, detailing Finsweet Attributes and the Finsweet Chrome Extension for enhanced Webflow project functionality and workflow efficiency. It also guides through renaming component divs, troubleshooting Finsweet Attributes, and using Finsweet Chrome Extension tools.

Want to learn more ways to speed up your workflow? Learn about the Relume Webflow App.

‍