MB

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. Here's how to set up Kube, and what basic customization are available out-of-the-box..

Basic Template

With Kube, you can set up your 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="assets/css/kube.css">

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

    <!-- Kube JS + jQuery are used for some functionality, but are not required for the basic setup -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="assets/js/kube.js"></script>
</body>
</html>

Supported Browsers

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

  • Latest Chrome
  • Latest Firefox
  • Latest Safari
  • Latest Opera
  • Microsoft Edge
  • Internet Explorer 11

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 kube.scss from Kube package: this file contains variables, mixins and everything you need to simplify daily routine tasks.

For example, import kube.scss into your master.scss styles file, which you will later compile into master.css: 

// master.scss
@import "dist/scss/kube.scss";

Now all Kube's variables and mixins are readily available in master.scss, and you can use them whenever needed. For instance, here's how one of examples: 

// master.scss
@import "dist/scss/kube.scss";

#sidebar {
    @include flex-item-width(200px);
}

Also, you could use settings from variables.scss:

// master.scss
@import "dist/scss/kube.scss";

#my-layout {
    padding: $base-line;
}