Variables
Here are the variables we include:
Colors
Neutral color palette - Light mode
color preview
$neutral-light-90
$primary-neutral-light
#252626
color preview
$neutral-light-80
#494A4A
color preview
$neutral-light-70
#6B6B6B
color preview
$neutral-light-60
#8A8A8A
color preview
$neutral-light-50
#A5A5A5
color preview
$neutral-light-40
#C0C0C0
color preview
$neutral-light-30
#DADADA
color preview
$neutral-light-20
#F2F2F2
color preview
$neutral-light-10
#F7F7F7
color preview
$neutral-light-05
#FFFFFF
Neutral color palette - Dark mode
color preview
$neutral-dark-90
#000000
color preview
$neutral-dark-80
#15181A
color preview
$neutral-dark-70
$primary-neutral-dark
#2B3033
color preview
$neutral-dark-60
#4C545B
color preview
$neutral-dark-50
#6F7A82
color preview
$neutral-dark-40
#86929B
color preview
$neutral-dark-30
#9AA5AE
color preview
$neutral-dark-20
#AFBCC4
color preview
$neutral-dark-10
#C3D0D9
color preview
$neutral-dark-05
#E4EBF0
Blue palette
color preview
$blue-90
#1B384C
color preview
$blue-80
#14476A
color preview
$blue-70
#0D5788
color preview
$blue-60
$primary-blue
#116FAE
color preview
$blue-50
#1482CC
color preview
$blue-40
#419BD7
color preview
$blue-30
#6CB2E1
color preview
$blue-20
#99CBEC
color preview
$blue-10
#D2EAFA
color preview
$blue-05
#E7F2F9
Green palette
color preview
$green-90
#254934
color preview
$green-80
#316245
color preview
$green-70
$primary-green
#2D7048
color preview
$green-60
#4E9C54
color preview
$green-50
#67A870
color preview
$green-40
#7FAF7F
color preview
$green-30
#9BC29B
color preview
$green-20
#AFD4AF
color preview
$green-10
#CFE7CF
color preview
$green-05
#EBF7EB
Red palette
color preview
$red-90
#801F30
color preview
$red-80
#A12036
color preview
$red-70
$primary-red
#CC334C
color preview
$red-60
#D44F64
color preview
$red-50
#DB6B7D
color preview
$red-40
#E28594
color preview
$red-30
#EAA1AC
color preview
$red-20
#F1BDC4
color preview
$red-10
#FAD9DE
color preview
$red-05
#FFEDEF
Orange palette
color preview
$orange-90
#803B00
color preview
$orange-80
#B35300
color preview
$orange-70
$primary-orange
#C26800
color preview
$orange-60
#D17D00
color preview
$orange-50
#E5A23E
color preview
$orange-40
#EDB45F
color preview
$orange-30
#F2C480
color preview
$orange-20
#FAD7A2
color preview
$orange-10
#FCDFB1
color preview
$orange-05
#FCF2DC
Purple palette
color preview
$purple-90
#403380
color preview
$purple-80
$primary-purple
#4D3D99
color preview
$purple-70
#6154A5
color preview
$purple-60
#7365B8
color preview
$purple-50
#8A80BD
color preview
$purple-40
#9E96C8
color preview
$purple-30
#B2ABD3
color preview
$purple-20
#C6C1DF
color preview
$purple-10
#DAD7EA
color preview
$purple-05
#EDECF5
Typography
| Name | Default value | Description |
|---|---|---|
$vud-units |
'rem' |
Setup the type of unit you want the VUD library to load ('px' or 'rem') |
$html-font-size |
62.5% |
1rem = 10px ** |
$body-font-size |
1.4rem |
The font size we set on <body> |
$font-size-base |
1.4rem |
The base font size |
$font-family-base |
'OpenSansFallback', 'Open Sans', sans-serif; |
The base font family |
$font-family-secondary |
'UbuntuFallback', 'Ubuntu', sans-serif; |
The secondary font family |
$line-height-base |
1.4 |
The base line height |
$font-weight-base |
normal |
The base font weight |
** Why we set the root to 62.5%? Beacuse 62.5% is equal to 10px in most browsers, so it makes it easier to calculate REM units (eg. $body-font-size in our case it's 1.4rem = 14px).
The main reason we use "%" and not "px" to setup the root font-size is to let the user reset the browser font size, so the typography will scale proportionally to user's default browser settings.
Paths
| Name | Default value | Description |
|---|---|---|
$prefix-path |
'../..' |
You can change this value to match the file structure you have ** |
$image-path |
'#{$prefix-path}/img' |
Path to image folder ** |
$font-path |
'#{$prefix-path}/fonts' |
Path to fonts folder ** |
$icons-path |
'#{$prefix-path}/img/vismaicons' |
Path to icons folder ** |
**CSP and embedded SVGs
Content Security Policy (CSP) blocks SVGs embedded as data URI in CSS url(), that is why we we use SVGs as static images.
Spacings
| Name | Default value | Description |
|---|---|---|
$spacing-0 |
0 |
Specifies the spacer value to 0rem/0px ** |
$spacing-2 |
0.2rem/2px |
Specifies the spacer value to 0.2rem/2px ** |
$spacing-4 |
0.4rem/4px |
Specifies the spacer value to 0.4rem/4px ** |
$spacing-8 |
0.8rem/8px |
Specifies the spacer value to 0.8rem/8px ** |
$spacing-12 |
1.2rem/12px |
Specifies the spacer value to 1.2rem/12px ** |
$spacing-16 |
1.6rem/16px |
Specifies the spacer value to 1.6rem/16px ** |
$spacing-24 |
2.4rem/24px |
Specifies the spacer value to 2.4rem/24px ** |
$spacing-32 |
3.2rem/32px |
Specifies the spacer value to 3.2rem/32px ** |
$spacing-40 |
4rem/40px |
Specifies the spacer value to 4rem/40px ** |
$spacing-48 |
4.8rem/48px |
Specifies the spacer value to 4.8rem/48px ** |
$spacing-64 |
6.4rem/64px |
Specifies the spacer value to 6.4rem/64px ** |
$spacing-96 |
9.6rem/96px |
Specifies the spacer value to 9.6rem/96px ** |
$spacing-128 |
12.8rem/128px |
Specifies the spacer value to 12.8rem/128px ** |
$spacing-auto |
auto |
Specifies the spacer value to auto ** |
**You can also use helper classes (for margins and paddings or for positioning).
More variables!
The list will continue. Until then, you can find more variables we have in VUD in "~@vismaux/vud/src/scss/settings/config" and "~@vismaux/vud/src/scss/settings/variables"