init

.editorconfig

@@ -0,0 +1,15 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+# Trailing whitespace is significant in markdown files.
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.yml

@@ -0,0 +1,35 @@
+---
+parser: esprima
+env:
+  browser: true,
+  jquery: true
+settings:
+  ecmascript: 6
+plugins: []
+
+# "off" or 0 - turn the rule off
+# "warn" or 1 - turn the rule on as a warning (doesn’t affect exit code)
+# "error" or 2 - turn the rule on as an error (exit code is 1 when triggered)
+# usually preferring warn because error can halt the build process and trips up rapid feedback
+extends: "eslint:recommended"
+rules: # http://eslint.org/docs/rules/
+  camelcase: warn
+  curly:
+    - warn
+    - all
+  indent:
+    - warn
+    - 2
+  no-console:
+    # console.error and console.warn are ok, but let's
+    # keep console.log out of production code.
+    - warn
+    - allow:
+      - warn
+      - error
+  no-mixed-spaces-and-tabs:
+    - warn
+    - smart-tabs
+  no-trailing-spaces: warn
+  no-underscore-dangle: warn
+  semi: warn

.gitattributes

@@ -0,0 +1,39 @@
+#common settings that generally should always be used with your language specific settings
+
+# Auto detect text files and perform LF normalization
+# http://git-scm.com/docs/gitattributes
+* text=auto
+#
+# The above will handle all files NOT found below
+#
+
+# Documents
+*.doc	 diff=astextplain
+*.DOC	 diff=astextplain
+*.docx diff=astextplain
+*.DOCX diff=astextplain
+*.dot  diff=astextplain
+*.DOT  diff=astextplain
+*.pdf  diff=astextplain
+*.PDF	 diff=astextplain
+*.rtf	 diff=astextplain
+*.RTF	 diff=astextplain
+*.md text
+*.adoc text
+*.textile text
+*.mustache text
+*.csv text
+*.tab text
+*.tsv text
+*.sql text
+
+# Graphics
+*.png binary
+*.jpg binary
+*.jpeg binary
+*.gif binary
+*.tif binary
+*.tiff binary
+*.ico binary
+*.svg binary
+*.eps binary

.gitignore

@@ -0,0 +1,54 @@
+# Ignore hidden folders #
+# This takes care of .tmp, .sass-cache, and many others #
+.*/
+
+# secrets files
+.secrets
+.ftppass
+
+# Ignore OS generated files #
+.DS_Store*
+ehthumbs.db
+Icon?
+Thumbs.db
+
+# Always-ignore files and folders #
+*.csv
+*.dat
+*.diff
+*.err
+*.gz
+*.log
+*.orig
+*.out
+*.pid
+*.rej
+*.seed
+*.sublime-*
+*.swn
+*.swo
+*.swp
+*.yo-rc.json
+*~
+.tmp
+lib-cov
+logs
+npm-debug.log
+pids
+results
+
+# Ignore packages #
+*.7z
+*.dmg
+*.gz
+*.iso
+*.jar
+*.rar
+*.tar
+*.zip
+
+# Ignore support folders
+*bower_components
+node_modules
+dist
+dest

.sass-lint.yml

@@ -0,0 +1,52 @@
+files:
+  include: site/**/*.scss
+  ignore:
+    - site/assets/scss/*bootstrap*
+
+options:
+  formatter: stylish
+  merge-default-rules: true
+
+# https://github.com/sasstools/sass-lint/tree/master/docs/rules
+rules:
+
+  class-name-format:
+    - 1
+    - convention: 'hyphenatedbem'
+
+  force-pseudo-nesting: 0
+
+  id-name-format: 0
+
+  leading-zero:
+    - 1
+    - include: true
+
+  nesting-depth:
+    - 1
+    - max-depth: 4
+
+  no-css-comments: 0
+
+  no-color-literals:
+    - 1
+    -
+      allow-rgba: true
+
+  no-duplicate-properties: 1
+
+  no-qualifying-elements:
+    - 1
+    - allow-element-with-attribute: true # input[type='email'] but not div.class-name
+
+  no-vendor-prefixes: 1
+
+  property-sort-order:
+    - 1
+    -
+      # https://github.com/sasstools/sass-lint/blob/develop/lib/config/property-sort-orders/concentric.yml
+      order: concentric
+      # https://github.com/sasstools/sass-lint/blob/develop/lib/config/property-sort-orders/smacss.yml
+      # order: smacss
+
+  quotes: 0

Gruntfile.js

@@ -0,0 +1,168 @@
+/* eslint-disable no-undef */
+module.exports = function(grunt) {
+  'use strict';
+  require('load-grunt-tasks')(grunt);
+
+  grunt.initConfig({
+
+    config: {
+      source: 'site',
+      dest: 'dist',
+      temp: '.tmp'
+    },
+
+    eslint: {
+      // http://eslint.org/docs/rules/
+      target: '<%= config.source %>/assets/js/**/*'
+    },
+
+    sasslint: {
+      // https://github.com/sasstools/sass-lint/tree/master/docs/rules
+      target: '<%= config.source %>/assets/scss/**/*'
+    },
+
+    clean: {
+      build: {
+        files: [{
+          dot: true,
+          src: [
+            '<%= config.dest %>/*'
+          ]
+        }]
+      }
+    },
+
+    sass: {
+      options: {
+        sourceMap: true,
+        includePaths: [
+          '<%= config.source %>/assets/scss/'
+        ]
+      },
+      build: {
+        files: {
+          '<%= config.dest %>/assets/css/main.css': '<%= config.source %>/assets/scss/main.scss'
+        }
+      }
+    },
+
+    postcss: {
+      options: {
+        map: true,
+        processors: [
+          // browser list is managed in package.json
+          // http://browserl.ist/?q=last+2+versions
+          require('autoprefixer')()
+        ]
+      },
+      dist: {
+        src: '<%= config.dest %>/assets/css/main.css'
+      }
+    },
+
+    copy: {
+      assets: {
+        files: [{
+          expand: true,
+          cwd: '<%= config.source %>/assets/',
+          src: ['{js,fonts,img,icon,data,vendor}/**/*'],
+          dest: '<%= config.dest %>/assets/'
+        }]
+      },
+      vendor: {
+        files: [{
+          expand: true,
+          flatten: true,
+          cwd: './node_modules/',
+          src: [
+            'normalize.css/normalize.css'
+          ],
+          dest: '<%= config.dest %>/assets/vendor/'
+        }]
+      },
+      misc: {
+        files: [{
+          expand: true,
+          cwd: '<%= config.source %>',
+          src: [
+            '/assets/favicon.ico'
+          ],
+          dest: '<%= config.dest %>'
+        }]
+      }
+    },
+
+    assemble: {
+      options: {
+        production: false,
+        assets: '<%= config.dest %>/assets',
+        data: '<%= config.source %>/data/*.yml',
+        flatten: true,
+        layout: 'default.hbs',
+        layoutdir: '<%= config.source %>/layouts',
+        partials: '<%= config.source %>/partials/**/*.hbs'
+      },
+
+      buildDev: {
+        files: [{'<%= config.dest %>/': ['<%= config.source %>/pages/**/*.hbs']}]
+      },
+
+      buildProd: {
+        options: {
+          production: true,
+        },
+        files: [{'<%= config.dest %>/': ['<%= config.source %>/pages/**/*.hbs']}]
+      }
+    },
+
+    watch: {
+      images: {
+        files: '<%= config.source %>/img/**/*',
+        tasks: ['copy:assets']
+      },
+      scss: {
+        files: '<%= config.source %>/assets/**/*.scss',
+        tasks: ['concurrent:scssWatch']
+      },
+      js: {
+        files: '<%= config.source %>/assets/**/*.{json,js}',
+        tasks: ['concurrent:jsWatch']
+      },
+      assemble: {
+        files: '<%= config.source %>/**/*.hbs',
+        tasks: ['assemble:buildDev']
+      }
+    },
+
+    concurrent: {
+      scssWatch: ['sasslint', ['sass:build', 'postcss']],
+      jsWatch: ['eslint', 'babel']
+    },
+
+    browserSync: {
+      serve: {
+        bsFiles: { src: [ '<%= config.dest %>/**.*' ] },
+        options: {
+          watchTask: true,
+          server: '<%= config.dest %>',
+          open: 'local',
+          notify: false,
+          ghostMode: {
+            clicks: true,
+            forms: true,
+            scroll: true
+          }
+        }
+      }
+    }
+
+  });
+
+  // Tasks
+  grunt.registerTask('lint', ['sasslint', 'eslint']);
+  grunt.registerTask('build', ['clean:build', 'copy', 'sass', 'postcss', 'assemble:buildDev']);
+  grunt.registerTask('buildProd', ['clean:build', 'copy', 'sass', 'postcss', 'assemble:buildProd']);
+  grunt.registerTask('default', ['lint', 'build']);
+
+  grunt.registerTask('serve', ['lint', 'build', 'browserSync', 'watch']);
+};

README.md

@@ -0,0 +1,42 @@
+## The Stack
+Grunt based task runner with Assemble.io used to generate prototype html sites.
+
+## How to use this project
+Instead of setting up some sort of generator, clone this project and rebuild the git history.
+
+* `git clone`
+* `rm -rf .git`
+* `git init`
+* `git add -A`
+* `git commit -m 'init'`
+
+Then install and start up the runner:
+
+* `npm install` or `yarn install`
+* `grunt serve`
+
+
+## [sass-lint][sass-lint]
+
+[sass-lint]: https://github.com/sasstools/sass-lint "A Node-only Sass linter for both sass and scss syntax!"
+
+- .sass-lint.yml
+- [rules documentation](https://github.com/sasstools/sass-lint/tree/master/docs/rules)
+- [editor integration](https://github.com/sasstools/sass-lint#ide-integration)
+
+## [eslint][eslint]
+
+[eslint]: http://eslint.org/ "The pluggable linting utility for JavaScript and JSX"
+
+- .eslintrc (can be json or yml. yml is more comment friendly, so preferred)
+- [rules documentation](http://eslint.org/docs/rules/)
+- [editor integration](http://eslint.org/docs/user-guide/integrations#editors)
+
+## Misc Files
+
+These files are not directly related to the linters, but should be standard in every project.
+
+- [.editorconfig](http://editorconfig.org/) - [editor plugins](http://editorconfig.org/#download)
+- .gitignore
+- .gitattributes
+

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "prototype-html",
+  "version": "0.1.5",
+  "description": "This is a static site generated from assemble.io used to build prototype html pages.",
+  "main": "index.html",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "WTFPL",
+  "dependencies": {
+    "normalize.css": "^7.0.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.1.3",
+    "browser-sync": "^2.18.13",
+    "grunt": "^1.0.1",
+    "grunt-assemble": "^0.6.3",
+    "grunt-browser-sync": "^2.2.0",
+    "grunt-concurrent": "^2.3.1",
+    "grunt-contrib-clean": "^1.1.0",
+    "grunt-contrib-copy": "^1.0.0",
+    "grunt-contrib-watch": "^1.0.0",
+    "grunt-eslint": "^20.1.0",
+    "grunt-postcss": "^0.8.0",
+    "grunt-sass": "^2.0.0",
+    "grunt-sass-lint": "^0.2.3",
+    "load-grunt-tasks": "^3.5.2",
+    "sass-lint": "^1.11.1"
+  },
+  "browserslist": [
+    "last 2 versions"
+  ]
+}

site/assets/scss/components/_styleguide.scss

@@ -0,0 +1,23 @@
+
+.color-samples {
+  > div {
+    display: flex;
+    margin: $gutter 0;
+    height: 100px;
+
+    div { flex: 1 1 auto; }
+
+    :nth-child(1)  { background-color: $white;      }
+    :nth-child(2)  { background-color: $light;      }
+    :nth-child(3)  { background-color: $light-grey; }
+    :nth-child(4)  { background-color: $dark-grey;  }
+    :nth-child(5)  { background-color: $black;      }
+
+    :nth-child(6)  { background-color: $dark-blue;  }
+    :nth-child(7)  { background-color: $blue;       }
+    :nth-child(8)  { background-color: $red;        }
+    :nth-child(9)  { background-color: $orange;     }
+    :nth-child(10) { background-color: $yellow;     }
+  }
+}
+

site/assets/scss/elements/_layout.scss

@@ -0,0 +1,25 @@
+body {
+  min-width: 300px;
+}
+
+header,
+main {
+  margin: 0;
+  padding: 0;
+}
+
+section {
+  margin-bottom: $gutter;
+  padding: $gutter;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+}
+
+@media screen and (min-width: 900px) {
+  section {
+    padding: ($gutter * 2) calc((100% - 850px) / 2);
+    width: 850px;
+  }
+}

site/assets/scss/generic/_reset.scss

@@ -0,0 +1,27 @@
+// normalize css is loaded, then these additions:
+
+html {
+  margin: 0;
+  padding: 0;
+  font-size: 16px;
+  box-sizing: border-box;
+}
+
+main,
+section,
+article,
+aside,
+footer,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+div,
+p,
+ul,
+*::before,
+*::after {
+  box-sizing: inherit;
+}

site/assets/scss/main.scss

@@ -0,0 +1,11 @@
+@import 'tools/fonts';
+@import 'tools/mixins';
+
+@import 'settings/variables';
+@import 'settings/colors';
+
+@import 'generic/reset';
+
+@import 'elements/layout';
+
+@import 'components/styleguide';

site/assets/scss/settings/_colors.scss

@@ -0,0 +1,14 @@
+$white:      #fff;
+$light:      rgba(246, 244, 243, 1);
+$light-grey: rgba(191, 189, 193, 1);
+$dark-grey:  rgba(46,  47,  47,  1);
+$black:      #000;
+
+$yellow:     rgba(255, 200, 87,  1);
+$orange:     rgba(233, 114, 76,  1);
+$red:        rgba(197, 40,  61,  1);
+$blue:       rgba(37,  95,  133, 1);
+$dark-blue:  rgba(24,  48,  89,  1);
+
+$copy-light: $white;
+$copy-dark: $black;

site/assets/scss/settings/_variables.scss

@@ -0,0 +1 @@
+$gutter: 15px;

site/assets/scss/tools/_mixins.scss

@@ -0,0 +1,7 @@
+@mixin slim-ul {
+  margin-right: 0;
+  margin-left: 0;
+  padding: 0;
+
+  list-style-type: none;
+}

site/data/things.yml

@@ -0,0 +1,14 @@
+things:
+  -
+    name: ball
+    color: red
+    size: 6in
+  -
+    name: stick
+    color: brown
+    size: 1.2mm x 1m
+  -
+    name: table
+    color: black
+    size: 48in x 24in x 36in
+

site/layouts/default.hbs

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    {{> head }}
+  </head>
+  <body>
+    <header>
+      {{> header }}
+    </header>
+
+    <main>
+      {{> body }}
+    </main>
+
+    <footer>
+      {{> footer }}
+    </footer>
+    {{> javascripts }}
+  </body>
+</html>
+

site/pages/index.hbs

@@ -0,0 +1,5 @@
+---
+  title: Sample things
+---
+
+<h1>{{title}}</h1>

site/pages/styleguide.hbs

@@ -0,0 +1,47 @@
+---
+  title: Styleguide
+---
+
+<section>
+
+  <h1>Looking at styling for an h1</h1>
+  <p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+  <h2>Looking at styling for an h2</h2>
+  <p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+  <h3>Looking at styling for an h3</h3>
+  <p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+  <ul>
+    <li>item 1 in unordered list</li>
+    <li>item 2 in unordered list</li>
+    <li>item 3 in unordered list</li>
+    <li>item 4 in unordered list</li>
+    <li>item 5 in unordered list</li>
+  </ul>
+  <h4>Looking at styling for an h4</h4>
+  <p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+  <h5>Looking at styling for an h5</h5>
+  <p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+  <h6>Looking at styling for an h6</h6>
+  <p class="small">Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+
+  <a class="cta-primary" href="#cta-primary">Do a Thing!</a>
+  <a class="cta-secondary" href="#cta-secondary">Do another thing</a>
+
+  <h2>Colors</h2>
+
+  <div class="color-samples">
+    <div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </div>
+</section>

site/partials/footer.hbs

@@ -0,0 +1 @@
+<div>footer</div>

site/partials/head.hbs

@@ -0,0 +1,9 @@
+<meta charset='utf-8'>
+<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
+<meta content='width=device-width,initial-scale=1.0' name='viewport'>
+<meta content="{{description}}" name='description'>
+
+<title>{{title}}</title>
+
+<link href="{{assets}}/vendor/normalize.css" rel="stylesheet" type="text/css" />
+<link href="{{assets}}/css/main.css" rel="stylesheet" type="text/css" />

site/partials/header.hbs

@@ -0,0 +1 @@
+<div>header</div>

site/partials/javascripts.hbs

@@ -0,0 +1 @@
+<script src="{{assets}}/site.js"></script>