Working on getting docs to build

docs/mix-manifest.json

@@ -1,3 +1 @@
-{
-    "/source/css/main.css": "/source/css/main.css"
-}
+{}

docs/package.json

@@ -17,8 +17,10 @@
     "less": "^2.7.2",
     "less-loader": "^4.0.5",
     "lodash": "^4.17.4",
+    "normalize.css": "^7.0.0",
     "postcss-cssnext": "^3.0.2",
-    "stylefmt": "^6.0.0"
+    "stylefmt": "^6.0.0",
+    "suitcss-base": "^3.0.0"
   },
   "browserslist": [
     "> 1%"

docs/source/_assets/less/base.less

@@ -1,5 +1,25 @@
+@import (less) "../../../node_modules/normalize.css/normalize.css";
+@import (less) "../../../node_modules/suitcss-base/lib/base.css";
+
+@-moz-viewport      { width: device-width; }
+@-ms-viewport       { width: device-width; }
+@-o-viewport        { width: device-width; }
+@-webkit-viewport   { width: device-width; }
+@viewport           { width: device-width; }
+
 html {
-  .bg-brand-soft;
+  @apply .bg-brand-soft;
+
+  font-size: 12px;
+
+  // Changes the default tap highlight to be completely transparent in iOS.
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+
+  // -webkit-font-smoothing: antialiased;
+
+  @media (min-width: 420px) {
+    font-size: 16px;
+  }
 }
 
 *,
@@ -9,12 +29,40 @@ html {
   -moz-osx-font-smoothing: grayscale;
 }
 
+body {
+  @apply .sans;
+  @apply .text-base;
+  @apply .text-regular;
+  @apply .text-dark;
+  line-height: 1.5;
+}
+
+textarea {
+  resize: vertical;
+}
+
+button, [role=button] {
+  cursor: pointer;
+}
+
+small {
+  @apply .text-sm;
+}
+
+pre, code {
+  @apply .mono;
+}
+
+img {
+  vertical-align: middle;
+}
+
 a {
   color: inherit;
   text-decoration: none;
 
   &:hover {
-    .text-underline;
+    @apply .text-underline;
   }
 }
 

docs/source/_assets/less/container.less

@@ -1,6 +1,6 @@
 .container {
-  .px-4;
-  .mx-auto;
+  @apply .px-4;
+  @apply .mx-auto;
   width: 100%;
 }
 

docs/source/_assets/less/main.less

@@ -1,47 +1,11 @@
-.foo {
-  @apply .px-4;
-  @apply .py-2;
-  @apply .bg-blue;
-  @apply .sans-alt;
-}
+@import "base";
 
-.foo {
-  background-color: red;
-  @media (--breakpoint-sm) {
-    // @class "py-2";
-    background-color: green;
-  }
-  @media (--breakpoint-md) {
-    background-color: orange;
-  }
-}
-
-@responsive {
-  .bar {
-    color: orange;
-  }
-}
+@import "prism";
+@import "markdown";
+@import "container";
 
 @tailwind utilities;
 
-@responsive {
-  .px-4 {
-    padding-right: 1rem;
-    padding-left: 1rem;
-  }
+@import "utilities";
 
-  .py-2 {
-    padding-top: .5rem;
-    padding-bottom: .5rem;
-  }
-}
-
-@responsive {
-  .sans-alt {
-    font-family: 'Brandon Text';
-  }
-}
-
-.this-should-be-the-very-end {
-  color: red;
-}
+@import "variables";

docs/source/_assets/less/markdown.less

@@ -1,70 +1,70 @@
 .markdown, .markdown& {
   .subnav, .subnav& {
-    .flex;
-    .mt-6;
-    .pb-2;
-    .border-b;
+    @apply .flex;
+    @apply .mt-6;
+    @apply .pb-2;
+    @apply .border-b;
 
     .subnav-link, .subnav-link& {
-      .mr-6;
-      .leading-none;
-      .text-dark-soft;
-      .text-sm;
+      @apply .mr-6;
+      @apply .leading-none;
+      @apply .text-dark-soft;
+      @apply .text-sm;
     }
   }
 
   a, a& {
-    .text-blue;
+    @apply .text-blue;
   }
 
   p code, p& code& {
-    .inline-block;
-    .bg-light-soft;
-    .rounded-sm;
-    .text-sm;
-    .p-1;
-    .leading-none;
-    .text-no-wrap;
-    .text-pink-dark;
+    @apply .inline-block;
+    @apply .bg-light-soft;
+    @apply .rounded-sm;
+    @apply .text-sm;
+    @apply .p-1;
+    @apply .leading-none;
+    @apply .text-no-wrap;
+    @apply .text-pink-dark;
     vertical-align: middle;
   }
 
   blockquote, blockquote& {
-    .text-em;
-    .text-dark-soft;
-    .text-sm;
+    @apply .text-em;
+    @apply .text-dark-soft;
+    @apply .text-sm;
   }
 
   h1, h1& {
-    .mb-4;
-    .leading-none;
-    .text-dark;
-    .text-bold;
-    .text-3xl;
+    @apply .mb-4;
+    @apply .leading-none;
+    @apply .text-dark;
+    @apply .text-bold;
+    @apply .text-3xl;
   }
 
   h2, h2& {
-    .mt-16;
-    .mb-8;
-    .text-dark;
-    .leading-none;
-    .text-bold;
-    .text-xl;
+    @apply .mt-16;
+    @apply .mb-8;
+    @apply .text-dark;
+    @apply .leading-none;
+    @apply .text-bold;
+    @apply .text-xl;
   }
 
   h3, h3& {
-    .mt-16;
-    .mb-8;
-    .text-dark;
-    .leading-none;
-    .text-medium;
-    .text-lg;
+    @apply .mt-16;
+    @apply .mb-8;
+    @apply .text-dark;
+    @apply .leading-none;
+    @apply .text-medium;
+    @apply .text-lg;
   }
 
   p, p& {
-    .text-dark-soft;
-    .mt-8;
-    .mb-3;
+    @apply .text-dark-soft;
+    @apply .mt-8;
+    @apply .mb-3;
     line-height: 1.75;
   }
 }

docs/source/_assets/less/prism.less

@@ -52,14 +52,14 @@ code[class*="language-"]::selection, code[class*="language-"] ::selection {
 pre[class*="language-"] {
     padding: 0.75em 1em;
     overflow: auto;
-    .my-4;
+    @apply .my-4;
 }
 
 :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
     // background: #f5f2f0;
-    .border;
-    .rounded;
+    @apply .border;
+    @apply .rounded;
 }
 
 /* Inline code */

docs/webpack.mix.js

@@ -1,4 +1,5 @@
 const mix = require('laravel-mix');
+const tailwind = require('./../lib/tailwind.js');
 
 /*
 |--------------------------------------------------------------------------
@@ -14,7 +15,7 @@ const mix = require('laravel-mix');
 mix.less('source/_assets/less/main.less', 'source/css')
   .options({
     postCss: [
-      require('./../src/tailwind.js')(),
+      tailwind(),
     ]
   })