An SCSS Boilerplate
colors
variables
color-brand
$color-brand: hsl(0, 80%, 67%);Description
color-primary
$color-primary: hsl(217, 89%, 61%);Description
color-secondary
$color-secondary: hsl(280, 50%, 60%);Description
color-light
$color-light: hsl(0, 0%, 97%);Description
color-dark
$color-dark: hsl(0, 0%, 11%);Description
color-grey
$color-grey: hsl(0, 0%, 37%);Description
color-success
$color-success: hsl(144, 100%, 39%);Description
color-info
$color-info: hsl(196, 77%, 55%);Description
color-danger
$color-danger: hsl(0, 100%, 63%);Description
color-warning
$color-warning: hsl(40, 100%, 60%);Description
sizing
variables
size-ratio
$size-ratio: 1.25;Description
The base ratio that forms the increment of the sizing scale. Default is based on 1.25 Major Third interval.
size-base
$size-base: 16px !default;Description
The base unit size that defines the rest of the sizing scale sizes. Default is 16px.
This is the base size
size-1
$size-1: (($size-base / $size-ratio) / $size-ratio) / $size-ratio;size-2
$size-2: ($size-base / $size-ratio) / $size-ratio;size-3
$size-3: $size-base / $size-ratio;size-4
$size-4: $size-base;size-5
$size-5: $size-4 * $size-ratio;size-6
$size-6: $size-5 * $size-ratio;size-7
$size-7: $size-6 * $size-ratio;size-8
$size-8: $size-7 * $size-ratio;size-9
$size-9: $size-8 * $size-ratio;size-10
$size-10: $size-9 * $size-ratio;size-11
$size-11: $size-10 * $size-ratio;size-12
$size-12: $size-11 * $size-ratio;typography
variables
font-sans
$font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';font-sans-heading
$font-sans-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';font-code
$font-code: 'Fira Code', monospace;