Design guide: wrong specs for layouts

[cyberschnaps]

Design guide: wrong specs for layouts

[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 :)