Git init

_assets/gulp_config/paths.js

@@ -0,0 +1,76 @@
+var paths = {};
+
+// Directory locations.
+paths.assetsDir        = '_assets/';      // The files Gulp will handle.
+paths.jekyllDir        = '';              // The files Jekyll will handle.
+paths.jekyllAssetsDir  = 'assets/';       // The asset files Jekyll will handle.
+paths.siteDir          = '_site/';        // The resulting static site.
+paths.siteAssetsDir    = '_site/assets/'; // The resulting static site's assets.
+
+// Folder naming conventions.
+paths.postFolderName   = '_posts';
+paths.fontFolderName   = 'fonts';
+paths.imageFolderName  = 'img';
+paths.scriptFolderName = 'js';
+paths.stylesFolderName = 'sass';
+paths.videoFolderName  = 'video';
+paths.pdfFolderName  = 'pdf';
+
+// Asset files locations.
+paths.sassFiles   = paths.assetsDir + paths.stylesFolderName;
+paths.jsFiles     = paths.assetsDir + paths.scriptFolderName;
+paths.imageFiles  = paths.assetsDir + paths.imageFolderName;
+paths.fontFiles   = paths.assetsDir + paths.fontFolderName;
+paths.videoFiles  = paths.assetsDir + paths.videoFolderName;
+paths.pdfFiles    = paths.assetsDir + paths.pdfFolderName;
+
+// Jekyll files locations.
+paths.jekyllPostFiles  = paths.jekyllDir       + paths.postFolderName;
+paths.jekyllCssFiles   = paths.jekyllAssetsDir + paths.stylesFolderName;
+paths.jekyllJsFiles    = paths.jekyllAssetsDir + paths.scriptFolderName;
+paths.jekyllImageFiles = paths.jekyllAssetsDir + paths.imageFolderName;
+paths.jekyllFontFiles  = paths.jekyllAssetsDir + paths.fontFolderName;
+paths.jekyllVideoFiles = paths.jekyllAssetsDir + paths.videoFolderName;
+paths.jekyllPdfFiles   = paths.jekyllAssetsDir + paths.pdfFolderName;
+
+// Site files locations.
+paths.siteCssFiles   = paths.siteAssetsDir + paths.stylesFolderName;
+paths.siteJsFiles    = paths.siteAssetsDir + paths.scriptFolderName;
+paths.siteImageFiles = paths.siteAssetsDir + paths.imageFolderName;
+paths.siteFontFiles  = paths.siteAssetsDir + paths.fontFolderName;
+paths.siteVideoFiles = paths.siteAssetsDir + paths.videoFolderName;
+paths.sitePdfFiles   = paths.siteAssetsDir + paths.pdfFolderName;
+
+// Glob patterns by file type.
+paths.sassPattern     = '/**/*.scss';
+paths.jsPattern       = '/**/*.js';
+paths.imagePattern    = '/**/*.+(jpg|JPG|jpeg|JPEG|png|PNG|svg|SVG|gif|GIF|webp|WEBP|tif|TIF|ico)';
+paths.markdownPattern = '/**/*.+(md|MD|markdown|MARKDOWN)';
+paths.htmlPattern     = '/**/*.html';
+paths.videoPattern    = '/**/*.+(mp4|ogg|webm|wav|flac|mp3)';
+paths.pdfPattern      = '/**/*.pdf';
+
+// Asset files globs
+paths.sassFilesGlob  = paths.sassFiles  + paths.sassPattern;
+paths.jsFilesGlob    = paths.jsFiles    + paths.jsPattern;
+paths.imageFilesGlob = paths.imageFiles + paths.imagePattern;
+paths.videoFilesGlob = paths.videoFiles + paths.videoPattern;
+paths.pdfFilesGlob   = paths.pdfFiles   + paths.pdfPattern;
+
+// Jekyll files globs
+paths.jekyllPostFilesGlob  = paths.jekyllPostFiles  + paths.markdownPattern;
+paths.jekyllHtmlFilesGlob  = paths.jekyllDir        + paths.htmlPattern;
+paths.jekyllXmlFilesGlob   = paths.jekyllDir        + paths.xmlPattern;
+paths.jekyllImageFilesGlob = paths.jekyllImageFiles + paths.imagePattern;
+paths.jekyllVideoFilesGlob = paths.jekyllVideoFiles + paths.videoPattern;
+paths.jekyllPdfFilesGlob   = paths.jekyllPdfFiles   + paths.pdfPattern;
+
+// Site files globs
+paths.siteHtmlFilesGlob = paths.siteDir + paths.htmlPattern;
+
+// HTML pages to run through the accessibility test.
+paths.htmlTestFiles = [
+  '_site/**/*.html'
+];
+
+module.exports = paths;

_assets/js/app.js

@@ -0,0 +1,79 @@
+
+$('#dataform').on('submit', function (e) {
+  e.preventDefault();
+
+  var warData = JSON.parse( $.trim( $('#data').val() ) );
+
+  if( warData.results && warData.results[1] && warData.results[1].result && warData.results[1].result.response ) {
+    initApp(warData, 'withSave', warData);
+  };
+});
+
+function initApp (data, callback, callbackData) {
+  console.log(data)
+  var mapData = data.results[1].result.response;
+
+  console.log('data', JSON.parse( JSON.stringify(data)) );
+
+  enhanceMap(mapData.enemySlots);
+  enhanceMap(mapData.ourSlots);
+
+  app.map = mapData;
+
+  console.log('app.map', JSON.parse( JSON.stringify(mapData)) );
+
+  Vue.nextTick(function () {
+    // Determine which player team has more power: titans or heroes
+    determineBestTeam('ally');
+    determineBestTeam('enemy');
+
+    // Syncs checkboxes between hero/titan teams
+    syncCheckboxes();
+
+    // Highlights the other player team when the other one is hovered
+    highlightHovered();
+
+    if(callback == 'withSave') {
+      saveToStorage(callbackData);
+    }
+  });
+}
+
+var app = new Vue({
+  el : '#app',
+  data : {
+    // the data obtained from the game
+    map: {}, //mapData,
+    // maps building names and types of data obtained from the game
+    mapSlots: mapSlots,
+    storage: JSON.parse( localStorage.getItem('HeroWarsHistory') ) || []
+  },
+  computed: {
+    // Helps render enemy teams in order by power level
+    orderedEnemies: function () {
+      return orderByPower(this.map.enemySlots);
+    },
+    // Helps render allied teams in order by power level
+    orderedAllies: function () {
+      return orderByPower(this.map.ourSlots);
+    },
+    // Renders total team powers: hero, titan, total
+    getAllyPower: function () {
+      return getTotalPower(this.map.ourSlots);
+    },
+    // Renders total enemy team powers: hero, titan, total
+    getEnemyPower: function () {
+      return getTotalPower(this.map.enemySlots);
+    }
+  },
+  filters: {
+    formatNumber: function (value) {
+      return value.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
+    },
+    unixToLocale: function (value) {
+      return new Date(value * 1000).toDateString();
+    }
+  }
+});
+
+

_assets/js/hamburger.js

@@ -0,0 +1,7 @@
+function toggleHamburger () {
+  $('.hamburger').toggleClass('is-active');
+}
+
+$('.hamburger-button').on('click', function () {
+  toggleHamburger();
+});

_assets/js/localstorage.js

@@ -0,0 +1,45 @@
+/*
+ * Compares dates (used to order localstorage items)
+ */
+function compareDates(a, b) {
+  var genreA = a.date;
+  var genreB = b.date;
+  var comparison = 0;
+
+  if (genreA > genreB) {
+    comparison = -1;
+  } else if (genreA < genreB) {
+    comparison = 1;
+  }
+  return comparison;
+}
+
+
+function saveToStorage(warData) {
+  var storageData = JSON.parse( localStorage.getItem('HeroWarsHistory') ) || [];
+
+  storageData.push(warData);
+  storageData.sort(compareDates);
+  localStorage.setItem('HeroWarsHistory', JSON.stringify(storageData) );
+  app.storage = storageData;
+};
+
+
+$('body').on('click', '.js--load-war', function(){
+  var $t = $(this),
+      index = $t.attr('data-item'),
+      localData = JSON.parse( localStorage.getItem('HeroWarsHistory') ),
+      localWar = localData[index];
+
+  initApp(localWar);
+  toggleHamburger();
+});
+
+$('body').on('click', '.js--remove-storage', function (){
+  var storageData = JSON.parse( localStorage.getItem('HeroWarsHistory') ) || [];
+  var index = $(this).attr('data-item');
+
+  storageData.splice(index, 1);
+  localStorage.setItem('HeroWarsHistory', JSON.stringify(storageData) );
+  app.storage = storageData;
+});

_assets/js/map.js

@@ -0,0 +1,121 @@
+var mapSlots = [{
+  "name" : 'Mage Academy',
+  "type" : 'Hero'
+},{
+  "name" : 'Mage Academy',
+  "type" : 'Hero'
+},{
+  "name" : 'Lighthouse',
+  "type" : 'Hero'
+},{
+  "name" : 'Lighthouse',
+  "type" : 'Hero'
+},{
+  "name" : 'Barracks',
+  "type" : 'Hero'
+},{
+  "name" : 'Barracks',
+  "type" : 'Hero'
+},{
+  "name" : 'Bridge',
+  "type" : 'Titan'
+},{
+  "name" : 'Bridge',
+  "type" : 'Titan'
+},{
+  "name" : 'Bridge',
+  "type" : 'Titan'
+},{
+  "name" : 'Spring of Elements',
+  "type" : 'Titan'
+},{
+  "name" : 'Spring of Elements',
+  "type" : 'Titan'
+},{
+  "name" : 'Spring of Elements',
+  "type" : 'Titan'
+},{
+  "name" : 'Foundry',
+  "type" : 'Hero'
+},{
+  "name" : 'Foundry',
+  "type" : 'Hero'
+},{
+  "name" : 'Foundry',
+  "type" : 'Hero'
+},{
+  "name" : 'Gates of Nature',
+  "type" : 'Titan'
+},{
+  "name" : 'Gates of Nature',
+  "type" : 'Titan'
+},{
+  "name" : 'Gates of Nature',
+  "type" : 'Titan'
+},{
+  "name" : 'Bastion of Fire',
+  "type" : 'Titan'
+},{
+  "name" : 'Bastion of Fire',
+  "type" : 'Titan'
+},{
+  "name" : 'Bastion of Fire',
+  "type" : 'Titan'
+},{
+  "name" : 'Bastion of Ice',
+  "type" : 'Titan'
+},{
+  "name" : 'Bastion of Ice',
+  "type" : 'Titan'
+},{
+  "name" : 'Bastion of Ice',
+  "type" : 'Titan'
+},{
+  "name" : 'Citadel',
+  "type" : 'Hero'
+},{
+  "name" : 'Citadel',
+  "type" : 'Hero'
+},{
+  "name" : 'Citadel',
+  "type" : 'Hero'
+},{
+  "name" : 'Citadel',
+  "type" : 'Hero'
+},{
+  "name" : 'Citadel',
+  "type" : 'Hero'
+},{
+  "name" : 'Citadel',
+  "type" : 'Hero'
+},{
+  "name" : 'Mage Academy',
+  "type" : 'Hero'
+},{
+  "name" : 'Lighthouse',
+  "type" : 'Hero'
+},{
+  "name" : 'Barracks',
+  "type" : 'Hero'
+},{
+  "name" : 'Bridge',
+  "type" : 'Titan'
+},{
+  "name" : 'Spring of Elements',
+  "type" : 'Titan'
+},{
+  "name" : 'Foundry',
+  "type" : 'Hero'
+},{
+  "name" : 'Gates of Nature',
+  "type" : 'Titan'
+},{
+  "name" : 'Bastion of Fire',
+  "type" : 'Titan'
+},{
+  "name" : 'Bastion of Ice',
+  "type" : 'Titan'
+},{
+  "name" : 'Citadel',
+  "type" : 'Hero'
+}];

_assets/js/utils.js

@@ -0,0 +1,150 @@
+/*
+ * Adds more data to the mapData object
+ * so it's easier to print out information
+ * such as buildings/location and total power
+ */
+function enhanceMap( slots ) {
+  for (var index in slots) {
+    //console.log(slots[index])
+    var teamSlot = slots[index];
+
+    if(teamSlot.status == 'empty' || teamSlot.user == null) {
+      teamSlot['user'] = {
+        "name" : 'Empty'
+      }
+    }
+
+    // Add the name and type of building for this team
+    var mapSlot = mapSlots[index - 1];
+
+    teamSlot['location'] = {
+      "name" : mapSlot.name,
+      "type" : mapSlot.type
+    }
+
+    // Add the total amount of team power
+    var power = 0;
+    for (var teamMember in teamSlot.team[0]) {
+      power += teamSlot.team[0][teamMember].power;
+    }
+    teamSlot['power'] = power;
+  }
+}
+
+
+/*
+ * Compares team power (used to order teams by power)
+ */
+function compare(a, b) {
+  var genreA = a.power;
+  var genreB = b.power;
+  var comparison = 0;
+
+  if (genreA > genreB) {
+    comparison = -1;
+  } else if (genreA < genreB) {
+    comparison = 1;
+  }
+  return comparison;
+}
+
+
+/*
+ * Order teams by power level
+ */
+function orderByPower(teamSlots) {
+  var teamArray = [];
+
+  for(var key in teamSlots) {
+    teamArray.push(teamSlots[key])
+  }
+
+  return teamArray.sort(compare);
+}
+
+
+/*
+ * Determines which player team has more power: titan or hero.
+ * Adds a CSS class to each of the better .ally-hero teams
+ */
+function determineBestTeam(guild) {
+  $.each($('body').find('.js-'+ guild +'-hero'), function () {
+    var $t = $(this);
+    var name = $t.attr('data-name');
+    var heroPower = parseInt( $t.attr('data-power') );
+    var $titanTeam = $('.js-'+ guild +'-titan[data-name="'+ name +'"]');
+    var titanPower = parseInt( $titanTeam.attr('data-power') );
+    var className = 'best-team';
+
+    if (heroPower > titanPower) {
+      $t.addClass(className);
+      $titanTeam.removeClass(className);
+    } else {
+      $titanTeam.addClass(className);
+      $t.removeClass(className);
+    }
+  });
+}
+
+
+/*
+ * Sync checkboxes between hero/titan teams of the same player
+ */
+function syncCheckboxes() {
+  $('input[type="checkbox"]').on('change', function() {
+    var $t = $(this),
+        checkName = $t.attr('name'),
+        playerName = $t.parent().attr('data-name');
+
+    $('[data-name="'+ playerName +'"]')
+      .find('input[name="'+ checkName +'"]')
+      .prop('checked', $t.is(':checked'));
+  });
+}
+
+
+/*
+ * Visual aid to help find the corresponding hero/titan team
+ * when the other one is hovered
+ */
+function highlightHovered() {
+  $('.team').on({
+    'mouseenter': function () {
+      var $t = $(this),
+          name = $t.attr('data-name');
+      $('.team[data-name="'+ name +'"]').addClass('is--hover');
+    },
+    'mouseleave': function () {
+      var $t = $(this),
+          name = $t.attr('data-name');
+      $('.team[data-name="'+ name +'"]').removeClass('is--hover');
+    }
+  })
+}
+
+function getTotalPower(guild) {
+  var heroPower = 0;
+  var titanPower = 0;
+  var totalPower = 0;
+  var data = guild; //this.map.ourSlots;
+
+  for (var i in data) {
+    var member = data[i];
+
+    if( member.location.type == "Hero" ) {
+      heroPower += member.power;
+    } else {
+      titanPower += member.power;
+    }
+
+    totalPower += member.power;
+  }
+
+  return {
+    "heroPower" : heroPower,
+    "titanPower" : titanPower,
+    "totalPower": totalPower
+  };
+}
+
+

_assets/sass/base/_base.scss

@@ -0,0 +1,43 @@
+html {
+  color: $black;
+  margin: 0 0 40px;
+  font: 400 13px/1.4 'Open Sans', arial, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+  outline: none;
+}
+
+button,
+.button {
+  &:hover {
+    opacity: .8;
+  }
+}
+
+label,
+button,
+input {
+  cursor: pointer;
+}
+
+strong, b {
+  font-weight: 600;
+}
+
+h1 {
+  text-align: center;
+  font-size: 32px;
+  font-weight: 600;
+  margin-top: 40px;
+}
+
+h4,
+h3 {
+  display: block;
+  width: 100%;
+  margin: 40px 0 10px;
+  font-size: 16px;
+  font-weight: 600;
+}

_assets/sass/base/_reset.scss

@@ -0,0 +1,88 @@
+* {
+  box-sizing: border-box;
+}
+
+main {
+  display: block;
+}
+
+html, body, div, span, applet, object, iframe, p, blockquote,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video, button, pre {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: 0;
+  font-size: 100%;
+  font-family: inherit;
+  vertical-align: baseline;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+html {
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+  background-color: transparent;
+}
+
+svg {
+  fill: currentColor;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+img {
+  border-style: none;
+  max-width: 100%;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+[hidden] {
+  display: none;
+}

_assets/sass/main.scss

@@ -0,0 +1,25 @@
+@charset "utf-8";
+
+@import
+  // Variables
+  "variables/colors",
+  "variables/layout",
+
+  // Mixins
+  "mixins/breakpoint",
+  "mixins/columns",
+  "mixins/rows",
+
+  // Base styles
+  "base/reset",
+  "base/base",
+
+  // Layouts
+
+  // Modules
+  "modules/wrapper",
+  "modules/buttons",
+  "modules/war",
+  "modules/hamburger",
+  "modules/header"
+;

_assets/sass/mixins/_breakpoint.scss

@@ -0,0 +1,27 @@
+/*
+ * Media query shorthand, to be used with variables from $site-breakpoints
+ * Defaults to min-width
+ * 
+ * Usage: @include mq(lg, min/max(optional) ) { ... }
+ */
+
+@function breakpoint-min($name, $breakpoints: $site-breakpoints) {
+  $min: map-get($breakpoints, $name);
+  @return if($min != 0, $min, null);
+}
+
+@mixin mq($name, $type: min) {
+  $min: breakpoint-min($name);
+
+  @if $min {
+    @if $type == max {
+        $min: $min - 1px;
+    }
+
+    @media ( #{$type}-width: $min ) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}

_assets/sass/mixins/_columns.scss

@@ -0,0 +1,48 @@
+/*
+ * Generate grid cols
+ * 
+ */
+
+@mixin grid-col-padding ($gutter) {
+  padding-left: $gutter / 2;
+  padding-right: $gutter / 2;
+  /*
+   * Default columns align left width smallest width
+   */
+  flex: 0 0 auto;
+}
+
+@mixin grid-col-flex ($size) {
+  width: percentage($size / $column-count);
+  max-width: percentage($size / $column-count);
+  flex: 0 0 percentage($size / $column-count);
+}
+
+// generate paddings
+@each $breakpoint, $gutter in $column-gutter {
+  @include mq($breakpoint) {
+    #{$row-class} > * {
+      @include grid-col-padding($gutter);
+    }
+  }
+}
+
+// generate flex styles
+@each $breakpoint, $size in $site-breakpoints {
+  @include mq($breakpoint) {
+
+    $index: index($site-breakpoints, $breakpoint $size);
+
+    @for $i from 1 through $column-count {
+      // ignore first breakpoint class, e.g. .col instead of .col-sm
+      $className : if( $index > 1, 
+                       #{$column-class}-#{$breakpoint}-#{$i}, 
+                       #{$column-class}-#{$i} );
+
+      #{$className} {
+        @include grid-col-flex($i);
+      }
+    }
+
+  }
+}

_assets/sass/mixins/_rows.scss

@@ -0,0 +1,27 @@
+/*
+ * Generate grid rows
+ * 
+ * $row-class defines the row classname. E.G. .row
+ * $column-gutter sets the negative margins for each defined breakpoint.
+ * 
+ */
+
+@mixin row-gutters($gutter) {
+  margin-left: ($gutter / -2);
+  margin-right: ($gutter / -2);
+}
+
+@mixin row () {
+  display: flex;
+  flex-wrap: wrap;
+
+  @each $breakpoint, $gutter in $column-gutter {
+    @include mq($breakpoint) {
+      @include row-gutters($gutter);
+    }
+  }
+}
+
+#{$row-class} {
+  @include row();
+}

_assets/sass/modules/_buttons.scss

@@ -0,0 +1,17 @@
+.button {
+  padding: 6px 16px;
+  background: #349000;
+  color: #ffefbf;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.2;
+  text-shadow: 0 1px 1px #000;
+  cursor: pointer;
+  border-radius: 40px;
+  border: 0;
+
+  &--danger {
+    background: #860602;
+    color: #fff;
+  }
+}

_assets/sass/modules/_hamburger.scss

@@ -0,0 +1,30 @@
+.hamburger {
+  position: fixed;
+  background: #fff;
+  top: 60px;
+  bottom: 0;
+  left: 0;
+  padding: 20px;
+  overflow: auto;
+  border-right: 1px solid #E1E1E1;
+  transform: translateX(-100%);
+  transition: transform 250ms;
+
+  &.is-active {
+    transform: translateX(0%);
+  }
+
+  h3 {
+    margin-top: 0;
+  }
+
+  li {
+    margin-bottom: 5px;
+    display: flex;
+    align-items: center;
+  }
+
+  .button {
+    margin-right: 8px;
+  }
+}

_assets/sass/modules/_header.scss

@@ -0,0 +1,37 @@
+header {
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  border-bottom: 1px solid #E1E1E1;
+
+  .hamburger-button {
+
+  }
+
+  .form {
+    display: flex;
+    align-items: center;
+
+    h3 {
+      margin: 0;
+      width: auto;
+      margin-right: 10px;
+    }
+
+    textarea {
+      resize: none;
+      overflow: hidden;
+      width: 112px;
+      height: 28px;
+      line-height: 1.4;
+      padding: 4px;
+      outline: none;
+    }
+
+    .button {
+      margin-left: 10px;
+    }
+  }
+}

_assets/sass/modules/_war.scss

@@ -0,0 +1,61 @@
+.war {
+  .row {
+    justify-content: center;
+  }
+
+  h4 {
+    margin-left: 8px;
+  }
+
+  .team {
+    display: flex;
+    align-items: center;
+    color: #666;
+    line-height: 1.2;
+    padding: 2px 8px;
+
+    &.is--hover {
+      outline: 2px solid gold;
+    }
+
+    &__details {
+      margin-left: 8px;
+    }
+
+    &__location {
+      display: block;
+      font-weight: 800;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      font-size: 11px;
+      color: #0079b3;
+      margin-bottom: 2px;
+    }
+  }
+
+  .best-team {
+    font-weight: 600;
+    color: black;
+  }
+
+  img {
+    max-width: 32px;
+    background: black;
+    border-radius: 50%;
+    vertical-align: middle;
+    margin: 1px;
+    border: 1px solid grey;
+    display: none;
+  }
+
+  input[type="checkbox"] {
+    margin: 0 6px 0 0;
+    vertical-align: middle;
+  }
+
+  @include mq(xl) {
+    img {
+      display: inline-block;
+    }
+  }
+}

_assets/sass/modules/_wrapper.scss

@@ -0,0 +1,14 @@
+.wrapper {
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+  max-width: $wrapper-max-width;
+
+  @each $name, $size in $wrapper-gutter {
+    @include mq($name) {
+        padding-left: $size;
+        padding-right: $size;
+    }
+  }
+}

_assets/sass/variables/_colors.scss

@@ -0,0 +1,2 @@
+$black: #000;
+$white: #fff;

_assets/sass/variables/_layout.scss

@@ -0,0 +1,34 @@
+// Breakpoints
+
+$site-breakpoints: (
+  sm: 0px,
+  md: 768px,
+  lg: 1024px,
+  xl: 1700px
+);
+
+
+// Columns and Rows
+
+$row-class: '.row';
+$column-class: '.col';
+$column-count : 12;
+
+$column-gutter : (
+  sm: 12px,
+  md: 16px,
+  lg: 32px,
+  xl: 32px,
+);
+
+
+// .wrapper container
+
+$wrapper-max-width: 100%;
+
+$wrapper-gutter : (
+  sm: 24px,
+  md: 32px,
+  lg: 48px,
+  xl: 48px
+);