← All blog posts

Relume's Class Sync: A Game-Changer for Webflow Designers

Relume has launched a chrome extension called Class Sync which aims to streamline the use of component libraries in Webflow projects. The Class Sync feature automatically applies styles to copied components to avoid issues with duplicate classes and lost styles.

December 6, 2022

Relume has just launched a brand new chrome extension that will revolutionize the way you work with components in your webflow projects. The Class Sync feature allows you to sync components that you copy and paste from third-party component libraries with your existing classes, so you don't have to worry about duplicate styles or lost formatting.

If you're not familiar with component libraries, they are a fantastic tool for speeding up your design process. Instead of having to build every element from scratch, you can use pre-designed components as a starting point, saving a ton of time and effort. This is especially helpful when you're working on a large project and need to be efficient.

No more duplicated classes when adding new components

But one of the challenges of using component libraries is that when you start styling elements, you can end up changing the properties of the classes that were set. This can cause issues when you try to copy elements from the library into your project, as it can create duplicate classes that don't have your desired styles. This can be frustrating and time-consuming, and it can slow down your workflow.

That's where Relume's new chrome extension comes in. The Class Sync feature solves this problem by automatically applying the styles you have set in your project whenever you copy and paste elements from a component library. This means you can quickly and easily add pre-designed elements to your project without worrying about duplicate classes or lost styles.

Class sync works with all components

But here's the best part: Class Sync doesn't just work with Relume. It will work with any third-party component library or even your own components that you might be copying and pasting from other projects. This means you can use Class Sync to streamline your workflow no matter which component library you prefer.

In order to use Class Sync most effectively, you just need to make sure that you are following a class naming convention. The best one to use if you want to get the most out of the component library is Client First by Finsweet. This convention ensures that your classes are organized and easy to work with, making it easier to apply your styles to new components as you add them to your project.

In short, the Class Sync feature is a game-changer for Webflow users who want to speed up their workflows and avoid the frustration of dealing with duplicate classes and lost styles. If you work with components, be sure to check out Relume's chrome extension and give it a try. It's sure to make your design process more efficient and enjoyable.

Use the code

Copy

Automate your emails with the Mailersend/Mailerlite series

Learn how to design, build and automate dynamic HTML emails for your online biz and take your comms to the next level

Learn more →
Subscribe to the newsletter!

Get notified when I publish my next video or blog

😘 Got it!
Oops! Something went wrong while submitting the form.
Webflow SEO Hack: Convert Your CMS Images to WebP

Webflow SEO Hack: Convert Your CMS Images to WebP

In August, Webflow added an internal compression tool that allows you to convert images to the webP filetype for improved web performance. While this feature is available for static images, it is not yet available for CMS images. Luckily, a solution to this problem is converting your CMS images to WebP.

How to Fix Common Webflow Performance Issues with Lighthouse

How to Fix Common Webflow Performance Issues with Lighthouse

Are you experiencing performance issues on your Webflow site? Lighthouse can help you identify and fix common problems such as slow loading times, poor server response, and lack of caching. Learn how to use Lighthouse to improve your Webflow site's performance and enhance the user experience.

Building a Cover Letter Generation App with Wized, GPT-3, and Webflow

Building a Cover Letter Generation App with Wized, GPT-3, and Webflow

I'll show you how I used the power of GPT-3 by OpenAI, @Wized and Webflow to create an app that generates custom cover letters for job listings. If you are looking for GPT-3 business ideas, feel free to use the same process to set up your own site.

Optimizing Webflow Designs Using Line Clamping

Optimizing Webflow Designs Using Line Clamping

Using line clamps in Webflow allows for the creation of visually appealing layouts by limiting the number of lines of text displayed within an element.

Advanced Webflow Search & Filtering w/ Data Fetcher & Finsweet Attributes

Advanced Webflow Search & Filtering w/ Data Fetcher & Finsweet Attributes

In this post, we'll be walking through the process of using Finsweet Sort and Filter to implement search and basic filtering functionality for our book collection. We'll also be using Data Fetcher to import Google Analytics page views and incorporate them into our Webflow site, allowing us to sort our books by popularity.

How to build a book recommendation site with AI

How to build a book recommendation site with AI

I will show you how I used ChatGPT by OpenAI to create a book recommendation site in Webflow. I will take you behind the scenes and show you what tools I used, what processes I followed and what my thoughts are on using AI to generate these types of sites.