create new spress template

STLYEGUIDE_SPRESS_UPDATE/composer.json

@@ -0,0 +1,14 @@
+{
+    "name": "palantirnet/STYLEGUIDE-TEMPLATE",
+    "type": "spress-theme",
+    "license": "proprietary",
+    "minimum-stability": "dev",
+    "prefer-stable": true,
+    "preferred-install": "dist",
+    "config": {
+        "sort-packages": "true"
+    },
+    "require": {
+        "spress/spress": "^2.1"
+    }
+}

STLYEGUIDE_SPRESS_UPDATE/config.yml

@@ -0,0 +1,35 @@
+# Site configuration
+
+title: 'STYLEGUIDE TEMPLATE'
+url: ''
+
+text_extensions: [ 'htm', 'html', 'html.twig', 'twig.html', 'js', 'less', 'markdown', 'md', 'mkd', 'mkdn', 'coffee', 'css', 'erb', 'haml', 'handlebars', 'hb', 'ms', 'mustache', 'php', 'rb', 'sass', 'scss', 'slim', 'txt', 'twig', 'xhtml', 'xml', 'svg' ]
+
+server_watch_ext: ['html', 'htm', 'xml', 'css', 'js', 'twig', 'md']
+
+collections:
+  elements:
+    output: true
+    title: "Elements"
+    sort_by: title
+    sort_type: 'ascending'
+
+  components:
+    output: true
+    title: "Components"
+    sort_by: title
+    sort_type: 'ascending'
+
+  comps:
+    output: true
+    title: "High Fidelity Comps"
+    sort_by: title
+    sort_type: 'ascending'
+
+  templates:
+    output: true
+    title: "Templates"
+    sort_by: title
+    sort_type: 'ascending'
+
+categories: ['global', 'rail', 'teaser', 'hero', 'inline', 'general']

STLYEGUIDE_SPRESS_UPDATE/config_dev.yml

@@ -0,0 +1,4 @@
+# Site configuration
+
+url: ''
+debug: true

STLYEGUIDE_SPRESS_UPDATE/config_github.yml

@@ -0,0 +1,3 @@
+# Site configuration
+
+url: https://palantirnet.github.io/STYLEGUIDE-TEMPLATE

STLYEGUIDE_SPRESS_UPDATE/gitignore

@@ -0,0 +1,8 @@
+# npm removes this file from butler on install if we name it .gitignore, but
+# it's a necessary part of the Spress template!
+
+/vendor/
+/build/
+/src/content/assets/css/
+/node_modules/
+/npm-debug.log

STLYEGUIDE_SPRESS_UPDATE/src/content/assets/js/site.js

@@ -0,0 +1,20 @@
+/**
+ * @file
+ * A JavaScript file for the site.
+ *
+ * Our JavaScript must be wrapped in a closure.
+ * @see https://drupal.org/node/1446420
+ * @see http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth
+ *
+ * @copyright Copyright 2016 Palantir.net
+ */
+
+(function ($) {
+
+  Drupal.behaviors.site = {
+    attach: function (context, settings) {
+      console.log('Hello World!');
+    }
+  };
+
+})(jQuery, Drupal);

STLYEGUIDE_SPRESS_UPDATE/src/content/assets/js/styleguide/styleguide-nav.js

@@ -0,0 +1,52 @@
+/**
+ * @file
+ * A JavaScript file for rail items.
+ *
+ * Our JavaScript must be wrapped in a closure.
+ * @see https://drupal.org/node/1446420
+ * @see http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth
+ *
+ * @copyright Copyright 2016 Palantir.net
+ */
+
+(function ($) {
+
+  Drupal.behaviors.styleguideNavTrigger = {
+    attach: function (context, settings) {
+      // Styleguide Navigation Open and Close functionality
+      // Main navigation mobile open/close
+      $('.sg-trigger').click(function (event) {
+        $(this).toggleClass('is-active');
+        $(this).blur();
+        event.preventDefault();
+        $(this).siblings('.sg-nav').toggleClass('is-active');
+      });
+      // Secondary navigation Mobile open/close
+      $('.sg-secondary-nav-trigger').click(function (event) {
+        $(this).toggleClass('is-active');
+        $(this).blur();
+        event.preventDefault();
+        $(this).siblings('.sg-secondary-nav').toggleClass('is-active');
+      });
+      // Secondary navigation mobile sub drawer open/close
+      $('.sg-secondary-nav__section').click(function (event) {
+        $(this).toggleClass('is-active');
+        $(this).blur();
+        event.preventDefault();
+        $(this).siblings('.sg-secondary-subnav').toggleClass('is-active');
+        $(this).parents().siblings().children('.sg-secondary-subnav').removeClass('is-active');
+        $(this).parents().siblings().children('.sg-secondary-nav__section').removeClass('is-active');
+      });
+
+      // Dev Notes Drawer
+      $('.sg-dev-drawer-trigger').click(function (event) {
+        $(this).toggleClass('is-active');
+        $(this).blur();
+        event.preventDefault();
+        $(this).parents('.sg-dev-drawer-trigger-wrapper').siblings('.sg-dev-drawer').toggleClass('is-active');
+      });
+
+    }
+  };
+
+})(jQuery, Drupal);

STLYEGUIDE_SPRESS_UPDATE/src/content/assets/libraries/styleguide.js

@@ -0,0 +1,31 @@
+/**
+ * Styleguide javascript wrapper.
+ *
+ * A helper script that mimics the Drupal Javascript API in the styleguide,
+ * which allows us to share javascript between the styleguide and Drupal.
+ */
+
+window.Drupal = {behaviors: {}, locale: {}};
+
+(function ($) {
+  Drupal.attachBehaviors = function (context, settings) {
+    context = context || document;
+    settings = settings || {};
+    var behaviors = Drupal.behaviors;
+    // Execute all of them.
+    for (var i in behaviors) {
+      if (behaviors.hasOwnProperty(i) && typeof behaviors[i].attach === 'function') {
+        // Don't stop the execution of behaviors in case of an error.
+        try {
+          behaviors[i].attach(context, settings);
+        }
+        catch (e) {
+          console.log(e);
+        }
+      }
+    }
+  };
+
+  // Attach all behaviors.
+  $('document').ready(function () { Drupal.attachBehaviors(document, {}); });
+})(jQuery);

STLYEGUIDE_SPRESS_UPDATE/src/content/components.html

@@ -0,0 +1,11 @@
+---
+layout: component
+title: 
+description:
+---
+
+{% block pageContent %}
+<p>We have organized the site components into sections the following sections: global, rail, teaser, hero, inline, and general.</p>
+<p>As the styleguide grows, more component categories will be created and added to the list.</p>
+<p>When you select a component from the navigation, you will see the component on the page along with a brief description.</p>
+{% endblock %}

STLYEGUIDE_SPRESS_UPDATE/src/content/components/component-inline-image.html

@@ -0,0 +1,92 @@
+---
+layout: component
+section: component
+type: inline
+
+title: Inline Images
+description: 'The inline image adds images into the WYSIWYG component. It includes an image with alt text and an optional caption. It has four variants, full-width (default), left, right, and portrait.'
+
+
+drupal_theme_paths:
+
+changelog:
+  -
+    date: ''
+    log: ''
+
+dev_notes:
+
+---
+
+{% block content_wrapper %}
+  {% block content %}
+
+    {% include 'inline-image.twig' with { 'image' : 'fpo-16x9.jpg', 'alt' : 'Alt Text', 'caption' : 'This is optional caption text.' } %}
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+    {% include 'inline-image.twig' with { 'image' : 'fpo-16x9.jpg', 'alignment' : 'inline--left', 'alt' : 'Alt Text' } %}
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+    {% include 'inline-image.twig' with { 'image' : 'fpo-16x9.jpg', 'alignment' : 'inline--right', 'alt' : 'Alt Text', 'caption' : 'This is an optional image caption.' } %}
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+    {% include 'inline-image.twig' with { 'image' : 'fpo-1x1.jpg', 'alignment' : 'inline--portrait', 'alt' : 'Alt Text', 'caption' : 'This is an optional inline caption on a portrait sized image.' } %}
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+
+
+  {% endblock %}
+{% endblock %}
+

STLYEGUIDE_SPRESS_UPDATE/src/content/components/component-inline-video.html

@@ -0,0 +1,60 @@
+---
+layout: component
+section: component
+type: inline
+
+title: Inline Video
+description: 'The inline video component is used to add inline video to the WYSIWYG. It includes an embedded video (YouTube or Vimeo) and an optional caption.'
+
+
+drupal_theme_paths:
+
+changelog:
+  -
+    date: ''
+    log: ''
+
+dev_notes:
+
+---
+
+{% block content_wrapper %}
+  {% block content %}
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+    {% include 'inline-video.twig' with { 'video_url' : 'https://www.youtube.com/embed/M93NNRGTsFY' } %}
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+    {% include 'inline-video.twig' with { 'video_url' : 'https://www.youtube.com/embed/7cmvHgNZ20E', 'caption' : 'Learn about complex valve operations and mitral valve re-operations in this special interview with Dr. Anelechi Anyanwu, cardiac surgeon at The Mount Sinai Medical Center.' } %}
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+
+
+  {% endblock %}
+{% endblock %}
+

STLYEGUIDE_SPRESS_UPDATE/src/content/elements.html

@@ -0,0 +1,10 @@
+---
+layout: element
+title: 
+description: 
+---
+
+{% block pageContent %}
+  <p>Elements are the basic building block of the page. These elements are shared amongst both sites.</p>
+  <p>When you select an element from the navigation, you will see the element on the page along with a brief description.</p>
+{% endblock %}

STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-buttons.html

@@ -0,0 +1,15 @@
+---
+layout: element
+section: element
+
+title: Buttons
+description: Create basic button styles for the site. This includes only the button element and the inputs for submit and reset.
+---
+
+<h4>Default Buttons</h4>
+<a href="#" class="button">Link Button</a>
+<button>This is a Button</button>
+<input type="button" value="Input Button" />
+<input type="submit" value="Submit Button" />
+<input type="reset" value="Reset Button" />
+