diff --git a/src/components/_progress.scss b/src/components/_progress.scss
index d3562d9..4a2e175 100644
--- a/src/components/_progress.scss
+++ b/src/components/_progress.scss
@@ -1,7 +1,7 @@
 .progress {
   @include border-style(5);
   border: 2px solid $primary;
-  box-shadow: 2px 8px 4px -6px hsla(0%, 0%, 0%, 0.3);
+  box-shadow: $shadow-hover;
   height: 1.2rem;
   overflow: hidden;
   width: 100%;
@@ -19,11 +19,6 @@
     text-align: center;
     width: 0%;
 
-    @mixin striped-background($base-color) {
-      $color-dark: darken($base-color, 10%);
-      background: repeating-linear-gradient(45deg, $base-color, $base-color 0.25rem, $color-dark 0.25rem, $color-dark 0.5rem);
-    }
-
     &.striped {
       @include striped-background($primary-light);
     }
diff --git a/src/core/_config.scss b/src/core/_config.scss
index ba14b4e..d0d8ebd 100644
--- a/src/core/_config.scss
+++ b/src/core/_config.scss
@@ -78,164 +78,3 @@ $shadow-small: 10px 19px 17px -13px $shadow-color-regular !default;
 $shadow-regular: 15px 28px 25px -18px $shadow-color-regular !default;
 $shadow-large: 20px 38px 34px -26px $shadow-color-regular !default;
 $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
-
-
-// Mixins
-/**
-  Assign a border style to a component selector.
-  @param    integer
-  @default  1
-*/
-@mixin border-style($style: 1) {
-  @if $style==1 {
-    border-bottom-left-radius: 15px 255px;
-    border-bottom-right-radius: 225px 15px;
-    border-top-left-radius: 255px 15px;
-    border-top-right-radius: 15px 225px;
-  }
-  @if $style==2 {
-    border-bottom-left-radius: 185px 25px;
-    border-bottom-right-radius: 20px 205px;
-    border-top-left-radius: 125px 25px;
-    border-top-right-radius: 10px 205px;
-  }
-  @if $style==3 {
-    border-bottom-left-radius: 225px 15px;
-    border-bottom-right-radius: 15px 255px;
-    border-top-left-radius: 15px 225px;
-    border-top-right-radius: 255px 15px;
-  }
-  @if $style==4 {
-    border-bottom-left-radius: 25px 115px;
-    border-bottom-right-radius: 155px 25px;
-    border-top-left-radius: 15px 225px;
-    border-top-right-radius: 25px 150px;
-  }
-  @if $style==5 {
-    border-bottom-left-radius: 20px 115px;
-    border-bottom-right-radius: 15px 105px;
-    border-top-left-radius: 250px 15px;
-    border-top-right-radius: 25px 80px;
-  }
-  @if $style==6 {
-    border-bottom-left-radius: 15px 225px;
-    border-bottom-right-radius: 20px 205px;
-    border-top-left-radius: 28px 125px;
-    border-top-right-radius: 100px 30px;
-  }
-}
-
-/**
-  Mixin for setting responsive breakpoints
-  @param string | integer
-  @default null
-*/
-@mixin resp($max:null, $min:null) {
-  @if $max == large or $max == lg { $max: $large-screen; }
-  @if $max == medium or $max == md { $max: $medium-screen; }
-  @if $max == small or $max == sm { $max: $small-screen; }
-  @if $max == xsmall or $max == xs { $max: $xsmall-screen; }
-
-  @if ($min != null and $max != null) { @media only screen and (max-width: $max) and (min-width: $min) { @content; } }
-  @else if($max != null and $min == null) { @media only screen and (max-width: $max) { @content; } }
-  @else if($min != null and $max == null) { @media only screen and (min-width: $min) { @content; } }
-  @else { @error 'no matching size found';}
-}
-
-/**
-  Useful helper mixins
-*/
-@mixin hr-after() {
-  color: lighten($primary, 30%);
-  content: '~~~';
-  display: block;
-  font-size: 1.5rem;
-  position: relative;
-  text-align: center;
-}
-
-@mixin center-all() {
-  -webkit-align-items: center;
-  align-items: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-@mixin col-size($percent) {
-  -webkit-box-flex: 0;
-  -webkit-flex: 0 0 $percent;
-  -ms-flex: 0 0 $percent;
-  flex: 0 0 $percent;
-  max-width: $percent;
-}
-
-@mixin li-bullet($char) {
-  li::before {
-    content: $char;
-  }
-}
-
-/*
-  Add transform: translate() with browser prefixes.
-  Same syntax for translate() and translate3d()
-  To get 3D add a $z value and set 'true'
-  @param string | boolean
-  @default 0 | false
-*/
-@mixin translate($x, $y, $z: 0, $transform3d: false) {
-  @if $transform3d {
-    -webkit-transform: translate3d($x, $y, $z);
-    -ms-transform: translate3d($x, $y, $z);
-    transform: translate3d($x, $y, $z);
-  } @else {
-    -webkit-transform: translate($x, $y);
-    -ms-transform: translate($x, $y);
-    transform: translate($x, $y);
-  }
-}
-
-/*
-  Add global transition styles to selector
-  @param string
-  @default all | 235ms | ease-in-out | 0
-*/
-@mixin transition($name:all, $duration:235ms, $animation:ease-in-out, $delay: 0s) {
-  -webkit-transition: $name $duration $animation $delay;
-  -moz-transition: $name $duration $animation $delay;
-  -o-transition: $name $duration $animation $delay;
-  transition: $name $duration $animation $delay;
-}
-
-/**
-  Set the shadow type for a component
-  @param    string
-  @default  regular
-*/
-@mixin shadow($type: regular) {
-  @if $type == hover {
-    @include translate(0, 2px, 0, true);
-    box-shadow: $shadow-hover;
-  } @else if $type == small {
-    @include transition($animation: ease);
-    box-shadow: $shadow-small;
-  } @else if $type == regular {
-    @include transition($animation: ease);
-    box-shadow: $shadow-regular;
-  } @else if $type == large {
-    @include transition($animation: ease);
-    box-shadow: $shadow-large;
-  } @else {
-    @error 'wrong $type. available types: small | regular | large | hover';
-  }
-}
-
-//function for string replacement
-@function str-replace($string, $search, $replace: '') {
-  $index: str-index($string, $search);
-
-  @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
-  }
-
-  @return $string;
-}
diff --git a/src/core/_mixins.scss b/src/core/_mixins.scss
new file mode 100644
index 0000000..e752608
--- /dev/null
+++ b/src/core/_mixins.scss
@@ -0,0 +1,171 @@
+/**
+  PaperCSS Mixins
+*/
+
+/**
+  Assign a border style to a component selector.
+  @param    integer
+  @default  1
+*/
+@mixin border-style($style: 1) {
+  @if $style==1 {
+    border-bottom-left-radius: 15px 255px;
+    border-bottom-right-radius: 225px 15px;
+    border-top-left-radius: 255px 15px;
+    border-top-right-radius: 15px 225px;
+  }
+  @if $style==2 {
+    border-bottom-left-radius: 185px 25px;
+    border-bottom-right-radius: 20px 205px;
+    border-top-left-radius: 125px 25px;
+    border-top-right-radius: 10px 205px;
+  }
+  @if $style==3 {
+    border-bottom-left-radius: 225px 15px;
+    border-bottom-right-radius: 15px 255px;
+    border-top-left-radius: 15px 225px;
+    border-top-right-radius: 255px 15px;
+  }
+  @if $style==4 {
+    border-bottom-left-radius: 25px 115px;
+    border-bottom-right-radius: 155px 25px;
+    border-top-left-radius: 15px 225px;
+    border-top-right-radius: 25px 150px;
+  }
+  @if $style==5 {
+    border-bottom-left-radius: 20px 115px;
+    border-bottom-right-radius: 15px 105px;
+    border-top-left-radius: 250px 15px;
+    border-top-right-radius: 25px 80px;
+  }
+  @if $style==6 {
+    border-bottom-left-radius: 15px 225px;
+    border-bottom-right-radius: 20px 205px;
+    border-top-left-radius: 28px 125px;
+    border-top-right-radius: 100px 30px;
+  }
+}
+
+/**
+  Mixin for setting responsive breakpoints
+  @param string | integer
+  @default null
+*/
+@mixin resp($max:null, $min:null) {
+  @if $max == large or $max == lg { $max: $large-screen; }
+  @if $max == medium or $max == md { $max: $medium-screen; }
+  @if $max == small or $max == sm { $max: $small-screen; }
+  @if $max == xsmall or $max == xs { $max: $xsmall-screen; }
+
+  @if ($min != null and $max != null) { @media only screen and (max-width: $max) and (min-width: $min) { @content; } }
+  @else if($max != null and $min == null) { @media only screen and (max-width: $max) { @content; } }
+  @else if($min != null and $max == null) { @media only screen and (min-width: $min) { @content; } }
+  @else { @error 'no matching size found';}
+}
+
+/**
+  Useful helper mixins
+*/
+@mixin hr-after() {
+  color: lighten($primary, 30%);
+  content: '~~~';
+  display: block;
+  font-size: 1.5rem;
+  position: relative;
+  text-align: center;
+}
+
+@mixin center-all() {
+  -webkit-align-items: center;
+  align-items: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+@mixin col-size($percent) {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0 $percent;
+  -ms-flex: 0 0 $percent;
+  flex: 0 0 $percent;
+  max-width: $percent;
+}
+
+@mixin li-bullet($char) {
+  li::before {
+    content: $char;
+  }
+}
+
+/*
+  Add transform: translate() with browser prefixes.
+  Same syntax for translate() and translate3d()
+  To get 3D add a $z value and set 'true'
+  @param string | boolean
+  @default 0 | false
+*/
+@mixin translate($x, $y, $z: 0, $transform3d: false) {
+  @if $transform3d {
+    -webkit-transform: translate3d($x, $y, $z);
+    -ms-transform: translate3d($x, $y, $z);
+    transform: translate3d($x, $y, $z);
+  } @else {
+    -webkit-transform: translate($x, $y);
+    -ms-transform: translate($x, $y);
+    transform: translate($x, $y);
+  }
+}
+
+/*
+  Add global transition styles to selector
+  @param string
+  @default all | 235ms | ease-in-out | 0
+*/
+@mixin transition($name:all, $duration:235ms, $animation:ease-in-out, $delay: 0s) {
+  -webkit-transition: $name $duration $animation $delay;
+  -moz-transition: $name $duration $animation $delay;
+  -o-transition: $name $duration $animation $delay;
+  transition: $name $duration $animation $delay;
+}
+
+/**
+  Set the shadow type for a component
+  @param    string
+  @default  regular
+*/
+@mixin shadow($type: regular) {
+  @if $type == hover {
+    @include translate(0, 2px, 0, true);
+    box-shadow: $shadow-hover;
+  } @else if $type == small {
+    @include transition($animation: ease);
+    box-shadow: $shadow-small;
+  } @else if $type == regular {
+    @include transition($animation: ease);
+    box-shadow: $shadow-regular;
+  } @else if $type == large {
+    @include transition($animation: ease);
+    box-shadow: $shadow-large;
+  } @else {
+    @error 'wrong $type. available types: small | regular | large | hover';
+  }
+}
+
+//function for string replacement
+@function str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+/**
+  Sets a striped background on a component
+  @param    string
+*/
+@mixin striped-background($base-color) {
+  $color-dark: darken($base-color, 10%);
+  background: repeating-linear-gradient(45deg, $base-color, $base-color 0.25rem, $color-dark 0.25rem, $color-dark 0.5rem);
+}
diff --git a/src/styles.scss b/src/styles.scss
index c65f440..33db7d3 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -2,6 +2,7 @@
 
 /* PaperCSS core */
 @import 'core/config';
+@import 'core/mixins';
 @import 'core/reset';
 
 /* Layout styling */