One of the biggest challenges of building websites is styling them. Relume does a fantastic job helping us build structure and design systems, but I recently tried something new that might be a game changer.
-- Working on a website for a nonprofit --
I started by using Relume to develop the wireframe and write copy, working closely with the client. Once they approved the wireframe, I moved to the development stage. Initially, I cloned the Relume style guide and used the Relume Webflow app to import it into the project. It was a great starting point for any web project鈥攁 functional, fully responsive site. But, there鈥檚 a catch: styling takes a lot of mental energy, especially when starting from scratch.
So, what did I try? I installed the Untitled Webflow library into the nonprofit project alongside the Relume style guide. After spending hours debating the next steps, I had two options:
- 1.
Spend time copying CSS styles from each element into the Relume style guide and then import the pages, which means making design decisions on each component.
- 2.
Identify similar components in the Untitled UI library, copy over the text, and tweak the UI elements. The downside? This approach leaves the Relume style guide unstyled while I replicate components and transfer copy and buttons鈥攁 subpar solution.
Then, I discovered that Untitled has its own style guide I could clone. Perfect! Now my client has a fully styled Webflow library with a new, styled, Relume-compatible guide that follows the latest Client-First principles. This just saved me a ton of design time! Now, I can focus on importing components from Relume with minimal effort.
So, I tried using the Relume app to import the site from the Relume project into the Untitled UI cloned style guide. Unfortunately, life can鈥檛 be that easy! because that did not work, the components were broken
Imagine if, with just one click, I could import all pages and components from the Relume project directly into a pre-styled Webflow library. Wouldn鈥檛 that be game-changing?
