Getting Started

How to create a module

Here is an example of how to create your modules in Superkube. This example shows how to create an alert module with different state styles.

Step 1. Create colors #

First you need to add colors to the $colors map, which is in your vars.scss.

$colors: (
    ...
    alert: (
        default: (
            background: palette(neutral, lighter),
            border: rgba(palette(neutral, dark), .4),
            text: palette(neutral, darker)
        ),
        success: (
            background: palette(positive, lighter),
            border: rgba(palette(positive, dark), .7),
            text: palette(positive, darker)
        ),
        error: (
            background: palette(negative, lighter),
            border: rgba(palette(negative, dark), .7),
            text: palette(negative, darker)
        )
    )
    ...
);

In this example, colors are added from the general color palette. Of course, you can add your specific colors for the module to the palette and use them.

Step 2. Create module scss #

Now we create a module file, where we apply the added colors and add the module properties.

// alert.scss
.alert {
    background-color: color(alert, default, background);
    border: 1px solid color(alert, default, border);
    color: color(alert, default, text);
    font-size: type-size(text, medium);
    border-radius: radius(small);
    padding: 3rem 4rem;
    margin-bottom: 6rem;
}
.alert-success {
    background-color: color(alert, success, background);
    border-color: color(alert, success, border);
    color: color(alert, success, text);
}
.alert-error {
    background-color: color(alert, error, background);
    border-color: color(alert, error, border);
    color: color(alert, error, text);
}

The alert module will be like this in HTML:

<div class="alert">...</div>
<div class="alert alert-success">...</div>
<div class="alert alert-error">...</div> 

Step 3. Add to structure #

Add a module file to your project SCSS structure.

superkube/
modules/
    alert.scss
_modules.scss
_vars.scss
main.scss

Step 4. Add to modules #

Add to the file modules.scss, which imports all modules of the project.

// your modules.scss
@import "modules/alert";
@import "modules/anothermodule";
@import "modules/anothermodule2";

Step 5. Final #

Finally here is what your main.scss can look like with Superkube and custom modules imported.

// your 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 modules
@import "superkube/modules";