Layout

Magento UI library provides mixins for flexible page layout customization. For simple quick layout customization global layout variables are used.

header.header {
    background-color: rgba(255, 0, 0, .2);
}
.column.main {
    background-color: rgba(255, 255, 0, .2);
}
.column.left {
    background-color: rgba(0, 255, 255, .2);
}
.column.right {
    background-color: rgba(0, 0, 255, .2);
}
footer.footer {
    background-color: rgba(0, 0, 0, .2);
}

Layout global variables

    

        

            Variables list names
            Default value
            Allowable values
            Comment
        

        

            @layout__width
            ''
            '' | false | value
            Page minimum width
        

        

            @layout__max-width
            1280px
            '' | false | value
            Page maximum width
        

        

            @layout-indent__width
            20px
            '' | false | value
            Page indents on the left and right
        

        

            Class names defining different layouts
        

        

            @layout-class-1column
            page-layout-1column
            '' | false | page-layout-1column | page-layout-2columns-left | page-layout-2columns-right | page-layout-3columns
            Class name for one column layout
        

        

            @layout-class-2columns__left
            page-layout-2columns-left
            '' | false | page-layout-1column | page-layout-2columns-left | page-layout-2columns-right | page-layout-3columns
            Class name for two columns layout with left sidebar
        

        

            @layout-class-2columns__right
            page-layout-2columns-right
            '' | false | page-layout-1column | page-layout-2columns-left | page-layout-2columns-right | page-layout-3columns
            Class name for two columns layout with right sidebar
        

        

            @layout-class-3columns
            page-layout-3columns
            '' | false | page-layout-1column | page-layout-2columns-left | page-layout-2columns-right | page-layout-3columns
            Class name for three columns layout with left sidebar
        

        

            Variables used for layout grid
        

        

            @total-columns
            12
            '' | false | value
            Number of total columns in layout (i.e. 1, 2, 3)
        

        

            @gutter-width
            0
            '' | false | value
            Distanse between columns
        

        

            Variables for layout columns
        

        

            @layout-column__width
            @total-columns
            '' | false | value
            Sets base columns number
        

        

            @layout-column__sidebar-width
            2
            '' | false | value
            Sets sidebar width
        

        

            @layout-column__left-width
            @layout-column__sidebar-width
            '' | false | value
            Sets left column width
        

        

            @layout-column__right-width
            @layout-column__sidebar-width
            '' | false | value
            Sets right column width
        

        

            Variables for layout columns depending on layout used
        

        

            @layout-column-main__width-1
            100%
            '' | false | value
            Sets one column width
        

        

            @layout-column-main__width-2-left
            @layout-column__width - @layout-column__left-width
            '' | false | value
            Sets left column width
        

        

            @layout-column-main__width-2-right
            @layout-column__width - @layout-column__right-width
            '' | false | value
            Sets right column width
        

        

            @layout-column-main__width-3
            @layout-column__width - @layout-column__left-width - @layout-column__right-width
            '' | false | value
            Sets three columns layout main column width
        

        

            Settings variables
        

        

            @use-flex
            true
            '' | true | false
            Sets compatibility for browsers not supporting flex
        

        

            @responsive
            true
            '' | true | false
            Is set to true if theme has responsive layout

Page layouts

Default properties for page columns are generated using alias mixins:

#lib-layout-columns - sets columns container

#lib-layout-columns > .main() - alias for main column

#lib-layout-columns > .left() - alias for left column

#lib-layout-columns > .right() - alias for right column

#lib-layout-columns > .reset() - column width and order reset may be used in RWD

These aliases use default class names for layouts predefined in vars (i.e. @layout-class-3columns: layout-3) and general column mixin .lib-layout-column()

Three columns page layout

Two columns page layout with sidebar on the left

Two columns page layout with sidebar on the right

One column page layout

.columns {
    #lib-layout-columns();
    > .column {
        &:extend(.add-box-sizing all);
        .lib-css(padding-bottom, @indent__xl);
    }
}

@media (min-width: 600px) {
    .column.main {
        #lib-layout-columns > .main();
    }

    .column.left {
        #lib-layout-columns > .left();
    }

    .column.right {
        #lib-layout-columns > .right();
    }
}

Layout column

The .layout-column() mixin is used to setup page columns. It configures number, position and width of columns

3 columns layout example:

To move main column to the left, change 2nd argument @_order for main and left columns:

  .lib-column.main {
      .lib-layout-column(3, 1, 60%);
  }
  .lib-column.left {
      .lib-layout-column(3, 2, 20%);
  }
.layout-example-3 {
    .column.main {
        .lib-layout-column(3, 2, 60%);
    }
    .column.left {
        .lib-layout-column(3, 1, 20%);
    }
    .column.right {
        .lib-layout-column(3, 3, 20%);
    }
}

.layout-example-3-1 {
    .column.main {
        .lib-layout-column(3, 1, 60%);
    }
    .column.left {
        .lib-layout-column(3, 2, 20%);
    }
    .column.right {
        .lib-layout-column(3, 3, 20%);
    }
}

Layout column variables

    

        

            Mixin variable
            Allowed values
            Comment
        

        

            @_layout__min-width 
            number
            Number of total columns in layout (i.e. 1, 2, 3)
        

        

            @_order
            number
            Order of current column
        

        

            @_width
            number
            Width set in css units (20%, 300px, etc.) or in grid columns if unit is not specified. (4)

Layout width

The .lib-layout-width() mixin is used to set default page width of the element the mixin is applyed to. It can be used to set width for the whole page wrapper or for the page elements individualy like header, footer, and so on.

Layout width variables

    

        

            Mixin variable
            Default value
            Allowed values
            Comment
        

        

            @_layout__min-width
            ''
            '' | false | value
            Page minimum width
        

        

            @_layout__max-width
            1280px
            '' | false | value
            Page maximum width
        

        

            @_layout__indent
            20px
            '' | false | value
            Page indents on the left and right