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 module by expanding the base colors map.

// Module Vars
$colors: map-extend($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 #

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

// Module 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.

// 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";