Quick Start

As a complete and self-sufficient web framework, Kube is here to help you get the most out of your daily work. Kube takes care of routine stuff, saving you precious time for things that you love. Starting up with Kube is ridiculously fast — you can start in under a minute.

Supported Browsers #

Kube supports the latest, stable releases of all major browsers:

  • Latest Chrome
  • Latest Firefox
  • Latest Safari
  • Microsoft Edge

Basic Template #

You can set up the Kube web framework and be on your way in under a minute. Just add this code to your web page for the basic template to take effect immediately.

<!doctype html>
<html>
<head>
    <title>Basic Template</title>

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

    <!-- Kube CSS -->
    <link rel="stylesheet" href="your-folder/css/kube.min.css">

</head>
<body>
    <h1>Hello, world!</h1>

    <!-- Kube JS (optional if you are using Kube CSS only) -->
    <script src="your-folder/js/kube.min.js"></script>
    <script>
        $K.init();
    </script>
</body>
</html>

As you can see, you need to call $K.init to initialize Kube JS. Some of the places where it’s appropriate to call the init method include:

  • at the bottom of the page
  • in a window.onload event handler
  • in a DOMContentLoaded event handler

Dynamic loading of modules #

You can dynamically load new modules at runtime with Kube. Just initialize Kube with observer: true option.

<script>
$K.init({
    observer: true
});
</script>

Now, if you dynamically add modules to the page (for example, by loading HTML with AJAX or inject HTML), the Kube Observer finds the data-kube attribute and automatically launches injected modules.

SASS development with Kube #

Kube has been designed to help you with web development, that's why it's so easy to use Kube when building websites. To move forward quickly and efficiently, just link vars.scss and mixins.scss from Kube package: these files contain variables and mixins and everything you need to simplify daily routine tasks.

For example, import vars.scss and mixins.scss into your master.scss styles file, which you will later compile into master.css

// master.scss
@import "dist/scss/vars.scss";
@import "dist/scss/mixins.scss";

Now all Kube's variables and mixins are readily available in master.scss, and you can use them whenever needed.

// master.scss
@import "dist/scss/vars.scss";
@import "dist/scss/mixins.scss";

// use mixins
#my-layout {
    @include flex;
}

// use variables
#my-layout {
    padding: $base-line-ems;
}

If you need to change some framework styles just add your custom variables file:

// master.scss
@import "dist/scss/vars.scss";
@import "mytheme/scss/my-custom-vars.scss";
@import "dist/scss/mixins.scss";