Nucleus Demo::Nuclides

Nuclides

Table of content

What are Nuclides?

Colors
- Grayscale
Mixins
Config

Nuclides are parts of the stylesheet source that are not directly useable on their own. This could be mixins, variables like colors and sizes, or settings.

To mark a variable or mixin as a nuclide, annotate it with the @nuclide tag, followed by the name of the nuclide.

Special forms are @color and @mixin.

Hint:
This is the generated style guide for Nucleus and it's documentation pages. These are the actual components used, and the pages are generated with Nucleus itself. Feel free to browse a bit and try things out.

Colors

Color

Variable

Hex

RGBA

Accent Purple

$color--accent

#A0518E

rgba(160, 81, 142, 1)

Accent Pink

$color--pink

#F15F79

rgba(241, 95, 121, 1)

Hint accent color

$color--hint

#FFEB8D

rgba(255, 235, 141, 1)

deprecated

$color--hint-old

#F9BF3B

rgba(249, 191, 59, 1)

Grayscale

Color

Variable

Hex

RGBA

Whitesmoke

$color--whitesmoke

#EFEFEF

rgba(239, 239, 239, 1)

Light gray

$color--light-gray

#D8D8D8

rgba(216, 216, 216, 1)

Gray

$color--gray

#9B9B9B

rgba(155, 155, 155, 1)

Dark gray

$color--dark-gray

#4A4A4A

rgba(74, 74, 74, 1)

Black-ish gray

$color--blackish

#333333

rgba(51, 51, 51, 1)

Mixins

Fonts

lato ( $weight : 400)assets/styles/nuclides/fonts.scss

Show example

Set the Lato font face with an optional font weight.

Parameter

Optional

Description

$weight

✔

The font weight to be used.

@include lato();
@include lato(300);

monospace ($weight : 400)assets/styles/nuclides/fonts.scss

Show example

Set a monospaced font face with an optional font weight.

Parameter

Optional

Description

$weight

✔

The font weight to be used.

@include monospace();
@include monospace(300);

Display

reset()assets/styles/nuclides/reset.scss

Show example

Resets all properties to default to reduce interferences with foreign styles.

@include reset();

Clearing

clearAfter()assets/styles/nuclides/tools.scss

Show example

Append a clearing pseudo element to avoid overflow of floating children.

@include clearAfter();

clearBefore()assets/styles/nuclides/tools.scss

Show example

Prepend a clearing pseudo element to avoid overflow of floating children.

@include clearBefore();

clearHard()assets/styles/nuclides/tools.scss

Show example

A bit more agressive than clearAfter. Appends and prepends a 1px height clearing element. Could be used to prevent margin overflow from relative positioned elements in a floating environment.

@include clearHard();

Tools

z($name, $type: default, $z: $z-map)assets/styles/nuclides/z-index.scss

Show example

Mixin to handle z-index positions amongst components as well as globally.

Parameter

Optional

Description

$name

Name of the z-index definition.

$type

✔

Scope of the $name element

✔

Map of configured z-indecies

@include z(...)

mq($from: '{Breakpoint}', $until: '{Breakpoint}', $and: '{Custom}')docs/src/styles/nuclides/breakpoints.scss

Show example

Include a media query that applies properties to the selector only on certain screen widths. Breakpoints and Tweakpoints are defined in a central configuration. Available breakpoints are: mobile, tabletPortrait, tablet, desktop and wide

Parameter

Optional

Description

$from

✔

Inclusive starting breakpoint

$until

✔

Inclusive ending breakpoint

$and

✔

Optional custom media query

@include mq($from: tablet);
@include mq($until: desktop);
@include mq($from: mobile, $until: desktop);

Config

$z-map

Copy variable

Z-map for use with the @z mixin.

Value

( default: ( search: 1 ), search: ( input: 1 ) )

$mq-breakpoints

Copy variable

List of available breakpoints for the use with the mq-mixin.

Value

( tiny: 350px, mobile: 425px, tabletPortrait: 597px, tablet: 768px, desktop: 980px, wide: 1300px, )