wpa_cli_web 0.0.5 → 0.0.6

data/lib/wpa_cli_web/public/bower_components/house-style/house-style.min.css

@@ -0,0 +1 @@
+/*! house-style 24-08-2013 *//*! normalize.css v2.1.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}body{color:#4d4d4d;background-color:#f3f3f4;-webkit-font-smoothing:antialiased;height:100%}a{color:#0993e3}*{-webkit-font-smoothing:antialiased}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.btn{border:0}.btn-with-text{min-width:180px;height:33px;line-height:32px;text-transform:uppercase;color:#fff;background-color:#2aaf00;font-weight:700}.btn-with-text:hover{background-color:#657061}.btn-destructive{background-color:#df261f}.btn-destructive:hover{background-color:#851613}.grid{margin-left:auto;margin-right:auto;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.debug{background-color:rgba(255,255,0,.1)}.debug .grid{background-color:rgba(255,0,0,.1);outline:1px solid red}.grid:before,.grid:after{content:'';display:block;height:0;overflow:hidden}.grid:after{clear:both}.grid-row{margin:0;padding:0}.grid-col{float:left;padding:0 4px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.grid-col:first-child{padding-left:0}.grid-col:last-child{padding-right:0}.debug .grid-col{background-color:rgba(0,0,0,.1);outline:1px solid #00f}.debug .grid-col>span{background-color:rgba(0,0,0,.2);display:block}.grid-1{width:8.333333333%}.grid-2{width:16.666666667%}.grid-3{width:25%}.grid-4{width:33.333333333%}.grid-5{width:41.666666667%}.grid-6{width:50%}.grid-7{width:58.333333333%}.grid-8{width:66.666666667%}.grid-9{width:75%}.grid-10{width:83.333333333%}.grid-11{width:91.666666667%}.grid-12{width:100%}@media (min-width:400px){.grid{max-width:599px;padding:0 16px}.grid-bleed{padding:0}.grid-internal-padding .grid-col{padding:0 16px}}@media (min-width:600px){.grid{max-width:1007px}.grid-col{padding:0 8px}}@media (min-width:1008px){.grid{max-width:1280px}}@media (min-width:1281px){.debug .grid{background:transparent url(grid.png) no-repeat 50% 50%}}.loading{display:inline-block;background:transparent url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQxcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDQxIDQwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4KICAgIDx0aXRsZT5TbGljZSAxPC90aXRsZT4KICAgIDxkZXNjcmlwdGlvbj5DcmVhdGVkIHdpdGggU2tldGNoIChodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gpPC9kZXNjcmlwdGlvbj4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlIDEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJnMzIiIGZpbGw9IiMwMDAwMDAiPgogICAgICAgICAgICA8cGF0aCBkPSJNMzcuNSwzMCBMMzMuMTY4NzUsMjcuNDk4NzUgQzM0LjQ0ODc1LDI1LjI5IDM1LjE5MjUsMjIuNzM2MjUgMzUuMTkyNSwyMC4wMDc1IEMzNS4xOTI1LDExLjczNjI1IDI4LjQ2Mzc1LDUuMDA3NSAyMC4xOTI1LDUuMDA3NSBDMTEuOTIxMjUsNS4wMDc1IDUuMTkyNSwxMS43MzYyNSA1LjE5MjUsMjAuMDA3NSBDNS4xOTI1LDI4LjI3NzUgMTEuOTIxMjUsMzUuMDA3NSAyMC4xOTI1LDM1LjAwNzUgTDIwLjE5MjUsNDAuMDA3NSBDOS4xNDYyNSw0MC4wMDc1IDAuMTkyNSwzMS4wNTI1IDAuMTkyNSwyMC4wMDc1IEMwLjE5MjUsOC45NjEyNSA5LjE0NjI1LDAuMDA3NSAyMC4xOTI1LDAuMDA3NSBDMzEuMjM4NzUsMC4wMDc1IDQwLjE5MjUsOC45NjEyNSA0MC4xOTI1LDIwLjAwNzUgQzQwLjE5MjUsMjMuNjUxMjUgMzkuMjAyNSwyNy4wNTc1IDM3LjUsMzAiIGlkPSJwYXRoMzQiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==) no-repeat;-webkit-background-size:100% 100%;background-size:100% 100%;vertical-align:middle;-webkit-animation-name:loading;animation-name:loading;-webkit-animation-duration:.9s;animation-duration:.9s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.loading-32{width:32px;height:32px;margin:1px}.loading-20{width:20px;height:20px;margin:2px}.loading-16{width:18px;height:18px;margin:1px}.loading-13{width:13px;height:13px;margin:1px}@-webkit-keyframes loading{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loading{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}.masthead{height:60px;line-height:60px;color:#fff;background-color:#333;font-size:19px}.masterbrand{display:inline-block;width:73px;height:20px;line-height:20px;margin-right:1px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEkAAAAUCAYAAADBYxD1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0MjYyQTNFNUU2RUIxMUUyODg3RUI1NkVFQjU2OUMwOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0MjYyQTNFNkU2RUIxMUUyODg3RUI1NkVFQjU2OUMwOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQyNjJBM0UzRTZFQjExRTI4ODdFQjU2RUVCNTY5QzA5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjQyNjJBM0U0RTZFQjExRTI4ODdFQjU2RUVCNTY5QzA5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+48upBQAAA7RJREFUeNq8mG1ojWEYx3d29no2ttmYbZItY/hCaBoS84GIsiXvipRs9kn7QEPZFwoJ8UEsfBAiQ1KaRBgyeSlZi3mZzczrnLNxtvlf9X/q7mlnnpf7cdWvc59zd+77fv73dV/XdT++PliUN9YIxrBdB2Z7MMcDUMh2A5joxYNEgw6PRPqitL95NMfXCG2d1hEzQOd90Azi+F08zgdyuGNxGhbwBLwCMRzb8OqhYBJI1vzAreAxeAo+cvwCMB5MAAn9/SmSSLLYA+ASFx9WRErgwPvAdJeLPgGOsR1WRIoHI8AuUKpBnHdgLzgDvoMupc8PAtz8laAcpFoRSSxEZJAsCtQNPjEWLAG1SkxwYrLYINs5XM9vzvESrGKfG6GugzLQxO+DQS5I51wt4DPnqwIzwSxzTBooXonlg3vgGY9gJUjkgxzVEBON43WDx+Ah2M/dlE3Zw08ndgusoUDiLavBRQb526CenAIlIBv0RlrkQCa7mwlSuAM7wTj2vdAUK8RbM7jL4lGbwVT2vQXtDoP6dm7mIHAQnARzeJwNy6anngfnQJ7VmKSazyTmByVzjdIYVP2mo25kXRFviIPxroK7bG8C6yz8p8hO4FYtSJf00XNqmPUyGeR02B/wCKSxvjrL453E4x2wOZ4cz5tMBiLwBjeLsyLSazCfmUcE6+HvFWCGxpqqhBsRomhia8EyB+N1gvds51J814HzX8fNz7oolXFDbAdYD35qEMmYI5bjGyn4OFjEjbJjYUXoGLeLszKABLILdHmJ/G+YIWqIBMFDLhcjR+IyGM45pNC7Bo4whZfzCCZZHC9ZiWPN9E5PPSmexaOINRrMBYfBPPbXsmp2u1n5TAR5LFKrwUb2SwC+Y2O8JCUIt3KNnooU1V/toOxUmAtxa/3NkaEkjzab4y3l5kZR8DoL/3nOxGFbJFn8D7pskJfV0+AK+6V+GqtBoF/MSkHOZxw3o9gssDmmXGu2Mky0sHqvZmHZawrycoPYAhYzy1qOSX3KK48iRdAuek43g3kZC0AnZszRzmMcy9+6eVXoZL9kvskOxl9BwSsZ56oYP7NJiMVqh/IWwWdHpGilhjG7YCLjU4XLWsmniNVk6ouj+HKt2GYqNu0UqGX0wt2s99pIg0mHYaAYTLMjUilrjIDyIL2sOQp4EUxxecwW8MoQrwjWw+yUzwCepSHeFZN63hEbufl+Ps8UXmpH2ikBZMHLiZe2kPwvK3Ty1iKarwy8MPW+lerRHGkR2jot/a8AAwD2R9W1w4V4gAAAAABJRU5ErkJggg==);text-indent:100%;white-space:nowrap;overflow:hidden}.panel-full-height{display:table}.panel-full-height>.panel{display:table-cell;vertical-align:top;float:none}.panel{background-color:#fff}.panel.control-panel{background-color:#e0e6e9}.panel.control-panel .hd{color:#4d4d4d}.panel-border{border-top:1px solid #adadad;padding-top:28px}.panel .hd{margin:.67em 0}.panel .hd{font-size:24px;font-weight:700;color:#222}.panel h1,.panel h2,.panel h3,.panel h4,.panel h5,.panel h6{font-size:inherit}.panel .hd>*{margin:0}.panel .hd .sep{display:inline-block;border-left:1px solid #000;padding-left:8px}.panel .intro{font-size:18px}@media (min-width:400px) and (max-width:599px){.panel-full-height{display:block}.panel-full-height>.panel{display:block}}.project-header{min-height:83px;line-height:83px;font-size:30px;font-weight:lighter}.project-header>div{display:inline-block}.ph-with-toolbar{text-align:right}.ph-with-toolbar>div{float:left}.ph-with-toolbar>.ph-toolbar{float:none}@media (min-width:400px) and (max-width:599px){.project-header>div{line-height:41px;margin:10px 0}.project-header>*{float:none;text-align:left}}.table td,.table th{padding:8px;text-align:left;border-bottom:1px solid #eee}.transient{-webkit-transition:opacity 1s;transition:opacity 1s}.transient.is-inactive{opacity:0}.transient.is-active{opacity:1}

data/lib/wpa_cli_web/public/bower_components/house-style/modules/base/base.css

@@ -0,0 +1,37 @@
+body {
+  color: #4d4d4d;
+  background-color: #f3f3f4;
+  -webkit-font-smoothing: antialiased;
+  height: 100%;
+}
+
+a {
+  color: #0993e3;
+}
+
+/* TOOD: - figure out why inputs don't inherit from body */
+* {
+  -webkit-font-smoothing: antialiased;
+}
+
+/**
+ * Microclearfix 
+ * See: http://nicolasgallagher.com/micro-clearfix-hack/
+ *
+ * For modern browsers
+ * 1. The space content is one way to avoid an Opera bug when the
+ *    contenteditable attribute is included anywhere else in the document.
+ *    Otherwise it causes space to appear at the top and bottom of elements
+ *    that are clearfixed.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ *    `:before` to contain the top-margins of child elements.
+ */
+.clearfix:before,
+.clearfix:after {
+    content: " "; /* 1 */
+    display: table; /* 2 */
+}
+
+.clearfix:after {
+    clear: both;
+}

data/lib/wpa_cli_web/public/bower_components/house-style/modules/button/button.css

@@ -0,0 +1,26 @@
+.btn {
+  border: none;
+}
+
+.btn-with-text {
+  min-width: 180px;
+  height: 33px;
+  line-height: 32px;
+  text-transform: uppercase;
+
+  color: #fff;
+  background-color: #2aaf00;
+  font-weight: bold;
+}
+
+.btn-with-text:hover {
+  background-color: #657061;
+}
+
+.btn-destructive {
+  background-color: hsl(2, 75%, 50%);
+}
+
+.btn-destructive:hover {
+  background-color: hsl(2, 75%, 30%);
+}

data/lib/wpa_cli_web/public/bower_components/house-style/modules/grid/grid.css

@@ -0,0 +1,151 @@
+.grid {
+  margin-left: auto;
+  margin-right: auto;
+
+  /* Group 1 margin */
+  padding: 0;
+
+  box-sizing: border-box;
+}
+
+.debug {
+  background-color: rgba(255,255, 0, 0.1);
+}
+
+.debug .grid {
+  background-color: rgba(255,0,0,0.1);
+  outline: 1px solid red;
+}
+
+.grid:before, 
+.grid:after {
+    content: '';
+    display: block;
+    height: 0;
+    overflow: hidden;
+}
+
+.grid:after {
+    clear: both;
+}
+
+.grid-row {
+  margin: 0;
+  padding: 0;
+}
+
+.debug .grid-row {
+}
+
+.grid-col {
+  float: left;
+  padding: 0 4px 0 4px;
+  box-sizing: border-box; /* IE8+ support only */
+}
+
+.grid-col:first-child {
+  padding-left: 0;
+}
+
+.grid-col:last-child {
+  padding-right: 0;
+}
+
+.debug .grid-col {
+  background-color: rgba(0,0,0,0.1);
+  outline: 1px solid blue;
+}
+
+.debug .grid-col > span {
+  background-color: rgba(0,0,0,0.2);
+  display: block;
+}
+
+.grid-1 {
+  width: 8.333333333%;
+}
+
+.grid-2 {
+  width: 16.666666667%;
+}
+
+.grid-3 {
+  width: 25%;
+}
+
+.grid-4 {
+  width: 33.333333333%;
+}
+
+.grid-5 {
+  width: 41.666666667%;
+}
+
+.grid-6 {
+  width: 50%;
+}
+
+.grid-7 {
+  width: 58.333333333%;
+}
+
+.grid-8 {
+  width: 66.666666667%;
+}
+
+.grid-9 {
+  width: 75%;
+}
+
+.grid-10 {
+  width: 83.333333333%;
+}
+
+.grid-11 {
+  width: 91.666666667%;
+}
+
+.grid-12 {
+  width: 100%;
+}
+
+/* Group 2 */
+@media (min-width: 400px) {
+  .grid {
+    max-width: 599px;
+    padding: 0 16px;
+  }
+
+  .grid-bleed {
+    padding: 0;
+  }
+
+  .grid-internal-padding .grid-col {
+    padding: 0 16px;
+  }
+}
+
+/* Group 3 */
+@media (min-width: 600px) {
+  .grid {
+    max-width: 1007px;
+  }
+
+  .grid-col {
+    padding: 0 8px;
+  }
+}
+
+/* Group 4 - flexible */
+@media (min-width: 1008px) {
+  .grid {
+    max-width: 1280px;
+  }
+}
+
+/* Group 5 - fixed */
+@media (min-width: 1281px) {
+  .debug .grid {
+    background: transparent url(grid.png) no-repeat 50% 50%;
+  }
+} 

data/lib/wpa_cli_web/public/bower_components/house-style/modules/grid/images.html

@@ -0,0 +1,208 @@
+<!DOCTYPE html>
+<html class="debugx">
+  <head>
+    <title>Grid - IRFS Components</title>
+    <link rel="stylesheet" href="../../bower_components/normalize-css/normalize.css">
+    <link rel="stylesheet" href="grid.css">
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      header {
+        display: block;
+        height: 33px;
+        line-height: 33px;
+      }
+
+      .logo {
+        display: inline-block;
+        vertical-align: top;
+      }
+
+      .logo:before {
+        content: " ";
+        display: inline-block;
+        width: 74px;
+        height: 21px;
+        vertical-align: middle;
+        background-color: #000;
+      }
+
+      header .group {
+        display: none;
+        margin: 0;
+        line-height: 33px;
+      }
+
+      header > .logo {
+        display: inline-block !important;
+      }
+
+      /* Group 1 */
+      @media (max-width: 399px) {
+        header .group-2 {
+          display: inline-block;
+        }
+      }
+
+      /* Group 2 */
+      @media (min-width: 400px) and (max-width: 599px) {
+        header .group-2 {
+          display: inline-block;
+        }
+      }
+
+      /* Group 3 */
+      @media (min-width: 600px) and (max-width: 1007px) {
+        header .group-3 {
+          display: inline-block;
+        }
+      }
+
+      /* Group 4b - flexible */
+      @media (min-width: 1008px) and (max-width: 1280px) {
+        header .group-4b {
+          display: inline-block;
+        }
+      }
+
+      /* Group 4a - fixed */
+      @media (min-width: 1281px) {
+        header .group-4a {
+          display: inline-block;
+        }
+      }
+
+      .images > div {
+        margin-bottom: 26px;
+      }
+
+      .images > div > .image {
+        display: block;
+        background-color: #fff;
+        margin-bottom: 12px;
+        outline: 1px solid #dbdbdb;
+      }
+
+      .grid-2 .image {
+        height: 109px;
+      }
+
+      .grid-3 .image {
+        height: 168.75px;
+      }
+
+      .images {
+        font-size: 14px;
+        line-height: 18px;
+
+        color: #4d4d4d;
+        margin-bottom: 36px;
+      }
+
+      .images .title {
+        display: block;
+        font-weight: bold;
+        margin-bottom: 6px;
+      }
+
+      .images .synopsis {
+      }
+      
+      .images .meta {
+        padding-right: 10px;
+      }
+    </style>
+  </head>
+  <body class="grid">
+    <div class="grid-row">
+      <header class="grid-col grid-12">
+          <span class="logo"></span>
+          <h2 class="group group-1">Group 1</h2>
+          <h2 class="group group-2">Group 2</h2>
+          <h2 class="group group-3">Group 3</h2>
+          <h2 class="group group-4a">Group 4a</h2>
+          <h2 class="group group-4b">Group 4b</h2>
+      </header>
+
+      <div class="grid-row images">
+        <div class="grid-col grid-2">
+          <span class="image"> </span>
+          <div class="meta">
+            <span class="title">Brand title</span>
+            <span class="synopsis">Drama set during the War of the Roses, one of the bloodiest wars in English history.</span>
+          </div>
+        </div>
+        <div class="grid-col grid-2">
+          <span class="image"> </span>
+          <div class="meta">
+            <span class="title">Brand title</span>
+            <span class="synopsis">Drama set during the War of the Roses, one of the bloodiest wars in English history.</span>
+          </div>
+        </div>
+        <div class="grid-col grid-2">
+          <span class="image"> </span>
+          <div class="meta">
+            <span class="title">Brand title</span>
+            <span class="synopsis">Drama set during the War of the Roses, one of the bloodiest wars in English history.</span>
+          </div>
+        </div>
+        <div class="grid-col grid-2">
+          <span class="image"> </span>
+          <div class="meta">
+            <span class="title">Brand title</span>
+            <span class="synopsis">Drama set during the War of the Roses, one of the bloodiest wars in English history.</span>
+          </div>
+        </div>
+        <div class="grid-col grid-2">
+          <span class="image"> </span>
+          <div class="meta">
+            <span class="title">Brand title</span>
+            <span class="synopsis">Drama set during the War of the Roses, one of the bloodiest wars in English history.</span>
+          </div>
+        </div>
+        <div class="grid-col grid-2">
+          <span class="image"> </span>
+          <div class="meta">
+            <span class="title">Brand title</span>
+            <span class="synopsis">Drama set during the War of the Roses, one of the bloodiest wars in English history.</span>
+          </div>
+        </div>
+      </div><!-- .grid-row -->
+
+      <div class="grid-row images">
+        <div class="grid-col grid-3">
+          <span class="image"> </span>
+          <div class="meta">
+            <span class="title">Brand title</span>
+            <span class="synopsis">Drama set during the War of the Roses, one of the bloodiest wars in English history.</span>
+          </div>
+        </div>
+        <div class="grid-col grid-3">
+          <span class="image"> </span>
+          <div class="meta">
+            <span class="title">Brand title</span>
+            <span class="synopsis">Drama set during the War of the Roses, one of the bloodiest wars in English history.</span>
+          </div>
+        </div>
+        <div class="grid-col grid-3">
+          <span class="image"> </span>
+          <div class="meta">
+            <span class="title">Brand title</span>
+            <span class="synopsis">Drama set during the War of the Roses, one of the bloodiest wars in English history.</span>
+          </div>
+        </div>
+        <div class="grid-col grid-3">
+          <span class="image"> </span>
+          <div class="meta">
+            <span class="title">Brand title</span>
+            <span class="synopsis">Drama set during the War of the Roses, one of the bloodiest wars in English history.</span>
+          </div>
+        </div>
+      </div><!-- .grid-row -->
+
+    </div><!-- .grid-row -->
+  </body>
+</html>

data/lib/wpa_cli_web/public/bower_components/house-style/modules/grid/index.html

@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html class="debug">
+  <head>
+    <title>Grid - IRFS Components</title>
+    <link rel="stylesheet" href="../../bower_components/normalize-css/normalize.css">
+    <link rel="stylesheet" href="grid.css">
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      header {
+        display: block;
+        height: 33px;
+        line-height: 33px;
+      }
+
+      .logo {
+        display: inline-block;
+        vertical-align: top;
+      }
+
+      .logo:before {
+        content: " ";
+        display: inline-block;
+        width: 74px;
+        height: 21px;
+        vertical-align: middle;
+        background-color: #000;
+      }
+
+      header .group {
+        display: none;
+        margin: 0;
+        line-height: 33px;
+      }
+
+      header > .logo {
+        display: inline-block !important;
+      }
+
+      /* Group 1 */
+      @media (max-width: 399px) {
+        header .group-1 {
+          display: inline-block;
+        }
+      }
+
+      /* Group 2 */
+      @media (min-width: 400px) and (max-width: 599px) {
+        header .group-2 {
+          display: inline-block;
+        }
+      }
+
+      /* Group 3 */
+      @media (min-width: 600px) and (max-width: 1007px) {
+        header .group-3 {
+          display: inline-block;
+        }
+      }
+
+      /* Group 4b - flexible */
+      @media (min-width: 1008px) and (max-width: 1280px) {
+        header .group-4 {
+          display: inline-block;
+        }
+      }
+
+      /* Group 4a - fixed */
+      @media (min-width: 1281px) {
+        header .group-5 {
+          display: inline-block;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div class="grid-row">
+        <header class="grid-col grid-12">
+            <span class="logo"></span>
+            <h2 class="group group-1">Group 1</h2>
+            <h2 class="group group-2">Group 2</h2>
+            <h2 class="group group-3">Group 3</h2>
+            <h2 class="group group-4">Group 4 (fluid)</h2>
+            <h2 class="group group-5">Group 5 (fixed)</h2>
+        </header>
+      </div><!-- .grid-row -->
+    </div><!-- .grid -->
+
+    <h2>Normal grid</h2>
+    <div class="grid">
+      <div class="grid-row">
+        <div class="grid-col grid-12">
+          <span>12</span>
+        </div>
+      </div><!-- .grid-row -->
+
+      <div class="grid-row">
+        <div class="grid-col grid-6">
+          <span>6</span>
+        </div>
+        <div class="grid-col grid-6">
+          <span>6</span>
+        </div>
+      </div><!-- .grid-row -->
+
+      <div class="grid-row">
+        <div class="grid-col grid-1"><span>1</span></div>
+        <div class="grid-col grid-1"><span>1</span></div>
+        <div class="grid-col grid-1"><span>1</span></div>
+        <div class="grid-col grid-1"><span>1</span></div>
+        <div class="grid-col grid-1"><span>1</span></div>
+        <div class="grid-col grid-1"><span>1</span></div>
+        <div class="grid-col grid-2"><span>2</span></div>
+        <div class="grid-col grid-2"><span>2</span></div>
+        <div class="grid-col grid-2"><span>2</span></div>
+      </div><!-- .grid-row -->
+    </div><!-- .grid -->
+
+    <h2>Grid with bleed</h2>
+    <div class="grid grid-bleed">
+      <div class="grid-row">
+        <div class="grid-col grid-12">
+          <span>12</span>
+        </div>
+      </div><!-- .grid-row -->
+
+      <div class="grid-row">
+        <div class="grid-col grid-6">
+          <span>6</span>
+        </div>
+        <div class="grid-col grid-6">
+          <span>6</span>
+        </div>
+      </div><!-- .grid-row -->
+    </div><!-- .grid -->
+  </body>
+</html>