$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.scss you 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,
   ),
 )
);

Requires

@function type() [private]

@function set() [private]