Update and add components

bower.json

@@ -8,11 +8,16 @@
     "underscore": "latest",
     "backbone": "latest",
     "mobilesdk-shared": "forcedotcom/SalesforceMobileSDK-Shared#unstable",
-    "ratchet": "twbs/ratchet#>=2.0.2"
+    "ratchet": "twbs/ratchet#>=2.0.2",
+    "paper-elements": "PolymerElements/paper-elements#>=1.0.0",
+    "layout": "Polymer/layout"
   },
   "devDependencies": {
     "mocha": "~1.18.2",
     "should": "~3.3.1",
     "iron-icons": "PolymerElements/iron-icons#>=0.8.0"
+  },
+  "resolutions": {
+    "polymer": "^1.2.1"
   }
 }

elements/css/responsive.shim.css

@@ -0,0 +1,53 @@
+polyfill-next-selector {
+  content: ':host /deep/ .ui-responsive';
+}
+
+::content .ui-responsive,
+::content>* /deep/ .ui-responsive,
+:host /deep/ .ui-responsive {
+  overflow: hidden;
+}
+
+polyfill-next-selector {
+  content: ':host /deep/ .ui-responsive .ui-block:first';
+}
+
+::content .ui-responsive .ui-block:first,
+::content>* /deep/ .ui-responsive .ui-block:first,
+:host /deep/ .ui-responsive .ui-block:first {
+  clear: left;
+}
+
+polyfill-next-selector {
+  content: ':host /deep/ .ui-block';
+}
+
+::content .ui-block,
+::content>* /deep/ .ui-block,
+:host /deep/ .ui-block {
+  width: 50%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  float: left;
+  min-height: 1px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/* preset breakpoint to switch to stacked grid styles below 35em (560px) */
+
+@media all and (max-width: 35em) {
+  polyfill-next-selector {
+    content: ':host /deep/ .ui-responsive .ui-block';
+  }
+
+  ::content .ui-responsive .ui-block,
+  ::content>* /deep/ .ui-responsive .ui-block,
+  :host /deep/ .ui-responsive .ui-block {
+    width: 100%;
+    float: none;
+  }
+}