Introduction

How it works

The UI of the Kajabi Core application is a combination of Rails Components, React Components and a custom CSS Framework called Sage that applies a uniform style to both.

We think of our approach to UI at Kajabi in this way: We default to using Rails Components and a classic Rails approach to most problems and move to React where it counts.

Rails does many things very well and gives us the ability to move quickly and solve complex problems with very simple, tried and true, code solutions. With that said, sometimes we come across a problem that we want to solve that the standard rails approach will just not be enough ( Think complex interactions with many versions of state ). In this case we move to React as our default approach to solving complex, Javascript heavy problems.

Because our system contains two different approaches to UI creation, we utilize a SCSS Design System to provide the styles to both types of components (Think Bootstrap, but customized for our products). Our Design System provides the styles for the core components that make up the UI of our product.

How it is used

The Sage Design System is kept in a separate repo and served to the main Kajabi app as a version controlled gem that the different component libraries can consume.

This provides a healthy amount of friction between the system and the components that are consuming it. With that friction we are able to better maintain consistency and limit code and component duplication.

All System components are prefixed with the sage- prefix. For example a card component in sage looks something like this:

.sage-card {
  &__img { }
  &__title { }
  &__subtitle { }
}

How it is changed

All UX Developers are encouraged to contribute to Sage but to do so with care and with the collaboration of both other UX Developers and The Product Designers.

The number one question that should be asked before adding a new component to the system is if there is an existing component that could be utilized to achieve the desired outcome. No components should be added without the explicit request and or buy in of the Product Design team.

The code review process to contribute to Sage is as thorough if not more thorough as it is to get code into Kajabi-products main repo. This is because components must fight to be included. By design the system should be streamlined to make the overall feel of the application consistent and easy to use.

How it is documented

Should a change be required it is essential that not just the code of the system be changed but the related documentation that explains how a component can be consumed is also updated to reflect this change.

The power of the system is only as strong as our teams ability to consume it, so in depth documentation is essential.