# Variables
# $breakpoints
View SourceBreakpoints
Default Value
$breakpoints: (
'xx-small': 320px,
'x-small': 480px,
'small': 768px,
'medium': 1024px,
'large': 1200px,
'x-large': 1400px,
'xx-large': 1600px
);
# $buttons-hover-background-color
View SourceDefault Value
$buttons-hover-background-color: 'accent';
# $colors
View SourceDefault Value
$colors: (
'default': #232323,
'accent': #fe5000,
'black': #000000,
'darker-gray': #232323,
'dark-gray': #4a4a4a,
'gray': #9b9b9b,
'light-gray': #dedede,
'lighter-gray': #fcfcfc,
'white': #ffffff
);
# $drop-shadows-elevations
View SourceDefault Value
$drop-shadows-elevations: (
'lowest': ('0 1px 2px', '0 1px 3px'),
'low': ('0 3px 5px', '0 3px 10px'),
'medium': ('0 5px 5px', '0 10px 20px'),
'high': ('0 10px 10px', '0 15px 30px'),
'highest': ('0 15px 10px', '0 20px 40px')
);
# $font-family--sans-serif
View SourceDefault Value
$font-family--sans-serif: Helvetica, Arial, sans-serif;
# $font-size
View SourceDefault Value
$font-size: (
'base': 18px,
'h6': 16px,
'h5': 18px,
'h4': 24px,
'h3': 32px,
'h2': 40px,
'h1': 48px
);
# $font-weight
View SourceDefault Value
$font-weight: (
'base': 400,
'h6': 400,
'h5': 400,
'h4': 400,
'h3': 400,
'h2': 400,
'h1': 400
);
# $letter-spacing
View SourceDefault Value
$letter-spacing: (
'base': 0,
'h6': 0,
'h5': 0,
'h4': 0,
'h3': 0,
'h2': 0,
'h1': 0
);
# $line-height
View SourceDefault Value
$line-height: (
'base': 32px,
'h6': 24px,
'h5': 24px,
'h4': 32px,
'h3': 40px,
'h2': 48px,
'h1': 48px
);
# $text-transform
View SourceDefault Value
$text-transform: (
'base': none,
'h6': none,
'h5': none,
'h4': none,
'h3': none,
'h2': none,
'h1': none
);
# $grid-breakpoints
View SourceDefault Value
$grid-breakpoints: (
'normal': ('small', 'medium', 'large')
);
# $timing-functions
View SourceTransitions
Default Value
$timing-functions: (
'ease-in-sine': cubic-bezier(0.47, 0, 0.745, 0.715),
'ease-out-sine': cubic-bezier(0.39, 0.575, 0.565, 1),
'ease-in-out-sine': cubic-bezier(0.445, 0.05, 0.55, 0.95),
'ease-in-quad': cubic-bezier(0.55, 0.085, 0.68, 0.53),
'ease-out-quad': cubic-bezier(0.25, 0.46, 0.45, 0.94),
'ease-in-out-quad': cubic-bezier(0.455, 0.03, 0.515, 0.955),
'ease-in-cubic': cubic-bezier(0.55, 0.055, 0.675, 0.19),
'ease-out-cubic': cubic-bezier(0.215, 0.61, 0.355, 1),
'ease-in-out-cubic': cubic-bezier(0.645, 0.045, 0.355, 1),
'ease-in-quart': cubic-bezier(0.895, 0.03, 0.685, 0.22),
'ease-out-quart': cubic-bezier(0.165, 0.84, 0.44, 1),
'ease-in-out-quart': cubic-bezier(0.77, 0, 0.175, 1),
'ease-in-quint': cubic-bezier(0.755, 0.05, 0.855, 0.06),
'ease-out-quint': cubic-bezier(0.23, 1, 0.32, 1),
'ease-in-out-quint': cubic-bezier(0.86, 0, 0.07, 1),
'ease-in-expo': cubic-bezier(0.95, 0.05, 0.795, 0.035),
'ease-out-expo': cubic-bezier(0.19, 1, 0.22, 1),
'ease-in-out-expo': cubic-bezier(1, 0, 0, 1),
'ease-in-circ': cubic-bezier(0.6, 0.04, 0.98, 0.335),
'ease-out-circ': cubic-bezier(0.075, 0.82, 0.165, 1),
'ease-in-out-circ': cubic-bezier(0.785, 0.135, 0.15, 0.86),
'ease-in-back': cubic-bezier(0.6, -0.28, 0.735, 0.045),
'ease-out-back': cubic-bezier(0.175, 0.885, 0.32, 1.275),
'ease-in-out-back': cubic-bezier(0.68, -0.55, 0.265, 1.55)
);
# $transitions-speed
View SourceDefault Value
$transitions-speed: (
'x-slow': 0.8s,
'slow': 0.6s,
'normal': 0.4s,
'fast': 0.2s,
'x-fast': 0.1s
);
# $wrap-padding
View SourceDefault Value
$wrap-padding: (
'narrow': $layout-padding,
'no-padding': $layout-padding
);
# $wrap-width
View SourceDefault Value
$wrap-width: (
'narrow': $layout-width * 2/3,
'no-padding': $layout-width
);
# $breakpoints
View SourceCreates a list of global breakpoints
Default Value
$breakpoints: (
'phone': 320px,
'tablet': 768px,
'desktop': 1024px
);
# $media-expressions
View SourceCreates a list of static expressions or media types
Default Value
$media-expressions: (
'screen': 'screen',
'print': 'print',
'handheld': 'handheld',
'landscape': '(orientation: landscape)',
'portrait': '(orientation: portrait)',
'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)',
'retina3x': '(-webkit-min-device-pixel-ratio: 3), (min-resolution: 350dpi), (min-resolution: 3dppx)'
);
# $unit-intervals
View SourceDefines a number to be added or subtracted from each unit when declaring breakpoints with exclusive intervals
Default Value
$unit-intervals: (
'px': 1,
'em': 0.01,
'rem': 0.1,
'': 0
);
# $im-media-support
View SourceDefines whether support for media queries is available, useful for creating separate stylesheets
Default Value
$im-media-support: true;
# $im-no-media-breakpoint
View SourceSelects which breakpoint to emulate when support for media queries is disabled. Media queries that start at or intercept the breakpoint will be displayed, any others will be ignored.
Default Value
$im-no-media-breakpoint: 'desktop';
# $im-no-media-expressions
View SourceSelects which media expressions are allowed in an expression for it to be used when media queries are not supported.
Default Value
$im-no-media-expressions: ('screen', 'portrait', 'landscape');