Add stuff

5 files changed, 711 insertions, 0 deletions

diff --git a/packages/dev-tools-pages/public/css/basscss_responsive_custom.css b/packages/dev-tools-pages/public/css/basscss_responsive_custom.css
new file mode 100644
index 000000000..5f8bd9117
--- /dev/null
+++ b/packages/dev-tools-pages/public/css/basscss_responsive_custom.css
@@ -0,0 +1,85 @@
+/* Custom Basscss Responsive Utilities */
+
+@media (max-width: 52em) {
+    .sm-center {
+        text-align: center;
+    }
+    .sm-align-middle {
+        vertical-align: middle;
+    }
+    .sm-align-top {
+        vertical-align: top;
+    }
+    .sm-left-align {
+        text-align: left;
+    }
+    .sm-right-align {
+        text-align: right;
+    }
+    .sm-table-cell {
+        display: table-cell;
+    }
+    .sm-mx-auto {
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .sm-right {
+        float: right;
+    }
+}
+
+@media (min-width: 52em) {
+    .md-center {
+        text-align: center;
+    }
+    .md-align-middle {
+        vertical-align: middle;
+    }
+    .md-align-top {
+        vertical-align: top;
+    }
+    .md-left-align {
+        text-align: left;
+    }
+    .md-right-align {
+        text-align: right;
+    }
+    .md-table-cell {
+        display: table-cell;
+    }
+    .md-mx-auto {
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .md-right {
+        float: right;
+    }
+}
+
+@media (min-width: 64em) {
+    .lg-center {
+        text-align: center;
+    }
+    .lg-align-middle {
+        vertical-align: middle;
+    }
+    .lg-align-top {
+        vertical-align: top;
+    }
+    .lg-left-align {
+        text-align: left;
+    }
+    .lg-right-align {
+        text-align: right;
+    }
+    .lg-table-cell {
+        display: table-cell;
+    }
+    .lg-mx-auto {
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .lg-right {
+        float: right;
+    }
+}
diff --git a/packages/dev-tools-pages/public/css/basscss_responsive_margin.css b/packages/dev-tools-pages/public/css/basscss_responsive_margin.css
new file mode 100644
index 000000000..c9f3e855c
--- /dev/null
+++ b/packages/dev-tools-pages/public/css/basscss_responsive_margin.css
@@ -0,0 +1,453 @@
+/* Basscss Responsive Margin */
+
+@media (max-width: 52em) {
+    /* Modified by Fabio Berger to max-width from min-width */
+
+    .sm-m0 {
+        margin: 0;
+    }
+    .sm-mt0 {
+        margin-top: 0;
+    }
+    .sm-mr0 {
+        margin-right: 0;
+    }
+    .sm-mb0 {
+        margin-bottom: 0;
+    }
+    .sm-ml0 {
+        margin-left: 0;
+    }
+    .sm-mx0 {
+        margin-left: 0;
+        margin-right: 0;
+    }
+    .sm-my0 {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+    .sm-m1 {
+        margin: 0.5rem;
+    }
+    .sm-mt1 {
+        margin-top: 0.5rem;
+    }
+    .sm-mr1 {
+        margin-right: 0.5rem;
+    }
+    .sm-mb1 {
+        margin-bottom: 0.5rem;
+    }
+    .sm-ml1 {
+        margin-left: 0.5rem;
+    }
+    .sm-mx1 {
+        margin-left: 0.5rem;
+        margin-right: 0.5rem;
+    }
+    .sm-my1 {
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .sm-m2 {
+        margin: 1rem;
+    }
+    .sm-mt2 {
+        margin-top: 1rem;
+    }
+    .sm-mr2 {
+        margin-right: 1rem;
+    }
+    .sm-mb2 {
+        margin-bottom: 1rem;
+    }
+    .sm-ml2 {
+        margin-left: 1rem;
+    }
+    .sm-mx2 {
+        margin-left: 1rem;
+        margin-right: 1rem;
+    }
+    .sm-my2 {
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+    }
+
+    .sm-m3 {
+        margin: 2rem;
+    }
+    .sm-mt3 {
+        margin-top: 2rem;
+    }
+    .sm-mr3 {
+        margin-right: 2rem;
+    }
+    .sm-mb3 {
+        margin-bottom: 2rem;
+    }
+    .sm-ml3 {
+        margin-left: 2rem;
+    }
+    .sm-mx3 {
+        margin-left: 2rem;
+        margin-right: 2rem;
+    }
+    .sm-my3 {
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+    }
+
+    .sm-m4 {
+        margin: 4rem;
+    }
+    .sm-mt4 {
+        margin-top: 4rem;
+    }
+    .sm-mr4 {
+        margin-right: 4rem;
+    }
+    .sm-mb4 {
+        margin-bottom: 4rem;
+    }
+    .sm-ml4 {
+        margin-left: 4rem;
+    }
+    .sm-mx4 {
+        margin-left: 4rem;
+        margin-right: 4rem;
+    }
+    .sm-my4 {
+        margin-top: 4rem;
+        margin-bottom: 4rem;
+    }
+
+    .sm-mxn1 {
+        margin-left: -0.5rem;
+        margin-right: -0.5rem;
+    }
+    .sm-mxn2 {
+        margin-left: -1rem;
+        margin-right: -1rem;
+    }
+    .sm-mxn3 {
+        margin-left: -2rem;
+        margin-right: -2rem;
+    }
+    .sm-mxn4 {
+        margin-left: -4rem;
+        margin-right: -4rem;
+    }
+
+    .sm-ml-auto {
+        margin-left: auto;
+    }
+    .sm-mr-auto {
+        margin-right: auto;
+    }
+    .sm-mx-auto {
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
+@media (min-width: 52em) {
+    .md-m0 {
+        margin: 0;
+    }
+    .md-mt0 {
+        margin-top: 0;
+    }
+    .md-mr0 {
+        margin-right: 0;
+    }
+    .md-mb0 {
+        margin-bottom: 0;
+    }
+    .md-ml0 {
+        margin-left: 0;
+    }
+    .md-mx0 {
+        margin-left: 0;
+        margin-right: 0;
+    }
+    .md-my0 {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+    .md-m1 {
+        margin: 0.5rem;
+    }
+    .md-mt1 {
+        margin-top: 0.5rem;
+    }
+    .md-mr1 {
+        margin-right: 0.5rem;
+    }
+    .md-mb1 {
+        margin-bottom: 0.5rem;
+    }
+    .md-ml1 {
+        margin-left: 0.5rem;
+    }
+    .md-mx1 {
+        margin-left: 0.5rem;
+        margin-right: 0.5rem;
+    }
+    .md-my1 {
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .md-m2 {
+        margin: 1rem;
+    }
+    .md-mt2 {
+        margin-top: 1rem;
+    }
+    .md-mr2 {
+        margin-right: 1rem;
+    }
+    .md-mb2 {
+        margin-bottom: 1rem;
+    }
+    .md-ml2 {
+        margin-left: 1rem;
+    }
+    .md-mx2 {
+        margin-left: 1rem;
+        margin-right: 1rem;
+    }
+    .md-my2 {
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+    }
+
+    .md-m3 {
+        margin: 2rem;
+    }
+    .md-mt3 {
+        margin-top: 2rem;
+    }
+    .md-mr3 {
+        margin-right: 2rem;
+    }
+    .md-mb3 {
+        margin-bottom: 2rem;
+    }
+    .md-ml3 {
+        margin-left: 2rem;
+    }
+    .md-mx3 {
+        margin-left: 2rem;
+        margin-right: 2rem;
+    }
+    .md-my3 {
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+    }
+
+    .md-m4 {
+        margin: 4rem;
+    }
+    .md-mt4 {
+        margin-top: 4rem;
+    }
+    .md-mr4 {
+        margin-right: 4rem;
+    }
+    .md-mb4 {
+        margin-bottom: 4rem;
+    }
+    .md-ml4 {
+        margin-left: 4rem;
+    }
+    .md-mx4 {
+        margin-left: 4rem;
+        margin-right: 4rem;
+    }
+    .md-my4 {
+        margin-top: 4rem;
+        margin-bottom: 4rem;
+    }
+
+    .md-mxn1 {
+        margin-left: -0.5rem;
+        margin-right: -0.5rem;
+    }
+    .md-mxn2 {
+        margin-left: -1rem;
+        margin-right: -1rem;
+    }
+    .md-mxn3 {
+        margin-left: -2rem;
+        margin-right: -2rem;
+    }
+    .md-mxn4 {
+        margin-left: -4rem;
+        margin-right: -4rem;
+    }
+
+    .md-ml-auto {
+        margin-left: auto;
+    }
+    .md-mr-auto {
+        margin-right: auto;
+    }
+    .md-mx-auto {
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
+@media (min-width: 64em) {
+    .lg-m0 {
+        margin: 0;
+    }
+    .lg-mt0 {
+        margin-top: 0;
+    }
+    .lg-mr0 {
+        margin-right: 0;
+    }
+    .lg-mb0 {
+        margin-bottom: 0;
+    }
+    .lg-ml0 {
+        margin-left: 0;
+    }
+    .lg-mx0 {
+        margin-left: 0;
+        margin-right: 0;
+    }
+    .lg-my0 {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+    .lg-m1 {
+        margin: 0.5rem;
+    }
+    .lg-mt1 {
+        margin-top: 0.5rem;
+    }
+    .lg-mr1 {
+        margin-right: 0.5rem;
+    }
+    .lg-mb1 {
+        margin-bottom: 0.5rem;
+    }
+    .lg-ml1 {
+        margin-left: 0.5rem;
+    }
+    .lg-mx1 {
+        margin-left: 0.5rem;
+        margin-right: 0.5rem;
+    }
+    .lg-my1 {
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .lg-m2 {
+        margin: 1rem;
+    }
+    .lg-mt2 {
+        margin-top: 1rem;
+    }
+    .lg-mr2 {
+        margin-right: 1rem;
+    }
+    .lg-mb2 {
+        margin-bottom: 1rem;
+    }
+    .lg-ml2 {
+        margin-left: 1rem;
+    }
+    .lg-mx2 {
+        margin-left: 1rem;
+        margin-right: 1rem;
+    }
+    .lg-my2 {
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+    }
+
+    .lg-m3 {
+        margin: 2rem;
+    }
+    .lg-mt3 {
+        margin-top: 2rem;
+    }
+    .lg-mr3 {
+        margin-right: 2rem;
+    }
+    .lg-mb3 {
+        margin-bottom: 2rem;
+    }
+    .lg-ml3 {
+        margin-left: 2rem;
+    }
+    .lg-mx3 {
+        margin-left: 2rem;
+        margin-right: 2rem;
+    }
+    .lg-my3 {
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+    }
+
+    .lg-m4 {
+        margin: 4rem;
+    }
+    .lg-mt4 {
+        margin-top: 4rem;
+    }
+    .lg-mr4 {
+        margin-right: 4rem;
+    }
+    .lg-mb4 {
+        margin-bottom: 4rem;
+    }
+    .lg-ml4 {
+        margin-left: 4rem;
+    }
+    .lg-mx4 {
+        margin-left: 4rem;
+        margin-right: 4rem;
+    }
+    .lg-my4 {
+        margin-top: 4rem;
+        margin-bottom: 4rem;
+    }
+
+    .lg-mxn1 {
+        margin-left: -0.5rem;
+        margin-right: -0.5rem;
+    }
+    .lg-mxn2 {
+        margin-left: -1rem;
+        margin-right: -1rem;
+    }
+    .lg-mxn3 {
+        margin-left: -2rem;
+        margin-right: -2rem;
+    }
+    .lg-mxn4 {
+        margin-left: -4rem;
+        margin-right: -4rem;
+    }
+
+    .lg-ml-auto {
+        margin-left: auto;
+    }
+    .lg-mr-auto {
+        margin-right: auto;
+    }
+    .lg-mx-auto {
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
diff --git a/packages/dev-tools-pages/public/css/basscss_responsive_padding.css b/packages/dev-tools-pages/public/css/basscss_responsive_padding.css
new file mode 100644
index 000000000..e027c2d65
--- /dev/null
+++ b/packages/dev-tools-pages/public/css/basscss_responsive_padding.css
@@ -0,0 +1,134 @@
+/* Basscss Responsive Padding */
+/* Modified by Fabio Berger to include xs prefix */
+
+@media (max-width: 52em) { /* Modified by Fabio Berger to max-width from min-width */
+
+  .sm-p0  { padding:        0 }
+  .sm-pt0 { padding-top:    0 }
+  .sm-pr0 { padding-right:  0 }
+  .sm-pb0 { padding-bottom: 0 }
+  .sm-pl0 { padding-left:   0 }
+  .sm-px0 { padding-left:   0; padding-right:  0 }
+  .sm-py0 { padding-top:    0; padding-bottom: 0 }
+
+  .sm-p1  { padding:        .5rem }
+  .sm-pt1 { padding-top:        .5rem }
+  .sm-pr1 { padding-right:        .5rem }
+  .sm-pb1 { padding-bottom:        .5rem }
+  .sm-pl1 { padding-left:        .5rem }
+  .sm-px1 { padding-left:        .5rem; padding-right:        .5rem }
+  .sm-py1 { padding-top:        .5rem; padding-bottom:        .5rem }
+
+  .sm-p2  { padding:        1rem }
+  .sm-pt2 { padding-top:        1rem }
+  .sm-pr2 { padding-right:        1rem }
+  .sm-pb2 { padding-bottom:        1rem }
+  .sm-pl2 { padding-left:        1rem }
+  .sm-px2 { padding-left:        1rem; padding-right:        1rem }
+  .sm-py2 { padding-top:        1rem; padding-bottom:        1rem }
+
+  .sm-p3  { padding:        2rem }
+  .sm-pt3 { padding-top:        2rem }
+  .sm-pr3 { padding-right:        2rem }
+  .sm-pb3 { padding-bottom:        2rem }
+  .sm-pl3 { padding-left:        2rem }
+  .sm-px3 { padding-left:        2rem; padding-right:        2rem }
+  .sm-py3 { padding-top:        2rem; padding-bottom:        2rem }
+
+  .sm-p4  { padding:        4rem }
+  .sm-pt4 { padding-top:        4rem }
+  .sm-pr4 { padding-right:        4rem }
+  .sm-pb4 { padding-bottom:        4rem }
+  .sm-pl4 { padding-left:        4rem }
+  .sm-px4 { padding-left:        4rem; padding-right:        4rem }
+  .sm-py4 { padding-top:        4rem; padding-bottom:        4rem }
+
+}
+
+@media (min-width: 52em) {
+
+  .md-p0  { padding:        0 }
+  .md-pt0 { padding-top:    0 }
+  .md-pr0 { padding-right:  0 }
+  .md-pb0 { padding-bottom: 0 }
+  .md-pl0 { padding-left:   0 }
+  .md-px0 { padding-left:   0; padding-right:  0 }
+  .md-py0 { padding-top:    0; padding-bottom: 0 }
+
+  .md-p1  { padding:        .5rem }
+  .md-pt1 { padding-top:        .5rem }
+  .md-pr1 { padding-right:        .5rem }
+  .md-pb1 { padding-bottom:        .5rem }
+  .md-pl1 { padding-left:        .5rem }
+  .md-px1 { padding-left:        .5rem; padding-right:        .5rem }
+  .md-py1 { padding-top:        .5rem; padding-bottom:        .5rem }
+
+  .md-p2  { padding:        1rem }
+  .md-pt2 { padding-top:        1rem }
+  .md-pr2 { padding-right:        1rem }
+  .md-pb2 { padding-bottom:        1rem }
+  .md-pl2 { padding-left:        1rem }
+  .md-px2 { padding-left:        1rem; padding-right:        1rem }
+  .md-py2 { padding-top:        1rem; padding-bottom:        1rem }
+
+  .md-p3  { padding:        2rem }
+  .md-pt3 { padding-top:        2rem }
+  .md-pr3 { padding-right:        2rem }
+  .md-pb3 { padding-bottom:        2rem }
+  .md-pl3 { padding-left:        2rem }
+  .md-px3 { padding-left:        2rem; padding-right:        2rem }
+  .md-py3 { padding-top:        2rem; padding-bottom:        2rem }
+
+  .md-p4  { padding:        4rem }
+  .md-pt4 { padding-top:        4rem }
+  .md-pr4 { padding-right:        4rem }
+  .md-pb4 { padding-bottom:        4rem }
+  .md-pl4 { padding-left:        4rem }
+  .md-px4 { padding-left:        4rem; padding-right:        4rem }
+  .md-py4 { padding-top:        4rem; padding-bottom:        4rem }
+
+}
+
+@media (min-width: 64em) {
+
+  .lg-p0  { padding:        0 }
+  .lg-pt0 { padding-top:    0 }
+  .lg-pr0 { padding-right:  0 }
+  .lg-pb0 { padding-bottom: 0 }
+  .lg-pl0 { padding-left:   0 }
+  .lg-px0 { padding-left:   0; padding-right:  0 }
+  .lg-py0 { padding-top:    0; padding-bottom: 0 }
+
+  .lg-p1  { padding:        .5rem }
+  .lg-pt1 { padding-top:        .5rem }
+  .lg-pr1 { padding-right:        .5rem }
+  .lg-pb1 { padding-bottom:        .5rem }
+  .lg-pl1 { padding-left:        .5rem }
+  .lg-px1 { padding-left:        .5rem; padding-right:        .5rem }
+  .lg-py1 { padding-top:        .5rem; padding-bottom:        .5rem }
+
+  .lg-p2  { padding:        1rem }
+  .lg-pt2 { padding-top:        1rem }
+  .lg-pr2 { padding-right:        1rem }
+  .lg-pb2 { padding-bottom:        1rem }
+  .lg-pl2 { padding-left:        1rem }
+  .lg-px2 { padding-left:        1rem; padding-right:        1rem }
+  .lg-py2 { padding-top:        1rem; padding-bottom:        1rem }
+
+  .lg-p3  { padding:        2rem }
+  .lg-pt3 { padding-top:        2rem }
+  .lg-pr3 { padding-right:        2rem }
+  .lg-pb3 { padding-bottom:        2rem }
+  .lg-pl3 { padding-left:        2rem }
+  .lg-px3 { padding-left:        2rem; padding-right:        2rem }
+  .lg-py3 { padding-top:        2rem; padding-bottom:        2rem }
+
+  .lg-p4  { padding:        4rem }
+  .lg-pt4 { padding-top:        4rem }
+  .lg-pr4 { padding-right:        4rem }
+  .lg-pb4 { padding-bottom:        4rem }
+  .lg-pl4 { padding-left:        4rem }
+  .lg-px4 { padding-left:        4rem; padding-right:        4rem }
+  .lg-py4 { padding-top:        4rem; padding-bottom:        4rem }
+
+}
diff --git a/packages/dev-tools-pages/public/css/basscss_responsive_type_scale.css b/packages/dev-tools-pages/public/css/basscss_responsive_type_scale.css
new file mode 100644
index 000000000..cae23b4e7
--- /dev/null
+++ b/packages/dev-tools-pages/public/css/basscss_responsive_type_scale.css
@@ -0,0 +1,35 @@
+/* Basscss Responsive Type Scale */
+/* Modified by Fabio Berger to include xs prefix */
+
+@media (max-width: 52em) { /* Modified by Fabio Berger to max-width from min-width */
+  .sm-h00 { font-size: 4rem }
+  .sm-h0 { font-size: 3rem }
+  .sm-h1 { font-size: 2rem }
+  .sm-h2 { font-size: 1.5rem }
+  .sm-h3 { font-size: 1.25rem }
+  .sm-h4 { font-size: 1rem }
+  .sm-h5 { font-size: .875rem }
+  .sm-h6 { font-size: .75rem }
+}
+
+@media (min-width: 52em) {
+  .md-h00 { font-size: 4rem }
+  .md-h0 { font-size: 3rem }
+  .md-h1 { font-size: 2rem }
+  .md-h2 { font-size: 1.5rem }
+  .md-h3 { font-size: 1.25rem }
+  .md-h4 { font-size: 1rem }
+  .md-h5 { font-size: .875rem }
+  .md-h6 { font-size: .75rem }
+}
+
+@media (min-width: 64em) {
+  .lg-h00 { font-size: 4rem }
+  .lg-h0 { font-size: 3rem }
+  .lg-h1 { font-size: 2rem }
+  .lg-h2 { font-size: 1.5rem }
+  .lg-h3 { font-size: 1.25rem }
+  .lg-h4 { font-size: 1rem }
+  .lg-h5 { font-size: .875rem }
+  .lg-h6 { font-size: .75rem }
+}
diff --git a/packages/dev-tools-pages/public/index.html b/packages/dev-tools-pages/public/index.html
index 5137eed95..f62d7b255 100644
--- a/packages/dev-tools-pages/public/index.html
+++ b/packages/dev-tools-pages/public/index.html
@@ -12,6 +12,10 @@
     <title>0x: The Protocol for Trading Tokens</title>
     <link rel="icon" type="image/png" href="/images/favicon/favicon-2-32x32.png" sizes="32x32" />
     <link rel="icon" type="image/png" href="/images/favicon/favicon-2-16x16.png" sizes="16x16" />
+    <link rel="stylesheet" href="/css/basscss_responsive_custom.css">
+    <link rel="stylesheet" href="/css/basscss_responsive_padding.css">
+    <link rel="stylesheet" href="/css/basscss_responsive_margin.css">
+    <link rel="stylesheet" href="/css/basscss_responsive_type_scale.css">
 </head>
 
 <body style="margin: 0px; min-width: 355px;">