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-primary): rgba(200, 64, 0, 1);
Description
dark orange color, mostly used for buttons
Type
Rgba color
orange
var(--color-primary): 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-black): rgba(34, 34, 34, 1);
Description
anthracite color, mostly used for text
Type
Rgba color
anthracite-light
var(--color-grey-04): 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 Name | parameter Description | parameter Type | parameter 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