Nuclides
Table of content
What are Nuclides?

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, @font and @mixin.

Nuclides can have @table annotation to render them in a table layout.

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
Grayscale
Color
Variable
Hex
RGBA
Aa
Aa
Aa
Black-ish gray
$color--blackish
#333333
rgb(51, 51, 51)
Aa
Aa
Aa
Dark gray
$color--dark-gray
#4A4A4A
rgb(74, 74, 74)
Aa
Aa
Aa
Gray
$color--gray
#9B9B9B
rgb(155, 155, 155)
Aa
Aa
Aa
Light gray
$color--light-gray
#D8D8D8
rgb(216, 216, 216)
Aa
Aa
Aa
Whitesmoke
$color--whitesmoke
#EFEFEF
rgb(239, 239, 239)
Color
Variable
Hex
RGBA
Aa
Accent Purple
$color--accent
#A0518E
rgb(160, 81, 142)
Aa
Accent Pink
$color--pink
#F15F79
rgb(241, 95, 121)
Aa
deprecated
$color--hint-old
#F9BF3B
rgb(249, 191, 59)
Aa
Hint accent color
$color--hint
#FFEB8D
rgb(255, 235, 141)
Config
$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, )
$z-map
Copy variable
Z-map for use with the @z mixin.
Value
( default: ( search: 1 ), search: ( input: 1 ) )
Fonts
Inconsolataassets/styles/nuclides/fonts.scss
Weight
Exemple
Regular
400
The quick brown fox jumps over the lazy dog
Latoassets/styles/nuclides/fonts.scss
Weight
Exemple
Hairline
100
The quick brown fox jumps over the lazy dog
Light
300
The quick brown fox jumps over the lazy dog
Regular
400
The quick brown fox jumps over the lazy dog
Bold
700
The quick brown fox jumps over the lazy dog
Heavy
900
The quick brown fox jumps over the lazy dog
Mixins
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();
Display
reset()assets/styles/nuclides/reset.scss
Show example
Resets all properties to default to reduce interferences with foreign styles.
@include reset();
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);
Tools
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);
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
$z
✔
Map of configured z-indecies
@include z(...)