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 Grid

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>

Alignment

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>

Container

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>

Section

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>

Button

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>

Form

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.

Media

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.

Breakpoints

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) {

}