$sinister-default-configuration
scss
$sinister-default-configuration: (
colors: (
sinister-purple: #602d82,
),
breakpoints: (
// $desktopLarge
xxl: 2560px,
// $desktopMedium
xl: 1920px,
// $desktop-small
lg: 1460px,
// $tabletLarge
md: 1200px,
// $tabletSmall
sm: 768px,
// $smartphone
xs: 576px,
// UIKit Breakpoints
uk-breakpoint-s: 640px,
uk-breakpoint-m: 960px,
uk-breakpoint-l: 1200px,
uk-breakpoint-xl: 1600px,
),
typography: (
disable-list-style: false,
font-families: (),
responsive-fonts: false,
base-font-size: 16px,
root-font-size: 16px,
// Functionality is missing.
font-sizes:
(
xxl: 1.6rem,
xl: 1.4rem,
md: 1rem,
sm: 0.9rem,
xs: 0.7rem,
),
font-weights: (
// source: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping
// Note Not all fonts support all font weights
thin-hairline: 100,
extra-light: 200,
ultra-light: 200,
light: 300,
normal: 400,
regular: 400,
medium: 500,
semi-bold: 600,
demi-bold: 600,
bold: 700,
extra-bold: 800,
ultra-bold: 800,
black: 900,
heavy: 900,
extra-black: 950,
ultra-black: 950,
),
default-font-sizes: (
h1: null,
h2: null,
h3: null,
h4: null,
h5: null,
h6: null,
span: null,
p: null,
a: null,
button: null,
em: null,
small: null,
strong: null,
q: null,
ul: null,
ol: null,
li: null,
hr: null,
wbr: null,
div: null,
section: null,
),
responsive-font-sizes: (
generic: 0.8vw,
xxl: 1vw,
xl: 1vw,
md: 2vw,
sm: 4.3vw,
xs: 4.6vw,
),
),
spacing: (
0: 0rem,
1: 1.5rem,
2: 2rem,
3: 2.5rem,
4: 3rem,
5: 4rem,
6: 5rem,
auto: auto,
inherit: inherit,
unset: unset,
),
global: (
production: false,
warning-messages-toggle: false,
development-url: '../../../..',
production-url: '#',
),
generate-classes: (
spacing: false,
display: false,
fonts: false,
flex: false,
utility: false,
),
// Experimental - > Bootstrap overide
bootstrap:
(
// if bootstrap is used, use the palette bellow to overide the default bootstrap colors
bootstrap-color:
(
bs-blue: #0d6efd,
bs-indigo: #6610f2,
bs-purple: #6f42c1,
bs-pink: #d63384,
bs-red: #dc3545,
bs-orange: #fd7e14,
bs-yellow: #ffc107,
bs-green: #198754,
bs-teal: #20c997,
bs-cyan: #0dcaf0,
bs-white: #fff,
bs-gray: #6c757d,
bs-gray-dark: #343a40,
bs-primary: #0d6efd,
bs-secondary: #6c757d,
bs-success: #198754,
bs-info: #0dcaf0,
bs-warning: #ffc107,
bs-danger: #dc3545,
bs-light: #f8f9fa,
bs-dark: #212529,
),
),
image-wrapper: (
img-box-default-height: 80,
img-box-default-width: 100,
img-default-preload-background: none,
),
);Related
@function set-config()
Used By
@function set-config()
@function set-config()
The set.config() creates the configuration for the project. Through this function you can update the Sinister configuration map. For example you can update breakpoints, colors, font-sizes, or set new ones.
Each time you update
_sin.config.scssyou have to restart your sass server in order for the changes to take effect.
Author:
Theodoros Kondakos
Parameters & Return
$new-config: (map)
A map that contains setting values to update or add new data to the configuration
@return (map)
Returns an updated map that is a merge of $new-config and $original-map.
@error
set-config function was called with invalid input. Was expecting a map but instead received: #{type-of($new-map)}
Example
scss
See available properties and values
$configuration: set-config(
(
colors: (
test-color: #ffa,
),
)
);