v0.0.1

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc

@@ -0,0 +1,10 @@
+{
+  "parser": "babel-eslint",
+  "rules": {
+    "comma-dangle": [1, "never"], // disallow trailing commas
+    "no-trailing-spaces": 1, // disallow trailing whitespace at the end of lines
+    "no-unused-vars": 1, // disallow declaration of variables that are not used in the code
+    "no-var": 1, // require let or const instead of var
+    "strict": 0 // disable strict mode
+  }
+}

package.json

@@ -0,0 +1,60 @@
+{
+  "name": "starbase",
+  "version": "0.0.1",
+  "author": "Brian Staruk <[email protected]>",
+  "contributors": [
+    {
+      "name": "Brian Staruk",
+      "email": "[email protected]",
+      "url": "https://brian.staruk.me"
+    }
+  ],
+  "description": "a webpack 2 boilerplate w/ babel (es6), eslint, postcss, cssnext & more",
+  "homepage": "https://github.com/bstaruk/starbase",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bstaruk/starbase.git"
+  },
+  "bugs": {
+    "url": "https://github.com/bstaruk/starbase/issues",
+    "email": "[email protected]"
+  },
+  "engines": {
+    "node": ">=6"
+  },
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack -p --config ./webpack/webpack.config.prod.js",
+    "watch": "webpack-dev-server --config ./webpack/webpack.config.dev.js"
+  },
+  "keywords": [],
+  "license": "MIT",
+  "devDependencies": {
+    "babel-core": "^6.24.0",
+    "babel-eslint": "^7.1.1",
+    "babel-loader": "^6.4.1",
+    "babel-preset-es2015": "^6.24.0",
+    "clean-webpack-plugin": "^0.1.16",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.27.3",
+    "css-mqpacker": "^5.0.1",
+    "cssnano": "^3.10.0",
+    "eslint": "^3.18.0",
+    "eslint-loader": "^1.6.3",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "file-loader": "^0.10.1",
+    "node-sass": "^4.5.0",
+    "postcss": "^5.2.16",
+    "postcss-cssnext": "^2.10.0",
+    "postcss-import": "^9.1.0",
+    "postcss-loader": "^1.3.3",
+    "postcss-remove-root": "^0.0.2",
+    "sass-loader": "^6.0.3",
+    "style-loader": "^0.14.1",
+    "url-loader": "^0.5.8",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.4.1",
+    "webpack-merge": "^4.1.0"
+  },
+  "dependencies": {}
+}

readme.md

@@ -0,0 +1,64 @@
+# npm-starbase
+Starbase was created to be an entry-level, white-label'able Webpack 2 boilerplate that utilizes some of the shiniest open source build tools including:
+
+* [NPM](https://github.com/nodejs/node)
+* [Yarn](https://github.com/yarnpkg)
+* [Webpack 2](https://github.com/webpack/webpack)
+* [Babel](https://github.com/babel/babel) (ES6)
+* [ESLint](https://github.com/eslint/eslint)
+* [PostCSS](https://github.com/postcss/postcss) w/ [cssnext](https://github.com/MoOx/postcss-cssnext)
+* ...and more!
+
+This project is intended to be small in scope so that it can be easily extended and customized, or even used as a learning tool for folks trying to become familiar with Webpack 2.
+
+## license
+Starbase is fully open source and you are free to do whatever you wish with it commercially or personally. You can give me credit in a [Konami code easter egg](http://konamicodesites.com/), or you can erase all signs of origin and tell your coworkers that you made it yourself. 'Sall good!
+
+## getting started
+After completing the steps below, you will be ready to begin using Starbase:
+
+1. Install [Node.js](https://nodejs.org)
+2. Install [Yarn](https://yarnpkg.com)
+3. Clone this repository into any directory
+4. Install dependencies by running `yarn` in the project root
+
+_Note: if you hate Yarn for some reason, you can skip Step 2 and use `npm install` instead  of `yarn` in Step 4._
+
+## building, watching & developing
+
+### local development
+Starbase uses `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.
+
+```
+cd /path/to/starbase
+npm run watch
+```
+
+### building for production
+Use `npm run build` in the project root to run a production build.
+
+Production builds compile & minify your assets into `/dist` for distribution and/or integration into whatever codebase you'll be using these assets in.
+
+```
+cd /path/to/starbase
+npm run build
+```
+
+## features you may want to remove
+
+### build-time cleanup
+Starbase is setup to clear all contents of `/dist` (where compiled assets are piped into) during each `npm run build`. If you'd like to remove this part of the build process, perform the following steps:
+
+1. remove `CleanWebpackPlugin` from the plugins array in `webpack.config.prod.js`
+2. remove `CleanWebpackPlugin` as a requirement at the top of `webpack.config.prod.js`
+3. remove the `CleanWebpackPlugin` dependency from `package.json`
+
+Removing the cleanup process means that deleted assets in `/src` will not be deleted in `/dist` until you manually do so. I recommend keeping the cleanup process intact unless you have a specific reason not to, such as having un-managed assets in `/dist`.
+
+## features you may want to customize
+
+### js linting
+
+Starbase uses [ESLint](http://eslint.org/) for JS code linting. The config (`/.eslintrc`) included by default is very basic and does not contain many rules. I recommend modifying this to your liking. Check out [the official docs](http://eslint.org/docs/2.0.0/rules/) for more information.

src/app.js

@@ -0,0 +1,17 @@
+// base styles
+require('./styles/app.css');
+
+// css components
+require('./components/header/header.css');
+require('./components/footer/footer.css');
+
+// js components
+const Button = require('./components/button/Button');
+
+// initialize js components
+componentSetup();
+function componentSetup() {
+  if (document.getElementsByClassName('button')) {
+    new Button();
+  }
+}

src/components/button/Button.js

@@ -0,0 +1,19 @@
+require('./button.css');
+
+class Button {
+  constructor() {
+    this.init();
+  }
+
+  init() {
+    const buttons = document.getElementsByClassName('button');
+    for (let i = 0; i < buttons.length; i++) {
+      buttons[i].addEventListener('click', function (e) {
+        e.preventDefault();
+        console.log('button hit');
+      });
+    }
+  }
+}
+
+module.exports = Button;

src/components/button/button.css

@@ -0,0 +1,18 @@
+@import '../../styles/variables.css';
+
+.button {
+  background-color: #eee;
+  color: var(--body-font-color);
+  border: 0;
+  padding: 1em;
+  cursor: pointer;
+  outline: none;
+  border-radius: 3px;
+  transition: all 0.3s ease;
+  &:hover {
+    background-color: #ddd;
+  }
+  @media (--medium) {
+    padding: 1.2em;
+  }
+}

src/components/button/readme.md

@@ -0,0 +1,7 @@
+# button
+Example component that returns a console.log on click, and has a few lines of CSS to demonstrate some post-css and cssnext basics (autoprefixer, :root variables, etc).
+
+## usage
+```html
+<button type="button" class="button">hit me!</button>
+```

src/components/footer/footer.css

@@ -0,0 +1,6 @@
+@import '../../styles/variables.css';
+
+.footer {
+  font-size: .8em;
+  color: #888;
+}

src/components/footer/readme.md

@@ -0,0 +1,9 @@
+# footer
+Global footer component styles.
+
+## usage
+```html
+<footer class="footer">
+  <p>hi mom!</p>
+</footer>
+```

src/components/header/header.css

@@ -0,0 +1,5 @@
+@import '../../styles/variables.css';
+
+.header {
+  font-family: var(--font-serif);
+}

src/components/header/readme.md

@@ -0,0 +1,9 @@
+# header
+Global header component styles.
+
+## usage
+```html
+<header class="header">
+  <h1>npm-starbase</h1>
+</header>
+```

src/static/index.html

@@ -0,0 +1,18 @@
+<html>
+<head>
+  <title>npm-starbase</title>
+  <link rel="stylesheet" type="text/css" href="assets/app.bundle.css">
+</head>
+<body>
+<header class="header">
+  <h1>npm-starbase</h1>
+</header>
+<section>
+  <p><button type="button" class="button">hit me!</button></p>
+</section>
+<footer class="footer">
+  <p>created with &hearts; by <a href="https://brian.staruk.me" target="_blank">brian staruk</a></p>
+</footer>
+<script src="assets/app.bundle.js"></script>
+</body>
+</html>

src/styles/app.css

@@ -0,0 +1,19 @@
+@import './fonts.css';
+@import './variables.css';
+
+body {
+  font-family: var(--font-sans);
+  background-color: var(--body-bg-color);
+  color: var(--body-font-color);
+  padding: 1em;
+  margin: 0;
+}
+
+a {
+  color: var(--anchor-font-color);
+  transition: color 0.3s ease;
+}
+
+input, button {
+  font-family: var(--font-sans);
+}

src/styles/fonts.css

@@ -0,0 +1,23 @@
+@font-face {
+  font-family: 'Lora';
+  src: url('./fonts/lora-regular-webfont.woff2') format('woff2'),
+  url('./fonts/lora-regular-webfont.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./fonts/opensans-regular-webfont.woff2') format('woff2'),
+  url('./fonts/opensans-regular-webfont.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./fonts/opensans-semibold-webfont.woff2') format('woff2'),
+  url('./fonts/opensans-semibold-webfont.woff') format('woff');
+  font-weight: 600;
+  font-style: normal;
+}

src/styles/variables.css

@@ -0,0 +1,23 @@
+/**
+  NOTE: :root pseudo-classes are stripped from the compiled css, and this file is imported
+  to almost every component's css, so do not put anything in this file outside of :root
+ */
+
+:root {
+  /** colors */
+  --body-bg-color: #fefefe;
+  --body-font-color: #333;
+  --anchor-font-color: #2475c1;
+  --border-color: #666;
+  --border-margin: 2rem;
+
+  /** typography */
+  --font-sans: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --font-serif: 'Lora', Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', Georgia, serif;
+
+  /** breakpoints (borrowed from bootstrap 4) */
+  @custom-media --small only screen and (min-width: 34em); /* 544px*/
+  @custom-media --medium only screen and (min-width: 48em); /* 768px*/
+  @custom-media --large only screen and (min-width: 62em); /* 992px*/
+  @custom-media --extra-large only screen and (min-width: 75em); /* 1200px*/
+}