Skip to Main Content

How To Create A Theme

Customizing Clone

Not a fan of Clone's default theme? No problem!

Clone has a set of built-in variables that you can customize through Sass that will allow you to control a variety of fonts, colours, whitespace, etc. Simply pick and choose the variables you want to customize from the list below and add them to your Sass file, directly above Clone's import function:

// My Custom Clone Theme
// Please note that Clone must be included last, after all of your custom variables.

// Clone Theme Variables
// All available theme variables can be found at https://github.com/joshdrink/clone-framework/blob/master/app/scss/core/_defaults.scss
$clone-grid-columns: 8;
$clone-c1: #5B1647;

// Include Clone
@import "../node_modules/clone-framework/app/scss/clone";

[data-clone] {
    // Your custom CSS goes here.
}

Theme Variables