diff --git a/src/styles.scss b/src/styles.scss
new file mode 100644
index 0000000..e1da280
--- /dev/null
+++ b/src/styles.scss
@@ -0,0 +1,140 @@
+/**
+ * Create vendor-prefixed CSS in one go, e.g.
+ *
+   `@include vendor(border-radius, 4px);`
+ *
+ */
+@mixin vendor($property, $value...){
+    -webkit-#{$property}:$value;
+       -moz-#{$property}:$value;
+        -ms-#{$property}:$value;
+         -o-#{$property}:$value;
+            #{$property}:$value;
+}
+
+:root .grid-stack-item > .ui-resizable-handle { filter: none; }
+
+.grid-stack {
+    position: relative;
+    
+    .grid-stack-item {
+        min-width: 8.33333333%;
+        position: absolute;
+        padding: 0;
+        
+        > .grid-stack-item-content,
+        > .placeholder-content {
+            margin: 0;
+            position: absolute;
+            top: 0;
+            left: 10px;
+            right: 10px;
+            bottom: 0;
+            width: auto;
+            z-index: 0 !important;
+            overflow: auto;
+        }
+        
+        > .ui-resizable-handle {
+            position: absolute;
+            font-size: 0.1px;
+            display: block;
+            -ms-touch-action: none;
+            touch-action: none;
+        }
+        
+        &.ui-resizable-disabled > .ui-resizable-handle,
+        &.ui-resizable-autohide > .ui-resizable-handle { display: none; }
+        
+        &.ui-draggable-dragging,
+        &.ui-resizable-resizing {
+            z-index: 100;
+            
+            > .grid-stack-item-content,
+            > .grid-stack-item-content {
+                box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
+                opacity: 0.8;
+            }
+        }
+        
+        > .ui-resizable-se,
+        > .ui-resizable-sw {
+            text-align: right;
+            color: gray;
+
+            padding: 2px 3px 0 0;
+            margin: 0;
+
+            font: normal normal normal 10px/1 FontAwesome;
+            font-size: inherit;
+            text-rendering: auto;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+            
+            &::before { content: "\f065"; }
+        }
+        
+        > .ui-resizable-se {
+            display: inline-block;
+            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+            @include vendor(transform, rotate(90deg));
+        }
+        
+        /** Uncomment this to show bottom-left resize handle **/
+        /*
+        > .ui-resizable-sw {
+            display: inline-block;
+            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+            @include vendor(transform, rotate(180deg));
+        }
+        */
+        
+        > .ui-resizable-nw { cursor: nw-resize; width: 20px; height: 20px; left: 10px; top: 0; }
+        > .ui-resizable-n  { cursor: n-resize;  height: 10px; top: 0; left: 25px; right: 25px; }
+        > .ui-resizable-ne { cursor: ne-resize; width: 20px; height: 20px; right: 10px; top: 0; }
+        > .ui-resizable-e  { cursor: e-resize;  width: 10px; right: 10px; top: 15px; bottom: 15px; }
+        > .ui-resizable-se { cursor: se-resize; width: 20px; height: 20px; right: 10px; bottom: 0; }
+        > .ui-resizable-s  { cursor: s-resize;  height: 10px; left: 25px; bottom: 0; right: 25px; }
+        > .ui-resizable-sw { cursor: sw-resize; width: 20px; height: 20px; left: 10px; bottom: 0; }
+        > .ui-resizable-w  { cursor: w-resize;  width: 10px; left: 10px; top: 15px; bottom: 15px; }
+        
+        /**
+         * Update grid by changing $gridstack-columns only
+         */
+        $gridstack-columns: 12;
+
+        @for $i from 1 through $gridstack-columns {
+            &[data-gs-width='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
+            &[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
+            &[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
+            &[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
+        }
+    }
+    
+    &.grid-stack-animate, 
+    &.grid-stack-animate .grid-stack-item {
+        @include vendor(transition, 'left .3s, top .3s, height .3s, width .3s');
+    }
+
+    /*Don't animate the placeholder or when dragging/resizing*/
+    &.grid-stack-animate .grid-stack-item.ui-draggable-dragging,
+    &.grid-stack-animate .grid-stack-item.ui-resizable-resizing,
+    &.grid-stack-animate .grid-stack-item.grid-stack-placeholder{
+        @include vendor(transition, 'left .0s, top .0s, height .0s, width .0s');
+    }
+}
+
+
+@media (max-width: 768px) {
+    .grid-stack-item {
+        position: relative !important;
+        width: auto !important;
+        left: 0 !important;
+        top: auto !important;
+        margin-bottom: 20px;
+        
+        .ui-resizable-handle { display: none; }
+    }
+
+    .grid-stack { height: auto !important; }
+}