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

Colors
Color
Variable
Hex
RGBA
Aa
Blue color
$blue
#5D83C1
rgba(93, 131, 193, 1)
Aa
Black color
$black
#000000
rgba(0, 0, 0, 1)
Aa
Dark color
$dark
#333333
rgba(51, 51, 51, 1)
Aa
Red color
$red
#DD1144
rgba(221, 17, 68, 1)
Aa
Gray color
$gray
#EEEEEE
rgba(238, 238, 238, 1)
Aa
Green color
$green
#56AB7A
rgba(86, 171, 122, 1)
Aa
Yellow color
$yellow
#F1D7AD
rgba(241, 215, 173, 1)
Aa
White color
$white
#FFFFFF
rgba(255, 255, 255, 1)
Config
Height
$header-height
Copy variable
The header height variabless
Value
50px
$footer-height
Copy variable
The footer height variabless
Value
100px
Fonts Stack
$font-san-francisco
Copy variable
Apple San Francisco-based stack
Value
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif
$font-times-new-roman
Copy variable
Times New Roman-based stack
Value
Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif
$font-modern-georgia
Copy variable
Modern Georgia-based serif stack
Value
Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif
$font-traditional-garamond
Copy variable
Traditional Garamond-based serif stack
Value
"Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif
$font-helvetica-arial
Copy variable
Helvetica/Arial-based sans serif stack
Value
Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif
$font-verdana
Copy variable
Verdana-based sans serif stack
Value
Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif
$font-trebuchet
Copy variable
Trebuchet-based sans serif stack
Value
"Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif
$font-impact
Copy variable
Impact-based sans serif stack
Value
Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif
$font-monospace
Copy variable
Monospace stack
Value
Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace