We're hosting a Design tournament in October with $3k prize money
Learn more

What's new

Updates and improvements to Relume Library

Stay in the loop with the latest updates
September 7, 2022
Adam Mura
Co-founder
COMPONENT DAY

New components and updates have been added to the library

It’s a new month which means we’ve released some new components and updates to the Relume Library. Happy September Component Day!

These include:

  • Client-First V2 Updates -To ensure 100% compatibility with Client-First V2 and Finsweet’s new Folders feature, we’ve made changes to our components and the official Relume Library Style Guide (located in the Starter Project Cloneable). These changes include:
  • A new version of our Style Guide (v1.3) containing all Client-First V2 class updates. We’ve also made small adjustments to improve the experience of editing the style guide (eg. removing elements that aren’t commonly used in an attempt to simplify the style guide).
  • All components have been updated to adopt the following Client-First V2 updates:
  • section-[identifier] has become section_[identifier] to work more effectively with Finsweet’s folders.
  • page-padding has become padding-global
  • Added the new padding-section-[size] classes to sections in place of using padding-vertical + padding-[size]
  • Renamed our heading classes from heading-[size] to heading-style-[h#]
  • Renamed our heading classes from heading-[size] to heading-style-[h#]
  • Renamed our icon classes from icon-[size] to icon-height-[size]
  • Adopted the new Client-First V2 approach to button classes which uses the button class as the global controller of styles for all buttons. For example, button-secondary is now button + is-secondary. We believe this new approach is faster and more flexible.
  • Relume Icons - We’ve built an Icon Library for Webflow that contains 5 of our favourite open-source icon packs (16,195 icons in total). Each icon comes with pre-built SVG code that makes controlling icon color and sizing possible in Webflow with HTML embeds. Watch this demo video to learn more.
  • If you wish to use your own icons and want a quick way to insert the custom code that enables you to control icon color and size in Webflow, we’ve also built a tool that can help you do that. You can access this on the home page.
  • If you want us to include your favourite open-source icon pack, leave a message in the #component-requests channel and we’ll add the most commonly requested.
  • Table Components - Building Tables in Webflow just got a lot faster. We’ve built fully responsive Table components that work with CMS collections and can be filtered and sorted using Attributes by Finsweet. All attributes have been added to the components making it much faster to implement.
  • Floating Navbars - A trend we’re digging lately that makes your Navbar a little more uncommon. We particularly like the bottom floating Navbar (Navbar 15).
  • Added a Style Guide - We’ve added a style guide to the Figma Kit so that you can easily global elements from the one place. Watch this demo video by Damian to learn more.
  • Added new components - All new Table components have been added to our Figma Kit.
  • Component Optimisation & Bug Fixes - We’ve been working behind the scenes to optimise existing components so that they are faster to build with, easier to update and more robust.
August 27, 2022
Adam Mura
Co-founder

Client-First V2 Launches

We’re excited about this launch and will be releasing updates to our components over the coming weeks that include the new Client-First V2 updates.

The updates will be minor and likely won’t impact any existing projects built using Client-First V1 and Relume Library. For the most part, Client-First V1 and Client-First V2 are backwards compatible. You can learn more about the differences between V1 and V2 here.

We’ll begin introducing the new updates starting on September 5 (Component Day). These updates will include:

  • A new version of our Style Guide that includes all Client-First V2 updates.
  • All components will be updated to adopt the followng Client-First V2 updates:
  • section-[identifier] will become section_[identifier]
  • page-padding will become padding-global
  • New padding-section-[size] instead of using padding-[direction] + padding-[size] for sections
  • New heading-style-[h#] instead of using heading-[size] for heading classes

Once we’ve released those updates we’ll be monitoring the use of the new Spacing strategy - Spacing Blocks. At this stage we’d like to see how this new Spacing strategy plays out and would love to hear from you whether we should switch from Spacing Wrappers to Spacing Blocks in our components.

If you have any questions regarding the new Client-First V2 update, please leave them in the thread and we’ll address them.

Thanks for your ongoing support!

August 1, 2022
Adam Mura
Co-founder
COMPONENT DAY

Introducing Libraries

It’s the start of a new month which means we’ve released some updates to the library and this time it’s a BIG one. Happy August Component Day! 🎉

Today we’re launching Libraries (aka. Relume Library 2.0)!

What does this include?

July 4, 2022
Adam Mura
Co-founder
COMPONENT DAY

Introducing the Relume University

Happy July Component Day!

After receiving many requests to create tutorial videos for the Relume Library, this month we decided to double down on creating content. We are excited to launch the Relume University - a place where you can find videos on how to take full advantage of the Relume Library and improve your productivity and design on Webflow.

This will be the new content hub for the Relume Library. Videos will be released more regularly, along with some articles too, so expect to see new content each week.

There are no new components this month, however, we have a big update coming in a few weeks which includes lots of new stuff, so we’ve been working hard towards that release.

We hope you find the Relume University helpful and we look forward to creating more content for this community.

June 3, 2022
Adam Mura
Co-founder
COMPONENT DAY

New components and updates have been added to the library

It’s a new month which means we’ve released some new components to the library. Happy June Component Day!

These include:

  • Category Filters - Effortlessly create filters for CMS collections (blogs, resources, products etc.) using our components and Attributes by Finsweet. All attributes have already been added to the components making it much faster to implement.
  • More Uncommon Components - Back by popular demand. Uncommon Components involve more sophisticated layouts and Webflow interactions and give your website that “wow” factor.
  • More UI Elements - These include more buttons, dropdowns, breadcrumbs and more. We’ve also updated the Page Structure and Section Structure to include padding-vertical (as requested).

Other updates

  • Improved Style Guide - We’ve made improvements to our Style Guide to enable more control over styling components. Watch a video of me walking you through the new style guide.
  • Color Palettes - Now you can instantly copy and paste Color palettes into your Style Guide, including all the Client-first classes. Watch a video of me walking you through Color Palettes (as part of video above).
  • Updated Relume Library platform UI/UX for better speed when you build - Key updates include:
  • Improved search bar UX (ongoing)
  • Improved filtering UX
  • Added a modal for components which features complimentary UI elements and links to resources that can power up components.
  • Enabled save function for UI Elements and Page Templates
  • Added Flex Gap to entire library - We love Flex Gap, so we’ve added Flex Gap where it’s most suitable. This is part of our commitment to improve our components as better techniques and updates emerge.
  • Added interactions to all Navbars - We added better interactions to existing Navbars and will continue to add interactions where it makes sense. We do not want to overdo it, so we’ve taken a very minimal approach but enough to make the components feel premium.
  • Figma Kit Update (v1.4) - All new Category Filter components and Uncommon components have been added to our Figma Kit. You’ll need to duplicate it again to receive the latest update.
May 2, 2022
Adam Mura
Co-founder
COMPONENT DAY

New components have been added to the library

It’s a new month which means we’ve released some new components to the library (Figma & Webflow). Happy May Component Day!

These include:

  • Uncommon Components - These aren’t your typical components, in fact some of them don’t even look or act like components. They are designed to give your websites a spark of brilliance. These components are more complex than others so we will be creating some tutorial videos for them in the coming weeks.

Other updates

  • Figma Kit Update (v1.3) - All new Ecommerce components and Page Templates have been added to our Figma Kit. You’ll need to duplicate it again to access the latest update.
  • Improved the components so that they are faster to build with, easier to update and more robust.
April 15, 2022
Adam Mura
Co-founder

Component Voting 2.0: How it works

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.

In light of these goals, here’s a summary of what’s changed:
  • Instead of voting on components to be built in the following month, you’ll now be voting on components to be added to the roadmap each month. Given the difficulty of scoping some components and the varying degrees of scope, it has become problematic at times committing to the release of certain components within a 1 month timeframe. This has resulted in setting unrealistic deadlines and not meeting them or rushing components in order to meet them (causing internal chaos). That’s why we’ve decided to move away from the original approach and move towards a more realistic and flexible approach that enables our team to deliver on the right components in the right amount of time, thus improving the quality of output.
  • Instead of components being released on the first day of each month, they’ll now be released on the first Monday of each month. Something we did not consider when originally committing to releasing components on the first day of each month was that, on the odd occasion, that day will fall on a weekend or the day before a weekend. This isn’t ideal if any issues arise and the team needs to be around to solve them (we value time away from our computers on the weekend). Keep in mind that new components require additional updates to the front-end and back-end of our platform. By changing the day to the first Monday of each month, the team will be around to provide support if needed and answer any questions about the release.
  • We’ll be adding the top 2 voted items to our roadmap each month. Items that are added to our roadmap will be delivered within 1 to 3 months depending on the scope of work. This number may change as we continue scaling up our internal component team.
What's remained the same
  • New components will be released at the beginning of each month.
  • Voting will reset each month to ensure votes are most relevant to the existing community.
  • When possible, we’ll provide a release date on components so that you know when they are coming.

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 hello@relume.io.

April 4, 2022
Adam Mura
Co-founder
COMPONENT DAY

New components have been added to the library

It’s a new month which means we’ve released some new components to the library (Figma & Webflow). Happy April Component Day!

These include:

  • Product List Sections
  • Product Headers

Other updates

  • Page Templates - We studied hundreds of high-converting websites from the most successful companies in the world and applied our learnings to these templates. This should help you get started with content much easier. Also, it’s a huge time saver being able to copy and paste an entire page.
  • UI Elements - You can now copy and paste smaller UI elements which should make customising existing components much easier. For example, if a component is missing a button or a heading, you can add one in (for now we recommend you opening these up in a seperate tab).
  • Figma Kit Update (v1.2) - All new Ecommerce components and Page Templates have been added to our Figma Kit. You’ll need to duplicate it again to access the latest update.
  • Fixed bugs relating to existing components
  • Improved existing components
March 2, 2022
Adam Mura
Co-founder
STYLE GUIDE SELECTOR

Enable 100% compatibility with Finsweet's Client-first style guide

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.

Why did we build this? (The problem)

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:

How it works

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.

Why did we decide to change the values in the first place?

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.

This does NOT solve class duplication completely

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.

March 2, 2022
Adam Mura
Co-founder
COMPONENT DAY

New components have been added to the library

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!

These include:

  • Banners
  • Sign up / Log in Pages
  • Sign up / Log in Modals
  • Contact Modals
  • More Footers

Other updates

  • Preview feature: You can now preview components in the browser before pasting them into a Webflow project by clicking the preview button.
  • Fixed bugs relating to existing components
  • Improved existing components

More information

We’re anticipating a few questions so have documented some answers below.

Where are the ecommerce components as promised?

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!

Will you be updating the Figma file with the new components?

Yes, we’ve updated the Figma file with all new components. To access them you’ll need to duplicate the file again on Figma.

February 23, 2022
Adam Mura
Co-founder

Relume Library Figma Kit now available

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.

February 14, 2022
Dan Anisse
Co-founder
Community Voting board

You can now Vote for new components

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.

February 2, 2022
Adam Mura
Co-founder
COMPONENT DAY

New components have been added to the library

It’s the first day of the month which means we’ve released some new components to the library. Happy component day!

These include:

  • Navbar Mega Menus
  • Career Sections
  • Gallery Sections

Other updates

  • Interactions filter: You can now filter to find components that use interactions. We’ve also added a label that identifies the components that use interactions. After speaking to a few people in the community, we realised that it wasn’t clear that some of our components come with interactions built into them.
  • Menu redesign: Opened up the browse components menu for better visibility.
  • New Components page: New components page which features the new components released for the month.
January 28, 2022
Dan Anisse
Co-founder
CONTRIBUTORS

Interested in contributing to the Relume Library?

We’re calling on the community to help us build the most epic Webflow component library of all time. Submit components and earn rewards.

December 27, 2021
Adam Mura
Co-founder

Make Relume Library components fluid responsive

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).

View documentation