Cornerstone CSS
A minimal, responsive boilerplate for Kajabi Themes.
Cornerstone is built into all Kajabi Starter themes. Cornerstone was built with you the developer in mind. We find that when building Kajabi Themes there are a number of things that we always do to get our CSS styles up and running. This takes those items and builds them in so you can get directly to creating your theme specific style. We also built this with the idea that if you choose to use Boostrap4, the class names will line up so your markup will not need to be changed. Just swap it out.

The Cornerstone grid is based on the 12 col grid that Bootstrap also uses. The grid cols will fill in any space not taken by the other col elements. If cols are not called out with a number it will divide the space evenly.
<div class="row">
<div class="col">Col</div>
<div class="col">Col</div>
<div class="col">Col</div>
</div>
<div class="row">
<div class="col-1">Col</div>
<div class="col">Col</div>
</div>
<div class="row">
<div class="col-2">Col</div>
<div class="col">Col</div>
</div>

Without saddling the system with too much code we have included two simple helper classes to allow you to align items to either the center or the bottom. By default, all items will align to the top.
<div class="row align-middle">
<div class="col">Col</div>
<div class="col">Col</div>
<div class="col">Col</div>
</div>
<div class="row align-bottom">
<div class="col">Col</div>
<div class="col">Col</div>
<div class="col">Col</div>
</div>

Every website is built with some concept of a container. We have found that the three most common are standard, small and full-width containers that we call fluid.
<div class="container">
1100px
</div>
<div class="container-sm">
900px
</div>
<div class="container-fluid">
100%
</div>

If you look at the design of every website you will notice that they are a combination of sections that when combined together, create the full experience. Cornerstone comes with a baked in section system for fast layout creation.
<div class="section-lg">
160px
</div>
<div class="section">
80px
</div>
<div class="section-sm">
40px
</div>

In marketing websites, buttons are used all over the place to drive customer action. Cornerstone builds in a very simple button that can be added to whoever you see necessary.
<a href="#" class="btn">Default Button</a>

One of the key pieces to any successful Kajabi online business is the use of opt-in forms to generate leads. Cornerstone has basic form styling built in without you needing to add any classes. Out of the box, forms look terrific.

When you want to display content side by side but do not want to use a specific grid width than a media object is a great solution. Cornerstone loads in the most basic media code to make this as simple as possible.
<div class="media align-middle">
<img src="/images/user.svg">
<div class="media-body"><strong>JOHN DOE</strong><br>INSTRUCTOR</div>
</div>
Alignment attributes can be added to media objects just like grids.

Cornerstone has a built-in set of breakpoints in order to style fully responsive websites. If you would like to tie into these breakpoints in your own custom styles include these variables into your SCSS files so that your breakpoints match the ones inside Cornerstone core.
$xs-max: 544px;
$sm-min: $xs-max + 1;
$sm-max: 767px;
$md-min: $sm-max + 1;
$md-max: 991px;
$lg-min: $md-max + 1;
$lg-max: 1199px;
$xl-min: $lg-max + 1;
@media (max-width: $sm-max) {
}
Copy link
On this page
The Grid
Alignment
Container
Section
Button
Form
Media
Breakpoints