general cleanup

apps/drupal/index.js

@@ -2,7 +2,6 @@
  * Apply the Design System to a single Drupal behavior
  */
 
-import $ from 'jquery';
 import _ from 'lodash';
 
 import designSystem from '../../source/design-system';

apps/drupal/particle.info.yml

@@ -47,3 +47,4 @@ component-libraries:
   pages:
     paths:
       - ../../source/_patterns/05-pages
+      - ../../source/_patterns/05-pages/homepage

apps/pl/index.js

@@ -8,6 +8,7 @@ import _ from 'lodash';
 // PL-only components, regardless of design system
 import 'atoms/grid';
 import 'atoms/image/demo';
+import * as homepage from 'pages/homepage';
 
 // Full design system. May dupe the above, but Webpack don't care.
 import designSystem from '../../source/design-system';
@@ -30,3 +31,6 @@ _.forEach(designSystem, (component) => {
   console.log(component.name);
   component.enable($context, settings);
 });
+
+// PL-only components may need enabled as well!
+homepage.enable();

apps/pl/pattern-lab/config/config.yml

@@ -78,3 +78,4 @@ plugins:
       pages:
         paths:
           - ../../../source/_patterns/05-pages
+          - ../../../source/_patterns/05-pages/homepage

apps/pl/scss/_scss2json.scss

@@ -2,7 +2,7 @@
 
 // Import Everything from Base.
 // This includes Bootstrap
-@import '../../../source/_patterns/00-base/config';
+@import '../../../source/_patterns/00-base/variables';
 
 // Customized Sass Mapping
 // Pulled from Bootstrap's _variables.scss
@@ -23,6 +23,8 @@ $font-weights-demo: (
   bold: $font-weight-bold
 );
 
+$spacing-demo: $spacing;
+
 // Import your Customized Variables here, example:
 //@import '../_patterns/01-atoms/button/_button.scss';
 
@@ -40,6 +42,8 @@ $icons-demo: (
 // Include your Customized Sass Maps here to JSONIFY
 @include export-data('scssVariables.json', (
   scssColors: $theme-colors, // Colors generated from Bootstrap's
+  scssBreakpoints: $grid-breakpoints,
+  scssSpacing: $spacing-demo,
   fontFamilies: $font-families-demo,
   fontSizes: $font-sizes-demo,
   fontWeights: $font-weights-demo,

source/_data/scssVariables.json

@@ -10,6 +10,18 @@
     "dark": "rgb(52, 58, 64)",
     "test": "rgb(255, 192, 203)"
   },
+  "scssBreakpoints": {
+    "xs": 0,
+    "sm": "576px",
+    "md": "768px",
+    "lg": "992px",
+    "xl": "1200px"
+  },
+  "scssSpacing": {
+    "s": "5px",
+    "m": "25px",
+    "l": "50px"
+  },
   "fontFamilies": {
     "$font-family-base": [
       "-apple-system",
@@ -57,4 +69,4 @@
       "search"
     ]
   }
-}
+}

source/_patterns/00-base/_base.scss

@@ -11,7 +11,7 @@
 /// This guarantees both de-duplication and existence of required, generated CSS.
 ///
 
-@import 'config';
+@import 'variables';
 
 // Bootstrap CSS-generating output
 @import '~bootstrap/scss/root';
@@ -21,7 +21,8 @@
 @import '~bootstrap/scss/code';
 
 // Custom CSS-generating output
-@import 'type';
-@import 'forms';
-@import 'tables';
-@import 'transitions';
+@import 'printing/type';
+@import 'printing/forms';
+@import 'printing/tables';
+@import 'printing/transitions';
+@import 'printing/html-elements';

source/_patterns/00-base/_variables.scss

@@ -0,0 +1,37 @@
+///
+/// Global VARIABLES and HELPERS
+///
+/// Place global config here like Bootstrap's _variables.scss.
+/// This kind of config is often required prior to importing any libraries (ie Bootstrap Sass), and
+/// does not produce any CSS, just variables and maps.
+///
+/// All .scss files NEED TO INCLUDE this file as the top import to ensure consistent settings.
+/// Particle does not glob Sass! Because there is no printing CSS output in this file, webpack will
+/// safely squash any duplication.
+///
+/// @example
+/// ```scss
+/// @import '../../00-base/variables';
+/// ```
+/// This guarantees every component is styled with the same presets.
+///
+
+// Custom non-printing tools
+@import 'non-printing/functions';
+@import 'non-printing/colors';
+@import 'non-printing/mixins';
+
+// (Other non-printing .scss), ie font families, spacing, etc
+$spacing: (
+  s: 5px,
+  m: 25px,
+  l: 50px,
+);
+
+// Bootstrap non-printing tools
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+
+// import anything else non-printing that may depend on variables in this file!
+// @import 'non-printing/project-specific-mixins'

source/_patterns/00-base/demo/breakpoints.twig

@@ -2,10 +2,9 @@
 
 <div class="sg-breakpoints">
   <ul class="breakpoints">
-    {% for bpVarName, bpVarData in baseScssVars if '$bp--' in bpVarName %}
-      {% set value = bpVarData.value ~ bpVarData.unit %}
+    {% for bp, value in scssBreakpoints %}
       <li style="left: {{ value }}">
-        <span class="label">{{ bpVarName }}:<br/>{{ value }}</span>
+        <span class="label">{{ bp }}:<br/>{{ value }}</span>
       </li>
     {% endfor %}
   </ul>
@@ -18,5 +17,5 @@
   </ul>
 </div>
 
-
-<p>To add to these items, use Sass variables that start with $bp-- in _breakpoints.scss</p>
+<p>To add or change these items, override Bootstrap's <code>$grid-breakpoints</code> inside <code>_variables.scss</code></p>
+<p>See <a target="_blank" href="https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints">Bootstrap's docs</a> for more.</p>

source/_patterns/00-base/demo/spacing.twig

@@ -1,12 +1,10 @@
 <h1>Spacing</h1>
-{% for spacingVarName, spacingVarData in baseScssVars if '$spacing--' in spacingVarName %}
-  {% set value = spacingVarData.value ~ spacingVarData.unit %}
-
-  <div style="margin: 5px;">
+{% for spacing, value in scssSpacing %}
+  <div style="margin: 10px;">
     <div style="height: {{ value }}; width: {{ value }}; outline: solid 1px black; display: inline-block; margin-right: 5px;"></div>
-    <span>{{ valule }} : <code>{{ spacingVarName }}</code></span>
+    <span>{{ value }} : <code>$spacing({{ spacing }})</code></span>
   </div>
 {% endfor %}
 
-<p>To add to these items, use Sass variables that start with <code>$spacing--</code> in <code>_spacing.scss</code></p>
+<p>To add to these items, adjust <code>$spacing()</code> in <code>_variables.scss</code></p>
 

source/_patterns/00-base/_forms.scss → source/_patterns/00-base/printing/_forms.scss

@@ -1,4 +1,4 @@
-@import 'config';
+@import '../variables';
 
 // Bootstrap override variables go here.
 // See available vars in ~bootstrap/scss/_variables.scss, i.e.

source/_patterns/00-base/printing/_html-elements.scss

@@ -0,0 +1,7 @@
+@import '../variables';
+
+// Use this file for any global layout rules you want applied after
+// Bootstrap's Reboot does it's thing, but don't necessarily fit into
+// another pattern here.
+//
+// @see https://v4-alpha.getbootstrap.com/content/reboot/

source/_patterns/00-base/_tables.scss → source/_patterns/00-base/printing/_tables.scss

@@ -1,4 +1,4 @@
-@import 'config';
+@import '../variables';
 
 // Bootstrap override variables go here.
 // See available vars in ~bootstrap/scss/_variables.scss, i.e.

source/_patterns/00-base/_transitions.scss → source/_patterns/00-base/printing/_transitions.scss

@@ -1,4 +1,4 @@
-@import 'config';
+@import '../variables';
 
 // Bootstrap override variables go here.
 // See available vars in ~bootstrap/scss/_variables.scss, i.e.

source/_patterns/00-base/_type.scss → source/_patterns/00-base/printing/_type.scss

@@ -1,4 +1,4 @@
-@import 'config';
+@import '../variables';
 
 // Bootstrap override variables go here.
 // See available vars in ~bootstrap/scss/_variables.scss, i.e.

source/_patterns/01-atoms/badge/_badge.scss

@@ -1,4 +1,4 @@
-@import '../../00-base/config';
+@import '../../00-base/variables';
 
 // To change default bootstrap list-item variables,
 // copy from ~bootstrap/scss/variables to here

source/_patterns/01-atoms/branding/_branding.scss

@@ -1,5 +1,5 @@
 // All component Sass needs non-printing base config
-@import '../../00-base/config';
+@import '../../00-base/variables';
 
 // To change default bootstrap card variables, SEE ~bootstrap/scss/variables
 // Add bootstrap variables here

source/_patterns/01-atoms/breadcrumb/_breadcrumb.scss

@@ -1,5 +1,5 @@
 // All component Sass needs non-printing base config
-@import '../../00-base/config';
+@import '../../00-base/variables';
 
 // To change default bootstrap breadcrumb variables, SEE ~bootstrap/scss/variables
 // Add bootstrap variables here

source/_patterns/01-atoms/button/_button.scss

@@ -1,4 +1,4 @@
-@import '../../00-base/config';
+@import '../../00-base/variables';
 
 // To change default bootstrap card variables, 
 // copy from ~bootstrap/scss/variables to here

source/_patterns/01-atoms/grid/_grid.scss

@@ -1,4 +1,4 @@
-@import '../../00-base/config';
+@import '../../00-base/variables';
 
 // Bootstrap override variables go here.
 // See available vars in ~bootstrap/scss/_variables.scss

source/_patterns/01-atoms/icon/demo/icons.twig

@@ -24,7 +24,7 @@
             <li>It is recommended that all SVGs be on the same size canvas (512px x 512px). All glyphs are scaled up to the size of the largest glyph otherwise.</li>
             <li>Adding new SVGs to the folder requires restarting the webpack dev server.</li>
             <li>Font icons inherit the color of their parent text.</li>
-            <li>The generated font named <strong>{{ scssIcons.fontname }}</strong> will be <a href="https://github.com/webpack-contrib/url-loader">base64 inlined</a> into the output CSS.</li>
+            <li>The generated font named <strong>{{ scssIcons.fontname }}</strong> will be <a href="https://github.com/webpack-contrib/url-loader" target="_blank">base64 inlined</a> into the output CSS.</li>
           </ul>
         </div>
       </div>

source/_patterns/01-atoms/image/_image.scss

@@ -1,4 +1,4 @@
-@import '../../00-base/config';
+@import '../../00-base/variables';
 
 // Override any Bootstrap image vars here
 @import '~bootstrap/scss/images';

source/_patterns/01-atoms/list-group/_list-group.scss

@@ -1,4 +1,4 @@
-@import '../../00-base/config';
+@import '../../00-base/variables';
 
 // To change default bootstrap list-item variables,
 // copy from ~bootstrap/scss/variables to here

source/_patterns/02-molecules/card/_card.scss

@@ -1,5 +1,5 @@
 // All component Sass needs non-printing base config
-@import '../../00-base/config';
+@import '../../00-base/variables';
 
 // To change default bootstrap card variables, SEE ~bootstrap/scss/variables
 // Add bootstrap variables here

source/_patterns/02-molecules/jumbotron/_jumbotron.scss

@@ -1,5 +1,5 @@
 // All component Sass needs non-printing base config
-@import '../../00-base/config';
+@import '../../00-base/variables';
 
 // To change default bootstrap jumbotron variables, SEE ~bootstrap/scss/variables
 // Add bootstrap variables here

source/_patterns/04-templates/site-container.twig

@@ -0,0 +1,9 @@
+{#{% include '@organisms/header' %}#}
+
+<main class="site-content">
+  {% block content %}
+    <h2>Site Content Here</h2>
+  {% endblock %}
+</main>
+
+{#{% include '@organisms/footer' %}#}

source/_patterns/05-pages/homepage/homepage.twig

@@ -0,0 +1,8 @@
+{% extends "@templates/site-container.twig" %}
+{% block content %}
+  <h6>I should fail pa11y</h6>
+
+  <h1 class="homepage__header">this is a pattern lab only demo of the HOMEPAGE</h1>
+
+  <p class="homepage__text">asdfafdsd blerp</p>
+{% endblock %}

source/_patterns/05-pages/homepage/index.js

@@ -0,0 +1,14 @@
+import $ from 'jquery';
+
+const defaultSettings = { color: 'orange' };
+
+export const name = 'homepage';
+
+export function disable() {}
+
+export function enable(context = $(document), settings = defaultSettings) {
+  $('.homepage__header', context).css('color', settings.color);
+  $('.homepage__text', context).html('overwritten from homepage js');
+}
+
+export default enable;