Community forum for knowledge and support

Updated last year

Grid list 1

At a glance

The community member has noticed that some components in the Relume site builder are stretching edge to edge and not being formatted correctly. They are working on wireframing and sitemapping in the Relume site builder and would like to use different grid patterns, but the available options don't seem suitable for their needs. The community members discuss the application shells in Relume and whether the grid components are intended for use in wireframing. They also discuss the possibility of using Figma instead, but the community member prefers to stay in Relume if possible. The community member provides feedback to the team, including requests for the ability to toggle elements, set the number of items in grids/lists, and use placeholder images for custom components. The team acknowledges the feedback and indicates they are working to resolve these pain points.

I’ve noticed a few components stretch edge to edge and don’t look like they are being formatted correctly (see grid in screenshot). Is there something I’m missing here to force the content to match the other sections on the page in width? The component in my screenshot is Grid List 1 but there are others that behave in the same way.

M
P
8 comments

Hey Phil - so some of these components - specifically the ones you find in the application category are meant to be used in conjunction with the application shells. Let me know if you want me to dive more into what that means and I'd be happy to do so.

Oh, thanks . I’m assuming these aren’t intended for use in the wireframes then?

These are pretty common patterns we use in web design in the WordPress space (that’s where I work) so it would be great to have different grids we could use when building wireframes. The blog posts sections are OK but they all assume a bit too much for the wireframes I want to build so it makes it a bit tricky to use.

are you working in Figma or the Site Builder?

Relume site builder. I’m sitemapping and wireframing in there then sharing with client for structural approval.

ah apologies, I see that now in the screenshot

yeah interesting. Well I do see that we have the application shells in the site builder - but to your point you don't need the shells. I don't see a quick/easy workaround here unfortunately - I can bring this feedback to the team to see if we can try to do something with that. Yeah the application shells don't even really work with those grid components - we don't yet have this concept of "layering" basically - or nesting even.

Are you familiar with Figma at all or would you prefer to not go that route at all?

Thanks . I’m familiar with Figma and I guess may just have to resort to exporting to Figma and building the remainder of the wireframe there – I’d prefer to avoid it, though, and only move to Figma once the structure and wireframes are approved. It keeps wireframing really easy.

If you can take some feedback to the team, there are a few initial things that would level up my experience with Relume:

  1. The ability to toggle elements within a section on/off. See this post for an example.
  2. The ability to set the number of items that appear in any grid/list. Number of columns is a nice touch that I’ve seen but number of items would be an awesome addition.
  3. It would also be handy to load an image into a slot – like a section placeholder – for those situations where a Relume section doesn’t fit. That would be a nice fallback option for custom components.
  4. Custom components would be 🔥

awesome Phil, we totally hear you and understand. We're heading in this direction no doubt! We hope to resolve this pain point. I shared the link to this thread directly, with the team - so they'll see these messages as well. Really appreciate your feedback!

Add a reply
Sign up and join the conversation on Slack