diff --git a/scss/fonts.scss b/scss/fonts.scss
new file mode 100644
index 0000000..ef94f83
--- /dev/null
+++ b/scss/fonts.scss
@@ -0,0 +1,103 @@
+@font-face {
+    font-family: 'social-share-kit';
+    src: url('#{$ssk-font-path}/social-share-kit.eot');
+    src: url('#{$ssk-font-path}/social-share-kit.eot?#iefix') format('embedded-opentype'),
+    url('#{$ssk-font-path}/social-share-kit.woff') format('woff'),
+    url('#{$ssk-font-path}/social-share-kit.ttf') format('truetype'),
+    url('#{$ssk-font-path}/social-share-kit.svg#social-share-kit') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+.ssk:before {
+    display: inline-block;
+    font-family: "social-share-kit" !important;
+    font-style: normal !important;
+    font-weight: normal !important;
+    font-variant: normal !important;
+    text-transform: none !important;
+    speak: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+.ssk-facebook:before {
+    content: "a";
+    text-indent: 4px;
+    margin-right: -4px;
+}
+.ssk-twitter:before {
+    content: "b";
+}
+.ssk-google-plus:before {
+    content: "v";
+}
+.ssk-google-plus-old:before {
+    content: "c";
+}
+.ssk-email:before {
+    content: "d";
+    top: -1px;
+    position: relative;
+}
+.ssk-pinterest:before {
+    content: "e";
+    transform: scale(.9);
+}
+.ssk-tumblr:before {
+    content: "f";
+}
+.ssk-linkedin:before {
+    content: "g";
+}
+.ssk-github:before {
+    content: "h";
+}
+.ssk-vk:before {
+    content: "i";
+}
+.ssk-instagram:before {
+    content: "j";
+}
+.ssk-amazon:before {
+    content: "k";
+}
+.ssk-skype:before {
+    content: "s";
+}
+.ssk-youtube:before {
+    content: "x";
+}
+.ssk-vimeo:before {
+    content: "u";
+}
+.ssk-ebay:before {
+    content: "p";
+}
+.ssk-apple:before {
+    content: "l";
+}
+.ssk-behance:before {
+    content: "q";
+}
+.ssk-dribble:before {
+    content: "n";
+}
+.ssk-android:before {
+    content: "o";
+}
+.ssk-whatsapp:before {
+    content: "m";
+}
+.ssk-reddit:before {
+    content: "r";
+}
+.ssk-reddit2:before {
+    content: "t";
+}
+.ssk-link:before {
+    content: "w";
+}
+.ssk-buffer:before {
+    content: "\79";
+    transform: scale(.85);
+}
diff --git a/scss/icons.scss b/scss/icons.scss
new file mode 100644
index 0000000..fd77300
--- /dev/null
+++ b/scss/icons.scss
@@ -0,0 +1,335 @@
+.ssk {
+    $padding-base: 7px;
+    $font-size-base: 22px;
+    background-color: $gray;
+    color: white;
+    display: inline-block;
+    font-size: $font-size-base;
+    line-height: 1px;
+    margin-right: 2px;
+    margin-bottom: 2px;
+    padding: $padding-base;
+    text-align: center;
+    text-decoration: none;
+    @include transition(background-color 0.1s);
+
+    // Sizing;
+    &:before, .#{$glyphicon-css-prefix}, .#{$fa-css-prefix} {
+        position: relative;
+        font-size: $font-size-base;
+        top: 0;
+        vertical-align: middle;
+    }
+    &.ssk-xs, .ssk-xs > & {
+        &:before, .#{$glyphicon-css-prefix}, .#{$fa-css-prefix} { font-size: $font-size-base - 7; }
+        padding: $padding-base - 3;
+    }
+    &.ssk-sm, .ssk-sm > & {
+        &:before, .#{$glyphicon-css-prefix}, .#{$fa-css-prefix} { font-size: $font-size-base - 2; }
+        padding: $padding-base - 2;
+    }
+    &.ssk-lg, .ssk-lg > & {
+        &:before, .#{$glyphicon-css-prefix}, .#{$fa-css-prefix} { font-size: $font-size-base + 6; }
+        padding: $padding-base + 2;
+    }
+    &:last-child {
+        margin-right: 0;
+    }
+    &:hover {
+        background-color: $gray-dark;
+    }
+    &:hover, &:focus {
+        color: #fff;
+        text-decoration: none;
+    }
+    // Round
+    &.ssk-round, .ssk-round & {
+        border-radius: 50%;
+        &:before {
+            text-indent: 0;
+            margin-right: 0;
+        }
+    }
+    // Round
+    &.ssk-rounded, .ssk-rounded & {
+        border-radius: 15%;
+    }
+    // Icon only
+    &.ssk-icon {
+        color: $gray;
+        padding: 2px;
+        &, &:hover {
+            background-color: transparent;
+        }
+        &:hover {
+            color: $gray-dark;
+        }
+        // Sizing
+        font-size: 24px;
+        &.ssk-xs, .ssk-xs > & {
+            font-size: 16px;
+        }
+        &.ssk-sm, .ssk-sm > & {
+            font-size: 20px;
+        }
+        &.ssk-lg, .ssk-lg > & {
+            font-size: 28px;
+        }
+    }
+    // With text
+    &.ssk-text {
+        overflow: hidden;
+        font-size: 17px;
+        line-height: normal;
+        padding-right: floor($padding-base*1.5);
+        &:before, .#{$glyphicon-css-prefix}, .#{$fa-css-prefix} {
+            margin: -$padding-base floor($padding-base*1.5) -$padding-base -$padding-base;
+            padding: $padding-base;
+            background-color: rgba(0, 0, 0, .15);
+            vertical-align: bottom;
+            text-indent: 0;
+        }
+        .ssk-block & {
+            display: block;
+            margin-right: 0;
+            text-align: left;
+        }
+        // Sizing
+        @mixin size-mixin($font-size, $p-base) {
+            font-size: $font-size;
+            padding-right: ceil($p-base*1.4);
+            &:before, .#{$glyphicon-css-prefix}, .#{$fa-css-prefix} {
+                margin: -$p-base floor($p-base*1.5) -$p-base -$p-base;
+                padding: $p-base;
+            }
+        }
+        &.ssk-xs, .ssk-xs > & {
+            @include size-mixin(12px, $padding-base - 3);
+        }
+        &.ssk-sm, .ssk-sm > & {
+            @include size-mixin(16px, $padding-base - 2);
+        }
+        &.ssk-lg, .ssk-lg > & {
+            @include size-mixin(22px, $padding-base + 2);
+        }
+    }
+}
+.ssk-group, .ssk-sticky {
+    font-size: 0;
+}
+.ssk-sticky {
+    top: 0;
+    position: fixed;
+    z-index: 2000;
+    $sticky-hover-padding: 15px;
+    .ssk {
+        @include transition(padding 0.1s ease-out);
+        margin: 0;
+    }
+    @media (min-width: $screen-sm-min) {
+        &.ssk-left, &.ssk-right {
+            .ssk {
+                display: block;
+                clear: both;
+            }
+            &.ssk-center {
+                top: 50%;
+                @include transform(translateY(-50%));
+            }
+        }
+        &.ssk-left {
+            left: 0;
+            .ssk {
+                float: left;
+                &:hover { padding-left: $sticky-hover-padding; }
+            }
+        }
+        &.ssk-right {
+            right: 0;
+            .ssk {
+                float: right;
+                &:hover { padding-right: $sticky-hover-padding; }
+            }
+        }
+    }
+    &.ssk-bottom {
+        font-size: 0;
+        top: auto;
+        bottom: 0;
+        &.ssk-center {
+            left: 50%;
+            right: auto;
+            @include transform(translateX(-50%));
+        }
+        .ssk {
+            vertical-align: bottom;
+            &:hover { padding-bottom: $sticky-hover-padding; }
+        }
+    }
+    &.ssk-round {
+        &.ssk-xs .ssk:hover {
+            padding: round($sticky-hover-padding / 2);
+        }
+        &.ssk-sm .ssk:hover {
+            padding: round($sticky-hover-padding / 1.6);
+        }
+        .ssk:hover {
+            padding: round($sticky-hover-padding / 1.4);
+        }
+        &.ssk-lg .ssk:hover {
+            padding: round($sticky-hover-padding / 1.2);
+        }
+    }
+    @media (max-width: $screen-xs-max) {
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: auto;
+        width: 100%;
+        display: flex !important;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        &.ssk-sticky-hide-xs {
+            display: none !important;
+        }
+        .ssk {
+            flex: 1;
+            width: auto;
+            .ssk-num {
+                display: none;
+            }
+            /*.ssk-num {
+                width: 100%;
+                display: block;
+                background-color: fadeout(#fff, 10%);
+                border-radius: 0;
+            }*/
+        }
+    }
+}
+.ssk-count {
+    padding-top: 20px;
+    .ssk {
+        position: relative;
+    }
+    .ssk-num {
+        border-radius: 4px;
+        color: lighten($gray, 10%);
+        background-color: rgba(50, 50, 50, .03);
+        display: block;
+        font-size: 12px;
+        left: 0;
+        line-height: 20px;
+        position: absolute;
+        right: 0;
+        text-align: center;
+        top: -20px;
+    }
+    &.ssk-sticky {
+        @media (min-width: $screen-sm-min) {
+            padding-top: 0;
+            &.ssk-left, &.ssk-right {
+                .ssk-num {
+                    top: 20%;
+                    background-color: transparent;
+                }
+            }
+            &.ssk-left {
+                .ssk-num {
+                    left: 100%;
+                    margin-left: 5px;
+                }
+            }
+            &.ssk-right {
+                .ssk-num {
+                    right: 115%;
+                    margin-left: -100%;
+                    text-align: right;
+                }
+            }
+        }
+    }
+}
+
+// Mixin for network icon
+@mixin make-ssk-icon($name, $full: true) {
+    $cls_name: unquote(".ssk-#{$name}");
+    $color: map-get($social-colors, $name);
+    $color-darken: darken($color, 10%);
+    #{$cls_name} {
+        background-color: $color;
+        &:hover {
+            // This must be after ".ssk-grayscale > &"
+            background-color: $color-darken;
+        }
+        @if ($full == true) {
+            .ssk-grayscale > & {
+                background-color: $gray;
+            }
+
+            &:hover {
+                background-color: $color-darken;
+                .ssk-grayscale > & {
+                    background-color: $color;
+                }
+                @if ($name == 'email') {
+                    .ssk-grayscale > & {
+                        background-color: $color-darken;
+                    }
+                }
+            }
+
+            &.ssk-icon {
+                color: $color;
+                &:hover {
+                    color: $color-darken;
+                }
+                @if ($name == 'facebook') {
+                    &:before {
+                        // Reset facebook special indent
+                        text-indent: 0;
+                        margin-right: 0;
+                    }
+                }
+            }
+        }
+    }
+}
+// Mixin for extra color
+@mixin make-ssk-color($name) {
+    @include make-ssk-icon($name, false);
+}
+// Network icons
+@include make-ssk-icon('facebook');
+@include make-ssk-icon('twitter');
+@include make-ssk-icon('google-plus');
+@include make-ssk-icon('pinterest');
+@include make-ssk-icon('tumblr');
+@include make-ssk-icon('email');
+@include make-ssk-icon('vk');
+@include make-ssk-icon('linkedin');
+@include make-ssk-icon('whatsapp');
+@include make-ssk-icon('reddit');
+@include make-ssk-icon('reddit2');
+@include make-ssk-icon('buffer');
+
+// Extra colors
+// note: removed turquoise, orange, silver, and black because those vars are reserved
+@include make-ssk-color('emerald');
+@include make-ssk-color('peter-river');
+@include make-ssk-color('belize-hole');
+@include make-ssk-color('amethyst');
+@include make-ssk-color('wisteria');
+@include make-ssk-color('wet-asphalt');
+@include make-ssk-color('midnight-blue');
+@include make-ssk-color('green-sea');
+@include make-ssk-color('nephritis');
+@include make-ssk-color('sunflower');
+@include make-ssk-color('carrot');
+@include make-ssk-color('pumpkin');
+@include make-ssk-color('alizarin');
+@include make-ssk-color('pomegranate');
+@include make-ssk-color('clouds');
+@include make-ssk-color('concrete');
+@include make-ssk-color('asbestos');
+@include make-ssk-color('dark-gray');
diff --git a/scss/mixins.scss b/scss/mixins.scss
new file mode 100644
index 0000000..64e01a9
--- /dev/null
+++ b/scss/mixins.scss
@@ -0,0 +1,15 @@
+// Mixins
+@mixin transition($transition) {
+    transition: $transition;
+    -webkit-transition: $transition;
+    -moz-transition: $transition;
+    -ms-transition: $transition;
+    -o-transition: $transition;
+}
+@mixin transform($string) {
+    transform: $string;
+    -webkit-transform: $string;
+    -moz-transform: $string;
+    -ms-transform: $string;
+    -o-transform: $string;
+}
diff --git a/scss/social-share-kit.scss b/scss/social-share-kit.scss
new file mode 100644
index 0000000..856e89f
--- /dev/null
+++ b/scss/social-share-kit.scss
@@ -0,0 +1,11 @@
+/*!
+ * Social Share Kit v1.0.7 (http://socialsharekit.com)
+ * Copyright 2015 Social Share Kit / Kaspars Sprogis.
+ * Licensed under Creative Commons Attribution-NonCommercial 3.0 license:
+ * https://github.com/darklow/social-share-kit/blob/master/LICENSE
+ * ---
+ */
+@import 'variables';
+@import 'mixins';
+@import 'fonts';
+@import 'icons';
diff --git a/scss/variables.scss b/scss/variables.scss
new file mode 100644
index 0000000..a49d963
--- /dev/null
+++ b/scss/variables.scss
@@ -0,0 +1,50 @@
+// Variables
+$ssk-font-path:        "/static/node_modules/social-share-kit/dist/fonts/" !default;
+//Font Awesome 4 compatibility
+$fa-css-prefix:        fa;
+//Glyphicons compatibility
+$glyphicon-css-prefix: glyphicon;
+
+// Set LESS Bootstrap variables only if needed
+$gray: #757575;
+$gray-dark: darken($gray, 20%);
+$screen-sm: 768px;
+$screen-sm-min: $screen-sm;
+$screen-xs-max: ($screen-sm-min - 1);
+
+// Social colors
+$social-colors: (
+    facebook: #3B5998,
+    twitter: #1DA1F2,
+    google-plus: #EA4335,
+    pinterest: #BD081C,
+    tumblr: #395773,
+    email: $gray,
+    vk: #54769a,
+    linkedin: #1c87bd,
+    whatsapp: #34AF23,
+    reddit: #5f99cf,
+    reddit2: #5f99cf,
+    buffer: #323B43,
+
+    // Extra colors (See: http://flatuicolors.com/)
+    emerald: #2ecc71,
+    peter-river: #3498db,
+    belize-hole: #2980b9,
+    amethyst: #9b59b6,
+    wisteria: #8e44ad,
+    wet-asphalt: #34495e,
+    midnight-blue: #2c3e50,
+    green-sea: #16a085,
+    nephritis: #27ae60,
+    sunflower: #f1c40f,
+    carrot: #e67e22,
+    alizarin: #e74c3c,
+    pumpkin: #d35400,
+    pomegranate: #c0392b,
+    clouds: darken(#ecf0f1, 10),
+    concrete: #95a5a6,
+    asbestos: #7f8c8d,
+    dark-gray: #555,
+    black: #333
+)