Text

Size #

Use the $type map to generate classes for text sizes.

$type: (
    ...
    text: (
        small: 12px 1.5,
        medium: 14px 1.5,
        regular: 16px 1.5,
        large: 21px 1.5
    )
    ...
);

Superkube will generate such classes:

• text-small
• text-medium
• text-large
• text-mega

<p class="text-medium">...</p>
<p class="text-large">...</p>

Responsive typography

Use $type-sm, $type-md, $type-lg maps to set the size of the text on different screens.

$type-sm: (
    text: (
        large: 18px 1.5
    )
);

In this example, the text with the class text-large on small screens will automatically be 18px.

Color #

Superkube generates color classes for text that are defined in the $colors map. For example this is specified by default:

$colors: (
    ...
    text: (
        dark: palette(black),
        default: palette(neutral, darker),
        moderated: rgba(palette(neutral, darker), .7),
        muted: rgba(palette(neutral, darker), .5),
        success: palette(positive, dark),
        error: palette(negative, dark),
        light: palette(white),
        light-moderated: rgba(palette(white), .8),
        light-muted: rgba(palette(white), .5)
    )
    ...
);

As a result, such classes will be generated:

• text-dark
• text-moderated
• text-muted
• text-success
• text-error
• text-light
• text-light-moderated
• text-light-muted

<p class="text-muted">...</p>
<p class="text-light">...</p>

Note that no class is created for the default color since this color is used to specify the text color without the class. This variable must be in your $colors map.

Of course, the text size class can be mixed with the color class:

<p class="text-large heading-muted">...</p>

Custom text color

Add a variable to the $colors map to create text with your color:

$colors: (
    ...
    text: (
        ...
        brand: palette(active, base)
        ...
    )
    ...
);

In this case Superkube will generate a class text-brand with the specified color.

<p class="text-brand">...</p>

Gradient #

Add the gradient color to the $colors map.

$colors: (
    ...
    text-gradient: (
        alpha: (
            from: palette(active, base),
            to: palette(active, dark),
            deg: 45deg // optional direction of gradient
        )
    )
    ...
);

Superkube will generate a class with the name of the color gradient, in the case above it will be text-gr-alpha.

<p class="text-gr-alpha">...</p>

Helpers #

Use the text-strong class to make the text bold.

<p class="text-strong">...</p>

Use the text-italic class to make text italic.

<p class="text-italic">...</p>

Use the text-nowrap class to make white-space: nowrap in text.

<table>
    <tr>
        <td class="text-nowrap">...</td>
        <td>...</td>
    </tr>
</table>