Rough in skeleton documentation site.

docs/.gitignore

@@ -0,0 +1,4 @@
+/build_local/
+/node_modules/
+/vendor/
+/source/css/

docs/bootstrap.php

@@ -0,0 +1,4 @@
+<?php
+
+/** @var $container \Illuminate\Container\Container */
+/** @var $jigsaw \TightenCo\Jigsaw\Jigsaw */

docs/composer.json

@@ -0,0 +1,5 @@
+{
+    "require": {
+        "tightenco/jigsaw": "^1.0"
+    }
+}

docs/config.php

@@ -0,0 +1,7 @@
+<?php
+
+return [
+    'baseUrl' => '',
+    'production' => false,
+    'collections' => [],
+];

docs/gulpfile.js

@@ -0,0 +1,15 @@
+var gulp = require('gulp');
+var elixir = require('laravel-elixir');
+var argv = require('yargs').argv;
+var bin = require('./tasks/bin');
+
+elixir.config.assetsPath = 'source/_assets';
+elixir.config.publicPath = 'source';
+
+elixir(function(mix) {
+    var env = argv.e || argv.env || 'local';
+
+    mix.less('main.less')
+        .exec(bin.path() + ' build ' + env, ['./source/*', './source/**/*', '!./source/_assets/**/*']);
+});
+

docs/package.json

@@ -0,0 +1,10 @@
+{
+  "private": true,
+  "devDependencies": {
+    "gulp": "^3.8.8",
+    "hasbin": "^1.2.3",
+    "laravel-elixir": "^6.0.0-15",
+    "yargs": "^4.6.0",
+    "tailwindcss": "git+ssh://git@github.com/adamwathan/tailwindcss.git"
+  }
+}

docs/source/_assets/less/main.less

@@ -0,0 +1,39 @@
+@import "../../../node_modules/tailwindcss/src/reset";
+@import "../../../node_modules/tailwindcss/src/utilities";
+@import "prism";
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.define-text-color('primary';
+  default #3498DB,
+  'light' lighten(#3498DB, 25%),
+  'dark' #2980B9
+;);
+
+.define-bg-color('primary';
+  default #3498db,
+  'light' #a0cfee,
+  'dark' #2980b9
+;);
+
+.title {
+  .mb-4;
+  .leading-none;
+  .text-dark-softer;
+  .text-thin;
+  .text-2xl;
+  .text-primary;
+}
+
+.subtitle {
+  .mt-8;
+  .mb-6;
+  .leading-none;
+  .text-dark-softer;
+  .text-thin;
+  .text-xl;
+  .text-primary;
+}

docs/source/_assets/less/prism.less

@@ -0,0 +1,142 @@
+/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+less */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+    color: black;
+    background: none;
+    text-shadow: 0 1px white;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.4;
+
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+
+    font-size: (13rem / 16rem);
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+    text-shadow: none;
+    background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+    text-shadow: none;
+    background: #b3d4fc;
+}
+
+@media print {
+    code[class*="language-"],
+    pre[class*="language-"] {
+        text-shadow: none;
+    }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+    padding: 0.75em 1em;
+    margin: .5em 0;
+    overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+    // background: #f5f2f0;
+    .border;
+    .rounded;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+    padding: .1em;
+    border-radius: .3em;
+    white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+    color: slategray;
+}
+
+.token.punctuation {
+    color: #999;
+}
+
+.namespace {
+    opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+    color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+    color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+    color: #a67f59;
+    background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+    color: #07a;
+}
+
+.token.function {
+    color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+    color: #e90;
+}
+
+.token.important,
+.token.bold {
+    font-weight: bold;
+}
+.token.italic {
+    font-style: italic;
+}
+
+.token.entity {
+    cursor: help;
+}
+

docs/source/_layouts/master.blade.php

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <meta http-equiv="x-ua-compatible" content="ie=edge">
+        <title>{{ isset($title) ? $title . ' - Tailwind CSS' : 'Tailwind CSS' }}</title>
+        <link rel="stylesheet" href="/css/main.css">
+        <script type="text/javascript" src="/js/prism.js" defer=""></script>
+    </head>
+    <body class="full-height flex-col">
+        <header class="p-6 bg-primary">
+            <div class="text-light text-lg">Tailwind CSS</div>
+            <div class="text-primary-light text-xs">A utility-first CSS framework for rapid UI development</div>
+        </header>
+        <div class="flex flex-fill">
+            <nav class="px-6 pb-6 bg-light-softer text-light text-sm text-dark-soft leading-loose" style="flex: 0 0 12rem;">
+                <div class="mt-6 mb-1 text-dark-softer text-uppercase text-xs">Introduction</div>
+                <ul>
+                    <li><a href="{{ $page->baseUrl }}/">Welcome</a></li>
+                    <li><a href="{{ $page->baseUrl }}/installation">Installation</a></li>
+                    <li><a href="{{ $page->baseUrl }}/principles">Principles</a></li>
+                </ul>
+                <div class="mt-6 mb-1 text-dark-softer text-uppercase text-xs">Utilities</div>
+                <ul>
+                    <li><a href="{{ $page->baseUrl }}/backgrounds">Backgrounds</a></li>
+                    <li><a href="{{ $page->baseUrl }}/borders">Borders</a></li>
+                    <li><a href="{{ $page->baseUrl }}/constrain">Constrain</a></li>
+                    <li><a href="{{ $page->baseUrl }}/display">Display</a></li>
+                    <li><a href="{{ $page->baseUrl }}/flex">Flex</a></li>
+                    <li><a href="{{ $page->baseUrl }}/grid">Grid</a></li>
+                    <li><a href="{{ $page->baseUrl }}/images">Images</a></li>
+                    <li><a href="{{ $page->baseUrl }}/position">Position</a></li>
+                    <li><a href="{{ $page->baseUrl }}/spacing">Spacing</a></li>
+                    <li><a href="{{ $page->baseUrl }}/text">Text</a></li>
+                    <li><a href="{{ $page->baseUrl }}/z-index">Z-Index</a></li>
+                </ul>
+            </nav>
+            <div class="p-7 constrain-lg">
+                @yield('body')
+            </div>
+        </div>
+    </body>
+</html>

docs/source/backgrounds.blade.php

@@ -0,0 +1,73 @@
+@extends('_layouts.master', ['title' => 'Backgrounds'])
+
+@section('body')
+
+<h1 class="title">Backgrounds</h1>
+
+<p class="mt-6 mb-3">Using the utilities in HTML:</p>
+
+<pre class="language-html"><code>{{ '<div class="bg-light"></div>
+<div class="bg-light-soft"></div>
+<div class="bg-light-softer"></div>
+<div class="bg-light-softest"></div>
+
+<div class="bg-dark"></div>
+<div class="bg-dark-soft"></div>
+<div class="bg-dark-softer"></div>
+<div class="bg-dark-softest"></div>
+
+<!-- Responsive example -->
+<div class="bg-dark sm:bg-dark-soft md:bg-dark-softer"></div>' }}</code></pre>
+
+<p class="mt-6 mb-3">Using the utilities in Less:</p>
+
+<pre class="language-less"><code>div {
+  .bg-light;
+  .bg-light-soft;
+  .bg-light-softer;
+  .bg-light-softest;
+
+  .bg-dark;
+  .bg-dark-soft;
+  .bg-dark-softer;
+  .bg-dark-softest;
+
+  // Responsive example
+  .screen(lg, {
+      .bg-light;
+  });
+}</code></pre>
+
+<h2 class="subtitle">Custom backgrounds</h2>
+
+<p class="mt-6 mb-3">Generate custom background utilities:</p>
+
+<pre class="language-less"><code>.define-text-color('primary';
+  default #3498db,
+  'light' #a0cfee,
+  'dark'  #2980b9
+;);</code></pre>
+
+<p class="mt-6 mb-3">Using custom background utilities in HTML:</p>
+
+<pre class="language-html"><code>{{ '<div class="bg-primary"></div>
+<div class="bg-primary-light"></div>
+<div class="bg-primary-dark"></div>
+
+<!-- Responsive example -->
+<div class="bg-primary sm:bg-primary-dark"></div>' }}</code></pre>
+
+<p class="mt-6 mb-3">Using custom background utilities in Less:</p>
+
+<pre class="language-less"><code>div {
+  .bg-primary;
+  .bg-primary-light;
+  .bg-primary-dark;
+
+  // Responsive example
+  .screen(lg, {
+      .bg-primary;
+  });
+}</code></pre>
+
+@endsection

docs/source/borders.blade.php

@@ -0,0 +1,7 @@
+@extends('_layouts.master', ['title' => 'Borders'])
+
+@section('body')
+
+<h1 class="title">Borders</h1>
+
+@endsection

docs/source/constrain.blade.php

@@ -0,0 +1,7 @@
+@extends('_layouts.master', ['title' => 'Constrain'])
+
+@section('body')
+
+<h1 class="title">Constrain</h1>
+
+@endsection

docs/source/display.blade.php

@@ -0,0 +1,7 @@
+@extends('_layouts.master', ['title' => 'Display'])
+
+@section('body')
+
+<h1 class="title">Display</h1>
+
+@endsection

docs/source/flex.blade.php

@@ -0,0 +1,7 @@
+@extends('_layouts.master', ['title' => 'Flex'])
+
+@section('body')
+
+<h1 class="title">Flex</h1>
+
+@endsection

docs/source/grid.blade.php

@@ -0,0 +1,7 @@
+@extends('_layouts.master', ['title' => 'Grid'])
+
+@section('body')
+
+<h1 class="title">Grid</h1>
+
+@endsection

docs/source/images.blade.php

@@ -0,0 +1,7 @@
+@extends('_layouts.master', ['title' => 'Images'])
+
+@section('body')
+
+<h1 class="title">Images</h1>
+
+@endsection

docs/source/index.blade.php

@@ -0,0 +1,9 @@
+@extends('_layouts.master')
+
+@section('body')
+
+<h1 class="title">Welcome</h1>
+
+<p>Welcome to Tailwind CSS! Tailwind is a utility-first CSS framework designed for rapid UI development. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
+@endsection

docs/source/installation.blade.php

@@ -0,0 +1,11 @@
+@extends('_layouts.master', ['title' => 'Installation'])
+
+@section('body')
+
+<h1 class="title">Installation</h1>
+
+<p class="mt-6 mb-2">Install Tailwind using NPM:</p>
+
+<pre class="language-bash"><code>npm install tailwindcss</code></pre>
+
+@endsection

docs/source/position.blade.php

@@ -0,0 +1,7 @@
+@extends('_layouts.master', ['title' => 'Position'])
+
+@section('body')
+
+<h1 class="title">Position</h1>
+
+@endsection

docs/source/principles.blade.php

@@ -0,0 +1,7 @@
+@extends('_layouts.master', ['title' => 'Principles'])
+
+@section('body')
+
+<h1 class="title">Principles</h1>
+
+@endsection

docs/source/spacing.blade.php

@@ -0,0 +1,7 @@
+@extends('_layouts.master', ['title' => 'Spacing'])
+
+@section('body')
+
+<h1 class="title">Spacing</h1>
+
+@endsection

docs/source/text.blade.php

@@ -0,0 +1,7 @@
+@extends('_layouts.master', ['title' => 'Text'])
+
+@section('body')
+
+<h1 class="title">Text</h1>
+
+@endsection

docs/source/z-index.blade.php

@@ -0,0 +1,7 @@
+@extends('_layouts.master', ['title' => 'Z-Index'])
+
+@section('body')
+
+<h1 class="title">Z-Index</h1>
+
+@endsection

docs/tasks/bin.js

@@ -0,0 +1,18 @@
+var hasbin = require('hasbin');
+var fs = require('fs');
+
+module.exports = {
+    path: function() {
+        if (fs.existsSync('./vendor/bin/jigsaw')) {
+            return '"./vendor/bin/jigsaw"'
+        }
+
+        if (hasbin.sync('jigsaw')) {
+            return 'jigsaw';
+        }
+
+        console.log('Could not find Jigsaw; please install it via Composer, either locally or globally.');
+
+        process.exit();
+    }
+};