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);
}
Page layouts
Default properties for page columns are generated using alias mixins:
#layout-columns
- sets columns container
#layout-columns > .main()
- alias for main column
#layout-columns > .left()
- alias for left column
#layout-columns > .right()
- alias for right column
#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 .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 {
#layout-columns();
> .column {
&:extend(.add-box-sizing all);
.css(padding-bottom, @indent__xl);
}
}
@media (min-width: 600px) {
.column.main {
#layout-columns > .main();
}
.column.left {
#layout-columns > .left();
}
.column.right {
#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:
.column.main {
.layout-column(3, 1, 60%);
}
.column.left {
.layout-column(3, 2, 20%);
}
.layout-example-3 {
.column.main {
.layout-column(3, 2, 60%);
}
.column.left {
.layout-column(3, 1, 20%);
}
.column.right {
.layout-column(3, 3, 20%);
}
}
.layout-example-3-1 {
.column.main {
.layout-column(3, 1, 60%);
}
.column.left {
.layout-column(3, 2, 20%);
}
.column.right {
.layout-column(3, 3, 20%);
}
}