This will help in future designs of my client's websites

style-template.scss

/* ==================================================
    Color Variables
    _bovariables.scss
================================================== */

// Cool
$aqua:  #7FDBFF;
$blue:  #0074D9;
$navy:  #001F3F;
$teal:  #39CCCC;
$green: #2ECC40;
$olive: #3D9970;
$lime:  #01FF70;

// Warm
$yellow:  #FFDC00;
$orange:  #FF851B;
$red:     #FF4136;
$fuchsia: #F012BE;
$purple:  #B10DC9;
$maroon:  #85144B;

// Gray Scale
$white:  #FFFFFF;
$silver: #DDDDDD;
$gray:   #AAAAAA;
$black:  #111111;

//personal collection
$color-bg-code:#333;
$color-text-code-green:#17ff0b;

$light-gray-section-bg:#f0f2f1;
$light-bg: #3c4858;
$light-bg2:#f5f6f7;

//social media
$color-facebook: #3b5998;
$color-twitter: #00b6f1;
$color-instagram: #c32aa3;
$color-dribbble: #ea4c89;
$color-flickr: #ff0084;
$color-googleplus: #dd4b39;
$color-linkedin: #007bb6;
$color-pinterest: #cb2027;
$color-tumblr: #32506d;
$color-vimeo: #1ab7ea;
$color-vine: #00bf8f;
$color-youtube: #bb0000;


/* ==================================================
       SKINS 
       - Backgrounds
       - Colors
       - Border colors
       - SVG fills
       - SVG Strokes

       _skins.scss
================================================== */

/* Backgrounds */

.bg-navy {    background-color: $navy; }
.bg-blue {    background-color: $blue; }
.bg-aqua {    background-color: $aqua; }
.bg-teal {    background-color: $teal; }
.bg-olive {   background-color: $olive; }
.bg-green {   background-color: $green; }
.bg-lime {    background-color: $lime; }
.bg-yellow {  background-color: $yellow; }
.bg-orange {  background-color: $orange; }
.bg-red {     background-color: $red; }
.bg-fuchsia { background-color: $fuchsia; }
.bg-purple {  background-color: $purple; }
.bg-maroon {  background-color: $maroon; }
.bg-white {   background-color: $white; }
.bg-gray {    background-color: $gray; }
.bg-silver {  background-color: $silver; }
.bg-black {   background-color: $black; }


/* Colors */

.navy {       color: $navy; }
.blue {       color: $blue; }
.aqua {       color: $aqua; }
.teal {       color: $teal; }
.olive {      color: $olive; }
.green {      color: $green; }
.lime {       color: $lime; }
.yellow {     color: $yellow; }
.orange {     color: $orange; }
.red {        color: $red; }
.fuchsia {    color: $fuchsia; }
.purple {     color: $purple; }
.maroon {     color: $maroon; }
.white {      color: $white; }
.silver {     color: $silver; }
.gray {       color: $gray; }
.black {      color: $black; }


/* Border colors 
   Use with another border utility that sets border-width and style 
   i.e .border { border-width: 1px; border-style: solid; }     
*/

.border--navy {    border-color: $navy; }
.border--blue {    border-color: $blue; }
.border--aqua {    border-color: $aqua; }
.border--teal {    border-color: $teal; }
.border--olive {   border-color: $olive; }
.border--green {   border-color: $green; }
.border--lime {    border-color: $lime; }
.border--yellow {  border-color: $yellow; }
.border--orange {  border-color: $orange; }
.border--red {     border-color: $red; }
.border--fuchsia { border-color: $fuchsia; }
.border--purple {  border-color: $purple; }
.border--maroon {  border-color: $maroon; }
.border--white {   border-color: $white; }
.border--gray {    border-color: $gray; }
.border--silver {  border-color: $silver; }
.border--black {   border-color: $black; }


/* Fills for SVG */

.fill-navy {    fill: $navy; }
.fill-blue {    fill: $blue; }
.fill-aqua {    fill: $aqua; }
.fill-teal {    fill: $teal; }
.fill-olive {   fill: $olive; }
.fill-green {   fill: $green; }
.fill-lime {    fill: $lime; }
.fill-yellow {  fill: $yellow; }
.fill-orange {  fill: $orange; }
.fill-red {     fill: $red; }
.fill-fuchsia { fill: $fuchsia; }
.fill-purple {  fill: $purple; }
.fill-maroon {  fill: $maroon; }
.fill-white {   fill: $white; }
.fill-gray {    fill: $gray; }
.fill-silver {  fill: $silver; }
.fill-black {   fill: $black; }

/* Strokes for SVG */

.stroke-navy {    stroke: $navy; }
.stroke-blue {    stroke: $blue; }
.stroke-aqua {    stroke: $aqua; }
.stroke-teal {    stroke: $teal; }
.stroke-olive {   stroke: $olive; }
.stroke-green {   stroke: $green; }
.stroke-lime {    stroke: $lime; }
.stroke-yellow {  stroke: $yellow; }
.stroke-orange {  stroke: $orange; }
.stroke-red {     stroke: $red; }
.stroke-fuchsia { stroke: $fuchsia; }
.stroke-purple {  stroke: $purple; }
.stroke-maroon {  stroke: $maroon; }
.stroke-white {   stroke: $white; }
.stroke-gray {    stroke: $gray; }
.stroke-silver {  stroke: $silver; }
.stroke-black {   stroke: $black; }


/* ==================================================
	Fonts
    _bovariables.scss
================================================== */

$font-roboto: 'Roboto', Helvetica, sans-serif;
$font-raleway: 'Raleway', Helvetica, sans-serif;
$font-makintosh: Droid Sans Mono,monospace;
$font-lucida:"Lucida Console",Monaco,monospace;

/* 
	<!-- Google Fonts -->
	<link href="https://fonts.googleapis.com/css?family=Raleway:400,500,700|Roboto:400,900" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700|Roboto:400,900" rel="stylesheet">
*/

@font-face
{

    //font-family:...;
    //src: url('../fonts/...otf'); 

    @fa-font-path: '../fonts/FontAwesome.otf';
}


/* ==================================================
    FONT AWESOME SOCIAL MEDIA
================================================== */
.fa:hover
{
    -webkit-transition: $transition-short;
       -moz-transition: $transition-short;
         -o-transition: $transition-short;
            transition: $transition-short;
}
.fa-facebook:hover
{
    color: #3b5998;
    background-color: #fff;
}

.fa-twitter:hover
{
    color: #00b6f1;
    background-color: #fff;
}

.fa-youtube:hover
{
    color: #f00;
    background-color: #fff;
}

.fa-instagram:hover
{
    color: #c32aa3;
    background-color: #fff;
}


/* ==================================================
	Shadows
    _bovariables.scss
================================================== */

$box-shadow-darker:0 16px 40px 8px rgba(0,0,0,.85);
$box-shadow:0 16px 40px 8px rgba(0,0,0,.33);
$box-shadow-light:16px 16px 16px rgba(0,0,0,.16);


/* ==================================================
	Rotation
    _bovariables.scss
================================================== */

$rotate-3d:rotate(3deg);
$rotate-6d:rotate(6deg);
$rotate-9d:rotate(9deg);

$rotate-30d:rotate(30deg);
$rotate-60d:rotate(60deg);
$rotate-90d:rotate(90deg);
$rotate-120d:rotate(120deg);
$rotate-150d:rotate(150deg);
$rotate-180d:rotate(180deg);
$rotate-210d:rotate(210deg);
$rotate-240d:rotate(240deg);
$rotate-270d:rotate(270deg);
$rotate-300d:rotate(300deg);
$rotate-330d:rotate(330deg);
$rotate-360d:rotate(360deg);

$rotate-n3d:rotate(-3deg);
$rotate-n6d:rotate(-6deg);
$rotate-n9d:rotate(-9deg);

$rotate-n30d:rotate(-30deg);
$rotate-n60d:rotate(-60deg);
$rotate-n90d:rotate(-90deg);
$rotate-n120d:rotate(-120deg);
$rotate-n150d:rotate(-150deg);
$rotate-n180d:rotate(-180deg);
$rotate-n210d:rotate(-210deg);
$rotate-n240d:rotate(-240deg);
$rotate-n270d:rotate(-270deg);
$rotate-n300d:rotate(-300deg);
$rotate-n330d:rotate(-330deg);
$rotate-n360d:rotate(-360deg);


/* ==================================================
    Screen Sizes
    _bomixins.scss
================================================== */

// Define the breakpoints
$breakpoint-small: 600px;
$breakpoint-med-small: 960px;
$breakpoint-med: 1175px;

@mixin screen($size, $type: max, $pixels: $breakpoint-small) {
  @if $size == 'small' {
    @media screen and ($type + -width: $breakpoint-small) {
        @content;
    }
  }
  @else if $size == 'med-small' {
    @media screen and ($type + -width: $breakpoint-med-small) {
        @content;
    }
  }
  @else if $size == 'med' {
    @media screen and ($type + -width: $breakpoint-med) {
        @content;
    }
  }
 @else if $size == 'large' {
    @media screen and ($type + -width: $breakpoint-med) {
        @content;
    }
  }
  @else if $size == 'custom' {
    @media screen and ($type + -width: $pixels + px) {
     @content;
    }
  }
  @else {
    @content;
  }
}
// Using the mixin
.foo {
  @include screen(large) {
    width: 20%;
  }
  @include screen(med) {
    width: 40%;
  }
  @include screen(med-small) {
    width: 60%;
  }
  @include screen(small) {
    width: 80%;
  }
  @include screen(custom, max, 400) {
    width: 100%;
  }
}


/* ==================================================
    Edging some images/texts
    _bomixins.scss
================================================== */

// Define vertical, horizontal, or both position
@mixin center($position) {
  position: absolute;
  
  @if $position == 'vertical' {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  @else if $position == 'horizontal' {
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translate(-50%);
  }
  @else if $position == 'both' {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}
// Using the mixin
.foo {
  @include center(both);
}
.foo-parent {
  position: relative;
}


/* ==================================================
    Font-sizes
    _bomixins.scss
================================================== */

// Define default font size
@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}
//Usage
p {
  @include font-size(14px)
}
//Output
p {
  font-size: 14px; //For unsupported browsers
  font-size: 0.8rem;
}


/* ==================================================
    Animations
    _bomixins.scss
================================================== */
//Animation mixin setup
@mixin keyframes($animation-name) {
    @-webkit-keyframes #{$animation-name} {
        @content;
    }
    @-moz-keyframes #{$animation-name} {
        @content;
    }  
    @-ms-keyframes #{$animation-name} {
        @content;
    }
    @-o-keyframes #{$animation-name} {
        @content;
    }  
    @keyframes #{$animation-name} {
        @content;
    }
}
@mixin animation($str) {
  -webkit-animation: #{$str};
  -moz-animation: #{$str};
  -ms-animation: #{$str};
  -o-animation: #{$str};
  animation: #{$str};      
}
//Usage
// Define animation name, and properties
@include keyframes(fade-out) {
  0% { opacity: 1; }
  90% { opacity: 0; }
}
// Add animation to element
.element {
  width: 100px;
  height: 100px;
  background: black;
  @include animation('fade-out 5s 3');
}


/* ==================================================
    Linear Gradients
    _bomixins.scss
================================================== */
@mixin background-gradient($start-color, $end-color, $orientation) { 
    background: $start-color;

    @if $orientation == 'vertical' {
      background: -webkit-linear-gradient(top, $start-color, $end-color);
      background: linear-gradient(to bottom, $start-color, $end-color);
    } @else if $orientation == 'horizontal' {
      background: -webkit-linear-gradient(left, $start-color, $end-color);
      background: linear-gradient(to right, $start-color, $end-color);
    } @else {
      background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color);
      background: radial-gradient(ellipse at center, $start-color, $end-color);
    }
}
 //Usage:
 //$start-color, $end-color, $orientation - vertical/horizontal/radial
 .foo {
    @include background-gradient(red, black, 'vertical');
  }
  //Output
  .foo {
    background: -webkit-linear-gradient(top, red, black);
    background: linear-gradient(to bottom, red, black);
  }


/* ==================================================
    Font files
    _bomixins.scss
================================================== */
@mixin font-face($font-name, $file-name, $weight: normal, $style: normal) { 
  @font-face {
    font-family: quote($font-name);
    src: url($file-name + '.eot');
    src: url($file-name + '.eot?#iefix')  format('embedded-opentype'),
         url($file-name + '.woff') format('woff'),
         url($file-name + '.ttf')  format('truetype'),
         url($file-name + '.svg##{$font-name}')  format('svg');
    font-weight: $weight;
    font-style: $style;
  }
 }
 //Usage
 @include font-face('gotham', '/fonts/gotham');


/* ==================================================
    Padding shortcut
    _bomixins.scss
================================================== */
//Padding mixin
@mixin padding($top, $right, $bottom, $left) {
  padding-top: $top;
  padding-right: $right;
  padding-bottom: $bottom;
  padding-left: $left;
}
//Margin mixin
@mixin margin($top, $right, $bottom, $left) {
  margin-top: $top;
  margin-right: $right;
  margin-bottom: $bottom;
  margin-left: $left;
}
//Usage definition
@include padding(top, right, bottom, left);
@include margin(top, right, bottom, left);
//Usage 1
@include padding(1px, 2px, 3px, 4px,);
@include margin(1px, 2px, 3px, 4px);
//Output 1
// padding: 1px 2px 3px 4px;
// margin: 1px 2px 3px 4px;
//Usage 2 (with null properties)
@include padding(1px, null, 3px, 4px);
@include margin(1px, 2px, null, 4px);
//Output 2
// padding-top: 1px;
// padding-bottom: 3px;
// padding-left: 4px;
// margin-top: 1px;
// margin-right: 2px;
// margin-left: 4px;



/* ==================================================

    References:
    https://medium.com/@justinbrazeau/10-useful-sass-mixins-for-automation-833cdee9d69b
    https://github.com/mrmrs/colors-sass/blob/master/sass/colors.scss
    

	Place these in front of style.scss

	@import '_variables';
	@import '_mixins';
    @import '_bovariables';


==================================================*/