breakpoint

variables

tablet

$tablet: 768px;

Description

tablet breakpoint (mobile first)

Type

Number + px

ipad

$ipad: 1024px;

Description

ipad breakpoint (mobile first)

Type

Number + px

desktop

$desktop: 1280px;

Description

desktop breakpoint (mobile first)

Type

Number + px

colors

variables

white

var(--color-0-000): rgba(255, 255, 255, 1);

Description

white color

Type

Rgba color

black

$black: rgba(0, 0, 0, 1);

Description

black color

Type

Rgba color

dark-orange

var(--color-3): rgba(200, 64, 0, 1);

Description

dark orange color, mostly used for buttons

Type

Rgba color

orange

var(--color-1-550): rgba(255, 108, 0, 1);

Description

orange color, mostly used for buttons hover

Type

Rgba color

ochre

var(--color-5): rgba(246, 166, 35, 1);

Description

ochre color, mostly used for check icons

Type

Rgba color

anthracite

var(--color-0-870): rgba(34, 34, 34, 1);

Description

anthracite color, mostly used for text

Type

Rgba color

anthracite-light

var(--color-0-750): rgba(64, 64, 64, 1);

Description

anthracite-light color, mostly used for alt text

Type

Rgba color

gray-1

var(--color-gray-1): rgba(102, 102, 102, 1);

Description

gray color, darkest

Type

Rgba color

gray-2

var(--color-gray-2): rgba(153, 153, 153, 1);

Description

gray color, normal

Type

Rgba color

gray-3

var(--color-gray-3): rgba(194, 194, 194, 1);

Description

gray color, light

Type

Rgba color

gray-4

var(--color-gray-4): rgba(236, 236, 236, 1);

Description

gray color, lighter

Type

Rgba color

green

$green: rgba(112, 216, 0, 1);

Description

green color, used for buttons and checks

Type

Rgba color

lime

$lime: rgba(174, 255, 0, 1);

Description

lime color, used for borders

Type

Rgba color

font

variables

icon

$icon: 'FontAwesome';

Description

fontawesome font

Type

String

font

$font: 'Lato', sans-serif;

Description

default font

Type

String

light

$light: 300;

Description

font weight light

Type

Number

regular

$regular: 400;

Description

font weight regular

Type

Number

medium

$medium: 500;

Description

font weight medium

Type

Number

bold

$bold: 700;

Description

font weight bold

Type

Number

heavy

$heavy: 900;

Description

font weight heavy

Type

Number

helpers

mixins

ratio

@mixin ratio($w, $h) { ... }

Description

This set/remove element aspect ratio

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$w

element width

Number none
$h

element height

Number none

Example

Set aspect ratio

@include ratio(16,9);

Remove aspect ratio

@include ratio(0,0);

path

variables

assets

$assets: '';

Description

assets path

Type

String

fa-font-path

$fa-font-path: '#{$assets}/fonts';

Description

fontawesome path

Type

String