Page layout design¶
Page layout is divided to three main parts
.web__header
.web__main
.web__footer
Weblines and containers¶
Each part described above should contain .web__line
- this is full width div which wraps every part.
Inside every .web__line
there should be .web__container
- it has set web-width
and makes web content centered in div with web-width
width.
Weblines¶
.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:
- slider
- popular categories
- special offers
We use .web__line
to change background with class modifications. E.g class="web__line web__line--grey"
.
Containers¶
.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.
Examples¶
Basic webline.
<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>