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

.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,55 @@
+# 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
+sftpCache.json

dev/.eslintrc

@@ -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

dev/.nvmrc

@@ -0,0 +1 @@
+v8.9.1

dev/.sass-lint.yml

@@ -0,0 +1,52 @@
+files:
+  include: scss/**/*.scss
+  ignore:
+    - vendor/*
+
+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

dev/Gruntfile.js

@@ -0,0 +1,125 @@
+/* eslint no-undef: 0 */
+module.exports = function(grunt) {
+  'use strict';
+  require('load-grunt-tasks')(grunt);
+
+  grunt.initConfig({
+
+    config: {
+      source: '.',
+      dest: '../',
+      temp: '.tmp'
+    },
+
+    eslint: {
+      // http://eslint.org/docs/rules/
+      target: '<%= config.source %>/js/**/*'
+    },
+
+    sasslint: {
+      // https://github.com/sasstools/sass-lint/tree/master/docs/rules
+      target: '<%= config.source %>/scss/**/*'
+    },
+
+    sass: {
+      options: {
+        style: 'compressed',
+        sourceMap: true,
+        includePaths: [
+          '<%= config.source %>/scss/',
+          './node_modules/'
+        ]
+      },
+      build: {
+        files: {
+          '<%= config.temp %>/style.css': '<%= config.source %>/scss/main.scss',
+        }
+      }
+    },
+
+    postcss: {
+      options: {
+        map: {
+          annotation: true,
+          sourcesContent: true
+        },
+        processors: [
+          // browser list is managed in package.json
+          // http://browserl.ist/?q=defaults
+          require('autoprefixer'),
+          require('postcss-csso'),
+        ]
+      },
+      dist: {
+        src: '<%= config.temp %>/style.css'
+      }
+    },
+
+    concat: {
+      options: {
+        stripBanners: false,
+        sourceMap: true,
+      },
+
+      js: {
+        options: { separator: ';\n', },
+        src: [
+          "node_modules/jquery/dist/jquery.min.js",
+          "node_modules/smoothscroll-polyfill/dist/smoothscroll.min.js",
+          "<%= config.temp %>/main.min.js"
+        ],
+        dest: "<%= config.dest %>/main.min.js",
+      },
+
+      css: {
+        src: [
+          "<%= config.source %>/theme.css",
+          "node_modules/normalize.css/normalize.css",
+          "<%= config.temp %>/style.css",
+        ],
+        dest: "<%= config.dest %>/style.css",
+      }
+    },
+
+    uglify: {
+      options: {
+        sourceMap: true,
+      },
+      main: {
+        files: [{
+          src: [
+            "<%= config.source %>/js/main/*.js",
+            "<%= config.source %>/js/main.js"
+          ],
+          dest: "<%= config.temp %>/main.min.js"
+        }]
+      },
+    },
+
+    watch: {
+      scss: {
+        files: '<%= config.source %>/**/*.scss',
+        tasks: ['concurrent:scssWatch']
+      },
+      js: {
+        files: '<%= config.source %>/**/*.{json,js}',
+        tasks: ['concurrent:jsWatch']
+      },
+    },
+
+    concurrent: {
+      scssWatch: ['sasslint', 'buildScss'],
+      jsWatch:   ['eslint',   'buildJs'],
+    }
+
+  });
+
+  // Tasks
+  grunt.registerTask('lint',      ['sasslint', 'eslint']);
+  grunt.registerTask('buildJs',   ['uglify', 'concat:js']);
+  grunt.registerTask('buildScss', ['sass', 'postcss', 'concat:css']);
+
+  grunt.registerTask('build',   ['lint', 'buildJs', 'buildScss']);
+  grunt.registerTask('serve',   ['lint', 'buildJs', 'buildScss', 'watch']);
+  grunt.registerTask('default', 'build');
+};

dev/js/main.js

@@ -0,0 +1,4 @@
+function isTouchDevice() {
+  return 'ontouchstart' in window || navigator.maxTouchPoints;
+}
+if(isTouchDevice()){ $('body').addClass('is-touch'); }

dev/js/main/menu.js

@@ -0,0 +1,23 @@
+var body = document.querySelector('body');
+var menuList = document.querySelector('#menu-list');
+var navToggles = document.querySelectorAll('[aria-controls="menu-list"]');
+
+navToggles.forEach(function(toggle){
+  toggle.addEventListener('click', function(event){
+    var expanded = menuList.getAttribute('aria-expanded') === 'true' || false;
+    menuList.setAttribute('aria-expanded', !expanded);
+    body.setAttribute('data-menu', !expanded);
+    event.stopPropagation();
+  });
+});
+
+body.addEventListener('click', function(event){
+  var isMenu = $(event.target).closest('#menu-list').length > 0;
+  if(isMenu){ return false; }
+
+  var expanded = menuList.getAttribute('aria-expanded') === 'true' || false;
+  if(expanded){
+    menuList.setAttribute('aria-expanded', !expanded);
+    body.setAttribute('data-menu', !expanded);
+  }
+});

dev/js/main/scrolling.js

@@ -0,0 +1,23 @@
+document.addEventListener("DOMContentLoaded", function() {
+  document.querySelectorAll('[href^="#"]').forEach(function(link){
+    link.addEventListener('click', function(event){
+      var target = document.querySelector(this.getAttribute('href'));
+      if(target !== null){
+        target.scrollIntoView({
+          behavior: 'smooth'
+        });
+
+        window.setTimeout(function(){
+          var index = target.getAttribute('tabindex');
+          target.setAttribute('tabindex', -1);
+          target.focus();
+          target.setAttribute('tabindex', index);
+
+          history.pushState({},null,"#" + target.getAttribute('id'));
+        }, 800);
+
+        event.preventDefault();
+      }
+    });
+  });
+});

dev/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "wp-dev",
+  "version": "1.0.0",
+  "homepage": "some wp theme",
+  "description": "Let's use scss, because we are not barbarian's.",
+  "license": "UNLICENSED",
+  "private": true,
+  "author": "Mark Moser",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "."
+  },
+  "dependencies": {
+    "jquery": "^3.3.1",
+    "normalize": "^0.3.1",
+    "smoothscroll-polyfill": "^0.4.3"
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.2.4",
+    "grunt": ">=1.0.1",
+    "grunt-concurrent": ">=2.3.1",
+    "grunt-contrib-concat": ">=1.0.1",
+    "grunt-contrib-uglify": "^3.3.0",
+    "grunt-contrib-watch": ">=1.0.0",
+    "grunt-eslint": ">=20.1.0",
+    "grunt-postcss": ">=0.9.0",
+    "grunt-sass": ">=2.0.0",
+    "grunt-sass-lint": ">=0.2.4",
+    "load-grunt-tasks": ">=3.5.2",
+    "postcss-csso": "^3.0.0",
+    "sass-lint": ">=1.12.1"
+  },
+  "browserslist": [
+    "defaults"
+  ]
+}

dev/scss/elements/_article.scss

@@ -0,0 +1,10 @@
+article {
+  margin: 0 auto;
+  max-width: 80rem;
+}
+
+@media screen and (max-width: #{$screen-tablet - 1}) {
+  article {
+    margin: 0 $gutter;
+  }
+}

dev/scss/elements/_body.scss

@@ -0,0 +1,3 @@
+body {
+  min-width: 320px;
+}

dev/scss/elements/_form.scss

@@ -0,0 +1,4 @@
+form {
+  margin: 0;
+  padding: 0;
+}

dev/scss/elements/_headings.scss

@@ -0,0 +1,13 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: $gutter 0;
+  padding: 0;
+}
+
+h6 {
+  margin: $gutter 0 0;
+}

dev/scss/elements/_img.scss

@@ -0,0 +1,6 @@
+img {
+  display: block;
+  width: 100%;
+  max-width: 100vw;
+  height: auto;
+}

dev/scss/elements/_inputs.scss

@@ -0,0 +1,31 @@
+.select-wrapper,
+textarea,
+[type="email"],
+[type="password"],
+[type="search"],
+[type="tel"],
+[type="text"] {
+  border: 0;
+  box-shadow: $box-shadow-light;
+  background-color: $gray-light;
+  padding: 8px;
+  width: 100%;
+
+  .dark & {
+    box-shadow: none;
+    background-color: $white;
+  }
+}
+
+.select-wrapper {
+  padding: 7px 6px 6px;
+  width: 100%;
+
+  select {
+    outline-offset: 6px;
+    border: 0;
+    background: transparent;
+    padding: 6px 0;
+    width: 100%;
+  }
+}

dev/scss/elements/_links.scss

@@ -0,0 +1,5 @@
+body:not(.is-touch) {
+  a:hover {
+    text-decoration: none;
+  }
+}

dev/scss/elements/_main.scss

@@ -0,0 +1,3 @@
+main {
+  position: relative;
+}

dev/scss/elements/_p.scss

@@ -0,0 +1,4 @@
+p {
+  margin: 0 0 $gutter;
+  padding: 0;
+}

dev/scss/elements/_section.scss

@@ -0,0 +1,5 @@
+@media screen and (max-width: #{$screen-tablet - 1}) {
+  section {
+    margin: 0 $gutter;
+  }
+}

dev/scss/elements/_video.scss

@@ -0,0 +1,4 @@
+video {
+  width: 100%;
+  height: auto;
+}

dev/scss/generic/_container.scss

@@ -0,0 +1,32 @@
+.container {
+  display: grid;
+  grid-template-columns: 1fr 10fr 1fr;
+
+  > * { grid-column: 2 / -2; }
+
+  > .full-bleed { grid-column: 1 / -1; }
+}
+
+@media screen and (min-width: #{$screen-tablet}) {
+  .container {
+    grid-template-columns: 1fr $container-tablet 1fr;
+  }
+}
+
+@media screen and (min-width: #{$screen-tablet-lg}) {
+  .container {
+    grid-template-columns: 1fr $container-tablet-lg 1fr;
+  }
+}
+
+@media screen and (min-width: #{$screen-desktop}) {
+  .container {
+    grid-template-columns: 1fr $container-desktop 1fr;
+  }
+}
+
+@media screen and (min-width: #{$screen-desktop-lg}) {
+  .container {
+    grid-template-columns: 1fr $container-desktop-lg 1fr;
+  }
+}

dev/scss/generic/_grid.scss

@@ -0,0 +1,170 @@
+.grid {
+  display: grid;
+  grid-template-columns: 1fr;
+
+  &.grid-gutter    { grid-gap: $gutter; }
+  &.grid-gutter-lg { grid-gap: $gutter * 2; }
+
+  &.grid-start { align-items: start; }
+  &.grid-center { align-items: center; }
+  &.grid-end { align-items: end; }
+
+  &.col-100      { grid-template-columns: 1fr; }
+  &.col-20       { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
+  &.col-25       { grid-template-columns: 1fr 1fr 1fr 1fr; }
+  &.col-33       { grid-template-columns: 1fr 1fr 1fr; }
+  &.col-50       { grid-template-columns: 1fr 1fr; }
+  &.col-70-30    { grid-template-columns: 2fr 1fr; }
+  &.col-30-70    { grid-template-columns: 1fr 2fr; }
+  &.col-50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
+  &.col-25-50-25 { grid-template-columns: 1fr 2fr 1fr; }
+  &.col-25-25-50 { grid-template-columns: 1fr 1fr 2fr; }
+  &.col-25-75    { grid-template-columns: 1fr 3fr; }
+  &.col-75-25    { grid-template-columns: 3fr 1fr; }
+}
+
+//////////////////////////
+// desktop first classes
+//////////////////////////
+
+@media screen and (max-width: #{$screen-desktop-lg - 1}) {
+  .grid {
+    &.col-100-lg      { grid-template-columns: 1fr; }
+    &.col-20-lg       { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
+    &.col-25-lg       { grid-template-columns: 1fr 1fr 1fr 1fr; }
+    &.col-33-lg       { grid-template-columns: 1fr 1fr 1fr; }
+    &.col-50-lg       { grid-template-columns: 1fr 1fr; }
+    &.col-70-30-lg    { grid-template-columns: 2fr 1fr; }
+    &.col-30-70-lg    { grid-template-columns: 1fr 2fr; }
+    &.col-50-25-25-lg { grid-template-columns: 2fr 1fr 1fr; }
+    &.col-25-50-25-lg { grid-template-columns: 1fr 2fr 1fr; }
+    &.col-25-25-50-lg { grid-template-columns: 1fr 1fr 2fr; }
+    &.col-25-75-lg    { grid-template-columns: 1fr 3fr; }
+    &.col-75-25-lg    { grid-template-columns: 3fr 1fr; }
+  }
+}
+
+@media screen and (max-width: #{$screen-desktop - 1}) {
+  .grid {
+    &.col-100-md      { grid-template-columns: 1fr; }
+    &.col-20-md       { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
+    &.col-25-md       { grid-template-columns: 1fr 1fr 1fr 1fr; }
+    &.col-33-md       { grid-template-columns: 1fr 1fr 1fr; }
+    &.col-50-md       { grid-template-columns: 1fr 1fr; }
+    &.col-70-30-md    { grid-template-columns: 2fr 1fr; }
+    &.col-30-70-md    { grid-template-columns: 1fr 2fr; }
+    &.col-50-25-25-md { grid-template-columns: 2fr 1fr 1fr; }
+    &.col-25-50-25-md { grid-template-columns: 1fr 2fr 1fr; }
+    &.col-25-25-50-md { grid-template-columns: 1fr 1fr 2fr; }
+    &.col-25-75-md    { grid-template-columns: 1fr 3fr; }
+    &.col-75-25-md    { grid-template-columns: 3fr 1fr; }
+  }
+}
+
+@media screen and (max-width: #{$screen-tablet-lg - 1}) {
+  .grid {
+    &.col-100-sm      { grid-template-columns: 1fr; }
+    &.col-20-sm       { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
+    &.col-25-sm       { grid-template-columns: 1fr 1fr 1fr 1fr; }
+    &.col-33-sm       { grid-template-columns: 1fr 1fr 1fr; }
+    &.col-50-sm       { grid-template-columns: 1fr 1fr; }
+    &.col-70-30-sm    { grid-template-columns: 2fr 1fr; }
+    &.col-30-70-sm    { grid-template-columns: 1fr 2fr; }
+    &.col-50-25-25-sm { grid-template-columns: 2fr 1fr 1fr; }
+    &.col-25-50-25-sm { grid-template-columns: 1fr 2fr 1fr; }
+    &.col-25-25-50-sm { grid-template-columns: 1fr 1fr 2fr; }
+    &.col-25-75-sm    { grid-template-columns: 1fr 3fr; }
+    &.col-75-25-sm    { grid-template-columns: 3fr 1fr; }
+  }
+}
+
+@media screen and (max-width: #{$screen-tablet - 1}) {
+  .grid {
+    &.col-100-xs      { grid-template-columns: 1fr; }
+    &.col-20-xs       { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
+    &.col-25-xs       { grid-template-columns: 1fr 1fr 1fr 1fr; }
+    &.col-33-xs       { grid-template-columns: 1fr 1fr 1fr; }
+    &.col-50-xs       { grid-template-columns: 1fr 1fr; }
+    &.col-70-30-xs    { grid-template-columns: 2fr 1fr; }
+    &.col-30-70-xs    { grid-template-columns: 1fr 2fr; }
+    &.col-50-25-25-xs { grid-template-columns: 2fr 1fr 1fr; }
+    &.col-25-50-25-xs { grid-template-columns: 1fr 2fr 1fr; }
+    &.col-25-25-50-xs { grid-template-columns: 1fr 1fr 2fr; }
+    &.col-25-75-xs    { grid-template-columns: 1fr 3fr; }
+    &.col-75-25-xs    { grid-template-columns: 3fr 1fr; }
+  }
+}
+
+
+//////////////////////////
+// mobile first classes
+//////////////////////////
+
+
+@media screen and (min-width: #{$screen-tablet}) {
+  .grid {
+    &.sm-col-100      { grid-template-columns: 1fr; }
+    &.sm-col-20       { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
+    &.sm-col-25       { grid-template-columns: 1fr 1fr 1fr 1fr; }
+    &.sm-col-33       { grid-template-columns: 1fr 1fr 1fr; }
+    &.sm-col-50       { grid-template-columns: 1fr 1fr; }
+    &.sm-col-70-30    { grid-template-columns: 2fr 1fr; }
+    &.sm-col-30-70    { grid-template-columns: 1fr 2fr; }
+    &.sm-col-50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
+    &.sm-col-25-50-25 { grid-template-columns: 1fr 2fr 1fr; }
+    &.sm-col-25-25-50 { grid-template-columns: 1fr 1fr 2fr; }
+    &.sm-col-25-75    { grid-template-columns: 1fr 3fr; }
+    &.sm-col-75-25    { grid-template-columns: 3fr 1fr; }
+  }
+}
+
+@media screen and (min-width: #{$screen-tablet-lg}) {
+  .grid {
+    &.md-col-100      { grid-template-columns: 1fr; }
+    &.md-col-20       { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
+    &.md-col-25       { grid-template-columns: 1fr 1fr 1fr 1fr; }
+    &.md-col-33       { grid-template-columns: 1fr 1fr 1fr; }
+    &.md-col-50       { grid-template-columns: 1fr 1fr; }
+    &.md-col-70-30    { grid-template-columns: 2fr 1fr; }
+    &.md-col-30-70    { grid-template-columns: 1fr 2fr; }
+    &.md-col-50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
+    &.md-col-25-50-25 { grid-template-columns: 1fr 2fr 1fr; }
+    &.md-col-25-25-50 { grid-template-columns: 1fr 1fr 2fr; }
+    &.md-col-25-75    { grid-template-columns: 1fr 3fr; }
+    &.md-col-75-25    { grid-template-columns: 3fr 1fr; }
+  }
+}
+
+@media screen and (min-width: #{$screen-desktop}) {
+  .grid {
+    &.lg-col-100      { grid-template-columns: 1fr; }
+    &.lg-col-20       { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
+    &.lg-col-25       { grid-template-columns: 1fr 1fr 1fr 1fr; }
+    &.lg-col-33       { grid-template-columns: 1fr 1fr 1fr; }
+    &.lg-col-50       { grid-template-columns: 1fr 1fr; }
+    &.lg-col-70-30    { grid-template-columns: 2fr 1fr; }
+    &.lg-col-30-70    { grid-template-columns: 1fr 2fr; }
+    &.lg-col-50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
+    &.lg-col-25-50-25 { grid-template-columns: 1fr 2fr 1fr; }
+    &.lg-col-25-25-50 { grid-template-columns: 1fr 1fr 2fr; }
+    &.lg-col-25-75    { grid-template-columns: 1fr 3fr; }
+    &.lg-col-75-25    { grid-template-columns: 3fr 1fr; }
+  }
+}
+
+@media screen and (min-width: #{$screen-desktop-lg}) {
+  .grid {
+    &.xl-col-100      { grid-template-columns: 1fr; }
+    &.xl-col-20       { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
+    &.xl-col-25       { grid-template-columns: 1fr 1fr 1fr 1fr; }
+    &.xl-col-33       { grid-template-columns: 1fr 1fr 1fr; }
+    &.xl-col-50       { grid-template-columns: 1fr 1fr; }
+    &.xl-col-70-30    { grid-template-columns: 2fr 1fr; }
+    &.xl-col-30-70    { grid-template-columns: 1fr 2fr; }
+    &.xl-col-50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
+    &.xl-col-25-50-25 { grid-template-columns: 1fr 2fr 1fr; }
+    &.xl-col-25-25-50 { grid-template-columns: 1fr 1fr 2fr; }
+    &.xl-col-25-75    { grid-template-columns: 1fr 3fr; }
+    &.xl-col-75-25    { grid-template-columns: 3fr 1fr; }
+  }
+}

dev/scss/generic/_reset.scss

@@ -0,0 +1,14 @@
+html {
+  margin: 0;
+  padding: 0;
+  width: 100vw;
+  font-size: 16px;
+  overflow-x: hidden;
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}

dev/scss/generic/_typography.scss

@@ -0,0 +1,59 @@
+body {
+  font-family: $helvetica;
+  font-size: 1em;
+  font-weight: 400;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  line-height: 1.2;
+  font-weight: 700;
+}
+
+h1 { font-size: 3rem; }
+h2 { font-size: 2.375rem; }
+h3 { font-size: 1.875rem; }
+h4 { font-size: 1.25rem; }
+h5 { font-size: 1rem; }
+
+h6 {
+  font-size: 1em;
+  font-weight: 400;
+}
+
+p {
+  line-height: 1.6;
+}
+
+article,
+section {
+  font-size: 1.125em;
+
+  li { line-height: 1.6; }
+}
+
+.copy-small {
+  font-size: 0.875em;
+}
+
+.copy-italic {
+  letter-spacing: 0.03em;
+  font-style: italic;
+}
+
+.strong {
+  font-weight: 700;
+}
+
+@media screen and (min-width: $screen-tablet-lg) {
+  h1 { font-size: 3.4375rem; }
+  h2 { font-size: 3rem; }
+  h3 { font-size: 2.5rem; }
+  h4 { font-size: 1.5rem; }
+  h5 { font-size: 1rem; }
+  h6 { font-size: 1rem; }
+}

dev/scss/main.scss

@@ -0,0 +1,50 @@
+///////////
+// ITCSS -- https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
+
+// Settings
+//     used with preprocessors and contain font, colors definitions, etc.
+@import 'settings/colors';
+@import 'settings/variables';
+
+// Tools
+//     globally used mixins and functions. It’s important not to output
+//     any CSS in the first 2 layers.
+@import 'tools/mixins';
+@import 'tools/keyframes';
+
+// Generic
+//     reset and/or normalize styles, box-sizing definition, etc. This is
+//     the first layer which generates actual CSS.
+@import 'generic/reset';
+@import 'generic/container';
+@import 'generic/grid';
+@import 'generic/typography';
+
+// Elements
+//     styling for bare HTML elements (like H1, A, etc.). These come with
+//     default styling from the browser so we can redefine them here.
+@import 'elements/body';
+@import 'elements/header';
+@import 'elements/headings';
+@import 'elements/main';
+@import 'elements/section';
+@import 'elements/article';
+@import 'elements/p';
+@import 'elements/img';
+@import 'elements/video';
+@import 'elements/lists';
+@import 'elements/links';
+@import 'elements/form';
+@import 'elements/inputs';
+@import 'elements/footer';
+
+// Components
+//     specific UI components. This is where majority of our work takes place
+//     and our UI components are often composed of Objects and Components
+@import 'components/main-nav';
+
+// Utilities
+//     utilities and helper classes with ability to override anything which
+//     goes before in the triangle, eg. hide helper class
+@import 'utilities/helpers';
+

dev/scss/settings/_colors.scss

@@ -0,0 +1,8 @@
+$white: #fff;
+$gray-light: #d3d4d4;
+$gray-dark: #a7a9ac;
+$black: #000;
+
+$copy-light: $white;
+$copy-gray: $gray-light;
+$copy-dark: $black;

dev/scss/settings/_variables.scss

@@ -0,0 +1,19 @@
+$container-tablet: 90vw;
+$container-tablet-lg: 810px;
+$container-desktop: 1080px;
+$container-desktop-lg: 1680px;
+
+$screen-tablet: 600px;
+$screen-tablet-lg: 900px;
+$screen-desktop: 1200px;
+$screen-desktop-lg: 1800px;
+
+$gutter: 15px;
+
+$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+$box-shadow-light: 5px 5px 5px 0 rgba($black, 0.25);
+$box-shadow: 6px 6px 10px 0 rgba($black, 0.3);
+$box-shadow-dark: 6px 6px 10px 0 rgba($black, 0.5);
+
+$border-radius: 8px;

dev/scss/tools/_keyframes.scss

@@ -0,0 +1,19 @@
+@keyframes fade-from-left {
+  0% {
+    transform: translateX(-96px);
+    opacity: 0;
+  }
+
+  45% { opacity: 1; }
+  100% { transform: translateX(0); }
+}
+
+@keyframes fade-from-right {
+  0% {
+    transform: translateX(96px);
+    opacity: 0;
+  }
+
+  45% { opacity: 1; }
+  100% { transform: translateX(0); }
+}

dev/scss/tools/_mixins.scss

@@ -0,0 +1,13 @@
+@mixin slim-ul {
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    li {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+  }
+}

dev/scss/utilities/_helpers.scss

@@ -0,0 +1,22 @@
+.sr-only {
+  position: absolute;
+  border: 0;
+  padding: 0;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+  clip: rect(0, 0, 0, 0);
+
+  &.with-focus {
+    &:active,
+    &:focus {
+      position: static;
+      width: auto;
+      height: auto;
+      overflow: visible;
+      white-space: normal;
+      clip: auto;
+    }
+  }
+}

dev/theme.css

@@ -0,0 +1,6 @@
++/*
++Theme Name: My Fresh Wordpress Theme
++Description: Something clever.
++Author: markamoser
++Version: 1.0
++*/

index.php

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <?php wp_head(); ?>
+</head>
+<body>
+<?php
+  if ( have_posts() ) {
+      while ( have_posts() ) {
+          the_post();
+          the_title( '<h1>', '</h1>' );
+          the_content();
+      }
+  }
+  wp_footer();
+?>
+</body>
+</html>