Layout

layout.css

Page Width

Page width can be set in theme settings.

• Small - 36rem
• Medium - 48rem
• Large - 64rem

Admin pages are 72rem.

.layout-container {
  max-width: 64rem;
  margin: auto;
}

Container overflow

Prevent overflow of content.

https://codepen.io/mortona42/pen/yLRbrXo

.layout-container {
  overflow-wrap: break-word;
}
input[type="text"] {
  max-width: 100%;
  box-sizing: border-box;
}
/* Use on wrappers to scroll inside container */
.overflow-x-scroll {
  overflow-x: scroll;
}

Regions

Header

• Branding
• Primary menu
• Secondary menu

Main

• Breadcrumbs
• Messages
• Title
• Help
• Tabs
• Actions
• Main content

Footer

• Footer

page.html.twig

Include admin styles, page component.

Customize via components/layout/*.

{% if is_admin %}
  {{ attach_library('mantravite/admin') }}
{% endif %}

{{ include('mantravite:page') }}

{% if page.header|render|striptags|trim is not empty %}

Use this check for empty elements. Otherwise twig debugging will cause empty areas to render.