Initial commit

.gitignore

+.DS_Store
+node_modules
+public
+.vscode
\ No newline at end of file

LICENSE

+The MIT License (MIT)
+
+Copyright (c) 2016 Pattern Lab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

+# Patternlab + Tailwind CSS Starter Kit
+
+[Patternlab](https://patternlab.io/) is an awesome tool for developing design systems and [Tailwind CSS](https://tailwindcss.com/) is a brilliant utility-first CSS framework built on top of PostCSS. This project combines the two tools into a base Patternlab project that has Tailwind CSS built-in and ready to go.
+
+
+## Getting Started
+
+These instructions are for getting the project running off a local development environment:
+
+- Install any system requirements on your dev environment
+- Use Yarn to install project dependencies and build the project 
+
+
+### System Requirements
+
+- [Node.js](https://nodejs.org) (v12.14.1 LTS or later recommended)
+- [Yarn](https://yarnpkg.com) (v1.21.1 or later)
+
+### Install and Run
+
+It's Javascript all the way down so once you have the the system requirements you can run the following commands:
+
+```
+yarn
+yarn develop
+```
+
+The `yarn` command will install project dependencies and the `yarn start` command builds the project, sets up a local server for the Patternlab UI and watches relevant template files to rebuild on any changes.
+
+
+### Build
+
+The build command compiles the styleguide CSS and the Patternlab output but it doesn't create a server for the styleguide website. To build, run:
+
+```
+yarn run build
+```
+
+## Configuring Tailwind
+
+Tailwind CSS comes with default configuration that sets up things like scales for typography, spacing and colours but these defaults and additional configuration can be made by editing the `tailwind.config.js` file in the project root.
+
+> **Note**: if changes to configuration or custom components aren't appearing you may need to rebuild/restart Patternlab. Use `control + c` to stop Gulp and `yarn develop` to rebuild and start the dev server for Patternlab.
+
+Find out more at the [Tailwind website](https://tailwindcss.com/docs/configuration).
+
+### Extending Tailwind with PostCSS modules
+
+PostCSS is a tool for transforming CSS using Javascript and there's already a huge number of modules you can use to do all kinds of things. This starter kit already has the Purge PostCSS module added but you can add additional modules in the Gulp configuration.
+
+For example:
+
+``` javascript
+// at root, in gulpfile.js
+gulp.task('tailwind-postcss', function () {
+  return gulp.src('./source/css/style.css')
+    .pipe(postcss([
+      // Add more modules here and
+      require('postcss-import'),
+      require('postcss-nested'),
+      require('postcss-preset-env'),
+      tailwindcss('./tailwind.config.js'),
+      require('autoprefixer'),
+      assets({
+        basePath: 'source/',
+        loadPaths: ['images/']
+      }),
+      require('postcss-clean')
+    ]))
+    .pipe(rename('style.pkgd.css'))
+    .pipe(gulp.dest('./source/dist'));
+});
+
+gulp.task('tailwind-postcss:production', function(){
+  return gulp.src('./source/css/style.css')
+    .pipe(postcss([
+      // Here same time
+      require('postcss-import'),
+      require('postcss-nested'),
+      require('postcss-preset-env'),
+      tailwindcss('./tailwind.config.js'),
+      require('autoprefixer'),
+      assets({
+        basePath: 'source/',
+        loadPaths: ['images/']
+      }),
+      require('postcss-clean'),
+      postcssPurgecss
+    ]))
+    .pipe(rename('style.pkgd.css'))
+    .pipe(gulp.dest('./source/dist'));
+});
+```
+> **Note**: PurgeCSS should run only for the production build because added tailwind selector will not be applied when browser is reloaded.
+
+
+## Configuring Patternlab
+
+The project has Patternlab setup to use the Tailwind CSS output but you can add additional CSS or JS to the Patternlab styleguide as you need.
+
+The existing CSS output file (sytle.css) is linked in the `_00-head.mustache` template file located at `/sources/_meta`.
+
+You can add additional Javascript files to `/sources/js` and then link them into the header and footer templates located at `/sources/_meta`.
+
+Find out more at the [Patternlab website](https://patternlab.io/docs/index.html).
+
+
+## Background
+
+The version of Patternlab we're using is running in NodeJS with Gulp as a taskrunner, Tailwind CSS is a PostCSS project so it is part of the Javascript eco-system too.
+
+### Dependencies
+
+Here's a quick breakdown of the dependencies within the project and the job they're doing.
+
+| Module name                    | Description                                                               |
+| -------------------------------| ------------------------------------------------------------------------- |
+| gulp                           | workflow automation tool                                                  |
+| browser-sync                   | live browser reloading                                                    |
+| minimist                       | argument parser                                                           |
+| patternlab-node                | patternlab module                                                         |
+| styleguidekit-assets-default   | patternlab module                                                         |
+| styleguidekit-mustache-default | patternlab module                                                         |
+| gulp-postcss                   | a tool for transforming css with javascript                               |
+| gulp-rename                    | renames destination file                                                  |
+| postcss-assets                 | auto path resolver for assets                                             |
+| postcss-import                 | use @import for .css                                                      |
+| postcss-nested                 | use nesting like sass for .css                                            |
+| postcss-preset-env             | use future css syntax                                                     |
+| tailwindcss                    | a utility-first css framework for rapidly building custom user interfaces |
+| postcss-purgecss               | tool to remove unused css                                                 |
+
+
+## Reference sites
+
+- [Tailwind CSS](https://tailwindcss.com/docs/what-is-tailwind/)
+- [PostCSS](https://postcss.org/)
+- [Patternlab](https://patternlab.io/docs/)
+- [Gulp](https://gulpjs.com/)
+- [NodeJS](https://nodejs.org/dist/latest-v10.x/docs/api/)
+
+
+## Found something wrong? Let us know
+
+If you find an error in the project or an inconsistency with the information in our README.md file feel free to submit an issue to the project or send us a pull request with improvements.
\ No newline at end of file

gulpfile.js

+/******************************************************
+ * PATTERN LAB NODE
+ * EDITION-NODE-GULP
+ * The gulp wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets.
+******************************************************/
+var gulp = require('gulp'),
+  path = require('path'),
+  browserSync = require('browser-sync').create(),
+  argv = require('minimist')(process.argv.slice(2));
+
+const postcss = require('gulp-postcss');
+const tailwindcss = require('tailwindcss');
+const rename = require('gulp-rename');
+const assets = require('postcss-assets');
+const postcssPurgecss = require('@fullhuman/postcss-purgecss')({
+  content: [
+    './source/**/*.mustache',
+    './source/**/*.json',
+    './source/**/*.js',
+    './public/**/*.html',
+    './public/**/*.js'
+  ],
+  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
+});
+
+function resolvePath(pathInput) {
+  return path.resolve(pathInput).replace(/\\/g,"/");
+}
+
+/******************************************************
+ * COPY TASKS - stream assets from source to destination
+******************************************************/
+// JS copy
+gulp.task('pl-copy:js', function(){
+  return gulp.src('**/*.js', {cwd: resolvePath(paths().source.js)} )
+    .pipe(gulp.dest(resolvePath(paths().public.js)));
+});
+
+// Images copy
+gulp.task('pl-copy:img', function(){
+  return gulp.src('**/*.*',{cwd: resolvePath(paths().source.images)} )
+    .pipe(gulp.dest(resolvePath(paths().public.images)));
+});
+
+// Favicon copy
+gulp.task('pl-copy:favicon', function(){
+  return gulp.src('favicon.ico', {cwd: resolvePath(paths().source.root)} )
+    .pipe(gulp.dest(resolvePath(paths().public.root)));
+});
+
+// Fonts copy
+gulp.task('pl-copy:font', function(){
+  return gulp.src('*', {cwd: resolvePath(paths().source.fonts)})
+    .pipe(gulp.dest(resolvePath(paths().public.fonts)));
+});
+
+// CSS Copy
+// only copy style.pkgd.css and patternlab-scaffolding.css
+gulp.task('pl-copy:css', function(){
+  return gulp.src(resolvePath(paths().source.root) + '/dist/style.pkgd.css')
+    .pipe(gulp.src(resolvePath(paths().source.css) + '/pattern-scaffolding.css'))
+    .pipe(gulp.dest(resolvePath(paths().public.css)))
+    .pipe(browserSync.stream());
+});
+
+// Styleguide Copy everything but css
+gulp.task('pl-copy:styleguide', function(){
+  return gulp.src(resolvePath(paths().source.styleguide) + '/**/!(*.css)')
+    .pipe(gulp.dest(resolvePath(paths().public.root)))
+    .pipe(browserSync.stream());
+});
+
+// Styleguide Copy and flatten css
+gulp.task('pl-copy:styleguide-css', function(){
+  return gulp.src(resolvePath(paths().source.styleguide) + '/**/*.css')
+    .pipe(gulp.dest(function(file){
+      //flatten anything inside the styleguide into a single output dir per http://stackoverflow.com/a/34317320/1790362
+      file.path = path.join(file.base, path.basename(file.path));
+      return resolvePath(path.join(paths().public.styleguide, '/css'));
+    }))
+    .pipe(browserSync.stream());
+});
+
+/******************************************************
+ * PATTERN LAB CONFIGURATION - API with core library
+******************************************************/
+//read all paths from our namespaced config file
+var config = require('./patternlab-config.json'),
+  patternlab = require('patternlab-node')(config);
+
+function paths() {
+  return config.paths;
+}
+
+function getConfiguredCleanOption() {
+  return config.cleanPublic;
+}
+
+function build(done) {
+  patternlab.build(done, getConfiguredCleanOption());
+}
+
+gulp.task('pl-assets', gulp.series(
+  gulp.parallel(
+    'pl-copy:js',
+    'pl-copy:img',
+    'pl-copy:favicon',
+    'pl-copy:font',
+    'pl-copy:css',
+    'pl-copy:styleguide',
+    'pl-copy:styleguide-css'
+  ),
+  function(done){
+    done();
+  })
+);
+
+gulp.task('patternlab:version', function (done) {
+  patternlab.version();
+  done();
+});
+
+gulp.task('patternlab:help', function (done) {
+  patternlab.help();
+  done();
+});
+
+gulp.task('patternlab:patternsonly', function (done) {
+  patternlab.patternsonly(done, getConfiguredCleanOption());
+});
+
+gulp.task('patternlab:liststarterkits', function (done) {
+  patternlab.liststarterkits();
+  done();
+});
+
+gulp.task('patternlab:loadstarterkit', function (done) {
+  patternlab.loadstarterkit(argv.kit, argv.clean);
+  done();
+});
+
+gulp.task('patternlab:build', gulp.series('pl-assets', build, function(done){
+  done();
+}));
+
+gulp.task('patternlab:installplugin', function (done) {
+  patternlab.installplugin(argv.plugin);
+  done();
+});
+
+/******************************************************
+ * SERVER AND WATCH TASKS
+******************************************************/
+// watch task utility functions
+function getSupportedTemplateExtensions() {
+  var engines = require('./node_modules/patternlab-node/core/lib/pattern_engines');
+  return engines.getSupportedFileExtensions();
+}
+function getTemplateWatches() {
+  return getSupportedTemplateExtensions().map(function (dotExtension) {
+    return resolvePath(paths().source.patterns) + '/**/*' + dotExtension;
+  });
+}
+
+function reload() {
+  browserSync.reload();
+}
+
+function reloadCSS() {
+  browserSync.reload('*.css');
+}
+
+function reloadJS() {
+  browserSync.reload('*.js');
+}
+
+/******************************************************
+ * TAILWIND AND POSTCSS TASKS
+******************************************************/
+
+gulp.task('tailwind-postcss', function () {
+  return gulp.src('./source/css/style.css')
+    .pipe(postcss([
+      require('postcss-import'),
+      tailwindcss('./tailwind.config.js'),
+      require('postcss-nested'),
+      // require('postcss-preset-env'),
+      require('postcss-custom-properties'),
+      require('autoprefixer'),
+      assets({
+        basePath: 'source/',
+        loadPaths: ['images/']
+      }),
+      require('postcss-clean')
+    ]))
+    .pipe(rename('style.pkgd.css'))
+    .pipe(gulp.dest('./source/dist'));
+});
+
+gulp.task('tailwind-postcss:production', function(){
+  return gulp.src('./source/css/style.css')
+    .pipe(postcss([
+      require('postcss-import'),
+      tailwindcss('./tailwind.config.js'),
+      require('postcss-nested'),
+      // require('postcss-preset-env'),
+      require('postcss-custom-properties'),
+      require('autoprefixer'),
+      assets({
+        basePath: 'source/',
+        loadPaths: ['images/']
+      }),
+      require('postcss-clean'),
+      postcssPurgecss
+    ]))
+    .pipe(rename('style.pkgd.css'))
+    .pipe(gulp.dest('./source/dist'));
+});
+
+gulp.task('tailwind-postcss:build', gulp.series('tailwind-postcss', 'patternlab:build', function(done) {
+  done();
+}));
+
+gulp.task('tailwind-postcss:build:production', gulp.series('tailwind-postcss:production', 'patternlab:build', function(done) {
+  done();
+}));
+
+function watch() {
+  gulp.watch(resolvePath(paths().source.js) + '/**/*.js', { awaitWriteFinish: true }).on('change', gulp.series('pl-copy:js', reloadJS));
+  gulp.watch(resolvePath(paths().source.css) + '/**/*.pcss', { awaitWriteFinish: true }).on('change', gulp.series('tailwind-postcss'));
+  gulp.watch(resolvePath(paths().source.root) + '/dist/style.pkgd.css', { awaitWriteFinish: true }).on('change', gulp.series('pl-copy:css', reloadCSS));
+  gulp.watch(resolvePath(paths().source.styleguide) + '/**/*.*', { awaitWriteFinish: true }).on('change', gulp.series('pl-copy:styleguide', 'pl-copy:styleguide-css', reloadCSS));
+
+  var patternWatches = [
+    resolvePath(paths().source.patterns) + '/**/*.json',
+    resolvePath(paths().source.patterns) + '/**/*.md',
+    resolvePath(paths().source.data) + '/*.json',
+    resolvePath(paths().source.fonts) + '/*',
+    resolvePath(paths().source.images) + '/*',
+    resolvePath(paths().source.meta) + '/*',
+    resolvePath(paths().source.annotations) + '/*'
+  ].concat(getTemplateWatches());
+
+  console.log(patternWatches);
+
+  gulp.watch(patternWatches, { awaitWriteFinish: true }).on('change', gulp.series(build, reload));
+}
+
+gulp.task('patternlab:connect', gulp.series(function(done) {
+  browserSync.init({
+    server: {
+      baseDir: resolvePath(paths().public.root)
+    },
+    snippetOptions: {
+      // Ignore all HTML files within the templates folder
+      blacklist: ['/index.html', '/', '/?*']
+    },
+    notify: {
+      styles: [
+        'display: none',
+        'padding: 15px',
+        'font-family: sans-serif',
+        'position: fixed',
+        'font-size: 1em',
+        'z-index: 9999',
+        'bottom: 0px',
+        'right: 0px',
+        'border-top-left-radius: 5px',
+        'background-color: #1B2032',
+        'opacity: 0.4',
+        'margin: 0',
+        'color: white',
+        'text-align: center'
+      ]
+    }
+  }, function(){
+    console.log('PATTERN LAB NODE WATCHING FOR CHANGES');
+    done();
+  });
+}));
+
+/******************************************************
+ * COMPOUND TASKS
+******************************************************/
+gulp.task('default', gulp.series('tailwind-postcss:build:production'));
+gulp.task('patternlab:watch', gulp.series('tailwind-postcss:build', watch));
+gulp.task('patternlab:serve', gulp.series('tailwind-postcss:build', 'patternlab:connect', watch));

package.json

+{
+  "name": "edition-node-gulp",
+  "description": "The gulp wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets.",
+  "version": "1.3.4",
+  "dependencies": {
+    "acorn": "^7.1.1",
+    "browser-sync": "^2.26.7",
+    "gulp": "^4.0.2",
+    "kind-of": "^6.0.3",
+    "lodash.template": "^4.5.0",
+    "minimist": "^1.2.3",
+    "patternlab-node": "^2.12.0",
+    "postcss-clean": "^1.1.0",
+    "postcss-custom-properties": "^9.1.1",
+    "styleguidekit-assets-default": "^3.0.0",
+    "styleguidekit-mustache-default": "^3.0.0",
+    "tailwind-css-variables": "^2.0.3",
+    "tailwindcss-typography": "^3.1.0"
+  },
+  "resolutions": {
+    "lodash": "^4.17.12"
+  },
+  "keywords": [
+    "Pattern Lab",
+    "Atomic Web Design",
+    "Node",
+    "Gulp",
+    "Javascript"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/pattern-lab/edition-node-gulp.git"
+  },
+  "bugs": "https://github.com/pattern-lab/edition-node-gulp/issues",
+  "author": "Brian Muenzenmeyer",
+  "scripts": {
+    "postinstall": "node scripts/postinstall.js",
+    "gulp": "gulp -- ",
+    "develop": "gulp patternlab:serve",
+    "build": "gulp"
+  },
+  "license": "MIT",
+  "engines": {
+    "node": ">=5.0"
+  },
+  "devDependencies": {
+    "@fullhuman/postcss-purgecss": "^1.3.0",
+    "gulp-postcss": "^8.0.0",
+    "gulp-rename": "^2.0.0",
+    "postcss-assets": "^5.0.0",
+    "postcss-import": "^12.0.1",
+    "postcss-nested": "^4.2.1",
+    "postcss-preset-env": "^6.7.0",
+    "tailwindcss": "1.2.0"
+  }
+}

patternlab-config.json

+{
+  "paths" : {
+    "source" : {
+      "root": "./source/",
+      "patterns" : "./source/_patterns/",
+      "data" : "./source/_data/",
+      "meta": "./source/_meta/",
+      "annotations" : "./source/_annotations/",
+      "styleguide" : "./node_modules/styleguidekit-assets-default/dist/",
+      "patternlabFiles" : "./node_modules/styleguidekit-mustache-default/views/",
+      "js" : "./source/js",
+      "images" : "./source/images",
+      "fonts" : "./source/fonts",
+      "css" : "./source/css/"
+    },
+    "public" : {
+      "root" : "./public/",
+      "patterns" : "./public/patterns/",
+      "data" : "./public/styleguide/data/",
+      "annotations" : "./public/annotations/",
+      "styleguide" : "./public/styleguide/",
+      "js" : "./public/js",
+      "images" : "./public/images",
+      "fonts" : "./public/fonts",
+      "css" : "./public/css"
+    }
+  },
+  "styleGuideExcludes": [
+  ],
+  "defaultPattern": "all",
+  "defaultShowPatternInfo": false,
+  "cleanPublic" : true,
+  "patternExtension": "mustache",
+  "ignored-extensions" : ["scss", "DS_Store", "less"],
+  "ignored-directories" : ["scss"],
+  "debug": false,
+  "ishControlsHide": {
+    "s": false,
+    "m": false,
+    "l": false,
+    "full": false,
+    "random": false,
+    "disco": false,
+    "hay": true,
+    "mqs": false,
+    "find": false,
+    "views-all": false,
+    "views-annotations": false,
+    "views-code": false,
+    "views-new": false,
+    "tools-all": false,
+    "tools-docs": false
+  },
+  "ishMinimum": "240",
+  "ishMaximum": "2600",
+  "patternStateCascade": ["inprogress", "inreview", "complete"],
+  "patternStates": {
+  },
+  "patternExportPatternPartials": [],
+  "patternExportDirectory": "./pattern_exports/",
+  "cacheBust": true,
+  "starterkitSubDir": "dist",
+  "outputFileSuffixes": {
+    "rendered": ".rendered",
+    "rawTemplate": "",
+    "markupOnly": ".markup-only"
+  },
+  "cleanOutputHtml": true
+}

scripts/postinstall.js

+"use strict";
+console.log('Beginning Pattern Lab Node Gulp postinstall...');
+
+//call the core library postinstall
+var patternlab = require('patternlab-node/core/scripts/postinstall');

source/_annotations/annotations.js

+{
+  "comments" : [
+    {
+      "el": "#annotation-css-selector",
+      "title" : "Annotation title",
+      "comment": "Annotation description"
+    }
+  ]
+}

source/_data/data.json

+{
+  "key": "value",
+  "key2": "use this for variables you want to load globally",
+  "title": "Nullizzle shizznit velizzle, hizzle, suscipit own yo', gravida vizzle, arcu.",
+  "img": {
+    "avatar": {
+      "src": "http://placeimg.com/100/100/people",
+      "alt": "Avatar"
+    },
+    "square": {
+      "src": "http://placeimg.com/300/300/nature",
+      "alt": "Square"
+    },
+    "rectangle": {
+      "src": "http://placeimg.com/400/300/tech",
+      "alt": "Rectangle"
+    },
+    "landscape-4x3": {
+      "src": "http://placeimg.com/400/300/tech",
+      "alt": "4x3 Image"
+    },
+    "landscape-16x9": {
+      "src": "http://placeimg.com/640/360/tech",
+      "alt": "16x9 Image"
+    }
+  },
+  "headline": {
+    "short": "Lorizzle pimpin' dolizzle sit amet I",
+    "medium": "Rizzle adipiscing elizzle. Nullam sapien velizzle, shit volutpizzle, my"
+  },
+  "excerpt": {
+    "short": "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
+    "medium": "Izzle crazy tempizzle sizzle. We gonna chung gangsta get down get down fo shizzle turpizzle. Away break it down black. Pellentesque bling bling rhoncus fo shizzle. In hac the bizzle platea dictumst. Black dapibizzle. Crackalackin.",
+    "long": "Curabitizzle fo shizzle diam quizzle nisi nizzle mollizzle. Suspendisse boofron. Morbi odio. Sure pizzle. Crazy orci. Shut the shizzle up maurizzle get down get down, check out this a, go to hizzle sit amizzle, malesuada izzle, pede. Pellentesque gravida. Vestibulizzle check it out mi, volutpat izzle, shiz sed, shiznit sempizzle, da bomb. Funky fresh in ipsum. Da bomb volutpat felis vizzle daahng dawg. Crizzle quis dope izzle fo shizzle my ni."
+  },
+  "description": "Fizzle crazy tortor. Sed rizzle. Ass pimpin' dolor dapibizzle turpis tempizzle fo shizzle my nizzle. Maurizzle pellentesque its fo rizzle izzle turpis. Get down get down we gonna chung nizzle. Shizzlin dizzle eleifend rhoncizzle break it down. In yo ghetto platea dictumst. Bling bling dapibizzle. Curabitur break yo neck, yall fo, pretizzle eu, go to hizzle dope, own yo' vitae, nunc. Bizzle suscipizzle. Ass semper velit sizzle fo.",
+  "url": "http://lorizzle.nl/",
+  "name": {
+    "first": "Junius",
+    "firsti": "J",
+    "middle": "Marius",
+    "middlei": "M",
+    "last": "Koolen",
+    "lasti": "K"
+  },
+  "year": {
+    "long": "2013",
+    "short": "13"
+  },
+  "month": {
+    "long": "January",
+    "short": "Jan",
+    "digit": "01"
+  },
+  "dayofweek": {
+    "long": "Sunday",
+    "short": "Sun"
+  },
+  "day": {
+    "long": "01",
+    "short": "1",
+    "ordinal": "st"
+  },
+  "hour": {
+    "long": "06",
+    "short": "6",
+    "military": "06",
+    "ampm": "am"
+  },
+  "minute": {
+    "long": "20",
+    "short": "20"
+  },
+  "seconds": "31"
+}

source/_meta/_00-head.mustache

+<!DOCTYPE html>
+<html class="{{ htmlClass }}">
+  <head>
+    <title>{{ title }}</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width" />
+
+    <link rel="stylesheet" href="../../css/style.pkgd.css?{{ cacheBuster }}" media="all" />
+    <link rel="stylesheet" href="../../css/pattern-scaffolding.css?{{ cacheBuster }}" media="all" />
+    <script src="https://kit.fontawesome.com/cbdc6198f3.js" crossorigin="anonymous"></script>
+
+    <!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
+    {{{ patternLabHead }}}
+    <!-- End Pattern Lab -->
+
+  </head>
+  <body class="{{ bodyClass }}">
+

source/_meta/_01-foot.mustache

+  
+  <!--DO NOT REMOVE-->
+  {{{ patternLabFoot }}}
+  
+  <script src="../../js/main.js?{{ cacheBuster }}"></script>
+
+  </body>
+</html>

source/_patterns/.gitkeep

+keeping this dir around

source/_patterns/00-atoms/00-global/00-brand-colors.mustache

+<ul class="sg-colors">
+	<li>
+		<span class="sg-swatch bg-black"></span>
+		<span class="sg-label">--color-black<br>#00000;</span>
+	</li>
+	<li>
+		<span class="sg-swatch bg-white"></span>
+		<span class="sg-label">--color-white<br>#ffffff</span>
+	</li>
+	<li>
+		<span class="sg-swatch bg-green-100"></span>
+		<span class="sg-label">--color-green-100<br>#29bc51</span>
+	</li>
+	<li>
+		<span class="sg-swatch bg-green-200"></span>
+		<span class="sg-label">--color-green-200<br>#1c8c3b</span>
+	</li>
+</ul>

source/_patterns/00-atoms/00-global/01-neutral-colors.mustache

+<ul class="sg-colors">
+	<li>
+		<span class="sg-swatch bg-grey-100"></span>
+		<span class="sg-label">--color-grey-100<br>#f3f3f3</span>
+	</li>
+	<li>
+		<span class="sg-swatch bg-grey-200"></span>
+		<span class="sg-label">--color-grey-200<br>#adadad</span>
+	</li>
+	<li>
+		<span class="sg-swatch bg-grey-300"></span>
+		<span class="sg-label">--color-grey-300<br>#4c4c4c</span>
+	</li>
+	<li>
+		<span class="sg-swatch bg-grey-400"></span>
+		<span class="sg-label">--color-grey-400<br>#343434</span>
+	</li>
+	<li>
+		<span class="sg-swatch bg-grey-500"></span>
+		<span class="sg-label">--color-grey-500<br>#202020</span>
+	</li>
+</ul>

source/_patterns/00-atoms/00-global/02-utility-colors.mustache

+<ul class="sg-colors">
+	<li>
+		<span class="sg-swatch bg-red"></span>
+		<span class="sg-label">--color-red<br>#d6151b</span>
+	</li>
+	<li>
+		<span class="sg-swatch bg-facebook-blue"></span>
+		<span class="sg-label">--color-facebook-blue<br>#067ceb</span>
+	</li>
+</ul>

source/_patterns/00-atoms/00-global/03-fonts.mustache

+<p class="font-body">Primary font: "Roboto", "Helvetica", "Arial", sans-serif;</p>
+<p class="font-body"><em>Primary font italic: "Roboto", "Helvetica", "Arial", sans-serif;</em></p>
+<p class="font-body font-light">Primary font light: "Roboto", "Helvetica", "Arial", sans-serif;</p>
+<p class="font-body font-medium">Primary font medium: "Roboto", "Helvetica", "Arial", sans-serif;</p>
+<p class="font-body font-bold">Primary font bold: "Roboto", "Helvetica", "Arial", sans-serif;</p>
+
+<p class="font-condensed">Condensed font: "Roboto Condensed", "Helvetica", "Arial", sans-serif;</p>
+<p class="font-condensed"><em>Condensed font italic: "Roboto", "Helvetica", "Arial", sans-serif;</em></p>
+<p class="font-condensed font-light">Condensed font light: "Roboto", "Helvetica", "Arial", sans-serif;</p>
+<p class="font-condensed font-bold">Condensed font bold: "Roboto", "Helvetica", "Arial", sans-serif;</p>
+
+<p class="font-alt">Alternate font: "Bebas Neue", "Helvetica", "Arial", sans-serif;</p>
+<p class="font-alt font-bold">Alternate font bold: "Bebas Neue", "Helvetica", "Arial", sans-serif;</p>

source/_patterns/00-atoms/01-text/font-sizes.mustache

+<p class="text-7xl">7xl size</p>
+<p class="text-6xl">6xl size</p>
+<p class="text-5xl">5xl size</p>
+<p class="text-4xl">4xl size</p>
+<p class="text-3xl">3xl size</p>
+<p class="text-2xl">2xl size</p>
+<p class="text-xl">xl size</p>
+<p class="text-lg">lg size</p>
+<p class="text-base">base size</p>
+<p class="text-sm">sm size</p>
+<p class="text-xs">xs size</p>

source/_patterns/00-atoms/01-text/headings.mustache

+<h1 class="h-xl">Largest headline</h1>
+<h1 class="h-lg">Large headline</h1>
+<h1 class="h-md">Medium headline</h1>
+<h1 class="h-base">Base headline</h1>
+<h1 class="h-base-heavy">Base headline heavy variant</h1>
+<h1 class="h-sm">Small headline</h1>
+<h1 class="h-sm-heavy">Small headline heavy variant</h1>
+<h1 class="h-xs">Extra small headline</h1>
+<h1 class="h-xs-allcaps">Extra small headline allcaps</h1>