← Superkube / Documentation 2.1.1
Getting Started

How to use

This section is about how to install and use Superkube.

CSS library #

Superkube is a hybrid framework. So it can work as a CSS library without customization and build. This may be good for small projects where you do not need something complicated.

You can use the CSS file directly from jsDelivr: 


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/superkube@latest/dist/superkube.min.css">

Or you can download the latest Superkube from Github:

Download from Github

After that, connect Superkube CSS file to your HTML and use any ready-made modules to build your website or application. 


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Superkube</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/superkube@latest/dist/superkube.min.css">
    </head>
    <body>
        <div class="hero container edges centered py-15">
            <div class="hero-head">
                <h1 class="heading-mega">Hello World!</h1>
            </div>
            <div class="hero-body">
                <p class="text-large">This is my website with Superkube.</p>
            </div>
        </div>
    </body>
</html>

SCSS framework #

The maximum power of Superkube is unlocked if you use it as a SCSS framework, customize, extend and build your own version to fit your project.

You can install Superkube via npm: 


npm install superkube

Or download/clone from Github:

View Superkube on Github

Create your project

This is what your project structure might look like: 


// your project
assets/
    scss/
        superkube/
        modules/
            my-module-1.scss
            my-module-2.scss
        colors/
            my-module-1.scss
            my-module-2.scss
        variants/
            my-module-1.scss
            my-module-2.scss
        vars/
            basis.scss
            scales.scss
        modules.scss
        colors.scss
        variants.scss
        vars.scss
        main.scss
    css/
        main.min.css
index.html

Look at what each folder and file in this structure means:

  • superkube/ — SCSS framework files that you downloaded from Github or npm.
  • modules/ — your custom modules.
  • colors/ — your custom module colors.
  • variants/ — your custom module variants.
  • vars/ — your custom basis and scales.
  • modules.scss — custom modules import file.
  • colors.scss — custom colors import file.
  • variants.scss — custom variants import file.
  • vars.scss — custom basis and scales import file.
  • main.scss — the main file of your project, where Superkube, all your modules and vars are imported.

modules.scss

In this file you import your custom modules or extend existing Superkube modules. See also How to create a module and How to extend modules. 


// modules.scss
@import "modules/my-module-1";
@import "modules/my-module-2";

In each module file you write the SCSS code of the module itself. 


// my-module-1.scss
.my-module-1 {
    ...
}

vars.scss

In this file you import those framework scales that you want to extend or change. 


// scales.scss
@import "vars/basis";
@import "vars/scales";

Each of the settings files is optional and depends on your project. If you don't extend or change $scales map in scales.scss, then you don't need to create and import it.

See more about how to work with vars and how to change and extend them:

colors.scss

In this file you import those framework colors that you want to extend or change. 


// colors.scss
@import "colors/my-module";

This file is optional and depends on your project. If you don't extend or change $colors map, then you don't need to create and import it.

See more about how to work with colors and how to change and extend them:

variants.scss

In this file you import those framework variants that you want to extend or change. 


// variants.scss
@import "variants/my-module";

This file is optional and depends on your project. If you don't extend or change $variants map, then you don't need to create and import it.

See more about how to work with variants and how to change and extend them:

main.scss

This is the main project file that will import Superkube, your custom variables and modules. 


// =main.scss

// =vars
@import "superkube/vars";
@import "vars";

// =colors
@import "superkube/colors";
@import "colors";

// =variants
@import "superkube/variants";
@import "variants";

// =modules
@import "superkube/modules";
@import "modules";

So, main.scss will be the project file and it can be built into CSS to be used on the site. Of course, the name main.scss is a common name, so you can name it whatever you like. We usually call it by the name of the project.

Build

Now you can build main.scss into CSS, which can be used on the site to display the styles.

We use Gulp for that.