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);
}
| 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 | |
Class name for one column layout |
| @layout-class-2columns__left | page-layout-2columns-left | '' | false | |
Class name for two columns layout with left sidebar |
| @layout-class-2columns__right | page-layout-2columns-right | '' | false | |
Class name for two columns layout with right sidebar |
| @layout-class-3columns | page-layout-3columns | '' | false | |
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 |
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()
.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();
}
} 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%);
}
}