How to use

Superkube is a SCSS framework. It does not have a compiled CSS file because it is customizable for your project. And only then the final CSS is built on the basis of it.

Each project is unique and the framework must meet the needs of the project. This is the main strength of Superkube.

Create your project #

Put Superkube and all its scss files into your project folder.

your-scss/
├── superkube/

Create variables #

Take an example of the variables in the vars folder from Superkube. Create your vars based on them.

your-scss/
├── superkube/
├── vars/
├── _vars.scss

You can change variables, add your own, all based on the needs of your project.

The vars in Superkube is just an example and a starting point. It shows the minimum necessary variables for a typical project.

Add your modules #

Add your own modules, which will contain styles of different project components.

your-scss/
├── superkube/
├── vars/
├── modules/
│   ├── _navbar.scss
│   ├── _hero.scss
│   ├── _content.scss
├── _modules.scss
├── _vars.scss

Import your modules in modules.scss.

// your modules.scss
// =Modules
@import "modules/navbar";
@import "modules/hero";
@import "modules/content";

Create main.scss #

Create the main project file that will import Superkube, your variables and modules.

your-scss/
├── superkube/
├── vars/
├── modules/
│   ├── _navbar.scss
│   ├── _hero.scss
│   ├── _content.scss
├── _modules.scss
├── _vars.scss
├── main.scss

This is how it can look inside:

// main.scss
// =superkube funcs
@import "superkube/funcs";

// =project vars
@import "vars";

// =superkube mixins & base
@import "superkube/mixins";
@import "superkube/base";

// =project modules
@import "modules";

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

Build CSS #

Now you can configure the SCSS build of the project to the final CSS file, which can be used on the site to display the styles. We use Gulp for that.