Download and use

Download Torus Kit with source files. Use bundle version with included Bootstrap or use a Torus Kit as separate library.

Download

Download Torus Kit library that includes:

  • ready-to-use, compiled and minified .js and .css files
  • source .js and .scss files

Than extract the .zip file to your desired folder.

Download now

Included files

This is how the folder structure looks when you Download the Torus Kit. When uploading to the server, use just compiled files from dist folder. Check the Quick start to see what files to choose.

toruskit-pro
│ license.txt
│
└─dist // distribution folder with ready-to-use .js and .css files
│ └─css // compiled and minified .css files
│ └─js // compiled and minified .js files
│
└─src // folder with all source files
└─bootstrap // source Bootstrap files
└─js // source .js files
└─scss // source .scss files

Quick start

Check what files are included and which one suits you better.

CSS

Torus Kit comes with included Bootstrap css files, but you can use it as stand-alone library, too. Here is the list of available ready-to-use .css files in dist/css folder:

  • toruskit.bunde.css - includes both Torus Kit and Bootstrap features with whole Bootstrap library.
  • toruskit.css - includes Effects and Loops only. Great when you don’t need Bootstrap and you want to use different or your own framework

All .css files has their minified version with .min.css suffix.

JS

Unlike the CSS, Torus Kit doesn’t include any Bootstrap JavaScript files. If you are planning to use Bootstrap JavaScript, you need to include it first, then Torus Kit. Content of dist/js folder:

* toruskit.js - all required Torus Kit JS functions * toruskit.min.js - same as above, but minified

  • toruskit.js - all required Torus Kit JS functions
  • toruskit.min.js - same as above, but minified

Basic HTML structure

Here is the basic structure for the quick start your project.

Changes to .js file placement

Because v2 is based on different engine, that uses MutationObserver it is necessary to put the toruskit.js or toruskit.min.js file into <head> under the all CSS stylesheets.

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Torus Kit `.css` file -->
    <link rel="stylesheet" href="toruskit.bundle.css">

    <!-- Torus Kit `.js` file -->
    <script src="toruskit.js"></script>

    <title>Title</title>
  </head>

  <body>
    <!-- Bootstrap `.js` file -->
    <script src="bootstrap.bundle.min.js"></script>
  </body>
</html>