It’s a new month which means we’ve released some new components to the library (Figma & Webflow). Happy May Component Day!
Component voting has been a great tool for the Relume team to ensure that we’re spending our time and resources building the right components for the community. Over the past couple of months, since launching the voting board, the team has received lots of positive feedback related to component voting and our ability to deliver on what the community wants. Relume is extremely community focused and we aim to stay that way, which is why we are working to improve component voting so that we can continue delivering value on monthly Component Day releases.
We’ve learn’t a lot over the past couple of months and have decided to make some key changes to how component voting works with the goal of setting clearer expectations with you and reducing internal company chaos during the lead up to Component Day. The latter is very important to our company, we want to maintain a calm work environment for our team so that we can do our best work and deliver the most valuable possible.
If you’d like to provide feedback on component voting for our monthly Component Day, feel free to reach out to Adam or Dan on Slack or via email at email@example.com.
It’s a new month which means we’ve released some new components to the library (Figma & Webflow). Happy April Component Day!
Today we’re launching the Style Guide Selector which you can find in the top right-hand corner of the dashboard. The purpose of this feature is to enable 100% compatibility with other style guides such as Finsweet’s style guide found in their Client-first cloneable, which many of you have used on existing projects. Simply select the style guide you’re using in a project and the components will adjust to the CSS values of the pre-built classes in that style guide and prevent unnecessary class duplication.
Many of you have reached out regarding class duplication issues when using Finsweet’s style guide with Relume Library components. Although we recommend you use the Relume Library Style Guide, we understand that many existing projects were built using Finsweet’s Client-first cloneable and so we wanted to make sure that our components are compatible with both Finsweet and Relume starter projects to prevent any unnecessary class duplication occurring. This is important because class duplication leads to class renaming, which takes time and reduces productivity, and we care deeply about productivity.
Just to be clear, class duplication in Webflow occurs when two classes share the same name but have different CSS values and properties. For example, let’s imagine you have a .button class in Project A and it has a border radius of 1rem and a .button class in Project B and it has no border radius. If you were to copy Project A’s .button and paste it in to Project B, the button class would duplicate and be renamed to .button2.
Relume Library components have been built using pre-built classes from the Relume Library Style Guide. The same pre-built classes can be found in Finsweet’s Client-first cloneable, however, some of Relume’s pre-built classes have different CSS values, primarily for spacing classes. For example, Relume’s .margin-small class uses 1.5rem, whereas Finsweet’s .margin-small class uses 1rem. One of the reasons why class duplication occurs when pasting Relume Library components into projects that use Finsweet’s style guide (found in Finsweet’s Client-first cloneable) is because the components consist of classes that share the same name but have different values.
For the purpose of transparency, the following classes have different CSS values and would lead to class duplication:
The Style Guide Selector works by adjusting the CSS values based on the style guide selected. This means that when you switch between style guides, the components will slightly change in appearance to match the selected style guides spacing, typography, colours and UI elements.
At the time of building this library, we did not anticipate the reception we’d get from the Finsweet community and the issues that would result from pasting components into an existing project that uses Finsweet’s Client-first cloneable. We took the approach of building a library that we at Relume would use, and adjusting the spacing values that fit our design system made the most sense at the time. To this day we still prefer our spacing values (as they skew towards smaller spacing dimensions) and find them to be more inline with our design style, which is why we’re sticking with them for now.
The issue of class duplication can’t be avoided at this stage and is the nature of copy and pasting components into Webflow. What can be avoided is the unnecessary duplication of classes due to the conflicts between the two style guides, which we have now solved with the release of the Style Guide Selector. We aim to continue to solve problems around duplication as we believe it has the opportunity to increase productivity and improve workflows.
It’s the first day of the month which means we’ve released some new components to the library (Figma & Webflow). Happy March Component Day!
We’re anticipating a few questions so have documented some answers below.
The short answer is that we’re still working on them and will be releasing them as part of our next component day on April 1. We did not want to rush them and so we’re using this extra time to make them as good as possible!
Yes, we’ve updated the Figma file with all new components. To access them you’ll need to duplicate the file again on Figma.
We just released a Relume Library Figma Kit to the Figma community for FREE!
I’ve recorded an introduction video to help you get started.
We’ve created a #figma-kit channel in our Slack where you can ask any Figma Kit related questions or provide feedback. Feedback is very much welcomed!
Lastly, big shout out to the team at Minimal Square for taking the initiative to build this out and give this away for free. It’s an awesome gesture and speaks volumes to the community we have here.
In order for us to continuously listen to your feedback for Component Day, we’ve decided to create our own voting board where you can upvote which new components you’d like us to build for April 1st Component Day.
Instead of collecting votes over a single timeframe, we are taking the approach of refreshing votes each month so that requests are more relevant to our current members.
You’ll also be able to see the components we are currently building for our next component release.
It’s the first day of the month which means we’ve released some new components to the library. Happy component day!
We’re calling on the community to help us build the most epic Webflow component library of all time. Submit components and earn rewards.
A fluid responsive method for Relume Library is now available thanks to our friends at Finsweet. Make your website fluid responsive visually in rems, without writing custom css or making calculations. I’ve created walking you through how to add it to your website (see below).