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 - .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>