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>