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.15/dist/css/clone-gridless.min.css">
<script src="https://cdn.jsdelivr.net/npm/clone-framework@2.4.15/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.15/dist/css/clone.min.css">
<script src="https://cdn.jsdelivr.net/npm/clone-framework@2.4.15/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 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

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

[data-clone] {
    // Your custom CSS 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.15/dist/js/clone.min.js"></script>