Layout

For desktop, Decidim uses a 12 column grid with limited number of templates (grid configurations) for different types of content. The objective is that a given type of content (homepage, list of elements, individual item) has a distinctive layout, so users can understand in which kind of content they are just by the general look of the page.

These simple rules should be followed when creating new modules or customizing existing ones, so a Decidim site can maintain its consistency.

Homepage (of the site, of an space): full width
List of elements (of spaces, of items inside a space, etc): left aside
Individual item (proposal, blog post): centered, optionally with a right aside

Desktop lg

Desktop grid system is composed of 12 flexible columns with a gutter between columns of 16px and left and right margins of 48px

Tabletmd

Tablet grid system is composed of 8 flexible columns with a gutter between columns of 16px and left and right margins of 24px

Mobile sm

Mobile grid system is composed of 4 flexible columns with a gutter between columns of 16px and left and right margins of 16px. For sizes below 320px this margins are set to 8px

Code

When implementing new modules you have some helpers that automatically provides you with the code needed to setup the HTML structure. You should use these helpers instead of directly using div elements with classes, so you maintain consistency.

You can find the basic layouts in https://github.com/decidim/decidim/tree/develop/decidim-core/app/views/layouts/decidim/shared

Full width

Not required

Left aside


    <%= render layout: "layouts/decidim/shared/layout_two_col" do %>
      ...
    <% end %>

Right Aside


    <%= render layout: "layouts/decidim/shared/layout_two_col", locals: { reverse: true } do %>
      ...
    <% end %>

Centered


    <%= render layout: "layouts/decidim/shared/layout_center", locals: { columns: 10 } do %>
      ...
    <% end %>

Being the number of columns 10, 8 or 6.

Breakpoints

To manage the responsive max-width of elements we rely on the default `container` Tailwind class, which states the following breakpoints:

Breakpoint	Properties
sm (640px)	max-width: 640px;
md (768px)	max-width: 768px;
lg (1024px)	max-width: 1024px;
xl (1280px)	max-width: 1280px;
2xl (1536px)	max-width: 1536px;