config redirect

node_modules/packery/sandbox/css/basics.css

@@ -0,0 +1,53 @@
+
+#ex5 .item {
+  margin-left: 1%;
+  margin-right: 1%;
+  width: 7.9%;
+}
+
+#ex5 .item.w2 { width: 17.9%; }
+#ex5 .item.w4 { width: 37.9%; }
+
+@media ( max-width: 800px ) {
+  body { background: red ;}
+
+  #ex5 .item    { width: 17.9%; }
+  #ex5 .item.w2 { width: 37.9%; }
+  #ex5 .item.w4 { width: 57.9%; }
+
+}
+
+.bogey {
+  background: red;
+  position: absolute;
+}
+
+#ex6 .bogey1 {
+  width: 30%;
+  height: 140px;
+  left: 20%;
+  top: 20px;
+}
+
+#ex6 .bogey2 {
+  width: 140px;
+  height: 180px;
+  right: 20px;
+  top: 140px;
+}
+
+#fit-demo {
+  width: 200px;
+}
+
+/*
+#fit-demo .item {
+  width: 40px;
+  height: 40px;
+}
+*/
+
+#fit-demo .item.gigante {
+  width:  150px;
+  height: 100px;
+}

node_modules/packery/sandbox/css/examples.css

@@ -0,0 +1,40 @@
+* { box-sizing: border-box; }
+
+body {
+  font-family: sans-serif;
+}
+
+.container {
+  width: 500px;
+  margin-bottom: 20px;
+  background: #EEE;
+}
+
+.item {
+  float: left;
+  width: 50px;
+  height: 50px;
+  border: 1px solid;
+  background: #ACE;
+}
+
+.item.w2 { width:  100px; }
+.item.h2 { height: 100px; }
+.item.w4 { width:  200px; }
+.item.h4 { height: 200px; }
+
+.fluid {
+  width: 50%;
+}
+
+.has-padding {
+  padding: 10px 20px 30px 40px;
+}
+
+/* dragging */
+.is-dragging,
+.is-positioning-post-drag,
+.ui-draggable-dragging {
+  z-index: 10;
+  background: orange;
+}