You are browsing the latest version of the documentation which is not released yet. See the current stable version instead.
Page layout design¶
Page layout is divided to three main parts
Weblines and containers¶
Each part described above should contain
.web__line - this is full width div which wraps every part.
.web__line there should be
.web__container - it has set
web-width and makes web content centered in div with
.web__main is divided to rows. We call this row as
.web__line. If you use design without left panel you can see on homepage these weblines:
- popular categories
- special offers
.web__line to change background with class modifications. E.g
.web__container is centered div straight in
.web__line with width set by variable
web-width and it usually has small padding. This layout setting allows you comfortably change order of these lines, switch on/off lines when you need it.
You can set
web-width in variables.less file.
<div class="web__line"> <div class="web__container"> <h2>Title</h2> ... content ... </div> </div>
Webline with grey background.
<div class="web__line web__line--grey"> <div class="web__container"> <h2>Title</h2> ... content ... </div> </div>
Container without side gabs.
<div class="web__line"> <div class="web__container web__container--no-padding"> <h2>Title</h2> ... content ... </div> </div>