Create a module

Overview #

You can create your own modules for Superkube in two ways:

• Normal way — this is a way to create modules mostly by writing SCSS code manually.
• Ninja way — this is an advanced module creating technique where SCSS code is mostly automatically generated.

Let's look at both of these ways by creating a Segment module that switches the content view options.

Normal way #

First you need to create a modules/segment.scss file, this will be the module file. We also need colors/segment.scss, where we specify the module's colors. See also How to use to learn more about how to create your project and extend Superkube.

// your project
superkube/
modules/
    segment.scss
colors/
    segment.scss
modules.scss
colors.scss
main.scss

Next, import segment.scss in your custom framework modules in the modules.scss and colors.scss.

// modules.scss
@import "modules/segment";

// colors.scss
@import "colors/segment";

We will specify the colors of our module in colors.scss.

// =Colors
$colors: map-extend($colors, (
    segment: (
        default: (
            list: (
                background-color: palette(neutral, lighter)
            ),
            link: (
                base: (
                    color: palette(black-o, 50),
                    background-color: transparent
                ),
                hover: (
                    color: palette(black),
                    background-color: palette(white)
                ),
                active: (
                    color: palette(black),
                    background-color: palette(white)
                )
            )
        )
    )
));

And in the module's segment.scss file we will write SCSS, where we will use the above colors using the color function.

.segment {
    .segment-list {
        display: inline-flex;
        padding: 1rem;
        border-radius: radius(base);
        background-color: color(segment, default, list, background-color);
    }
    .segment-item + .segment-item {
        margin-left: 2px;
    }
    .segment-link {
        display: block;
        text-decoration: none;
        border-radius: radius(base);
        color: color(segment, default, link, base, color);
        background-color: color(segment, default, link, base, background-color);
    }
    .segment-link:hover {
        color: color(segment, default, link, hover, color);
        background-color: color(segment, default, link, hover, background-color);
    }
    .segment-link.active {
        box-shadow: shadow(default, 200);
        color: color(segment, default, link, active, color);
        background-color: color(segment, default, link, active, background-color);
    }
}

Build Superkube and we get a Segment module like this:

<nav class="segment">
    <ul class="segment-list">
        <li class="segment-item">
            <a href="#" class="segment-link active">...</a>
        </li>
        <li class="segment-item">
            <a href="#" class="segment-link">...</a>
        </li>
    </ul>
</nav>

In Superkube it is easy to create your own modules and you can do with a minimum of tools. In cases where a module does not use color properties, you just have to create a module file and that's it.

Ninja way #

As you can see, the normal way involves writing SCSS code manually. In cases where your module has many variants, modifiers and other settings, this may not be as effective. That' s why Superkube has the ability to automatically generate modifications and variants of the module.

Let's take a look at the Segment module, but with modifications and variants. You will need to extend $scales, $colors, and $variants. And on this generate the module itself and its modifications.

So, let's create the module file and its settings files. See also How to use to learn more about how to create your project and extend Superkube.

// your project
superkube/
modules/
    segment.scss
colors/
    segment.scss
variants/
    segment.scss
vars/
    scales.scss
modules.scss
colors.scss
variants.scss
vars.scss
main.scss

Now import them into modules.scss, colors.scss, variants.scss and vars.scss.

// modules.scss
@import "modules/segment";

// colors.scss
@import "colors/segment";

// variants.scss
@import "variants/segment";

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

First, let's make scales of different module font sizes. To do this, extend $scales and specify these sizes.

// =Scales in vars/scales.scss
$scales: map-extend($scales, (
    type: (
        segment: (
            small: 13px,
            default: 14px,
            large: 18px
        )
    )
));

Now let's create the module's colors, including the primary modifier, which will create an alternative color version of the module.

// =Colors in colors/segment.scss
$colors: map-extend($colors, (
    segment: (
        default: (
            list: (
                background-color: palette(neutral, lighter)
            ),
            link: (
                base: (
                    color: palette(black-o, 50),
                    background-color: transparent
                ),
                hover: (
                    color: palette(black),
                    background-color: palette(white)
                ),
                active: (
                    color: palette(black),
                    background-color: palette(white)
                )
            )
        ),
        primary: (
            list: (
                background-color: palette(primary, base)
            ),
            link: (
                base: (
                    color: palette(white-o, 70),
                    background-color: palette(primary, base)
                ),
                hover: (
                    color: palette(primary, dark),
                    background-color: palette(white)
                ),
                active: (
                    color: palette(primary, dark),
                    background-color: palette(white)
                )
            )
        )
    )
));

Finally, let's extend $variants by making differences in the module in different sizes. In the case of our module, different size modifiers will change the padding of links within the module.

// =Variants in variants/segment.scss
$variants: map-extend($variants, (
    segment: (
        default: (
            link: (
                padding: 6px 16px
            )
        ),
        small: (
            link: (
                padding: 5px 12px
            )
        ),
        large: (
            link: (
                padding: 8px 20px
            )
        )
    )
));

Now it's time for the SCSS code of the module, which we will specify in the modules/segment.scss file.

.segment {
    .segment-list {
        display: inline-flex;
        padding: 1rem;
        border-radius: radius(base);
    }
    .segment-item + .segment-item {
        margin-left: 2px;
    }
    .segment-link {
        display: block;
        text-decoration: none;
        border-radius: radius(base);
    }
    .segment-link.active {
        box-shadow: shadow(default, 200);
    }

    // =Variants
    @include generate-type(segment, '.segment-link');
    @include generate-variants('.segment', segment, true);
}

The generate-type and generate-variants mixins will automatically generate all modifiers and colors based on the specified settings in $scales, $colors, and $variants. See also Mixins to learn more about how mixins work.

<nav class="segment">
    <ul class="segment-list">
        <li class="segment-item">
            <a href="#" class="segment-link active">...</a>
        </li>
        <li class="segment-item">
            <a href="#" class="segment-link">...</a>
        </li>
    </ul>
</nav>

// primary modifier
<nav class="segment segment-primary">...</nav>

// large modifier
<nav class="segment segment-large">...</nav>
<nav class="segment segment-primary segment-large">...</nav>

// small modifier
<nav class="segment segment-small">...</nav>
<nav class="segment segment-primary segment-small">...</nav>

So, by writing a bit of SCSS code, we can get several modifiers and variants of the module. Naturally, settings and modifications can be added endlessly. That way, without changing the SCSS at all, you can get even more variants.