.eslintrc.js

@@ -1,11 +0,0 @@
-module.exports = {
-  env: {
-    es6: true,
-    browser: true,
-  },
-  parserOptions: {
-    ecmaVersion: 2017,
-  },
-  parser: 'babel-eslint',
-  extends: 'eslint-config-airbnb-base',
-};

.stylelintrc

@@ -1,10 +0,0 @@
-{
-	"extends": "stylelint-config-recommended",
-	"ignoreFiles": ["dist/**/*"],
-	"rules": {
-		"at-rule-no-unknown": [
-			true,
-			ignoreAtRules: ["mixin", "define-mixin"]
-		]
-	}
-}

package.json

@@ -1,48 +0,0 @@
-{
-  "name": "webpack-static-html",
-  "version": "1.0.0",
-  "description": "",
-  "private": true,
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "serve": "webpack serve",
-    "watch": "webpack --watch --progress",
-    "build": "webpack --env production"
-  },
-  "author": "",
-  "license": "UNLICENSED",
-  "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/preset-env": "^7.12.11",
-    "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.2.2",
-    "clean-webpack-plugin": "^3.0.0",
-    "css-loader": "^5.0.1",
-    "cssnano-webpack-plugin": "^1.0.3",
-    "ejs-compiled-loader": "^3.0.0",
-    "eslint": "^7.2.0",
-    "eslint-config-airbnb-base": "^14.2.1",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-webpack-plugin": "^2.4.1",
-    "html-webpack-plugin": "^5.0.0",
-    "mini-css-extract-plugin": "^1.3.3",
-    "postcss": "^8.2.2",
-    "postcss-functions": "^4.0.2",
-    "postcss-import": "^14.0.0",
-    "postcss-loader": "^4.1.0",
-    "postcss-mixins": "^7.0.2",
-    "postcss-nesting": "^7.0.1",
-    "postcss-preset-env": "^6.7.0",
-    "postcss-simple-vars": "^6.0.2",
-    "style-loader": "^2.0.0",
-    "stylelint": "^13.8.0",
-    "stylelint-config-recommended": "^3.0.0",
-    "stylelint-webpack-plugin": "^2.1.1",
-    "webpack": "^5.11.1",
-    "webpack-cli": "^4.3.1",
-    "webpack-dev-server": "^3.11.1"
-  },
-  "dependencies": {
-    "postcss-custom-media": "^8.0.0"
-  }
-}

postcss.config.js

@@ -1,14 +0,0 @@
-const postcssFunctions = require('./src/postcss/functions');
-const postcssMixins = require('./src/postcss/mixins');
-
-module.exports = {
-  plugins: [
-    'postcss-import',
-    'postcss-custom-media',
-    ['postcss-mixins', { mixins: postcssMixins }],
-    'postcss-preset-env',
-    'postcss-nesting',
-    'postcss-simple-vars',
-    ['postcss-functions', { functions: postcssFunctions }],
-  ],
-};

src/css/base/base.css

@@ -1,6 +0,0 @@
-@import 'typography.css';
-@import 'accessibility.css';
-@import 'forms.css';
-@import 'buttons.css';
-@import 'icons.css';
-@import 'visibility.css';

src/css/base/spacing.css

@@ -0,0 +1,19 @@
+:root {
+    --space-unit:  1rem;
+  }
+
+:root,
+* {
+	--space-xxxxs: calc(0.125 * var(--space-unit));
+	--space-xxxs:  calc(0.25 * var(--space-unit));
+	--space-xxs:   calc(0.375 * var(--space-unit));
+	--space-xs:    calc(0.5 * var(--space-unit));
+	--space-sm:    calc(0.75 * var(--space-unit));
+	--space-md:    calc(1.25 * var(--space-unit));
+	--space-lg:    calc(2 * var(--space-unit));
+	--space-xl:    calc(3.25 * var(--space-unit));
+	--space-xxl:   calc(5.25 * var(--space-unit));
+	--space-xxxl:  calc(8.5 * var(--space-unit));
+	--space-xxxxl: calc(13.75 * var(--space-unit));
+	--component-padding: var(--space-md);
+}

src/css/base/typography.css

@@ -181,10 +181,7 @@ u {
 	margin-left: calc(50% - 50vw);
 }
 
-
+@mixin breakpoint sm {
-/* postcss-custom-media */
-/* if using sass and not postcss will need to change */
-@media (--bp-sm) {
 	.text-component__block--left, 
 	.text-component__block--right {
 		width: 45%;
@@ -207,9 +204,7 @@ u {
 }
 
 /* outset content */
-/* postcss-custom-media */
+@mixin breakpoint xl {
-/* if using sass and not postcss will need to change */
-@media (--bp-xl) {
 	.text-component__block--outset {
 		width: calc(100% + 10.5 * var(--space-unit));
 	}

src/css/base/variables.css

@@ -1,9 +1,3 @@
-@custom-media --bp-xs (max-width: 32em);  /* ~512px */
-@custom-media --bp-sm (max-width: 48em);  /* ~768px */
-@custom-media --bp-md (max-width: 64em);  /* ~1024px */
-@custom-media --bp-lg (max-width: 80em);  /* ~1280px */
-@custom-media --bp-xl (max-width: 90em);  /* ~1440px */
-
 :root {
 	/* z-index */
 	--zindex-header: 3;                  /* e.g., main header */
@@ -11,9 +5,6 @@
 	--zindex-fixed-element: 10;          /* e.g., 'back to top' button */
 	--zindex-overlay: 15;                /* e.g., modals and dialogs */
 
-	/* space unit */
-	--space-unit:  1rem;
-
 	/*radius */
 	--radius-sm: calc(var(--radius, 0.25em) / 2);
 	--radius-md: var(--radius, 0.25em);
@@ -46,19 +37,3 @@
 	--ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
 	--ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
 }
-
-:root,
-* {
-	--space-xxxxs: calc(0.125 * var(--space-unit));
-	--space-xxxs:  calc(0.25 * var(--space-unit));
-	--space-xxs:   calc(0.375 * var(--space-unit));
-	--space-xs:    calc(0.5 * var(--space-unit));
-	--space-sm:    calc(0.75 * var(--space-unit));
-	--space-md:    calc(1.25 * var(--space-unit));
-	--space-lg:    calc(2 * var(--space-unit));
-	--space-xl:    calc(3.25 * var(--space-unit));
-	--space-xxl:   calc(5.25 * var(--space-unit));
-	--space-xxxl:  calc(8.5 * var(--space-unit));
-	--space-xxxxl: calc(13.75 * var(--space-unit));
-	--component-padding: var(--space-md);
-}

src/css/style.css

@@ -1,4 +1,2 @@
-@import 'reset.css';
-@import 'variables.css';
 @import 'colors.css';
-@import 'base/base.css';
+@import 'reset.css';

src/js/index.js

@@ -1,5 +1,3 @@
-// import '../sass/main.scss';
-import '../css/mixins.postcss.css';
 import '../css/style.css';
 
 window.addEventListener('DOMContentLoaded', (event) => {

src/postcss/mixins.js

@@ -22,6 +22,12 @@ const postcssMixins = {
     return defineHSL(name, hue, sat, light);
   },
 
+  bpMin(mixin) {
+  },
+
+  bpMax(mixin) {
+  },
+
   // TODO - untested
   // // font rendering -> useful for light text on dark backgrounds
   fontSmooth() {

src/postcss/mixins.postcss.css

@@ -1,3 +1,15 @@
+@define-mixin bp-min $breakpoint {
+  @media (min-width: $breakpoint) { @mixin-content; }
+}
+
+@define-mixin bp-max $breakpoint {
+  @media (max-width: $breakpoint - 0.001) { @mixin-content; }
+}
+
+@define-mixin bp-min-max $bp-min, $bp-max {
+  @media (min-width: $bp-min) and (max-width: $bp-max - 0.001) { @mixin-content; }
+}
+
 /* crop top space on text elements - caused by line height */
 /*
  The mixin also accepts a (not required) second parameter (a number smaller than 1 that varies with the font-family value) that improves the crop effect.

src/postcss/package-lock.json

@@ -1,27 +0,0 @@
-{
-  "name": "postcss",
-  "version": "1.0.0",
-  "lockfileVersion": 1,
-  "requires": true,
-  "dependencies": {
-    "hex-to-hsl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/hex-to-hsl/-/hex-to-hsl-1.0.2.tgz",
-      "integrity": "sha1-1cWezgAXhEToIcj8WKQwr8CYMcI=",
-      "requires": {
-        "hex-to-rgb": "^1.0.1",
-        "rgb-to-hsl": "0.0.2"
-      }
-    },
-    "hex-to-rgb": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/hex-to-rgb/-/hex-to-rgb-1.0.1.tgz",
-      "integrity": "sha1-EAud8SazLydirfhIa+aMZe+O0qQ="
-    },
-    "rgb-to-hsl": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/rgb-to-hsl/-/rgb-to-hsl-0.0.2.tgz",
-      "integrity": "sha1-Nvn8KGN2uQrMRX5pkAW0y0LTUOw="
-    }
-  }
-}

src/sass/main.scss

@@ -1,2 +1 @@
-@import 'breakpoints';
+// TODO
-@import 'mixins';

src/templates/index.ejs

@@ -1,30 +0,0 @@
-<!DOCTYPE HTML>
-
-<html lang="en">
-	<head>
-		<meta charset="utf-8">
-
-		<title>THE TITLE IS THIS!</title>
-
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-
-		<meta name="description" content="THE DESCRIPTION IS THIS!">
-		<meta name="author" content="I AM THE AUTHOR">
-
-	</head>
-
-	<body>
-
-		<header>
-		</header>
-
-		<main id="js-main">
-			<%# weird loader string syntax because https://github.com/bazilio91/ejs-compiled-loader/issues/46 %>
-			<%- require('!!ejs-compiled-loader?{}!./partials/component.ejs')({ text: 'text is text yahh!!!' }) %>
-		</main>
-
-		<footer>
-		</footer>
-	</body>
-</html>
-

src/templates/partials/component.ejs

@@ -1,4 +0,0 @@
-<div class="component">
-	<p><%= text %></p>
-	<p>woot!</p>
-</div>

webpack.config.js

@@ -1,105 +0,0 @@
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CssnanoPlugin = require('cssnano-webpack-plugin');
-const EsLintPlugin = require('eslint-webpack-plugin');
-const StylelintPlugin = require('stylelint-webpack-plugin');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-
-module.exports = (env) => ({
-  mode: env.production ? 'production' : 'development',
-  target: 'web',
-  entry: './src/js/index.js',
-  output: {
-    filename: env.production ? '[name].[contenthash].bundle.js' : '[name].bundle.js',
-    path: path.resolve(__dirname, 'dist'),
-  },
-  devtool: env.production ? 'cheap-source-map' : 'inline-source-map',
-  devServer: {
-    contentBase: './dist',
-    hot: true,
-  },
-  plugins: [
-    new MiniCssExtractPlugin({
-      filename: env.production ? '[name].[contenthash].css' : '[name].css',
-    }),
-    new CleanWebpackPlugin(),
-    new HtmlWebpackPlugin({
-      // weird loader string syntax because https://github.com/bazilio91/ejs-compiled-loader/issues/46
-      template: '!!ejs-compiled-loader?{}!./src/templates/index.ejs',
-    }),
-    new EsLintPlugin(),
-    new StylelintPlugin(),
-  ],
-  module: {
-    rules: [
-      {
-        test: /\.ejs$/,
-        use: {
-          // weird loader string syntax because https://github.com/bazilio91/ejs-compiled-loader/issues/46
-          // NOTE - talso an alternative workaround that involves passing
-          // the usual 'ejs-compiled-loader' as the loader and passing
-          // an empty options object, however hmr did not work with that fix.
-          loader: '!!ejs-compiled-loader?{}!',
-        },
-      },
-      {
-        test: /\.js?/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            presets: ['@babel/preset-env'],
-          },
-        },
-      },
-      {
-        test: /\.inline\.css$/i,
-        include: path.resolve(__dirname, 'src/css'),
-        use: [
-          {
-            loader: 'style-loader',
-            options: {
-              insert: function insertAtTop(element) {
-                const parent = document.querySelector('head');
-                // eslint-disable-next-line no-underscore-dangle
-                const lastInsertedElement = window._lastElementInsertedByStyleLoader;
-
-                if (!lastInsertedElement) {
-                  parent.insertBefore(element, parent.firstChild);
-                } else if (lastInsertedElement.nextSibling) {
-                  parent.insertBefore(element, lastInsertedElement.nextSibling);
-                } else {
-                  parent.appendChild(element);
-                }
-
-                // eslint-disable-next-line no-underscore-dangle
-                window._lastElementInsertedByStyleLoader = element;
-              },
-            },
-          },
-          'css-loader',
-          'postcss-loader'],
-      },
-      {
-        test: /\.css$/i,
-        include: path.resolve(__dirname, 'src/css'),
-        exclude: /\.inline\.css$/i,
-        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
-      },
-      {
-        test: /.(png|svg|jpg|jpeg|gif)$/i,
-        include: path.resolve(__dirname, 'src'),
-        type: 'asset',
-      },
-    ],
-  },
-  optimization: {
-    minimizer: [
-      new CssnanoPlugin({
-        sourceMap: true,
-      }),
-      '...', // access defaults (defaults are overridden when specifying minimizer: array)
-    ],
-  },
-});