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
$white: 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
$dark-orange: rgba(200, 64, 0, 1);Description
dark orange color, mostly used for buttons
Type
Rgba color
orange
$orange: rgba(255, 108, 0, 1);Description
orange color, mostly used for buttons hover
Type
Rgba color
ochre
$ochre: rgba(246, 166, 35, 1);Description
ochre color, mostly used for check icons
Type
Rgba color
anthracite
$anthracite: rgba(34, 34, 34, 1);Description
anthracite color, mostly used for text
Type
Rgba color
anthracite-light
$anthracite-light: rgba(64, 64, 64, 1);Description
anthracite-light color, mostly used for alt text
Type
Rgba color
gray-1
$gray-1: rgba(102, 102, 102, 1);Description
gray color, darkest
Type
Rgba color
gray-2
$gray-2: rgba(153, 153, 153, 1);Description
gray color, normal
Type
Rgba color
gray-3
$gray-3: rgba(194, 194, 194, 1);Description
gray color, light
Type
Rgba color
gray-4
$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