Aspect ratios are sets in the map $aspect-ratios. They are use to define ratios for .aspect-ratio-container (Atom)

• 1x1
• 16x9
• 4x3
• golden
• silver

Standard box shadow use around the website

$box-shadow: 1px 5px 10px rgba(0,0,0,.1);

Breakpoints are in the map $breakpoints

• xs: 320px, // Smartphone
• sm: 600px, // Tablets
• md: 900px, // Tablets Landscape and small desktops
• lg: 1200px, // Desktops
• xl: 1800px, // Large Desktop

Breakpoints can be called in the sass project using the functions:

bp($bp) which will output a value in em

bp-var($bp, $true-val:false) which will output the CSS variable

Usage of bp():

• bp(sm); => 36em

Usage of bp-var():

• bp-var(sm); => var(--bp-sm); If $use-css-var = true
• bp-var(sm); => 576px; If $use-css-var = false
• bp-var(sm, true) => 576px;

Colors are in the map $color-themes. Each color themes have 5 variables:

• Base
• Dark
• Light
• Transparent
• Contrast

Colors can be called in the sass project using the functions:

color($color-name, $color-variant:null, $true-val:false) which will output by default the CSS variable

Usage of font-family():

• color(danger) => var(--color-danger-base) If $use-css-var = true
• color(danger) => #c65556 If $use-css-var = false
• color(success, base, true) => #c65556
• color(success, light) => var(--color-success-light) If $use-css-var = true
• color(success, light) => #76bd7a If $use-css-var = false
• color(success, light, true) => #76bd7a

Grays are in the map $gray-themes. This maps darken white (#ffffff) to black 10% by 10%

Grays can be called in the sass project using the functions:

color-gray($gray-theme, $true-val:false) which will output by default the CSS variable

Usage of font-family():

• color-gray(0) => var(--color-gray-0) If $use-css-var = true
• color-gray(100) => #000000 If $use-css-var = false
• color-gray(60) => #666666 If $use-css-var = false

Container sizes are in the map $container-sizes

• sm
• md
• lg
• xl

Container Sizes can be called in the sass project using the function:

container($container-size, $true-val:false).

Function examples to call the map:

• container(md); => var(--container-size-sm); If $use-css-var = true
• container(md); => 720px; If $use-css-var = false
• container(md, true) => 720px;

Font Families are in the map $font-families

• paragraph: Lato,
• title: Rubik,
• highlight: Rubik
• icon: icomoon

Font Families can be called in the sass project using the functions:

font-family($font-family, $true-val:false) which will output by default the CSS variable

Usage of font-family():

• font-family(title) => var(--font-family-title) If $use-css-var = true
• font-family(title) => "Rubik", "Helvetica Neue", Arial, sans-serif If $use-css-var = false
• font-family(title, true) => "Rubik", "Helvetica Neue", Arial, sans-serif

Font Sizes are in the map $font-sizes

• root: 16px,
• paragraph: 1rem,
• 1: 2.8125rem,
• 2: 2.5rem,
• 3: 2rem,
• 4: 1.5rem,
• 5: 1.25rem,
• 6: 1rem,
• button: 1rem

Font sizes can be called in the sass project using the functions:

font-sizes($font-size, $true-val:false) which will output by default the CSS variable

Usage of font-size():

• font-size(2) => var(--font-size-2) If $use-css-var = true
• font-size(2) => 2.5rem If $use-css-var = false
• font-size(2, true) => 2.5rem

This project use by default CSS grid layout display: grid for its grid with a fallback on flexbox for older browsers. $grid-columns allow setting the number of columns we want per grid.

Icon font are generated using https://icomoon.io/ (See vendors)

Icomoon give sass files but these ones use variables. For better maintainability and theming the vendor have been changed so it uses a map instead of variables.

Variables can be converted to a map using this tool:

See the Pen Convert Sass variables to map by Vincent Humeau (@vinceumo) on CodePen.

Icons can be called in the sass project using the functions:

icon($icon, $true-val:false) which will output by default the CSS variable, You will need to set the font family as font-family: font-family(icon)

Usage of icon():

• icon(twitter) => var(--icon-twitter) If $use-css-var = true
• icon(twitter) => "\f099" If $use-css-var = false
• icon(twitter, true) => `"\f099"

(Markup copy and paste from icomoon example)

Icons can be call in the markup using a class .icon-{target}, such as <i class="icon-star"></i> . It can be call using span or div as well.

When using an icon in css you can use the function icon(target), such as icon(star).

Spacers is use to for padding and margin grid-gap in the project. The base value is set with $spacer-reference (1rem)

• 0: 0,
• 1: ($spacer-reference * 0.25),
• 2: ($spacer-reference * 0.5),
• 3: $spacer-reference,
• 4: ($spacer-reference * 1.25),
• 5: ($spacer-reference * 1.5),
• 6: ($spacer-reference * 3),
• 7: ($spacer-reference * 6),
• 8: ($spacer-reference * 9),
• 9: ($spacer-reference * 12)

spacer sizes can be called in the sass project using the functions:

spacer($spacer, $true-val:false) which will output by default the CSS variable

Usage of grid-item-size():

• spacer(4) => var(--spacer-4) If $use-css-var = true
• spacer(4) => 1.25rem If $use-css-var = false
• spacer(4, true) => 1.25rem

CSS Variables and theme classes are set in the variable files using this Sass variables:

• $root-default => :root, .theme-default, .is-theme-default
• $root-invert-theme => :root .theme-invert, :root .is-theme-invert

z-index are in the map $z-indexes. The first entry will get the highest value and the last one the lowest. You can find an example in this pen

• skip-navigation
• main-navigation

z-index indexes can be called in the sass project using the functions:

z($name) which will output the reverse index of $name time 10

Usage of font-size():

• z(main-navigation) => 10

See the Pen z-index Sass management by Vincent Humeau (@vinceumo) on CodePen.