Layout

Here are some basic examples of layout's markup that you can easily do using Kube's mixins and helpers.

Base

div.page

main.main

<body>
    <div class="page">
        <header class="header">...</header>
        <main class="main">...</main>
        <footer class="footer">...</footer>
    </div>
</body>

Sidebar Left

Set the .is-container modifier to the container element to make it flex and use mixins make-sidebar and make-content to build the layout.

<body>
    <div class="page">
        <header class="header">...</header>
        <main class="main is-container">
            <div class="main-sidebar">...</div>
            <div class="main-content">...</div>
        </main>
        <footer class="footer">...</footer>
    </div>
</body>

// SASS
.main-sidebar {
    @include make-sidebar(240px);
    margin-right: 16px;

    @include for-mobile {
        margin-right: 0;
    }
}
.main-content {
    @include make-content;
}

Sidebar Right

Simply reverse the order of sidebar and content element to get the right side sidebar.

<body>
    <div class="page">
        <header class="header">...</header>
        <main class="main is-container">
            <div class="main-sidebar">...</div>
            <div class="main-content">...</div>
        </main>
        <footer class="footer">...</footer>
    </div>
</body>

// SASS
.main-sidebar {
    @include make-sidebar(240px);
    order: 2;
    margin-left: 16px;

    @include for-mobile {
        order: 1;
        margin-left: 0;
    }
}
.main-content {
    @include make-content;
    order: 1;
}

Sidebar Double

<body>
    <div class="page">
        <header class="header">...</header>
        <main class="main is-container">
            <div class="main-sidebar">...</div>
            <div class="main-content">...</div>
            <div class="main-sidebar-secondary">...</div>
        </main>
        <footer class="footer">...</footer>
    </div>
</body>

// SASS
.main-sidebar {
    @include make-sidebar(240px);
    margin-right: 16px;

    @include for-mobile {
        margin-right: 0;
    }
}
.main-sidebar-secondary {
    @include make-sidebar(240px);
    margin-left: 16px;

    @include for-mobile {
        margin-left: 0;
    }
}
.main-content {
    @include make-content;
}

Sidebar Page

<body>
    <div class="page is-container">
        <div class="page-sidebar">...</div>
        <div class="page-content">
            <header class="header">...</header>
            <main class="main">...</main>
            <footer class="footer">...</footer>
        </div>
    </div>
</body>

// SASS
.page-sidebar {
    @include make-sidebar(240px);
    margin-right: 16px;

    @include for-mobile {
        margin-right: 0;
    }
}
.page-content {
    @include make-content;
}