Columns

Grid is built with flexbox and is fully responsive. Columns are centered in the page with the parent .container .

.container
{
    @include page-container;
}

Since columns use padding to create gutters, content stylings should not be applied directly to columns, but to elements inside of columns.
Columns are only activated from tablet onwards. This means columns are stacked on top of each other on mobile.

Full

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

.content
{
    @include content-padding;
}

<div class="content"> ... </div>

Equal width (no matter the number of columns)

.contents
{
    @include column-container;
}

<div class="contents">
    <div class="content"> ... </div>
    <div class="content"> ... </div>
</div>

Extended halves

.contents.extended
{
    @include column-container;
    @include extended;
}

<div class="contents extended">
    <div class="content"> ... </div>
    <div class="content"> ... </div>
</div>

Thirds

.contents.thirds
{
    @include column-container;

    > .content.two-thirds
    {
        @include two-thirds-column;
    }
}

<div class="contents thirds">
    <div class="content two-thirds"> ... </div>
    <div class="content"> ... </div>
</div>

.contents.thirds
{
    @include column-container;

    > .column.one-third
    {
        @include one-third-column;
    }
}

<div class="contents thirds">
    <div class="content one-third"> ... </div>
    <div class="content"> ... </div>
</div>

Quarters

.contents.quarters
{
    @include column-container;

    > .content.one-quarter
    {
        @include one-quarter-column;
    }
}

<div class="contents">
    <div class="content one-quarter"> ... </div>
    <div class="content one-quarter"> ... </div>
    <div class="content one-quarter"> ... </div>
    <div class="content one-quarter"> ... </div>
</div>