div.page-content
header.header
main.main
Here are some basic examples of layout's markup that you can easily do using Kube's mixins and helpers.
<body> <div class="page"> <header class="header">...</header> <main class="main">...</main> <footer class="footer">...</footer> </div> </body>
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; }
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; }
<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; }
<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; }