Setting up a workflow with Figma, Relume React, and WordPress

as far as like a 12 column grid etc we don't really adhere to a standard like that necessarily. Though translated to Tailwind may have more details on this exactly - maybe we had to adapt our approach to something like that.

However, the core of our components are built upon the Client-First methods which is mostly Webflow related.

We also have some Spacing documentation here, but again maybe this doesn't answer your question specifically.

Hoping we'll have more of a straightforward answer for you soon.

Thanks for the reply - I assumed looking at granular level, as you said there isn’t a clear 12 column as such - if that has been adapted in anyway from a tailwind perspective then let me know 😊

I will have a nosey at the Client-First method because I have focussed my efforts more in Tailwind but I am sure there will be some crossover

yeah for sure, at the very least your question raises a gap with our documentation of the adaptations we've made from Client-First/Webflow to Tailwind - so likely something we'll want to fill in for sure.

Thanks to be fair I think what we are trying to do is equally so slightly odd - as in Relume React > Wordpress - I see massive value and love what you guys have done with Relume but our agency has traditionally used Wordpress from a CMS perspective - not that we aren’t open to change but for now to implement a Webflow approach would change internal structure.

I am hoping to leverage off of Relume section library and set up (Figma & React) to create an efficiency and consistency in our approach from Design through to Development - and I am super confident Relume can help us achieve that, it’s just getting our head around the best approach - as it’s a potential new operational process to implement and I want to do it properly!

absolutely! Understood. Keep us posted on your progress with this process and post any additional questions or issue you have as you go through. This feedback will be critical in our approach as we look beyond just React!

We havent codified a grid "system" in Relume React. and Tailwind itself doesn't have a grid system. It provides utility classes for CSS grid and flex. So for the Relume React components we just use grid and flex where applicable.

For example

• Layout229 is a 3 column layout that uses <div>
• Layout131 is a 2 column layout that uses <div>

• Conceptually I think of it as a 12 column grid.
• We mostly use CSS grid and gap for gutters. The gaps use Relume spacing values. Occasionally we use flex
• We use Tailwind container (which is just a shorthand for max-width and margin 0 auto) with breakpoints defined in the tailwind.config.js