diff --git a/js/framework.js b/js/framework.js new file mode 100644 index 0000000..07890e5 --- /dev/null +++ b/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; diff --git a/package-lock.json b/package-lock.json index dc6c904..40e65e5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -664,6 +664,11 @@ "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", "dev": true }, + "esm": { + "version": "3.2.25", + "resolved": "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz", + "integrity": "sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==" + }, "execa": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz", diff --git a/package.json b/package.json index 25ca990..fb373d3 100644 --- a/package.json +++ b/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", diff --git a/processTemplates.js b/processTemplates.js new file mode 100644 index 0000000..611abe2 --- /dev/null +++ b/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); + + + diff --git a/scss/_breakpoints.scss b/scss/_breakpoints.scss index 65befa7..a5b35f4 100644 --- a/scss/_breakpoints.scss +++ b/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; diff --git a/templates/_breakpoints.scss.tmpl b/templates/_breakpoints.scss.tmpl new file mode 100644 index 0000000..3a18322 --- /dev/null +++ b/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; diff --git a/templates/_variables.scss.tmpl b/templates/_variables.scss.tmpl new file mode 100644 index 0000000..e9c2020 --- /dev/null +++ b/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;