Understanding Grid Setup for Relume in Figma to WordPress Process | Relume Community

Understanding Grid Setup for Relume in Figma to WordPress Process

May be a stupid question.. but what is the grid set up for Relume? I am trying to set up a process using Figma > Relume React > Wordpress - with that though there will no doubt be additional blocks we design/build (only due to the Relume being Beta currently) and I want to match Relume approach - we have currently set up our variables structure with the Relume Tailwind set up - just this final step to get right

6 comments

Matt J.
·
Grant T. as far as like a 12 column grid etc we don't really adhere to a standard like that necessarily. Though translated to Tailwind Rob A. 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.
Grant T.
·
Thanks Matt J. 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
Matt J.
·
Grant T. 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.
Grant T.
·
Thanks Matt J. 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!
Matt J.
·
Grant T. 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!
🤞1
Rob A.
·
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 className="container grid grid-cols-1 items-start justify-center gap-y-12 md:grid-cols-3 md:gap-x-8 md:gap-y-16 lg:gap-x-12 lg:gap-y-16">
Layout131 is a 2 column layout that uses <div className="container grid grid-cols-1 items-start gap-y-12 md:grid-cols-2 md:gap-x-8 md:gap-y-16 lg:gap-16">
How we use grid
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
🙌2