SCSS vars boiler

scss-vars-boiler.scss

/* ======== SCSS PROJECT VARIABLES ============== */

/* -------------- Typography ----------------*/
/*-------------------------------------------*/
$font-stack-base: "Railway", Helvetica, Arial, "sans-serif"; //railway reg & bold
$font-name-base: "Railway";

//$font-stack-header:; DIN condenced bold
//$font-name-header:; alte din

$font-light: $font-name-base + "-Light";
$font-light-italic: $font-light + "Italic";

$font-ultralight: $font-name-base + "-Thin";
$font-ultralight-italic: $font-ultralight + "Italic";

$font-normal: $font-name-base +"-Regular";
$font-normal-italic: $font-normal + "Italic";

$font-medium: $font-name-base + "-Medium";
$font-bold-italic: $font-medium + "Italic";

$font-bold: $font-name-base + "-Bold";
$font-bold-italic: $font-bold + "Italic";

$font-semi-bold: $font-name-base + "-Black";
$font-semi-bold-italic: $font-semi-bold + "Italic";

$font-size-base:10px;
$font-size-base-lg:14px;
$font-size-hdr:1.28rem; //18px / 32px
//$font-size-hdr-dsk:1.28rem; //18px / 28px
$font-size-subhdr:1.14rem; //16px
$font-size-btn:0.64rem; //9px
//$font-size-btn-dsk:0.64rem; //9px
$font-size-small:12;
$font-size-fine:10;
$font-size-icon:1.57rem; //22px

$typ-ltr-space-default: 0.075em;
// $typ-ltr-space-reg: 0.1em;
// $typ-ltr-space-med: 0.15em;
// $typ-ltr-space-bold: 0.18em;
// $typ-ltr-space-black: 0.2em;


$typ-line-ht-default: 1.15em;
// $typ-line-ht-tight: 1.2em;
// $typ-line-ht-spacious: 1.2em;
// $typ-line-ht-list: 1.2rem;

$typ-lnk-deco-default: none;

/* ------------ Media Queries --------------*/
/*-------------------------------------------*/
$landscape-min-width: 980px;


// Breakpoints map by boundries ala bootsrap
//(  sm: 576px, md: 768px, lg: 992px, xl: 1200px)
// @type Map

/* $breakpoints: (
  'xs-v-sm': (max-width: 576px),
  'sm-v-md': (min-width: 768px),
  'md-v-lg': (max-width: 992px),
  'lg-v-xl': (min-width: 1200px)
); */
	
// Breakpoints map by boundries ala bootsrap
$breakpoints: (
  'iphone-4-max': (max-height: 480px) and (max-width: 320px),
  'iphone-5-min': (min-width: 318px),
  'iphone-5-max': (max-width: 320px),
  'iphone-6-min': (min-width: 360px),
  'iphone-6-max': (max-width: 375px),
  'iphone-6-plus-min': (min-width: 410px),
  'iphone-6-plus-max': (max-width: 414px),
  'ipad-min': (min-width: 760px),
  'ipad-max': (max-width: 770px),
  'ipad-pro-min': (min-width: 992px),
  'ipad-pro-max': (max-width: 1028px),
  'air-min': (min-height: 760px),
  'air-max': (max-height: 880px),
  'macbook-min': (min-height: 890px),
  'macbook-max': (max-height: 920px),
  'portrait': ( only screen and (max-width: #{$landscape-min-width} -1) ),
  'landscape': ( only screen and (min-width: #{$landscape-min-width}) )
);


/* ------------ Bsse Hue Values ----------------*/
/*----------------------------------------------*/
// Note: Not for use outsde this file.  Names from http://name-of-color.com/

$hue-white: rgba(255, 255, 255, 1.0);
$hue-black: rgba(0, 0, 0, 1.0);

/* --- shades of grey --- */
$hue-stardust-grey: rgba(233, 233, 233, 1.0);   // #e9e9e9
$hue-delta-grey: rgba(163, 163, 163, 1.0); // #a3a3a3
$hue-mine-shaft: rgba(50, 50, 50, 0);  // #323232

/* ---- cool colors --- */
$hue-lightsteelblue: rgba(176, 196, 222, 1.0); //BOC4DE
$hue-green: rgba(0, 255, 0, 1.0); //BOC4DE

/* --- warm colors ---- */
$hue-vermillion: rgba(89, 26, 20, 1.0); //e34234
$hue-red: rgba(199, 0, 57, 1.0);


/* ---------Functional Color Variables -----------*/
/*------------------------------------------------*/
// Note these are to be used globaly outside of this style sheet.


/* ----- Background Colors ----- */
$color-bg-default: $hue-white;
$color-bg-nav: $hue-green;
$color-bg-action: $hue-vermillion;
$color-bg-callout: $hue-stardust-grey;

/* --------- Fill Colors --------- */
// $color-fill-btn-default:
// $color-fill-btn-affirm:
// $color-fill-btn-deny: 
// $color-fill-border-default: $hue-delta-grey;
$color-fill-border-warn: $hue-red;

/* --------- Text Colors ---------- */
$color-txt-default: $hue-mine-shaft;
$color-txt-subdued: $hue-delta-grey;
// $color-txt-semi-subdued: 
$color-txt-action: $hue-vermillion;
$color-txt-header-def: $hue-mine-shaft;
// $color-txt-header-saturated: 
$color-txt-header-hero: $hue-vermillion;
//$color-txt-subhead-def: 
$color-txt-menu-item: $hue-delta-grey;
$color-txt-menu-item-active: $hue-white;
// $color-txt-menu-item-disabled: 
// $color-txt-label: 
// $color-txt-label-subdued: 
// $color-txt-disclaimer: 
$color-txt-placeholder: $hue-delta-grey;
// $color-txt-placeholder-faded: 
$color-txt-hint: $hue-delta-grey;
$color-txt-warn: $hue-red;
$color-txt-error: $hue-red;
$color-txt-success: $hue-green;
$color-txt-btn-default: $hue-white;
// $color-txt-btn-overlay: 
// $color-txt-count:

/* ------- Form Specific Colors ------- */
$color-input-bg-neutral: $hue-delta-grey;
//$color-input-bg-translucent: 
$color-input-border-neutral: $hue-delta-grey;
$color-input-border-action: $hue-red;
$color-border-err: $hue-red;
$color-input-label-: $hue-mine-shaft;
$color-input-bg-neutral: $hue-white;
$color-input-bg-action: $hue-white;


/* -------------- Dimensions ----------------*/
/*-------------------------------------------*/

$dim-gutter-default:0.57rem; // 8px
$dim-padding-default:0.42rem;// 6px
$dim-margin-default:0.71rem; // 10px
$dim-spacing-grid:0.71rem;   // 5/10/11px
$dim-spacing-float:0.64rem;  //9px
//$dim-spacing-p: 0.71rem; // 10px
//s$dim-spacing-section: 2*$dim-margin-default //21px

$dim-border-radius-default:  0.1875rem;
// $dim-border-radius-enhanced: 0.3125rem;
// $dim-border-radius-extreme:  0.5rem;

$dim-border-width-default:1px;
$dim-border-width-heavy:0.2rem;


$dim-header-ht-default:3rem;
$dim-header-wd-default: 100%;

$dim-nav-ht-default:3rem;
$dim-nav-wd-default:100%;

$dim-hero-ht-default:3rem;
$dim-hero-wd-default:100%;

// $dim-asside-ht-default:3rem;
// $dim-asside-wd-default:100%;

$dim-callout-ht-default:3rem;
$dim-callout-wd-default:100%;

$dim-isi-ht-default:3rem;
$dim-isi-wd-default:3rem;

$dim-footer-ht-default:3rem;
$dim-footer-wd-default:3rem;

$dim-btn-ht-default:3rem;
$dim-btn-wd-default: 13rem;

$dim-input-ht-default:3rem;
$dim-input-wd-default: 13rem;