Design guide: wrong specs for layouts

[cyberschnaps]

Describe the bug

When inspecting try.decidim.org on desktop, the layout doesn't correspond to what is indicated in the design guide: instead of having 12 columns (design guide indication), everything fits in 3 columns centered in a container with auto responsive margins on the left, right, and between the elements.

To Reproduce

1. Go to https://try.decidim.org/design/foundations/layout#desktop
2. Check collumn numbers for desktop layout
3. Go to https://try.decidim.org/
4. Open inspector: you can see there is 3 flex columns instead of 12, and margins are auto proportional to screen width, not fixed

Expected behavior

Expected: The design guide should respect the number of columns implemented on try.decidim.org: 3. Margins should also be specified as proportional instead of fixed.

Screenshots

Stacktrace

No response

Extra data

• Device:
• Device OS:
• Browser:
• Decidim Version:
• Decidim installation:

Additional context

No response

[alecslupu]

@cyberschnaps Help me a bit with more context, I have tried what you stated, and i could not find anything wrong.

The code responsible for displaying the 12 columns :

<div class="grid grid-cols-12 gap-4">
      <div class="bg-primary/10 text-center h-10"></div>
      <div class="bg-primary/10 text-center h-10"></div>
      <div class="bg-primary/10 text-center h-10"></div>
      <div class="bg-primary/10 text-center h-10"></div>
      <div class="bg-primary/10 text-center h-10"></div>
      <div class="bg-primary/10 text-center h-10"></div>
      <div class="bg-primary/10 text-center h-10"></div>
      <div class="bg-primary/10 text-center h-10"></div>
      <div class="bg-primary/10 text-center h-10"></div>
      <div class="bg-primary/10 text-center h-10"></div>
      <div class="bg-primary/10 text-center h-10"></div>
      <div class="bg-primary/10 text-center h-10"></div>
  </div>

Removing 9 columns rows like: <div class="bg-primary/10 text-center h-10"></div> will result in having the below picture.

[cyberschnaps]

@alecslupu thank you for your reply :) Sorry, my request wasn't clear:

Context: We are building a design system on Figma to reflect what is available in 0.28 on try.decidim.org. When trying to apply the logic published on try.decidim.org/design it doesn't fit the front-end's reality when verifying with the inspector.

Problem: The design guide states the Layout is based on 12 columns on Desktop, but in reality it seems it is based on 3 columns with a max-width, and responsive gutters and margins, not 16px & 48px.

Am I missing something? Where can one see the 12 columns layout used with the inspector obeying these rules?

Captures

• Figma with 12 columns layout (does not reflect try.decidim.org)
• Inspector on homepage of try.decidim.org (does not reflect the design guide)

[cyberschnaps]

Thank you for moving this to the maintainer's backlog @andreslucena.

...In the meanwhile (which might take a while given the issue), https://try.decidim.org/design/foundations/layout should reflect the reality. Will it be changed accordingly so that designers can actually understand how the front-end is built?

If this is not the case, will you remove the Desktop, Tablet and Mobile sections of the layout page so that it does not add any confusion?

Thank you :)