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 or to create quick prototypes that don't require customization.

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:

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-14">
            <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:

Or download directly as zip-archive:

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
        vars/
            basis.scss
            scales.scss
            type.scss
            colors.scss
            palette.scss
        modules.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.
  • vars/ — your custom variables.
  • modules.scss — custom modules import file.
  • vars.scss — custom basis, colors, palette 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 components. See also How to create a module.


// 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, colors, palette that you want to extend or change.


// vars.scss
@import "vars/basis";
@import "vars/scales";
@import "vars/type";
@import "vars/colors";
@import "vars/palette";

Each of the settings files is optional and depends on your project. For example, 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:

main.scss

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


// =main.scss

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

// =core & modules
@import "superkube/core";
@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.

Addons #

Superkube comes with addons that are not included by default in the build, so if you need to use them import them in.


// =main.scss

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

// =core & modules & addons
@import "superkube/core";
@import "superkube/modules";
@import "superkube/addons";
@import "modules";