config_vars

// VARIABLES TEMPLATE
//
// INSTALLATION:
//
// Before compilation, you must rename this file to config_vars.scss and import it
// before ANY FILE in your project. If you don't do this, the project will not 
// compiled adequately, like in this example:
//
// @import 'mycssfolder/config_vars.scss'; <--- First than any other file
// @import 'mycssfolder/config_css.scss';
// @import 'mycssfolder/config_normalizer.scss';
// @import 'mycssfolder/utilcss/util.css.scss';

// VARIABLES
//
// Start uncommenting all the properties you need for your project


// GENERAL VARIABLES

$font-family-serif:     Times New Roman;
$font-family-sans:      -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Droid Sans, Helvetica Neue, sans-serif;
$font-family-mono:      ".SFMono-Semibold", San Francisco Mono, Roboto Mono, Arial, sans-serif;


// GRID COLUMNS
//
// This will setup the columns for grid-template-columns

$columns: 12;

// RESPONSIVE
//
// This will define the mininums widths in many jumps, do not edit if you want to preserve
// the standards jumps in responsive design

$device-sm:        320px;
$device-md:        768px;
$device-lg:        960px;
$device-xl:        1280px;


$align-items: (
  // stretch,
  // center,
  // flex-start,
  // flex-end,
  // baseline,
  // initial,
  // inherit
  );

$align-contents: (
  // stretch,
  // center,
  // flex-start,
  // flex-end,
  // space-between,
  // space-around,
  // initial,
  // inherit
  ); 

$align-selfs: (
  // auto,
  // stretch,
  // center,
  // flex-start,
  // flex-end,
  // baseline,
  // initial,
  // inherit
  );

$backface-visibilities: (
  // visible,
  // hidden,
  // initial,
  // inherit
  );

$background-attachments: (
  // scroll,
  // fixed,
  // local,
  // initial,
  // inherit
);

$blend-modes: (
  // normal,
  // multiply,
  // screen,
  // overlay,
  // darken,
  // lighten,
  // color-dodge,
  // saturation,
  // color,
  // luminosity
);

$background-clips: (
  // border-box,
  // padding-box,
  // content-box,
  // initial,
  // inherit
);

$background-origins: (
  // padding-box,
  // border-box,
  // content-box,
  // initial,
  // inherit
);

$border-collapses: (
  // separate,
  // collapse,
  // initial,
  // inherit
  );

$border-radius: (
  // 0,
  // 3,
  // 5,
  // 512
  );

$background-repeats: (
  // repeat,
  // repeat-x,
  // repeat-y,
  // no-repeat,
  // initial,
  // inherit
);

$background-sizes: (
  // auto,
  // cover,
  // contain,
  // initial,
  // inherit
);

$border-styles: (
  // none,
  // solid,
  // hidden,
  // dotted,
  // dashed,
  // double,
  // groove,
  // ridge,
  // inset,
  // outset,
  // initial,
  // inherit
  );

$border-widths: (
  // 0,
  // 1,
  // 2,
  // 4
  );

$box-decorations: (
  // slice,
  // clone,
  // initial,
  // inherit,
  // unset
);

$box-sizings: (
  // content-box,
  // border-box,
  // initial,
  // inherit
);

$caption-sides: (
  // top,
  // bottom,
  // initial,
  // inherit
  );

$clears: (
  // none,
  // left,
  // right,
  // both,
  // initial,
  // inherit
  );

$column-fills: (
  // balance,
  // auto,
  // initial,
  // inherit
  );

$column-rule-styles: (
  // none,
  // hidden,
  // dotted,
  // dashed,
  // solid,
  // double,
  // groove,
  // ridge,
  // inset,
  // outset,
  // initial,
  // inherit
  );

$column-spans: (
  // none,
  // all,
  // initial,
  // inherit
  );


// Add all the colors values as you want, remember create the key, ex. 1: #000 will be
// .color--1 { color: #000 } in the compiled version

$colors: (
  // 1: #000,
  // 2: #fff,
  // 3: #333
  );

$cursors: (
  // none,
  // pointer,
  // alias,
  // all-scroll,
  // auto,
  // cell,
  // context-menu,
  // col-resize,
  // copy,
  // crosshair,
  // default,
  // e-resize,
  // ew-resize,
  // grab,
  // grabbing,
  // help,
  // move,
  // n-resize,
  // ne-resize,
  // nswe-resize,
  // ns-resize,
  // nesw-resize,
  // sw-resize,
  // s-resize,
  // no-drop,
  // not-allowed,
  // text,
  // vertical-text,
  // w-resize,
  // wait,
  // zoom-in,
  // zoom-out,
  // initial,
  // inherit
  );

$directions: (
  // ltr,
  // rtl,
  // initial,
  // inherit
  );

$displays: (
  // inline,
  // block,
  // contents,
  // flex,
  // grid,
  // inline-block,
  // inline-flex,
  // inline-grid,
  // inline-table,
  // list-item,
  // run-in,
  // table,
  // table-caption,
  // table-column-group,
  // table-header-group,
  // table-row-group,
  // table-cell,
  // none,
  // initial,
  // inherit
  );

$empty-cells: (
  // show,
  // hide,
  // initial,
  // inherit
);

$fill-rules: (
  // nonzero,
  // evenodd
);

$flex-directions: (
  // row,
  // row-reverse,
  // column,
  // column-reverse,
  // initial,
  // inherit
  );

$flex-wraps: (
  // nowrap,
  // wrap,
  // wrap-reverse,
  // initial,
  // inherit
  );

$flex-grows: (
  // 1,
  // 2,
  // 3,
  // 4
  );

$floats: (
  // none,
  // left,
  // right,
  // initial,
  // inherit
  );

$font-families: (
  // serif: $font-family-serif,
  // sans: $font-family-sans,
  // mono: $font-family-mono
  );

$font-kernings: (
  // auto,
  // normal,
  // none
  );

$font-sizes: (
  // 12: 12px,
  // 16: 16px,
  // 18: 18px,
  // 22: 22px
  );

$font-styles: (
  // normal,
  // italic,
  // oblique,
  // initial,
  // inherit
  );

$font-variants: (
  // normal,
  // small-caps,
  // initial,
  // inherit
  );

$font-weights: (
  // 200,
  // 400,
  // 800,
  // normal,
  // bold,
  // bolder,
  // lighter
  );

$gap-scales: (
  // 0,
  // 4,
  // 8,
  // 16
  );

$grid-auto-columns: (
  // auto,
  // max-content,
  // min-content,
  );

$grid-auto-rows: (
  // auto,
  // max-content,
  // min-content,
  );

$grid-auto-flows: (
  // row: row,
  // column: column,
  // dense: dense,
  // row-dense: row dense,
  // column-dense: column dense
);

$grid-flow-gaps: (
  // row,
  // column
);

// Scale heights as much as you want

$heights: (
  // 38: 38px,
  // 44: 44px
  );

$hyphens: (
  // none,
  // manual,
  // auto,
  // initial,
  // inherit
  );

$isolations: (
  // auto,
  // isolate,
  // initial,
  // inherit
  );

$justify-contents: (
  // start,
  // end,
  // stretch,
  // space-evenly,
  // flex-start,
  // flex-end,
  // center,
  // space-between,
  // space-around,
  // initial,
  // inherit
  );

$justify-items: (
  // auto,
  // normal,
  // stretch,
  // center,
  // start,
  // end,
  // flex-start,
  // flex-end,
  // self-start,
  // self-end,
  // left,
  // right,
  // baseline,
  // inherit,
  // initial,
  // unset
  );

$justify-selfs: (
  // auto,
  // normal,
  // stretch,
  // center,
  // start,
  // end,
  // flex-start,
  // flex-end,
  // self-start,
  // self-end,
  // left,
  // right,
  // baseline,
  // inherit,
  // initial,
  // unset
);

// define your letter spacings writing an id and any output value

$letter-spacings: (
  // 1: -1px,
  // 2: -2px,
  // 3: -3em
);

// define your line-heights writing an identifiable and any output value

$line-heights: (
  // 12: 12px,
  // 14: 14px,
  // 18: 18px
  );

$list-style-positions: (
  // inside,
  // outside,
  // initial,
  // inherit
);

$list-style-types: (
  // disc,
  // armenian,
  // circle,
  // cjk-ideographic,
  // decimal,
  // decimal-leading-zero,
  // georgian,
  // hebrew,
  // hiragana,
  // hiragana-iroha,
  // katakana,
  // katakana-iroha,
  // lower-alpha,
  // lower-greek,
  // lower-latin,
  // lower-roman,
  // none,
  // square,
  // upper-alpha,
  // upper-greek,
  // upper-latin,
  // upper-roman,
  // initial,
  // inherit
);

$margin-scales: (
  // 0,
  // 4,
  // 8,
  // 32,
  // 64
  );

$max-widths: (
  // 50: 50%,
  // 75: 75%,
  // 100: 100%
  );

$object-fits: (
  // fill,
  // contain,
  // cover,  
  // none,
  // scale-down
  );

$opacities: (
  // 0: 0,
  // 1: 0.1,
  // 2: 0.2,
  // 3: 0.3,
  // 4: 0.4,
  // 5: 0.5,
  // 6: 0.6,
  // 7: 0.7,
  // 8: 0.8,
  // 9: 0.9,
  // 10: 1
  );

$orders: (
  // 1,
  // 2,
  // 3,
  // 4,
  // 5
  );

$outline-styles: (
  // hidden
  // dotted,
  // dashed,
  // solid,
  // double,
  // groove,
  // ridge,
  // inset,
  // outset
  );

$overflows: (
  // visible,
  // hidden,
  // clip,
  // scroll,
  // auto,
  // hidden visible,
  // inherit,
  // initial,
  // unset
  );

$padding-scales: (
  // 0,
  // 4,
  // 8,
  // 16,
  // 32,
  );

$pointer-events: (
  // none,
  // auto
  );

$positions: (
  // static,
  // absolute,
  // fixed,
  // relative,
  // sticky,
  // initial,
  // inherit
  );

$resizes: (
  // none,
  // both,
  // horizontal,
  // vertical,
  // initial,
  // inherit
  );

// Pattern scales
//
// For designs that use patterns, this one is friendly with Android
// PC and Macs screens

$scales: (
  // 0,
  // 4,
  // 8,
  // 16,
  // 32
  );

// these values will be used for paddings, margins, etc.

$sides: (
  // top,
  // bottom,
  // left,
  // right
  );

$scroll-snap-aligns: (
  // none: none,
  // start-end: start end,
  // center: center,
  // inherit: inherit,
  // initial: initial,
  // unset: unset,
  );

$scroll-behaviors: (
  // auto,
  // smooth,
  // initial,
  // inherit
  );

$scroll-margin-blocks: (
  // 0: 0%,
  // 10: 10px,
  // initial: initial,
  // unset: unset,
  );

$scroll-margin-inlines: (
  // 0: 0%,
  // 10: 10px,
  // initial: initial,
  // unset: unset,
  );

$scroll-padding-blocks: (
  // 0: 0%,
  // 10: 10px,
  // initial: initial,
  // unset: unset,
  );

$scroll-padding-inlines: (
  // 0: 0%,
  // 10: 10px,
  // initial: initial,
  // unset: unset,
  );

$scroll-padding-inline-start-ends: (
  // 0: 0%,
  // 10: 10px,
  // initial: initial,
  // unset: unset,
  );

$scroll-snap-stops: (
  // always,
  // normal,
  // inherit,
  // initial,
  // unset,
  );

$scroll-snap-types: (
  // block,
  // both,
  // inherit,
  // initial,
  // inline,
  // none,
  // unset,
  // x,
  // y
  );

$table-layouts: (
  // auto,
  // fixed,
  // initial,
  // inherit
  );

$text-aligns: (
  // left,
  // right,
  // center,
  // justify,
  // initial,
  // inherit
  );

$text-align-lasts: (
  // auto,
  // left,
  // right,
  // center,
  // justify,
  // start,
  // end,
  // initial,
  // inherit
  );

$text-decoration-lines: (
  // none,
  // underline,
  // overline,
  // line-through,
  // initial,
  // inherit,
);

$text-decoration-styles: (
  // none,
  // underline,
  // overline,
  // line-through,
  // initial,
  // inherit
);

$text-indents: (
  // 1: -10px,
  // 2: 10px,
  // 3: -2000px
);

$text-justifies: (
  // auto,
  // inter-word,
  // inter-character,
  // none,
  // initial,
  // inherit
  );
  
$text-overflows: (
  // clip,
  // ellipsis,
  // string,
  // initial,
  // inherit
  );

$text-transforms: (
  // none,
  // capitalize,
  // uppercase,
  // lowercase,
  // initial,
  // inherit
  );

$unicode-bidis: (
  // normal,
  // embed,
  // bidi-override,
  // initial,
  // inherit
  );

$user-selects: (
  // auto,
  // none,
  // text,
  // all
  );

$vertical-aligns: (
  // baseline,
  // sub,
  // super,
  // top,
  // text-top,
  // middle,
  // bottom,
  // text-bottom,
  // initial,
  // inherit
  );

$visibilities: (
  // visible,
  // hidden,
  // collapse,
  // initial,
  // inherit
  );

$white-spaces: (
  // normal,
  // nowrap,
  // pre,
  // pre-line,
  // pre-wrap,
  // initial,
  // inherit
  );

$word-breaks: (
  // normal,
  // break-all,
  // keep-all,
  // break-word,
  // initial,
  // inherit
  );

$word-spacings: (
  // 10: 10px,
  // 1: -1px,
  // 20: 20px
  );

$word-wraps: (
  // normal,
  // break-word,
  // initial,
  // inherit
  );

$widths: (
  // 100: 100%,
  // auto: auto
  );

$writing-modes: (
  // horizontal-tb,
  // vertical-rl,
  // vertical-lr
);