Getting Started
Create a module
This section is about how to create your own modules for Superkube.
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>