From 8cb3098d00b5c787f34ddb0b596f6b0fd8b1471e Mon Sep 17 00:00:00 2001
From: Pavel Reznikov <pashka.reznikov@gmail.com>
Date: Thu, 5 Mar 2015 23:06:20 -0800
Subject: [PATCH] build css from scss

---
 dist/gridstack.min.css |   2 +-
 src/gridstack.css      | 495 +++++++++++++++++++++++++----------------
 src/gridstack.scss     |  74 +++---
 3 files changed, 344 insertions(+), 227 deletions(-)

diff --git a/dist/gridstack.min.css b/dist/gridstack.min.css
index ecaf2b0..c96367d 100644
--- a/dist/gridstack.min.css
+++ b/dist/gridstack.min.css
@@ -1 +1 @@
-.grid-stack{position:relative}.grid-stack-item{position:absolute;padding:0}.grid-stack-item>.grid-stack-item-content,.grid-stack-item>.placeholder-content{margin:0;position:absolute;top:0;left:10px;right:10px;bottom:0;width:auto;z-index:0 !important;overflow:auto}.grid-stack-placeholder>.placeholder-content{border:1px dashed lightgray}.grid-stack-item.ui-draggable-dragging,.grid-stack-item.ui-resizable-resizing{z-index:100}.grid-stack-item.ui-draggable-dragging>.grid-stack-item-content,.grid-stack-item.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px rgba(0,0,0,0.2);opacity:.8}:root .grid-stack-item>.ui-resizable-handle{filter:none}.grid-stack-item>.ui-resizable-se{text-align:right;color:gray;padding:2px 3px 0 0;margin:0;display:inline-block;font:normal normal normal 10px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.grid-stack-item>.ui-resizable-se::before{content:"\f065"}.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle,.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;left:10px;top:0}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:0;left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;right:10px;top:0}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;right:10px;top:15px;bottom:15px}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;right:10px;bottom:0}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:0;right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;left:10px;bottom:0}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;left:10px;top:15px;bottom:15px}.grid-stack-item{min-width:8.33333333%}.grid-stack-item[data-gs-width="12"]{width:100%}.grid-stack-item[data-gs-width="11"]{width:91.66666667%}.grid-stack-item[data-gs-width="10"]{width:83.33333333%}.grid-stack-item[data-gs-width="9"]{width:75%}.grid-stack-item[data-gs-width="8"]{width:66.66666667%}.grid-stack-item[data-gs-width="7"]{width:58.33333333%}.grid-stack-item[data-gs-width="6"]{width:50%}.grid-stack-item[data-gs-width="5"]{width:41.66666667%}.grid-stack-item[data-gs-width="4"]{width:33.33333333%}.grid-stack-item[data-gs-width="3"]{width:25%}.grid-stack-item[data-gs-width="2"]{width:16.66666667%}.grid-stack-item[data-gs-width="1"]{width:8.33333333%}.grid-stack-item[data-gs-min-width="12"]{min-width:100%}.grid-stack-item[data-gs-min-width="11"]{min-width:91.66666667%}.grid-stack-item[data-gs-min-width="10"]{min-width:83.33333333%}.grid-stack-item[data-gs-min-width="9"]{min-width:75%}.grid-stack-item[data-gs-min-width="8"]{min-width:66.66666667%}.grid-stack-item[data-gs-min-width="7"]{min-width:58.33333333%}.grid-stack-item[data-gs-min-width="6"]{min-width:50%}.grid-stack-item[data-gs-min-width="5"]{min-width:41.66666667%}.grid-stack-item[data-gs-min-width="4"]{min-width:33.33333333%}.grid-stack-item[data-gs-min-width="3"]{min-width:25%}.grid-stack-item[data-gs-min-width="2"]{min-width:16.66666667%}.grid-stack-item[data-gs-min-width="1"]{min-width:8.33333333%}.grid-stack-item[data-gs-max-width="12"]{max-width:100%}.grid-stack-item[data-gs-max-width="11"]{max-width:91.66666667%}.grid-stack-item[data-gs-max-width="10"]{max-width:83.33333333%}.grid-stack-item[data-gs-max-width="9"]{max-width:75%}.grid-stack-item[data-gs-max-width="8"]{max-width:66.66666667%}.grid-stack-item[data-gs-max-width="7"]{max-width:58.33333333%}.grid-stack-item[data-gs-max-width="6"]{max-width:50%}.grid-stack-item[data-gs-max-width="5"]{max-width:41.66666667%}.grid-stack-item[data-gs-max-width="4"]{max-width:33.33333333%}.grid-stack-item[data-gs-max-width="3"]{max-width:25%}.grid-stack-item[data-gs-max-width="2"]{max-width:16.66666667%}.grid-stack-item[data-gs-max-width="1"]{max-width:8.33333333%}.grid-stack-item[data-gs-x="12"]{left:100%}.grid-stack-item[data-gs-x="11"]{left:91.66666667%}.grid-stack-item[data-gs-x="10"]{left:83.33333333%}.grid-stack-item[data-gs-x="9"]{left:75%}.grid-stack-item[data-gs-x="8"]{left:66.66666667%}.grid-stack-item[data-gs-x="7"]{left:58.33333333%}.grid-stack-item[data-gs-x="6"]{left:50%}.grid-stack-item[data-gs-x="5"]{left:41.66666667%}.grid-stack-item[data-gs-x="4"]{left:33.33333333%}.grid-stack-item[data-gs-x="3"]{left:25%}.grid-stack-item[data-gs-x="2"]{left:16.66666667%}.grid-stack-item[data-gs-x="1"]{left:8.33333333%}@media(max-width:768px){.grid-stack-item{position:relative !important;width:auto !important;left:0 !important;top:auto !important;margin-bottom:20px}.grid-stack-item .ui-resizable-handle{display:none}.grid-stack{height:auto !important}}.grid-stack.grid-stack-animate,.grid-stack.grid-stack-animate .grid-stack-item{-webkit-transition:left .3s,top .3s,height .3s,width .3s;-moz-transition:left .3s,top .3s,height .3s,width .3s;-o-transition:left .3s,top .3s,height .3s,width .3s;-ms-transition:left .3s,top .3s,height .3s,width .3s;transition:left .3s,top .3s,height .3s,width .3s}.grid-stack.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack.grid-stack-animate .grid-stack-item.ui-resizable-resizing,.grid-stack.grid-stack-animate .grid-stack-item.grid-stack-placeholder{-webkit-transition:left 0,top 0,height 0,width 0;-moz-transition:left 0,top 0,height 0,width 0;-o-transition:left 0,top 0,height 0,width 0;transition:left 0,top 0,height 0,width 0}
\ No newline at end of file
+:root .grid-stack-item>.ui-resizable-handle{filter:none}.grid-stack{position:relative}.grid-stack .grid-stack-placeholder>.placeholder-content{border:1px dashed lightgray;margin:0;position:absolute;top:0;left:10px;right:10px;bottom:0;width:auto;z-index:0 !important;overflow:auto}.grid-stack>.grid-stack-item{min-width:8.33333333%;position:absolute;padding:0}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;top:0;left:10px;right:10px;bottom:0;width:auto;z-index:0 !important;overflow:auto}.grid-stack>.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}.grid-stack>.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle,.grid-stack>.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle{display:none}.grid-stack>.grid-stack-item.ui-draggable-dragging,.grid-stack>.grid-stack-item.ui-resizable-resizing{z-index:100}.grid-stack>.grid-stack-item.ui-draggable-dragging>.grid-stack-item-content,.grid-stack>.grid-stack-item.ui-draggable-dragging>.grid-stack-item-content,.grid-stack>.grid-stack-item.ui-resizable-resizing>.grid-stack-item-content,.grid-stack>.grid-stack-item.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px rgba(0,0,0,0.2);opacity:.8}.grid-stack>.grid-stack-item>.ui-resizable-se,.grid-stack>.grid-stack-item>.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}.grid-stack>.grid-stack-item>.ui-resizable-se::before,.grid-stack>.grid-stack-item>.ui-resizable-sw::before{content:"\f065"}.grid-stack>.grid-stack-item>.ui-resizable-se{display:inline-block;filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.grid-stack>.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;left:10px;top:0}.grid-stack>.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:0;left:25px;right:25px}.grid-stack>.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;right:10px;top:0}.grid-stack>.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;right:10px;top:15px;bottom:15px}.grid-stack>.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;right:10px;bottom:0}.grid-stack>.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:0;right:25px}.grid-stack>.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;left:10px;bottom:0}.grid-stack>.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;left:10px;top:15px;bottom:15px}.grid-stack>.grid-stack-item[data-gs-width='1']{width:8.33333333%}.grid-stack>.grid-stack-item[data-gs-x='1']{left:8.33333333%}.grid-stack>.grid-stack-item[data-gs-min-width='1']{min-width:8.33333333%}.grid-stack>.grid-stack-item[data-gs-max-width='1']{max-width:8.33333333%}.grid-stack>.grid-stack-item[data-gs-width='2']{width:16.66666667%}.grid-stack>.grid-stack-item[data-gs-x='2']{left:16.66666667%}.grid-stack>.grid-stack-item[data-gs-min-width='2']{min-width:16.66666667%}.grid-stack>.grid-stack-item[data-gs-max-width='2']{max-width:16.66666667%}.grid-stack>.grid-stack-item[data-gs-width='3']{width:25%}.grid-stack>.grid-stack-item[data-gs-x='3']{left:25%}.grid-stack>.grid-stack-item[data-gs-min-width='3']{min-width:25%}.grid-stack>.grid-stack-item[data-gs-max-width='3']{max-width:25%}.grid-stack>.grid-stack-item[data-gs-width='4']{width:33.33333333%}.grid-stack>.grid-stack-item[data-gs-x='4']{left:33.33333333%}.grid-stack>.grid-stack-item[data-gs-min-width='4']{min-width:33.33333333%}.grid-stack>.grid-stack-item[data-gs-max-width='4']{max-width:33.33333333%}.grid-stack>.grid-stack-item[data-gs-width='5']{width:41.66666667%}.grid-stack>.grid-stack-item[data-gs-x='5']{left:41.66666667%}.grid-stack>.grid-stack-item[data-gs-min-width='5']{min-width:41.66666667%}.grid-stack>.grid-stack-item[data-gs-max-width='5']{max-width:41.66666667%}.grid-stack>.grid-stack-item[data-gs-width='6']{width:50%}.grid-stack>.grid-stack-item[data-gs-x='6']{left:50%}.grid-stack>.grid-stack-item[data-gs-min-width='6']{min-width:50%}.grid-stack>.grid-stack-item[data-gs-max-width='6']{max-width:50%}.grid-stack>.grid-stack-item[data-gs-width='7']{width:58.33333333%}.grid-stack>.grid-stack-item[data-gs-x='7']{left:58.33333333%}.grid-stack>.grid-stack-item[data-gs-min-width='7']{min-width:58.33333333%}.grid-stack>.grid-stack-item[data-gs-max-width='7']{max-width:58.33333333%}.grid-stack>.grid-stack-item[data-gs-width='8']{width:66.66666667%}.grid-stack>.grid-stack-item[data-gs-x='8']{left:66.66666667%}.grid-stack>.grid-stack-item[data-gs-min-width='8']{min-width:66.66666667%}.grid-stack>.grid-stack-item[data-gs-max-width='8']{max-width:66.66666667%}.grid-stack>.grid-stack-item[data-gs-width='9']{width:75%}.grid-stack>.grid-stack-item[data-gs-x='9']{left:75%}.grid-stack>.grid-stack-item[data-gs-min-width='9']{min-width:75%}.grid-stack>.grid-stack-item[data-gs-max-width='9']{max-width:75%}.grid-stack>.grid-stack-item[data-gs-width='10']{width:83.33333333%}.grid-stack>.grid-stack-item[data-gs-x='10']{left:83.33333333%}.grid-stack>.grid-stack-item[data-gs-min-width='10']{min-width:83.33333333%}.grid-stack>.grid-stack-item[data-gs-max-width='10']{max-width:83.33333333%}.grid-stack>.grid-stack-item[data-gs-width='11']{width:91.66666667%}.grid-stack>.grid-stack-item[data-gs-x='11']{left:91.66666667%}.grid-stack>.grid-stack-item[data-gs-min-width='11']{min-width:91.66666667%}.grid-stack>.grid-stack-item[data-gs-max-width='11']{max-width:91.66666667%}.grid-stack>.grid-stack-item[data-gs-width='12']{width:100%}.grid-stack>.grid-stack-item[data-gs-x='12']{left:100%}.grid-stack>.grid-stack-item[data-gs-min-width='12']{min-width:100%}.grid-stack>.grid-stack-item[data-gs-max-width='12']{max-width:100%}.grid-stack.grid-stack-animate,.grid-stack.grid-stack-animate .grid-stack-item{-webkit-transition:left .3s,top .3s,height .3s,width .3s;-moz-transition:left .3s,top .3s,height .3s,width .3s;-ms-transition:left .3s,top .3s,height .3s,width .3s;-o-transition:left .3s,top .3s,height .3s,width .3s;transition:left .3s,top .3s,height .3s,width .3s}.grid-stack.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack.grid-stack-animate .grid-stack-item.ui-resizable-resizing,.grid-stack.grid-stack-animate .grid-stack-item.grid-stack-placeholder{-webkit-transition:left 0,top 0,height 0,width 0;-moz-transition:left 0,top 0,height 0,width 0;-ms-transition:left 0,top 0,height 0,width 0;-o-transition:left 0,top 0,height 0,width 0;transition:left 0,top 0,height 0,width 0}@media(max-width:768px){.grid-stack-item{position:relative !important;width:auto !important;left:0 !important;top:auto !important;margin-bottom:20px}.grid-stack-item .ui-resizable-handle{display:none}.grid-stack{height:auto !important}}
\ No newline at end of file
diff --git a/src/gridstack.css b/src/gridstack.css
index 9cf660e..e0f96d9 100644
--- a/src/gridstack.css
+++ b/src/gridstack.css
@@ -1,205 +1,318 @@
-.grid-stack {
-    position: relative;
-}
-
-.grid-stack-item {
-    position: absolute;
-    padding: 0;
-}
-
-.grid-stack-item > .grid-stack-item-content,
-.grid-stack-item > .placeholder-content {
-    margin: 0;
-    position: absolute;
-    top: 0;
-    left: 10px;
-    right: 10px;
-    bottom: 0;
-    width: auto;
-    z-index: 0 !important;
-    overflow: auto;
-}
-
-.grid-stack-placeholder > .placeholder-content {
-    border: 1px dashed lightgray;
-}
-
-.grid-stack-item.ui-draggable-dragging,
-.grid-stack-item.ui-resizable-resizing {
-    z-index: 100;
-}
-
-.grid-stack-item.ui-draggable-dragging > .grid-stack-item-content,
-.grid-stack-item.ui-resizable-resizing > .grid-stack-item-content {
-    box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
-    opacity: 0.8;
-}
-
-.grid-stack-item > .ui-resizable-handle {
-}
-
 :root .grid-stack-item > .ui-resizable-handle {
-    filter: none;
+  filter: none;
 }
 
-.grid-stack-item > .ui-resizable-se {
-    text-align: right;
-    color: gray;
-
-    padding: 2px 3px 0 0;
-    margin: 0;
-
-    display: inline-block;
-    font: normal normal normal 10px/1 FontAwesome;
-    font-size: inherit;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-
-    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-    -webkit-transform: rotate(90deg);
-    -ms-transform: rotate(90deg);
-    transform: rotate(90deg);
+.grid-stack {
+  position: relative;
+}
+.grid-stack .grid-stack-placeholder > .placeholder-content {
+  border: 1px dashed lightgray;
+  margin: 0;
+  position: absolute;
+  top: 0;
+  left: 10px;
+  right: 10px;
+  bottom: 0;
+  width: auto;
+  z-index: 0 !important;
+  overflow: auto;
+}
+.grid-stack > .grid-stack-item {
+  min-width: 8.33333333%;
+  position: absolute;
+  padding: 0;
+}
+.grid-stack > .grid-stack-item > .grid-stack-item-content {
+  margin: 0;
+  position: absolute;
+  top: 0;
+  left: 10px;
+  right: 10px;
+  bottom: 0;
+  width: auto;
+  z-index: 0 !important;
+  overflow: auto;
+}
+.grid-stack > .grid-stack-item > .ui-resizable-handle {
+  position: absolute;
+  font-size: 0.1px;
+  display: block;
+  -ms-touch-action: none;
+  touch-action: none;
+}
+.grid-stack > .grid-stack-item.ui-resizable-disabled > .ui-resizable-handle, .grid-stack > .grid-stack-item.ui-resizable-autohide > .ui-resizable-handle {
+  display: none;
+}
+.grid-stack > .grid-stack-item.ui-draggable-dragging, .grid-stack > .grid-stack-item.ui-resizable-resizing {
+  z-index: 100;
+}
+.grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content,
+.grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content, .grid-stack > .grid-stack-item.ui-resizable-resizing > .grid-stack-item-content,
+.grid-stack > .grid-stack-item.ui-resizable-resizing > .grid-stack-item-content {
+  box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
+  opacity: 0.8;
+}
+.grid-stack > .grid-stack-item > .ui-resizable-se,
+.grid-stack > .grid-stack-item > .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;
+}
+.grid-stack > .grid-stack-item > .ui-resizable-se::before,
+.grid-stack > .grid-stack-item > .ui-resizable-sw::before {
+  content: "\f065";
+}
+.grid-stack > .grid-stack-item > .ui-resizable-se {
+  display: inline-block;
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.grid-stack > .grid-stack-item > .ui-resizable-nw {
+  cursor: nw-resize;
+  width: 20px;
+  height: 20px;
+  left: 10px;
+  top: 0;
+}
+.grid-stack > .grid-stack-item > .ui-resizable-n {
+  cursor: n-resize;
+  height: 10px;
+  top: 0;
+  left: 25px;
+  right: 25px;
+}
+.grid-stack > .grid-stack-item > .ui-resizable-ne {
+  cursor: ne-resize;
+  width: 20px;
+  height: 20px;
+  right: 10px;
+  top: 0;
+}
+.grid-stack > .grid-stack-item > .ui-resizable-e {
+  cursor: e-resize;
+  width: 10px;
+  right: 10px;
+  top: 15px;
+  bottom: 15px;
+}
+.grid-stack > .grid-stack-item > .ui-resizable-se {
+  cursor: se-resize;
+  width: 20px;
+  height: 20px;
+  right: 10px;
+  bottom: 0;
+}
+.grid-stack > .grid-stack-item > .ui-resizable-s {
+  cursor: s-resize;
+  height: 10px;
+  left: 25px;
+  bottom: 0;
+  right: 25px;
+}
+.grid-stack > .grid-stack-item > .ui-resizable-sw {
+  cursor: sw-resize;
+  width: 20px;
+  height: 20px;
+  left: 10px;
+  bottom: 0;
+}
+.grid-stack > .grid-stack-item > .ui-resizable-w {
+  cursor: w-resize;
+  width: 10px;
+  left: 10px;
+  top: 15px;
+  bottom: 15px;
+}
+.grid-stack > .grid-stack-item[data-gs-width='1'] {
+  width: 8.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-x='1'] {
+  left: 8.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-min-width='1'] {
+  min-width: 8.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-max-width='1'] {
+  max-width: 8.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-width='2'] {
+  width: 16.66666667%;
+}
+.grid-stack > .grid-stack-item[data-gs-x='2'] {
+  left: 16.66666667%;
+}
+.grid-stack > .grid-stack-item[data-gs-min-width='2'] {
+  min-width: 16.66666667%;
+}
+.grid-stack > .grid-stack-item[data-gs-max-width='2'] {
+  max-width: 16.66666667%;
+}
+.grid-stack > .grid-stack-item[data-gs-width='3'] {
+  width: 25%;
+}
+.grid-stack > .grid-stack-item[data-gs-x='3'] {
+  left: 25%;
+}
+.grid-stack > .grid-stack-item[data-gs-min-width='3'] {
+  min-width: 25%;
+}
+.grid-stack > .grid-stack-item[data-gs-max-width='3'] {
+  max-width: 25%;
+}
+.grid-stack > .grid-stack-item[data-gs-width='4'] {
+  width: 33.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-x='4'] {
+  left: 33.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-min-width='4'] {
+  min-width: 33.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-max-width='4'] {
+  max-width: 33.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-width='5'] {
+  width: 41.66666667%;
+}
+.grid-stack > .grid-stack-item[data-gs-x='5'] {
+  left: 41.66666667%;
+}
+.grid-stack > .grid-stack-item[data-gs-min-width='5'] {
+  min-width: 41.66666667%;
+}
+.grid-stack > .grid-stack-item[data-gs-max-width='5'] {
+  max-width: 41.66666667%;
+}
+.grid-stack > .grid-stack-item[data-gs-width='6'] {
+  width: 50%;
+}
+.grid-stack > .grid-stack-item[data-gs-x='6'] {
+  left: 50%;
+}
+.grid-stack > .grid-stack-item[data-gs-min-width='6'] {
+  min-width: 50%;
+}
+.grid-stack > .grid-stack-item[data-gs-max-width='6'] {
+  max-width: 50%;
+}
+.grid-stack > .grid-stack-item[data-gs-width='7'] {
+  width: 58.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-x='7'] {
+  left: 58.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-min-width='7'] {
+  min-width: 58.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-max-width='7'] {
+  max-width: 58.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-width='8'] {
+  width: 66.66666667%;
+}
+.grid-stack > .grid-stack-item[data-gs-x='8'] {
+  left: 66.66666667%;
+}
+.grid-stack > .grid-stack-item[data-gs-min-width='8'] {
+  min-width: 66.66666667%;
+}
+.grid-stack > .grid-stack-item[data-gs-max-width='8'] {
+  max-width: 66.66666667%;
+}
+.grid-stack > .grid-stack-item[data-gs-width='9'] {
+  width: 75%;
+}
+.grid-stack > .grid-stack-item[data-gs-x='9'] {
+  left: 75%;
+}
+.grid-stack > .grid-stack-item[data-gs-min-width='9'] {
+  min-width: 75%;
+}
+.grid-stack > .grid-stack-item[data-gs-max-width='9'] {
+  max-width: 75%;
+}
+.grid-stack > .grid-stack-item[data-gs-width='10'] {
+  width: 83.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-x='10'] {
+  left: 83.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-min-width='10'] {
+  min-width: 83.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-max-width='10'] {
+  max-width: 83.33333333%;
+}
+.grid-stack > .grid-stack-item[data-gs-width='11'] {
+  width: 91.66666667%;
+}
+.grid-stack > .grid-stack-item[data-gs-x='11'] {
+  left: 91.66666667%;
+}
+.grid-stack > .grid-stack-item[data-gs-min-width='11'] {
+  min-width: 91.66666667%;
+}
+.grid-stack > .grid-stack-item[data-gs-max-width='11'] {
+  max-width: 91.66666667%;
+}
+.grid-stack > .grid-stack-item[data-gs-width='12'] {
+  width: 100%;
+}
+.grid-stack > .grid-stack-item[data-gs-x='12'] {
+  left: 100%;
+}
+.grid-stack > .grid-stack-item[data-gs-min-width='12'] {
+  min-width: 100%;
+}
+.grid-stack > .grid-stack-item[data-gs-max-width='12'] {
+  max-width: 100%;
+}
+.grid-stack.grid-stack-animate, .grid-stack.grid-stack-animate .grid-stack-item {
+  -webkit-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
+  -moz-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
+  -ms-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
+  -o-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
+  transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
+}
+.grid-stack.grid-stack-animate .grid-stack-item.ui-draggable-dragging, .grid-stack.grid-stack-animate .grid-stack-item.ui-resizable-resizing, .grid-stack.grid-stack-animate .grid-stack-item.grid-stack-placeholder {
+  -webkit-transition: left 0s, top 0s, height 0s, width 0s;
+  -moz-transition: left 0s, top 0s, height 0s, width 0s;
+  -ms-transition: left 0s, top 0s, height 0s, width 0s;
+  -o-transition: left 0s, top 0s, height 0s, width 0s;
+  transition: left 0s, top 0s, height 0s, width 0s;
 }
 
 /** Uncomment this to show bottom-left resize handle **/
 /*
-.grid-stack-item > .ui-resizable-sw {
-    text-align: right;
-    color: gray;
-
-    padding: 2px 3px 0 0;
-    margin: 0;
-
+.grid-stack > .grid-stack-item > .ui-resizable-sw {
     display: inline-block;
-    font: normal normal normal 10px/1 FontAwesome;
-    font-size: inherit;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-
     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-    -webkit-transform: rotate(180deg);
-    -ms-transform: rotate(180deg);
-    transform: rotate(180deg);
-}
-
-.grid-stack-item .ui-resizable-sw::before {
-    content: "\f065";
+    @include vendor(transform, rotate(180deg));
 }
 */
-
-.grid-stack-item > .ui-resizable-se::before {
-    content: "\f065";
-}
-
-.ui-resizable-handle {
-    position: absolute;
-    font-size: 0.1px;
-    display: block;
-    -ms-touch-action: none;
-    touch-action: none;
-}
-
-.grid-stack-item.ui-resizable-disabled > .ui-resizable-handle,
-.grid-stack-item.ui-resizable-autohide > .ui-resizable-handle {
-    display: none;
-}
-
-.grid-stack-item > .ui-resizable-nw { cursor: nw-resize; width: 20px; height: 20px; left: 10px; top: 0; }
-.grid-stack-item > .ui-resizable-n  { cursor: n-resize;  height: 10px; top: 0; left: 25px; right: 25px; }
-.grid-stack-item > .ui-resizable-ne { cursor: ne-resize; width: 20px; height: 20px; right: 10px; top: 0; }
-.grid-stack-item > .ui-resizable-e  { cursor: e-resize;  width: 10px; right: 10px; top: 15px; bottom: 15px; }
-.grid-stack-item > .ui-resizable-se { cursor: se-resize; width: 20px; height: 20px; right: 10px; bottom: 0; }
-.grid-stack-item > .ui-resizable-s  { cursor: s-resize;  height: 10px; left: 25px; bottom: 0; right: 25px; }
-.grid-stack-item > .ui-resizable-sw { cursor: sw-resize; width: 20px; height: 20px; left: 10px; bottom: 0; }
-.grid-stack-item > .ui-resizable-w  { cursor: w-resize;  width: 10px; left: 10px; top: 15px; bottom: 15px; }
-
-.grid-stack-item { min-width: 8.33333333% }
-
-.grid-stack-item[data-gs-width="12"] { width: 100% }
-.grid-stack-item[data-gs-width="11"] { width: 91.66666667% }
-.grid-stack-item[data-gs-width="10"] { width: 83.33333333% }
-.grid-stack-item[data-gs-width="9"]  { width: 75% }
-.grid-stack-item[data-gs-width="8"]  { width: 66.66666667% }
-.grid-stack-item[data-gs-width="7"]  { width: 58.33333333% }
-.grid-stack-item[data-gs-width="6"]  { width: 50% }
-.grid-stack-item[data-gs-width="5"]  { width: 41.66666667% }
-.grid-stack-item[data-gs-width="4"]  { width: 33.33333333% }
-.grid-stack-item[data-gs-width="3"]  { width: 25% }
-.grid-stack-item[data-gs-width="2"]  { width: 16.66666667% }
-.grid-stack-item[data-gs-width="1"]  { width: 8.33333333% }
-
-.grid-stack-item[data-gs-min-width="12"] { min-width: 100% }
-.grid-stack-item[data-gs-min-width="11"] { min-width: 91.66666667% }
-.grid-stack-item[data-gs-min-width="10"] { min-width: 83.33333333% }
-.grid-stack-item[data-gs-min-width="9"]  { min-width: 75% }
-.grid-stack-item[data-gs-min-width="8"]  { min-width: 66.66666667% }
-.grid-stack-item[data-gs-min-width="7"]  { min-width: 58.33333333% }
-.grid-stack-item[data-gs-min-width="6"]  { min-width: 50% }
-.grid-stack-item[data-gs-min-width="5"]  { min-width: 41.66666667% }
-.grid-stack-item[data-gs-min-width="4"]  { min-width: 33.33333333% }
-.grid-stack-item[data-gs-min-width="3"]  { min-width: 25% }
-.grid-stack-item[data-gs-min-width="2"]  { min-width: 16.66666667% }
-.grid-stack-item[data-gs-min-width="1"]  { min-width: 8.33333333% }
-
-.grid-stack-item[data-gs-max-width="12"] { max-width: 100% }
-.grid-stack-item[data-gs-max-width="11"] { max-width: 91.66666667% }
-.grid-stack-item[data-gs-max-width="10"] { max-width: 83.33333333% }
-.grid-stack-item[data-gs-max-width="9"]  { max-width: 75% }
-.grid-stack-item[data-gs-max-width="8"]  { max-width: 66.66666667% }
-.grid-stack-item[data-gs-max-width="7"]  { max-width: 58.33333333% }
-.grid-stack-item[data-gs-max-width="6"]  { max-width: 50% }
-.grid-stack-item[data-gs-max-width="5"]  { max-width: 41.66666667% }
-.grid-stack-item[data-gs-max-width="4"]  { max-width: 33.33333333% }
-.grid-stack-item[data-gs-max-width="3"]  { max-width: 25% }
-.grid-stack-item[data-gs-max-width="2"]  { max-width: 16.66666667% }
-.grid-stack-item[data-gs-max-width="1"]  { max-width: 8.33333333% }
-
-.grid-stack-item[data-gs-x="12"] { left: 100% }
-.grid-stack-item[data-gs-x="11"] { left: 91.66666667% }
-.grid-stack-item[data-gs-x="10"] { left: 83.33333333% }
-.grid-stack-item[data-gs-x="9"]  { left: 75% }
-.grid-stack-item[data-gs-x="8"]  { left: 66.66666667% }
-.grid-stack-item[data-gs-x="7"]  { left: 58.33333333% }
-.grid-stack-item[data-gs-x="6"]  { left: 50% }
-.grid-stack-item[data-gs-x="5"]  { left: 41.66666667% }
-.grid-stack-item[data-gs-x="4"]  { left: 33.33333333% }
-.grid-stack-item[data-gs-x="3"]  { left: 25% }
-.grid-stack-item[data-gs-x="2"]  { left: 16.66666667% }
-.grid-stack-item[data-gs-x="1"]  { left: 8.33333333% }
-
 @media (max-width: 768px) {
-    .grid-stack-item {
-        position: relative !important;
-        width: auto !important;
-        left: 0 !important;
-        top: auto !important;
-        margin-bottom: 20px;
-    }
+  .grid-stack-item {
+    position: relative !important;
+    width: auto !important;
+    left: 0 !important;
+    top: auto !important;
+    margin-bottom: 20px;
+  }
+  .grid-stack-item .ui-resizable-handle {
+    display: none;
+  }
 
-    .grid-stack-item .ui-resizable-handle {
-        display: none;
-    }
-
-    .grid-stack {
-        height: auto !important;
-    }
-}
-
-.grid-stack.grid-stack-animate, .grid-stack.grid-stack-animate .grid-stack-item {
-    -webkit-transition: left .3s, top .3s, height .3s, width .3s;
-    -moz-transition: left .3s, top .3s, height .3s, width .3s;
-    -o-transition: left .3s, top .3s, height .3s, width .3s;
-    -ms-transition: left .3s, top .3s, height .3s, width .3s;
-    transition: left .3s, top .3s, height .3s, width .3s;
-}
-/*Don't animate the placeholder or when dragging/resizing*/
-.grid-stack.grid-stack-animate .grid-stack-item.ui-draggable-dragging,
-.grid-stack.grid-stack-animate .grid-stack-item.ui-resizable-resizing,
-.grid-stack.grid-stack-animate .grid-stack-item.grid-stack-placeholder{
-    -webkit-transition: left .0s, top .0s, height .0s, width .0s;
-    -moz-transition: left .0s, top .0s, height .0s, width .0s;
-    -o-transition: left .0s, top .0s, height .0s, width .0s;
-    transition:  left .0s, top .0s, height .0s, width .0s;
+  .grid-stack {
+    height: auto !important;
+  }
 }
diff --git a/src/gridstack.scss b/src/gridstack.scss
index e1da280..961627c 100644
--- a/src/gridstack.scss
+++ b/src/gridstack.scss
@@ -1,9 +1,8 @@
-/**
- * Create vendor-prefixed CSS in one go, e.g.
- *
-   `@include vendor(border-radius, 4px);`
- *
- */
+$gridstack-columns: 12;
+$horizontal_padding: 20px;
+$vertical_padding: 20px;
+$animation_speed: .3s;
+
 @mixin vendor($property, $value...){
     -webkit-#{$property}:$value;
        -moz-#{$property}:$value;
@@ -16,25 +15,37 @@
 
 .grid-stack {
     position: relative;
-    
-    .grid-stack-item {
-        min-width: 8.33333333%;
+
+    .grid-stack-placeholder > .placeholder-content {
+        border: 1px dashed lightgray;
+        margin: 0;
+        position: absolute;
+        top: 0;
+        left: $horizontal_padding / 2;
+        right: $horizontal_padding / 2;
+        bottom: 0;
+        width: auto;
+        z-index: 0 !important;
+        overflow: auto;
+    }
+
+    > .grid-stack-item {
+        min-width: 100% / $gridstack-columns;
         position: absolute;
         padding: 0;
-        
-        > .grid-stack-item-content,
-        > .placeholder-content {
+
+        > .grid-stack-item-content {
             margin: 0;
             position: absolute;
             top: 0;
-            left: 10px;
-            right: 10px;
+            left: $horizontal_padding / 2;
+            right: $horizontal_padding / 2;
             bottom: 0;
             width: auto;
             z-index: 0 !important;
             overflow: auto;
         }
-        
+
         > .ui-resizable-handle {
             position: absolute;
             font-size: 0.1px;
@@ -80,29 +91,15 @@
             @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-e  { cursor: e-resize;  width: 10px; right: $horizontal_padding / 2; 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; }
+        > .ui-resizable-w  { cursor: w-resize;  width: 10px; left: $horizontal_padding / 2; 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; }
@@ -113,17 +110,24 @@
     
     &.grid-stack-animate, 
     &.grid-stack-animate .grid-stack-item {
-        @include vendor(transition, 'left .3s, top .3s, height .3s, width .3s');
+        @include vendor(transition, left $animation_speed, top $animation_speed, height $animation_speed, width $animation_speed);
     }
 
-    /*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');
+        @include vendor(transition, left .0s, top .0s, height .0s, width .0s);
     }
 }
 
+/** Uncomment this to show bottom-left resize handle **/
+/*
+.grid-stack > .grid-stack-item > .ui-resizable-sw {
+    display: inline-block;
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+    @include vendor(transform, rotate(180deg));
+}
+*/
 
 @media (max-width: 768px) {
     .grid-stack-item {
@@ -131,7 +135,7 @@
         width: auto !important;
         left: 0 !important;
         top: auto !important;
-        margin-bottom: 20px;
+        margin-bottom: $vertical_padding;
         
         .ui-resizable-handle { display: none; }
     }