3.1 layouts.layout-center Layout Center
All other layouts should be nested inside this centered layout to ensure that content does not get too wide on very large screens.
Applying a .layout-* class to the same HTML element as .layout-center
would cause that element's grid to mis-align with the rest of the grid on the
page, but this component will automatically detect the other .layout-*
class and automatically use the .layout-center--shared-grid variant
instead.
Examples
Default styling
This is layout center that has content is centered on larger screens.
.layout-center--shared-grid
If
.layout-center is applied to the same div as another .layout-* class, then this variant should be used to prevent the shared layout's grid from mis-aligning. Note: Each time a new .layout-* component is created, this component will need to be modified.
This is layout center that has content is centered on larger screens.
Markup: layouts/layout-center/layout-center.twig
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"layout-center </span></span></span><span class="hljs-template-variable">{{modifier_class}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>></span>
This is layout center that has content is centered on larger screens.
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</span>
Source:
layouts/layout-center/_layout-center.scss, line 5