# 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

<div class="page-wrapper layout-3"> <header class="header">Header</header> <section class="page main"> <div class="columns"> <div class="column main">Main column</div><!-- --><div class="column left sidebar">Left column</div><!-- --><div class="column right sidebar">Right column</div> </div> </section> <footer class="footer">Footer</footer> </div>

## Two columns page layout with sidebar on the left

<div class="page-wrapper layout-2-left"> <header class="header">Header</header> <section class="page main"> <div class="columns"> <div class="column main">Main column</div><!-- --><div class="column left sidebar">Left column</div> </div> </section> <footer class="footer">Footer</footer> </div>

## Two columns page layout with sidebar on the right

<div class="page-wrapper layout-2-right"> <header class="header">Header</header> <section class="page main"> <div class="columns"> <div class="column main">Main column</div><!-- --><div class="column right sidebar">Right column</div> </div> </section> <footer class="footer">Footer</footer> </div>

## One column page layout

<div class="page-wrapper layout-1"> <header class="header">Header</header> <section class="page main"> <div class="columns"> <div class="column main">Main column</div> </div> </section> <footer class="footer">Footer</footer> </div>

    .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:

<div class="layout-example-3"> <header class="header">Header</header> <section class="page main"> <div class="columns"> <div class="column main">Main column</div><!-- --><div class="column left sidebar">Left column</div><!-- --><div class="column right sidebar">Right column</div> </div> </section> <footer class="footer">Footer</footer> </div>

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%);
      }

<div class="layout-example-3-1"> <header class="header">Header</header> <section class="page main"> <div class="columns"> <div class="column main">Main column</div><!-- --><div class="column left sidebar">Left column</div><!-- --><div class="column right sidebar">Right column</div> </div> </section> <footer class="footer">Footer</footer> </div>

    .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