Merge pull request #39 from adamwathan/documentation

Documentation

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,9 @@
+{
+  "private": true,
+  "devDependencies": {
+    "gulp": "^3.8.8",
+    "hasbin": "^1.2.3",
+    "laravel-elixir": "^6.0.0-15",
+    "yargs": "^4.6.0"
+  }
+}

docs/source/_assets/less/main.less

@@ -0,0 +1,39 @@
+@import "../../../../src/reset";
+@import "../../../../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 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 class="{{ $page->getUrl() === '/' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/">Welcome</a></li>
+                    <li><a class="{{ $page->getUrl() === '/installation' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/installation">Installation</a></li>
+                    <li><a class="{{ $page->getUrl() === '/principles' ? 'text-primary' : 'text-dark-soft' }}" 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 class="{{ $page->getUrl() === '/backgrounds' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/backgrounds">Backgrounds</a></li>
+                    <li><a class="{{ $page->getUrl() === '/borders' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/borders">Borders</a></li>
+                    <li><a class="{{ $page->getUrl() === '/constrain' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/constrain">Constrain</a></li>
+                    <li><a class="{{ $page->getUrl() === '/display' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/display">Display</a></li>
+                    <li><a class="{{ $page->getUrl() === '/flex' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/flex">Flex</a></li>
+                    <li><a class="{{ $page->getUrl() === '/grid' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/grid">Grid</a></li>
+                    <li><a class="{{ $page->getUrl() === '/images' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/images">Images</a></li>
+                    <li><a class="{{ $page->getUrl() === '/position' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/position">Position</a></li>
+                    <li><a class="{{ $page->getUrl() === '/spacing' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/spacing">Spacing</a></li>
+                    <li><a class="{{ $page->getUrl() === '/text' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/text">Text</a></li>
+                    <li><a class="{{ $page->getUrl() === '/z-index' ? 'text-primary' : 'text-dark-soft' }}" 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,54 @@
+@extends('_layouts.master', ['title' => 'Constrain'])
+
+@section('body')
+
+<h1 class="title">Constrain</h1>
+
+<p class="mt-6 mb-3 text-dark-soft">The constrain utilities are simply <code>max-width</code> helpers designed to constrain content to a desired width.</p>
+
+<p class="mt-6 mb-3">Using the utilities in HTML:</p>
+
+<pre class="language-html"><code>{{ '<div class="constrain-xl">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. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+
+<!-- Responsive example -->
+<div class="md:constrain-xl">Lorem ipsum dolor...</div>' }}</code></pre>
+
+<p class="mt-6 mb-3">Using the utilities in Less:</p>
+
+<pre class="language-less"><code>div {
+  .constrain-xs;
+  .constrain-sm;
+  .constrain-md;
+  .constrain-lg;
+  .constrain-xl;
+  .constrain-2xl;
+  .constrain-3xl;
+  .constrain-4xl;
+  .constrain-5xl;
+
+  // Responsive example
+  .screen(md, {
+      .constrain-xl;
+  });
+}</code></pre>
+
+<h2 class="subtitle">Customization</h2>
+
+<p class="mt-6 mb-3">Tailwind exposes the following variables to allow modification of the constrain utilities.</p>
+
+<pre class="language-less"><code>@constrain-xs:  20rem;
+@constrain-sm:  30rem;
+@constrain-md:  40rem;
+@constrain-lg:  50rem;
+@constrain-xl:  60rem;
+@constrain-2xl: 70rem;
+@constrain-3xl: 80rem;
+@constrain-4xl: 90rem;
+@constrain-5xl: 100rem;</code></pre>
+
+@endsection

docs/source/display.blade.php

@@ -0,0 +1,40 @@
+@extends('_layouts.master', ['title' => 'Display'])
+
+@section('body')
+
+<h1 class="title">Display</h1>
+
+<p class="mt-6 mb-3 text-dark-soft">The display utilities simply <code>display</code> property helpers.</p>
+
+<p class="mt-6 mb-3">Using the utilities in HTML:</p>
+
+<pre class="language-html"><code>{{ '<div class="block"></div>
+<div class="inline-block"></div>
+<div class="hidden"></div>
+
+<div class="table">
+    <div class="table-row">
+        <div class="table-cell"></div>
+    </div>
+</div>
+
+<!-- Responsive example -->
+<div class="lg:inline-block"></div>' }}</code></pre>
+
+<p class="mt-6 mb-3">Using the utilities in Less:</p>
+
+<pre class="language-less"><code>div {
+  .block;
+  .inline-block;
+  .table;
+  .table-row;
+  .table-cell;
+  .hidden;
+
+  // Responsive example
+  .screen(lg, {
+      .inline-block;
+  });
+}</code></pre>
+
+@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,45 @@
+@extends('_layouts.master', ['title' => 'Position'])
+
+@section('body')
+
+<h1 class="title">Position</h1>
+
+<p class="mt-6 mb-3 text-dark-soft">The position utilities are primarily <code>position</code> property helpers.</p>
+
+<p class="mt-6 mb-3">Using the utilities in HTML:</p>
+
+<pre class="language-html"><code>{{ '<div class="fixed"></div>
+<div class="absolute"></div>
+<div class="relative"></div>' }}</code></pre>
+
+<p class="mt-6 mb-3">Using the utilities in Less:</p>
+
+<pre class="language-less"><code>div {
+  .fixed;
+  .absolute;
+  .relative;
+}</code></pre>
+
+<h2 class="subtitle">Pinning absolute content</h2>
+
+<p class="mt-6 mb-3">Tailwind also provides pin utilties, useful for "pinning" absolutely positioned elements using the <code>top</code>, <code>right</code>, <code>bottom</code> and <code>left</code> properties.</p>
+
+<p class="mt-6 mb-3">Using the utilities in HTML:</p>
+
+<pre class="language-html"><code>{{ '<div class="relative">
+    <div class="absolute pin-t"></div>
+</div>' }}</code></pre>
+
+<p class="mt-6 mb-3">Using the utilities in Less:</p>
+
+<pre class="language-less"><code>div {
+  .pin-t
+  .pin-r
+  .pin-b
+  .pin-l
+  .pin-y
+  .pin-x
+  .pin
+}</code></pre>
+
+@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,39 @@
+@extends('_layouts.master', ['title' => 'Spacing'])
+
+@section('body')
+
+<h1 class="title">Spacing</h1>
+
+<p class="mt-6 mb-3">The syntax below is combined to create a system for padding and margins. For example, <code>.pt-2</code> would add padding to the top of the element to the value of <code>0.5rem</code> and <code>.my-0</code> would make the horizontal margin zero.</p>
+
+<div class="flex mt-6">
+    <div class="pr-7">
+        <div class="mb-2 text-dark-softer text-uppercase text-xs">Class</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">p</code></div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">m</code></div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">pull</code></div>
+    </div>
+    <div class="pr-7">
+        <div class="mb-2 text-dark-softer text-uppercase text-xs">Position</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">l</code> Left</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">r</code> Right</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">b</code> Bottom</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">t</code> Top</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">v</code> Vertical</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">h</code> Horizontal</div>
+    </div>
+    <div>
+        <div class="mb-2 text-dark-softer text-uppercase text-xs">Space</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">0</code> 0</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">1</code> 0.25rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">2</code> 0.5rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">3</code> 0.75rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">4</code> 1rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">5</code> 1.5rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">6</code> 2rem</div>
+    </div>
+</div>
+
+
+
+@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();
+    }
+};