Grid system

All general classes for use in the grid can be found in one file.

The --content class serves as a container for content. It centers the content and limits the width.

Using the --content class

{* Header *}

<header class="header js--header">

    <div class="header__content --content --flex">

    </div>

</header>

Columns work similarly to Bootstrap or other grid systems.

Column writing style: --w-12, --w-{size}-3

Example of using columns

        <div class="footer__content --content --flex">
            
            <div class="footer__section --w-12 --w-s-6 --w-l-3">

            </div>

        </div>

If we need to make a space between columns by design, we wrap it in a div called e.g. section__list and set the CSS with this style.

We can also use the generic --row class for a list and --column for a column (a better way if we don't set other paddings). The setup of these generic classes is practically the same.

.--row{
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	width: calc(100% + 16px); /* 8px column offset */
	margin: 0 -8px; /* 8px column offset */
}

.--column{
	display: flex;
	flex-direction: column;
	padding: 0 8px; /* 8px column offset */
}

.section__list {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	width: calc(100% + 16px);
	margin: 0 -8px 0 -8px; /* 16px negative offset */
}

.section__item {
	padding: 0 8px; /* 16px space between items */
	display:flex;
	align-items: stretch;
}