Substitutions & Flags

For special features of the styleguide, a set of @flags and @{substitutions} is available to use on certain elements.

Substitutions

Substitutions help you to compose and fill your markup blueprints. Therefore, Nucleus offers placeholder functions for texts and images to be used inside the markup of elements.

Furthermore, to avoid repeating markup all over the annotations again, you may include the markup of another element with @{include:.selector}.

Substitution

@{include:selector}

Description

Include the markup from another element

Example

@{include:.header}

Substitution

@{lipsum:quantity:type}

Description

Include a placeholder text. Type could be paragraphs, sentence or words.

Example

@{lipsum:3:paragraphs}

Substitution

@{image:width:height}

Description

Include a placeholder image from Unsplash

Example

@{image:400:300}

/**
 * A navigation element for the menu bar.
 *
 * @atom Menu Item
 * @markup
 *  <a class="menu-item">@{lipsum:2:words}</a>
 */
.menu-item { /* ... */ }

/**
 * A menu bar which spans across full page width.
 *
 * @molecule Menu Bar
 * @flag full-width
 * @markup
 *   <nav class="menu">
 *     @{include:.menu-item}
 *     @{include:.menu-item}
 *     @{include:.menu-item}
 *   </nav>
 */
.menu { /* ... */ }

Flags

Flags are used to enable certain features related to Nucleus - mostly related to the visual output or processing.

For example, if you like an element to spread over the full width of a page instead of being bound inside the main content container, annotate it with @flag full-width.

Flag

@flag full-width

Description

Extends the element preview to full body width

/**
 * Header bar with logo, navigation, and tool icons at the top of the page.
 * Note: This is just a minified example.
 *
 * @structure Header
 * @flag full-width
 * @markup
 *  ...
 */
.SG-header { /* ... */ }

Flag

@deprecated

Description

Marks the element as deprecated

/**
 * Previous button color
 *
 * @color
 * @deprecated
 */
$color--button: #FFCC66;