diff --git a/dist/sass/mixins/font.sass b/dist/sass/mixins/font.sass
new file mode 100644
index 0000000..33c4416
--- /dev/null
+++ b/dist/sass/mixins/font.sass
@@ -0,0 +1,5 @@
+=font-face($fontname, $fontpath)
+  font-family: $fontname
+  src: url($fontpath, 'eot', 'embedded-opentype', '?#iefix'), url($fontpath, 'woff', 'woff'), url($fontpath, 'ttf', 'truetype'), url($fontpath, 'svg', 'esvg', '?#' + $fontname)
+  font-style: normal
+  font-weight: normal
diff --git a/dist/sass/mixins/responsive.sass b/dist/sass/mixins/responsive.sass
new file mode 100644
index 0000000..e0d29aa
--- /dev/null
+++ b/dist/sass/mixins/responsive.sass
@@ -0,0 +1,36 @@
+$break-small: 480px
+$break-medium: 768px
+$break-large: 980px
+$break-x-large: 1200px
+
+=screen($size)
+  @if $size == big-phone-up
+    @media only screen and (min-width: $break-small)
+      @content
+  @if $size == tablet-up
+    @media only screen and (min-width: $break-medium)
+      @content
+  @else if $size == desktop-up
+    @media only screen and (min-width: $break-large)
+      @content
+  @else if $size == big-desktop
+    @media only screen and (min-width: $break-x-large)
+      @content
+  @else if $size == phone-only
+    @media only screen and (max-width: $break-medium - 1)
+      @content
+  @else if $size == small-phone-only
+    @media only screen and (max-width: $break-small - 1)
+      @content
+  @else if $size == big-phone-only
+    @media only screen and (min-width: $break-small) and (max-width: $break-medium - 1)
+      @content
+  @else if $size == tablet-only
+    @media only screen and (min-width: $break-medium) and (max-width: $break-large - 1)
+      @content
+  @else if $size == desktop-only
+    @media only screen and (min-width: $break-large) and (max-width: $break-x-large - 1)
+      @content
+  @else if $size == print
+    @media print
+      @content