Page Layout

About

Breeze allows to apply some basic styling to the page layout. You can control boxed and narrow pages state using LESS and XML layout update instructions.

Container

Container — is an HTML wrapper that used to constrain its content within a specific width per responsive breakpoint.

You can customize container styles with LESS variables:

@container__margin: 0 auto;
@container__padding: @1-5 @2;

@container__max-width: 1260px;
@container__media-sm__max-width: false;
@container__media-md__max-width: false;
@container__media-lg__max-width: false;
@container__media-xl__max-width: false;
@container__media-xxl__max-width: false;

// Boxed container example
// @container__max-width: none;
// @container__media-sm__max-width: @sm;
// @container__media-md__max-width: @md;
// @container__media-lg__max-width: @lg;
// @container__media-xl__max-width: @xl;
// @container__media-xxl__max-width: @xxl;

@sidebar__width: 180px;
@sidebar__gap: @4;
@sidebar__media-lg__width: 220px;
@sidebar__media-lg__gap: @8;

Narrow page

Narrow page is the 1column page variation with hidden breadcrumbs, centered page title, and narrow content section. Breeze uses narrow page layout by default for the following pages:

You can transform any single column page into the narrow page using the layout update handle:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="breeze_page_narrow"/>
</page>

To disable applied narrow page style, use the following layout update:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <attribute name="class" value="narrow-page-reset"/>
    </body>
</page>

Boxed page

Additionally, narrow pages use boxed styles for its content blocks. Each Breeze-based theme may define its own boxed block styles.

Customer registration form is a good example of boxed block styles:

Boxed styles for these pages enabled using LESS variables:

@boxed-page: true;
@boxed-page-contact: true;
@boxed-page-login: true;
@boxed-page-404: true; // enabled for 1column layout only