Skip to Main Content

Install Clone

Try It Out

If you want to try Clone out before installing it on your project, we've provided a ready-to-go boilerplate:

Content Delivery Network (CDN)

This option forces the use of the Brave default theme.

If you want to get Clone up and running and have no interest in creating your own theme, you can include Clone's CSS and JavaScript files as linked resources. This allows for a quick and easy way to generate prototypes using Clone's native theme (See Themeing for more information on Brave, Clone's default theme).

Without Flexbox Grid

GitHub file size in bytes GitHub file size in bytes
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/clone-framework@2.4.18/dist/css/clone-gridless.min.css">
<script src="https://cdn.jsdelivr.net/npm/clone-framework@2.4.18/dist/js/clone.min.js"></script>

With Flexbox Grid

GitHub file size in bytes GitHub file size in bytes
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/clone-framework@2.4.18/dist/css/clone.min.css">
<script src="https://cdn.jsdelivr.net/npm/clone-framework@2.4.18/dist/js/clone.min.js"></script>

Node Package Manager (NPM)

This option allows you to fully customize Clone's theme.

Clone is built in a way that allows you to theme the aesthetic of the system without the need to alter Clone's source files. This means that you'll be able to update Clone without any worry of losing or modifying your changes. All theming will occur in your project's root Sass directory and pull Clone's primary .scss file from node_modules.

While it doesn't matter how your project compiles Sass, theming Clone requires that your project be running Sass and Autoprefixer. Cash is built right into Clone, so no need to include it again.

  1. From inside your project, run npm install clone-framework --save-dev
  2. At the top of your main project .scss file, include the following:
// My Custom Clone Theme
// Please note that the order of the instructions/includes below is important to maintain.

// Include Clone's Variables
// Doing this gives you access to the default variables in the event you'd like to use one of them as a value in your custom theme variables.
@import "node_modules/clone-framework/app/scss/core/_defaults";

// Your Clone Theme Variables
// Put any of the variables you'd like to customize here. A list of all the available variables can be found at: https://designwithclone.ca/themes/how/

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

[data-clone] {
    // Custom CSS for your app goes here.
}

For now, it is also required that Clone's JavaScript file be imported using the CDN.

<script src="https://cdn.jsdelivr.net/npm/clone-framework@2.4.18/dist/js/clone.min.js"></script>