Sass

_mixins.scss

// Box Model
// ========================================================================== 

@mixin border-box {
  html {
	box-sizing: border-box;
  }
  *, *:before, *:after {
	box-sizing: inherit;
  }
}

// Clearfix
// ========================================================================== 

@mixin clearfix() {
  &:before,
  &:after {
	  content: "";
	  display: table;
  }
  &:after {
	  clear: both;
  }
}

%clearfix {
  @include clearfix;
} 

// Breakpoints
// ========================================================================== 

$S:     768px;   		// Mobile
$M:     992px;   		// Tablet
$L:     1200px;  		// Desktop

// media queries

@mixin MQ($canvas) {
  @if $canvas == S {
   @media only screen and (min-width: $S) { @content; } 
  }
  @else if $canvas == M {
   @media only screen and (min-width: $M) { @content; } 
  }
  @else if $canvas == L {
   @media only screen and (min-width: $L) { @content; } 
  }
}

// Center vertically and/or horizontally an absolute positioned element
// ========================================================================== 

@mixin center($xy:xy) {
  position: absolute;
  @if $xy == xy {
	left: 50%;
	top: 50%;
	bottom: auto;
	right: auto;
	transform: translateX(-50%) translateY(-50%);
  }
  @else if $xy == x {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
  }
  @else if $xy == y {
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
  }
}

// Rem fallback - credits: http://zerosixthree.se/
// ========================================================================== 

@function calculateRem($size) {
	$remSize: $size / 14px;
	@return $remSize * 1rem;
}

@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}

// Size
// ========================================================================== 

@mixin size($width, $height: $width) {
	  width: $width;
	  height: $height;
}

// Figure
// ========================================================================== 

@mixin triangle($direction, $size: 8px, $color: #222){
  content: '';
  display: block;
  position: absolute;
  height: 0; width: 0;
  @if ($direction == 'up'){
	border-bottom: $size solid $color;
	border-left: $size solid transparent;
	border-right: $size solid transparent;
  }
  @else if ($direction == 'down'){
	border-top: $size solid $color;
	border-left: $size solid transparent;
	border-right: $size solid transparent;
  }
  @else if ($direction == 'left'){
	border-top: $size solid transparent;
	border-bottom: $size solid transparent;
	border-right: $size solid $color;
  }
  @else if ($direction == 'right'){
	border-top: $size solid transparent;
	border-bottom: $size solid transparent;
	border-left: $size solid $color;
  }
}

// Alert
// --------------------------------------------------------------------------
@mixin alerted() {
  @-webkit-keyframes alertMe {
	from {
	  border-width: 3px;
	  border-color: gold;
	}
	to {
	  border-width: 0;
	  border-color: rgba(gold, .1);
	}
  }
  @-moz-keyframes alertMe {
	from {
	  border-width: 3px;
	  border-color: gold;
	}
	to {
	  border-width: 0;
	  border-color: rgba(gold, .1);
	}
  }
  @keyframes alertMe {
	from {
	  border-width: 3px;
	  border-color: gold;
	}
	to {
	  border-width: 0;
	  border-color: rgba(gold, .1);
	}
  }

  &:before {
	content: '';
	position: absolute;
	top: 6px; right: 6px;
	height: 8px; width: 8px;
	border-radius: 10px;
	background-color: gold;
  }
  &:after {
	content: '';
	position: absolute;
	top: 0; right: 0;
	height: 20px; width: 20px;
	border-radius: 20px;
	background-color: transparent;
	border: solid gold;
	border-width: 2px; // animates
	box-sizing: border-box;
	@include animation($name: alertMe);
  }
}

// HUI Tooltips
// ========================================================================== 

@mixin hui_tooltip($content: attr(data-tooltip), $direction: top) {
  position: relative;
  &:before, &:after {
	display: none;
	z-index: 98;
  }
  &:hover {
	&:after { // for text bubble
	  content: $content;
	  display: block;
	  position: absolute;
	  padding: 3px 6px;
	  font-size: 12px;
	  white-space: nowrap;
	  color: #fff;
	  text-shadow: 1px 1px #000;
	  background-color: #222;
	}
	@if ($direction == 'top'){
	  &:before {
		@include triangle(down, 6px, #222);
		top: -2px; margin-top: 0;
		left: 47%;
	  }
	  &:after {
		top: -28px;
		left: 47%; margin-left: -20px;
	  }
	}
	@else if ($direction == 'bottom'){
	  &:before {
		@include triangle(up, 6px, #222);
		top: auto; margin-top: 0;
		bottom: -2px;
		left: 47%;
	  }
	  &:after {
		bottom: -28px;
		left: 47%; margin-left: -20px;
	  }
	}
  }
}

// Placeholder
// ========================================================================== 

@mixin placeholder-color($color: #a1a1a1){
  &.placeholder{
	color: $color
  }

  &:-moz-placeholder{
	color: $color
  }
	
  &::-webkit-input-placeholder{
	color: $color
  }

  &:-ms-input-placeholder{
	color: $color
  }
}

// Currency
// ========================================================================== 

%currency {
  position: relative;
  &:before {
	content: '$';
	position: relative;
	left: 0;
  }
}
.USD %currency:before { content: '$'; }
.EUR %currency:before { content: '\20AC'; } // must escape the html entities for each currency symbol
.ILS %currency:before { content: '\20AA'; }
.GBP %currency:before { content: '\00A3'; }

// TruncateText
// ========================================================================== 

@mixin truncateText($overflow: ellipsis){
  overflow: hidden;
  white-space: nowrap;
  text-overflow: $overflow; // values are: clip, ellipsis, or a string
}

// FontFace
// ========================================================================== 

@mixin ff($fonts...) {
	@each $font in $fonts {
		@font-face {
			font-family: $font;
			src: url('../fonts/#{$font}.eot') format('eot'),
				 url('../fonts/#{$font}.woff') format('woff'),
				 url('../fonts/#{$font}.svg') format('svg'),
				 url('../fonts/#{$font}.ttf')  format('truetype');
		}
	}		
}

@mixin font-smoothing {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

_vars.scss

// body variables
// ========================================================/
$font-family-base:	$primary-font;



// Colors
// ========================================================/

$base-color:        #fff;
$accent-color:      #fff;
$white:          	rgba(255, 255, 255, 0.75);

// colors

$color-1: #fff;
$color-2: #fff;
$color-3: #fff;


// Sizes
// ========================================================/


// CONSTANTS ------- don't delete this part
// ++++++++++++++++++++++++++

// Flat UI Colors
// ========================================================/

$turquoise: 		#1abc9c;
$emerald:			#2ecc71;
$peter_river:		#3498db;
$amethyst:			#9b59b6;
$wet_asphalt:		#34495e;
$green_sea:			#16a085;
$nephritis:			#27ae60;
$belize_hole:		#2980b9;
$wisteria:			#8e44ad;
$midnight_blue:		#2c3e50;
$sun_flower:		#f1c40f;
$carrot:			#e67e22;
$alizarin:			#e74c3c;
$clouds:			#ecf0f1;
$concrete:			#95a5a6;
$orange:			#f39c12;
$pumpkin:			#d35400;
$pomegranate:		#c0392b;
$silver:			#bdc3c7;
$asbestos:			#7f8c8d;

// Flat UI Colors
// ========================================================/

reset.scss

// http://meyerweb.com/eric/tools/css/reset/
// v2.0 | 20110126
// License: none (public domain)
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, main {
  display: block;
}
html, body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
textarea {
  resize: vertical;
}
a {
  text-decoration: none;
  color: inherit;
}