Create a module

Module #

Let's say we create a segment module that switches content between different states.

First, create a module file in our project. See also more details on how to use the framework and what its structure is.

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

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

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

Now create variables and module properties.

.segment {
    // colors
    --segment-list-background-color: var(--palette-neutral-lighter);
    --segment-link-color: var(--palette-black-50);
    --segment-link-background-color: var(--palette-transparent);
    --segment-link-hover-color: var(--palette-black);
    --segment-link-hover-background-color: var(--palette-white);
    --segment-link-active-color: var(--palette-black);
    --segment-link-active-background-color: var(--palette-white);

    // vars
    --segment-font-size: var(--type-scale-15);
    --segment-link-padding: 6px 16px;
    --segment-item-space: 2px;

    .segment-list {
        display: inline-flex;
        padding: 1rem;
        border-radius: var(--radius-base);
        background-color: var(--segment-list-background-color);
    }
    .segment-item + .segment-item {
        margin-left: var(--segment-item-space);
    }
    .segment-link {
        display: block;
        text-decoration: none;
        border-radius: var(--radius-base);
        padding: var(--segment-link-padding);
        color: var(--segment-link-color);
        background-color: var(--segment-link-background-color);
    }
    .segment-link:hover {
        color: var(--segment-link-hover-color);
        background-color: var(--segment-link-hover-background-color);
    }
    .segment-item.active .segment-link {
        box-shadow: var(--shadow-200);
        color: var(--segment-link-active-color);
        background-color: var(--segment-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>

Variants #

The power of Superkube is how easy it is to create module variants, such as different size or color modifiers. It's all thanks to CSS variables. So let's add a couple of size variants and a color modifier to our module.

// Scales
.segment-small {
    --segment-link-padding: 5px 12px;
    --segment-font-size: var(--type-scale-13);
}
.segment-large {
    --segment-link-padding: 8px 20px;
    --segment-font-size: var(--type-scale-18);
}


// Colors
.segment-primary {
    --segment-list-background-color: var(--palette-primary-base);
    --segment-link-color: var(--palette-white-70);
    --segment-link-background-color: var(--palette-primary-base);
    --segment-link-hover-color: var(--palette-primary-dark);
    --segment-link-hover-background-color: var(--palette-white);
    --segment-link-active-color: var(--palette-primary-dark);
    --segment-link-active-background-color: var(--palette-white);
}

As a result, the fully completed module with all the variants looks like this:

// default
<nav class="segment">
    <ul class="segment-list">
        <li class="segment-item active">
            <a href="#" class="segment-link">...</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>