2.0.0 (#53)

* begin to eliminate unnecessary boilerplate html/css (bloat)

* index html tweaks (refactoring dl to sections)

* removing postcss-responsive-type (unnecessary plugin)

* css cleanup (mostly font-size related)

* simplify header layout via flexbox

* more font-size css cleanup

* readme updates

* readme updates

* dependency updates

* remove old ?v tags from tests, move svgs to images/

* remove polling from webpack-dev-server (causes issues for some mac peeps)

* fix broken source maps

* rename watch to dev (woah), reduce node v strictness

* rename watch to dev in template

* re-order webpack config entries

* major version bump!

* comment-out fetch polyfills

* remove travis ci (totally unnecessary)

* readme updates

.stylelintrc

@@ -8,28 +8,6 @@
           "extend"
         ]
       }
-    ],
-    "property-no-unknown": [
-      true,
-      {
-        "ignoreProperties": [
-          "font-range",
-          "min-font-size",
-          "max-font-size",
-          "lower-font-range",
-          "upper-font-range",
-          "line-height-range",
-          "min-line-height",
-          "max-line-height",
-          "lower-line-height-range",
-          "upper-line-height-range",
-          "letter-spacing-range",
-          "min-letter-spacing",
-          "max-letter-spacing",
-          "lower-letter-spacing-range",
-          "upper-letter-spacing-range"
-        ]
-      }
     ]
   }
 }

README.md

@@ -1,7 +1,6 @@
 # starbase
 
 [![npm version](https://badge.fury.io/js/starbase.svg)](https://badge.fury.io/js/starbase)
-[![build status](https://travis-ci.org/bstaruk/starbase.svg?branch=master)](https://travis-ci.org/bstaruk/starbase)
 [![dependencies status](https://david-dm.org/bstaruk/starbase/status.svg)](https://david-dm.org/bstaruk/starbase)
 [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fbstaruk%2Fstarbase.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fbstaruk%2Fstarbase?ref=badge_shield)
 
@@ -13,7 +12,6 @@ starbase is an offline-first web app boilerplate that is built with webpack 4, P
 * [PostCSS](https://github.com/postcss/postcss) w/
   * [PostCSS Preset Env](https://github.com/csstools/postcss-preset-env)
   * [PostCSS Nested](https://github.com/postcss/postcss-nested)
-  * [PostCSS Responsive Type](https://github.com/seaneking/postcss-responsive-type)
   * [postcss-extend](https://github.com/travco/postcss-extend)
   * [stylelint](https://github.com/stylelint/stylelint)
   * [cssnano](https://github.com/ben-eb/cssnano)
@@ -33,19 +31,19 @@ After completing the steps below, you will be ready to begin using starbase:
 1. Install [Node.js](https://nodejs.org) (latest LTS recommended)
 2. (Optional) Install [Yarn](https://yarnpkg.com)
 3. Clone starbase into your project root directory
-4. Install dependencies by running `yarn`  in your project root directory (or `npm install` if you skipped Step 2)
+4. Install dependencies by running `npm install` in your project root directory (or `yarn` if you performed Step 2)
 
 ## building, watching & developing
 
 ### local development
 
 starbase uses [webpack-dev-server](https://github.com/webpack/webpack-dev-server) to serve up your project at [http://localhost:8080](http://localhost:8080) for streamlined and convenient development.
 
-After running `npm run watch` in the project root, your `/src` code will be served at the url above and watched for changes. As you modify code in `/src`, the project will be recompiled and your browser will refresh to show the latest changes.
+After running `npm run dev` in the project root, your `/src` code will be served at the url above and watched for changes. As you modify code in `/src`, the project will be recompiled and your browser will refresh to show the latest changes.
 
 ```
 cd /path/to/starbase
-npm run watch
+npm run dev
 ```
 
 ### building for production
@@ -83,13 +81,13 @@ Because starbase was built to accommodate ES6 & CommonJS (and not jQuery) it is
 
 Fetch is supported in all modern browsers, but some old dogs still don't support it and that's what we need the [es6-promise](https://github.com/stefanpenner/es6-promise) & [whatwg-fetch](https://github.com/github/fetch) polyfills for.
 
+These polyfills come commented-out by default in `/src/app.js`, so they won't end up in your production code until you actually use fetch somewhere, at which time you should un-comment-out the polyfills.
+
 If you want to remove these for any reason, perform the following steps:
 
-1. run `yarn remove es6-promise whatwg-fetch` in the project root to remove the dependencies
+1. remove `es6-promise` & `whatwg-fetch` from `/package.json`
 2. remove the lines in `/src/app.js` that fall under the "fetch & promise polyfills" comment (it'll be obvious which ones)
 
-_Note: if you think you might use fetch in the future, comment-out the requires instead of deleting them. Commented-out code is not included in production builds._
-
 ## features you may want to customize
 
 ### javascript & css linting
@@ -104,7 +102,7 @@ starbase enforces the [Airbnb JavaScript Style Guide](https://github.com/airbnb/
 
 1. in `/.eslintrc`, remove the line that says `extends`
 2. in `/package.json`, remove the `eslint-config-airbnb` dependency
-3. run `yarn` (or `npm update`)
+3. run `npm updated` (or `yarn`)
 
 After completing the steps above, the only rules that eslint will enforce are the ones you define in the `rules` object in `/.eslintrc`.
 
@@ -116,7 +114,7 @@ Out of the box, starbase caches everything, because the project is less than 50k
 
 [Service workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers), by design, only function on secure (https) environments. There is no issue with running starbase on an http environment-- the service worker will simply not be utilized.
 
-You may see an info log entry in your console from `offline-plugin` while using the `watch` command, feel free to ignore this. `offline-plugin` is not utilized on the dev server because [it doesn't always play nice with `webpack-dev-server`](https://github.com/NekR/offline-plugin/issues/138). It is intentionally only utilized in production builds.
+You may see an info log entry in your console from `offline-plugin` while using the `dev` command, feel free to ignore this. `offline-plugin` is not utilized on the dev server because [it doesn't always play nice with `webpack-dev-server`](https://github.com/NekR/offline-plugin/issues/138). It is intentionally only utilized in production builds.
 
 #### to remove offline-plugin:
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "starbase",
-  "version": "1.5.0",
+  "version": "2.0.0",
   "author": "Brian Staruk <[email protected]>",
   "contributors": [
     {
@@ -20,50 +20,49 @@
     "email": "[email protected]"
   },
   "engines": {
-    "node": ">=8.9.3"
+    "node": ">=8.9"
   },
   "main": "index.js",
   "scripts": {
     "build": "webpack --config ./webpack/webpack.config.prod.js --mode production",
-    "watch": "webpack-dev-server --config ./webpack/webpack.config.dev.js --mode development"
+    "dev": "webpack-dev-server --config ./webpack/webpack.config.dev.js --mode development"
   },
   "keywords": [],
   "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.2.2",
-    "@babel/preset-env": "^7.2.3",
+    "@babel/preset-env": "^7.3.1",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.5",
-    "clean-webpack-plugin": "^1.0.0",
+    "clean-webpack-plugin": "^1.0.1",
     "css-loader": "^2.1.0",
     "css-mqpacker": "^7.0.0",
     "cssnano": "^4.1.8",
-    "eslint": "^5.12.0",
+    "eslint": "^5.13.0",
     "eslint-config-airbnb": "^17.1.0",
-    "eslint-loader": "^2.1.1",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.2",
-    "eslint-plugin-react": "^7.12.3",
+    "eslint-loader": "^2.1.2",
+    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-react": "^7.12.4",
     "file-loader": "^3.0.1",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "^0.5.0",
     "offline-plugin": "^5.0.6",
-    "postcss": "^7.0.7",
+    "postcss": "^7.0.14",
     "postcss-extend": "^1.0.5",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
     "postcss-nested": "^4.1.1",
     "postcss-preset-env": "^6.5.0",
     "postcss-remove-root": "0.0.2",
     "postcss-reporter": "^6.0.1",
-    "postcss-responsive-type": "^1.0.0",
     "style-loader": "^0.23.1",
-    "stylelint": "^9.9.0",
+    "stylelint": "^9.10.1",
     "stylelint-config-standard": "^18.2.0",
     "url-loader": "^1.1.2",
-    "webpack": "^4.28.3",
-    "webpack-cli": "^3.2.0",
+    "webpack": "^4.29.3",
+    "webpack-cli": "^3.2.3",
     "webpack-dev-server": "^3.1.14",
     "webpack-merge": "^4.2.1"
   },

src/README.md

@@ -1,5 +1,5 @@
-# Src
+# src
 
-This is your src folder, which is the top-level container for the different types of source code that comes together to create the application.
+This is your `src` folder, which is the top-level container for the different types of source code that comes together to create the application.
 
 If you'll be renaming or reorganizing the child folders of `/src` be sure to reflect those changes in your build (`/webpack`) and package (`/package.json`) files to avoid build failures.

src/app.js

@@ -1,29 +1,15 @@
 // offline-plugin
-import './app/lib/offline-plugin';
-
-// components js
-import Tabs from './components/tabs/Tabs';
+import './lib/offline-plugin';
 
 // remove .no-js from html tag
 document.querySelector('html').classList.remove('no-js');
 
-// fetch & promise polyfills
-require('es6-promise').polyfill();
-require('whatwg-fetch');
-
-// baseline app styles
-require('./app/fonts/fonts.css');
-require('./app/app.css');
-
-// components styles
-require.context('./components/', true, /\.css$/);
+// fetch & promise polyfills (comment-out if not needed)
+// require('es6-promise').polyfill();
+// require('whatwg-fetch');
 
-// component js
-const initializeComponents = () => {
-  const tabs = document.getElementsByClassName('tabs');
-  for (let i = 0; i < tabs.length; i++) {
-    new Tabs({ el: tabs[i] });
-  }
-};
+// ordered css imports
+require('./css/app.css');
 
-initializeComponents(); // let's get this show on the road
+// import all other css
+require.context('./css/', true, /\.css$/);