experimental source of truth and JS break-out

js/framework.js

@@ -0,0 +1,34 @@
+const defaultFontSize = 16;
+
+function calculateRem(valueInPixals){
+  valueInPixals = parseFloat(valueInPixals.replace('px', ''));
+  return `${valueInPixals / defaultFontSize}rem`;
+}
+
+const framework = {
+  variables: {
+    defaultFontSize: defaultFontSize
+  },
+  spacers: {
+    xxs: calculateRem("4px"),
+    xs: calculateRem("8px"),
+    sm: calculateRem("16px"),
+    md: calculateRem("24px"),
+    lg: calculateRem("32px"),
+    xl: calculateRem("48px"),
+    xxl: calculateRem("64px")
+  },
+  gridBreakpoints: {
+    sm: calculateRem("0px"),
+    md: calculateRem("768px"),
+    lg: calculateRem("1024px"),
+    xl: calculateRem("1440px")
+  },
+  gridBreakpointsMax: {
+    sm: calculateRem("767px"),
+    md: calculateRem("1023px"),
+    lg: calculateRem("1439px")
+  }
+};
+
+export default framework;

package.json

@@ -8,8 +8,10 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "scss-watch": "node-sass --watch scss -o css",
+    "process-templates": "node -r esm processTemplates.js",
     "build": "node-sass scss -o css",
-    "build-guide": "kss --config ./kss-config.json"
+    "build-guide": "kss --config ./kss-config.json",
+    "build-all": "npm run process-templates && npm run build && npm run build-guide"
   },
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/",
@@ -22,7 +24,8 @@
   "devDependencies": {
     "kss": "^3.0.0-beta.25",
     "michelangelo": "^0.8.0",
-    "node-sass": "^4.13.0"
+    "node-sass": "^4.13.0",
+    "esm": "^3.2.25"
   },
   "files": [
     "css",

processTemplates.js

@@ -0,0 +1,39 @@
+'use strict';
+
+const fs = require('fs');
+import cssFramework from './js/framework'; //This is possible with the ESM lib
+
+function readInTemplate(fileName) {
+    try {
+        return fs.readFileSync(fileName, 'utf8');
+    } catch (err) {
+        console.error(err)
+    }
+}
+
+//Process Variables
+const variables = cssFramework.variables;
+let variableTmpl = readInTemplate("./templates/_variables.scss.tmpl");
+for (let [key, value] of Object.entries(variables)) {
+    variableTmpl = variableTmpl.replace(`#(${key})`, value);
+}
+fs.writeFileSync('./scss/_variables.scss', variableTmpl);
+
+//Process Breakpoints and Spacers
+const spacers = cssFramework.spacers;
+let breakPointTmpl = readInTemplate("./templates/_breakpoints.scss.tmpl");
+for (let [key, value] of Object.entries(spacers)) {
+    breakPointTmpl = breakPointTmpl.replace(`#(${key})`, value);
+}
+const gridBreakpoints = cssFramework.gridBreakpoints;
+for (let [key, value] of Object.entries(gridBreakpoints)) {
+    breakPointTmpl = breakPointTmpl.replace(`#(${key})`, value);
+}
+const gridBreakpointsMax = cssFramework.gridBreakpointsMax;
+for (let [key, value] of Object.entries(gridBreakpointsMax)) {
+    breakPointTmpl = breakPointTmpl.replace(`#(${key})`, value);
+}
+fs.writeFileSync('./scss/_breakpoints.scss', breakPointTmpl);
+
+
+

scss/_breakpoints.scss

@@ -9,13 +9,13 @@
 //
 // Styleguide 1.2.1
 $spacers: (
-        xxs: calculateRem(4px),
-        xs: calculateRem(8px),
-        sm: calculateRem(16px),
-        md: calculateRem(24px),
-        lg: calculateRem(32px),
-        xl: calculateRem(48px),
-        xxl: calculateRem(64px)
+        xxs: 0.25rem,
+        xs: 0.5rem,
+        sm: 1rem,
+        md: 1.5rem,
+        lg: 2rem,
+        xl: 3rem,
+        xxl: 4rem
 ) !default;
 
 // $grid-breakpoints
@@ -24,14 +24,14 @@ $spacers: (
 //
 // Styleguide 1.2.2
 $grid-breakpoints: (
-        sm: calculateRem(0px),
-        md: calculateRem(768px),
-        lg: calculateRem(1024px),
-        xl: calculateRem(1440px)
+        sm: 0rem,
+        md: 48rem,
+        lg: 64rem,
+        xl: 90rem
 ) !default;
 
 $grid-breakpoints-max:(
-        sm: calculateRem(767px),
-        md: calculateRem(1023px),
-        lg: calculateRem(1439px)
+        sm: 47.9375rem,
+        md: 63.9375rem,
+        lg: 89.9375rem
 ) !default;

templates/_breakpoints.scss.tmpl

@@ -0,0 +1,37 @@
+// Scss Breakpoints
+//
+// Styleguide 1.2.0
+
+
+// $spacers
+//
+// Scss map of all the spacing sizes for all breakpoints
+//
+// Styleguide 1.2.1
+$spacers: (
+        xxs: #(xxs),
+        xs: #(xs),
+        sm: #(sm),
+        md: #(md),
+        lg: #(lg),
+        xl: #(xl),
+        xxl: #(xxl)
+) !default;
+
+// $grid-breakpoints
+//
+// Scss map of all the breakpoints for the grid system
+//
+// Styleguide 1.2.2
+$grid-breakpoints: (
+        sm: #(sm),
+        md: #(md),
+        lg: #(lg),
+        xl: #(xl)
+) !default;
+
+$grid-breakpoints-max:(
+        sm: #(sm),
+        md: #(md),
+        lg: #(lg)
+) !default;

templates/_variables.scss.tmpl

@@ -0,0 +1,88 @@
+// SCSS
+//
+// This section will cover the Scss variables, mixens and functions that are used to build out the framework
+//
+// Styleguide 1.0.0
+
+
+// Scss Variables
+//
+// Scss variables are used so that adjustments can be made in a centralized location and to keep
+// the code base DRY.
+//
+// Styleguide 1.1.0
+
+
+
+// $default-font-size
+//
+// Default font size. This is important as it will be used to convert pixel values to rems
+//
+// Styleguide 1.1.1
+$default-font-size: #(defaultFontSize) !default;
+
+
+// $grid-columns
+//
+// Sass variable that sets the default number of columns used in the CSS Grid system.
+//
+// Styleguide 1.1.2
+$grid-columns: 12 !default;
+
+$base-col-percent: 100% / $grid-columns;
+
+// $primary-font-family
+//
+// Sass variable that sets the primary font family.
+//
+// Styleguide 1.1.3
+$primary-font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !default;
+
+// $secondary-font-family
+//
+// Sass variable that sets the secondary font family.
+//
+// Styleguide 1.1.4
+$secondary-font-family: Georgia,Times,Times New Roman,serif !default;
+
+// $font-weight-light
+//
+// Sass variable that sets light font weight.
+//
+// Styleguide 1.1.5
+$font-weight-light: 300;
+
+// $font-weight-normal
+//
+// Sass variable that sets the normal font weight.
+//
+// Styleguide 1.1.6
+$font-weight-normal: 400;
+
+// $font-weight-semibold
+//
+// Sass variable that sets the semi-bold font weight.
+//
+// Styleguide 1.1.7
+$font-weight-semibold: 500;
+
+// $font-weight-bold
+//
+// Sass variable that sets the bold font weight.
+//
+// Styleguide 1.1.8
+$font-weight-bold: 700;
+
+// $line-height-base
+//
+// Sass variable that sets the default line height.
+//
+// Styleguide 1.1.9
+$line-height-base: 1.5 !default;
+
+// $$headings-line-height
+//
+// Sass variable that sets the line height for headers.
+//
+// Styleguide 1.1.10
+$headings-line-height: 1.2 !default;