Bye bye Foundation & Browserify, hello Webpack & PostCSS

README.md

@@ -9,12 +9,12 @@ Mo-static is a static project template with batteries included.
 ## Features
 
 * [editorconfig](http://editorconfig.org/)
-* [nconf](https://github.com/indexzero/nconf)
+* [convict](https://github.com/mozilla/node-convict)
 * [Gulp](http://gulpjs.com/)
-* [Browserify](http://browserify.org/) (w/[babelify](https://github.com/babel/babelify), [envify](https://github.com/zertosh/loose-envify), and [uglifyify](https://github.com/hughsk/uglifyify))
-* [ESLint](http://eslint.org/) (w/[Airbnb config](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb#eslint-config-airbnbbase))
-* [SASS](https://github.com/dlmanning/gulp-sass) (w/[Autoprefixer](https://autoprefixer.github.io/))
-* [Stylelint](https://github.com/stylelint/stylelint) (w/[stylelint-config-standard](https://github.com/stylelint/stylelint-config-standard) and [stylelint-selector-bem-pattern](https://github.com/davidtheclark/stylelint-selector-bem-pattern))
+* [Webpack](https://webpack.js.org/) (w/[babelify](https://github.com/babel/babelify)
+* [Standard](https://github.com/feross/standard)
+* [SuitCSS](https://suitcss.github.io) (w/[Autoprefixer](https://autoprefixer.github.io/))
+* [Stylelint](https://github.com/stylelint/stylelint) (w/[stylelint-config-suitcss](https://github.com/suitcss/stylelint-config-suitcss)
 * [Nunjucks](https://mozilla.github.io/nunjucks/)
 * [Browsersync](http://www.browsersync.io/)
 * [UglifyJS](https://github.com/mishoo/UglifyJS2/)

cookiecutter.json

@@ -3,6 +3,5 @@
   "repo_name": "{{ cookiecutter.project_name|lower|replace(' ', '-') }}",
   "author_name": "ISL",
   "email": "dev@isl.co",
-  "description": "",
-  "use_foundation_sites": "y"
+  "description": ""
 }

{{cookiecutter.repo_name}}/.babelrc

@@ -1,6 +1,3 @@
 {
-  "presets": ["es2015"],
-  "plugins": ["syntax-trailing-function-commas"]{% if cookiecutter.use_foundation_sites == 'y' -%},
-  "ignore": "jquery"
-{%- endif %}
+  "presets": ["es2015"]
 }

{{cookiecutter.repo_name}}/.nvmrc

@@ -1 +1 @@
-6
+6.10

{{cookiecutter.repo_name}}/README.md

@@ -5,14 +5,14 @@
 
 ## Requirements:
 
-- Node 6.3.x
+- Node 6.10.x
 - nvm
 
 ## Installation
 
 ```
 $ nvm install
-$ npm install
+$ yarn
 ```
 
 ## Quick Start
@@ -23,14 +23,13 @@ $ npm run dev
 ```
 
 ## Usage
-
-First, install your dependencies:
+First, install your dependencies, there is a `yarn.lock` file, make sure you have yarn installed globally:
 
 ```
-npm install
+yarn
 ```
 
-To start a Browsersync server and watch files for development:
+To start a hot reload dev server and watch files for development:
 
 ```
 npm run dev
@@ -48,82 +47,53 @@ You can also optimize PNG and JPEG images using [tinify](https://www.npmjs.com/p
 npm run tinify
 ```
 
-## Configuration
-
-[nconf](https://github.com/indexzero/nconf) is used to handle configuration which lives in `config.js`.
+## SUIT CSS
+mo-static relies on [SUIT CSS](https://suitcss.github.io/) to package it's css but it does more than just that. Suit comes with a bunch of CSS packages such as a grid and buttons. It also ships with a whole bunch of utilities for text positioning, visibility and positioning. All of these components and utils are included by default since we import suit completely in `app.css`. Some useful docs of utilities and components include:
+- [Grid component](https://github.com/suitcss/components-grid/)
+- [Button component](https://github.com/suitcss/components-button/)
+- [Text utilities (alignment, truncation, line breaks) ](https://github.com/suitcss/utils-text)
+- [Display utilities (block, inline, hidden)](https://github.com/suitcss/utils-display)
+- [Position utilities (relative, absolute, full screen](https://github.com/suitcss/utils-position)
 
-All configuration variables should be defined in the `nconf.defaults` and it should be indicated if they are required.
+A list with all utilities can be found [here](https://github.com/suitcss/utils) and a list with all components can be found [here](https://github.com/suitcss/components)
 
-The configuration is passed to [envyify](https://github.com/zertosh/loose-envify) for transforming with browserify. This
-means you can use `process.env.FOO` in your browserified JavaScript files and the appropriate environment variable
-will be substituted during the build process to be shipped in the browser.
-
-__🔐 TIP:__ Don't leak secret keys, neither by commmitting them nor by passing them to browserify. If the var you are
-using should be kept secret, you should not add it to `config.js`.
-
-
-__⏱ TIP:__ If the config var is an amount of time, specify the units in the var name:
+## Configuration
+[convict](https://github.com/mozilla/node-convict) is used to handle configuration which lives in `config.js`.
 
-```
-nconf.defaults({
-  TIMEOUT_MS: 2000,
-  EXPIRATION_S: 3
-})
+The convict instance just holds a javascript object. In there you can define all variables you like. If they have an `env` key the default value will be overwritten if the value is present in the environment variables. If you want to be even more specific with values only being present in some environments you can uncomment these lines and create the appropriate files:
+```javascript
+// var env = config.get('env');
+// config.loadFile('./config/' + env + '.json');
 ```
 
-{% if cookiecutter.use_foundation_sites == 'y' -%}
-## Foundation
+`gulp-nunjucks` automatically passes all this data when it compiles your HTML. This means you can just output `{% raw %}{{ secretMessage }}{% endraw %}` within your HTML and the compiler will replace it with whatever value you have in convict.
 
-[Foundation Sites](http://foundation.zurb.com/sites.html) 6.2.0 is included with a small set of components enabled by
-default. There is a list of everything you can add at [Foundation's Kitchen Sink](http://foundation.zurb.com/sites/docs/kitchen-sink.html).
-To add more, uncomment the appropriate includes from the `app.scss` file along
-with the appropriate settings section for the component in the `_.settings.scss`
-file. This is described in detail at [Foundation's Sass docs](http://foundation.zurb.com/sites/docs/sass.html#adjusting-css-output).
+As for the JS you need to explicitly indicate which values you want passed to your code via webpack to prevent passing any sensitive data. You can do so by modifying the `webpack.config.js` file, we use the `DefinePlugin` to make our environment variables available in our code. This means you can use `process.env.SECRET_MESSAGE` in your Javascript files and the appropriate environment variable will be substituted during the build process to be shipped in the browser.
 
-[Browserify-shim](https://github.com/thlorenz/browserify-shim) is used to bundle individual Foundation JavaScript plugins. When adding
-new plugins, you will need to update the shim configuration in `package.json` with the [appropriate Foundation files](http://foundation.zurb.com/sites/docs/javascript.html#file-structure).
+__⚠️ WARNING__: Due to how Heroku pipelines work, the environment variables are piped into your code during build time. This means that when you promote an app from staging to production within a pipeline that the environment variables from staging will also make it to prdouction, since Heroku doesn't build again on production.
 
-Foundation's documentation can be found at [foundation.zurb.com](http://foundation.zurb.com/sites/docs/).
-To get started with what's included by default, read these docs:
-
-* [Global styles](http://foundation.zurb.com/sites/docs/global.html)
-* [Flex Grid](http://foundation.zurb.com/sites/docs/flex-grid.html) and [Media Queries](http://foundation.zurb.com/sites/docs/media-queries.html)
-* [Typography](http://foundation.zurb.com/sites/docs/typography-base.html) and [Helper Classes](http://foundation.zurb.com/sites/docs/typography-helpers.html)
-* [Forms](http://foundation.zurb.com/sites/docs/forms.html) and [Buttons](http://foundation.zurb.com/sites/docs/button.html)
-* [Button Group](http://foundation.zurb.com/sites/docs/button-group.html)
-* [Visibility Classes](http://foundation.zurb.com/sites/docs/visibility.html)
-* [Float Classes](http://foundation.zurb.com/sites/docs/float-classes.html)
-* [Flexbox Classes](http://foundation.zurb.com/sites/docs/flexbox.html)
-* [JavaScript](http://foundation.zurb.com/sites/docs/javascript.html)
-{%- endif %}
-
-## ESlint
-
-[ESlint](http://eslint.org/) is used for static analysis of JavaScript files. By default,
-the `.eslintrc` is configured to extend [Airbnb's base](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb#eslint-config-airbnbbase) configuration,
-with a few small modifications:
+__🔐 TIP:__ Don't leak secret keys, neither by commmitting them nor by passing them to your JS. If the var you are
+using should be kept secret, you should not add it to `config.js`.
 
-* 2 spaces for indentation.
-* No semicolons.
-* Only single quotes.
-* Unix linebreaks.
 
-If you use global variables that are already defined in the DOM, add them to the `globals` object
-in the `.eslintrc` to [register them](http://eslint.org/docs/user-guide/configuring#specifying-globals) with the linter.
+## Standard
+[Standard](https://github.com/feross/standard) is used for static analysis of JavaScript files. Standard, compared to ESlint allows/needs no configuration, if you really need to suppress a warning you can take a look [here](https://github.com/feross/standard#how-do-i-hide-a-certain-warning).
 
 ## Stylelint
-
-[Stylelint](https://github.com/stylelint/stylelint) is used for static analysis of SASS files. By default,
-the `.stylelintrc` is configured to extend [stylelint-config-standard](https://github.com/stylelint/stylelint-config-standard)
-and uses [stylelint-selector-bem-pattern](https://github.com/davidtheclark/stylelint-selector-bem-pattern),
-with a few small modifications:
+[Stylelint](https://github.com/stylelint/stylelint) is used for static analysis of css files. There is a suitcss config installed for Stylelint. All configuration lives in `stylelint.config.js` , it exports a object that can be passed to the suitcss preprocessor in `build.js` and be used when running `npm run lint`
 
 * 4 spaces for indentation.
+* Properties in alphabetical order
 * Only single quotes.
-* No vendor prefixes (autoprefixer is preferred).
+* No vendor prefixes (autoprefixer is enabled).
 * Max of 2 adjacent empty lines.
 * Required empty line between nested selectors, except first nested.
-* No [browser hacks](https://github.com/stylelint/stylelint/tree/master/src/rules/no-browser-hacks).
 * No [unsupported browser features](http://stylelint.io/user-guide/rules/no-unsupported-browser-features/).
 
 Generated by [mo static](https://github.com/istrategylabs/mo-static).
+
+## Deploying to Heroku
+In order to deploy your new `mo-static` app to Heroku you'll need these buildpacks, in this order:
+- Nodejs: `heroku buildpacks:set https://github.com/heroku/heroku-buildpack-nodejs -a <my-app>`
+- Heroku Static Buildpack `heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static.git -a <my-app>`
+

{{cookiecutter.repo_name}}/circle.yml

@@ -0,0 +1,11 @@
+machine:
+  node:
+    version: 6
+  environment:
+    NODE_ENV: production
+dependencies:
+  override:
+    - npm install --dev
+test:
+  override:
+    - npm run lint

{{cookiecutter.repo_name}}/config.js

@@ -1,8 +1,24 @@
-import nconf from 'nconf'
+var convict = require('convict');
 
-nconf.env().argv()
-
-nconf.defaults({
+var config = convict({
+  env: {
+    doc: 'The applicaton environment.',
+    format: ['production', 'development', 'test'],
+    default: 'development',
+    env: 'NODE_ENV'
+  },
+  secretMessage: {
+    doc: 'Some test secret message.',
+    format: String,
+    default: 'WHAZZAAAAHHHHH'
+  }
 })
 
-export default nconf
+// Load environment dependent configuration if desired
+// var env = config.get('env');
+// config.loadFile('./config/' + env + '.json');
+
+// Perform validation
+config.validate({allowed: 'strict'});
+
+module.exports = config;

{{cookiecutter.repo_name}}/gulp/build.js

@@ -1,83 +1,39 @@
 import gulp from 'gulp'
-import gutil from 'gulp-util'
 import del from 'del'
-import autoprefixer from 'autoprefixer'
-import postcss from 'gulp-postcss'
-import sass from 'gulp-sass'
 import sourcemaps from 'gulp-sourcemaps'
+import suitcss from 'gulp-suitcss'
 import nunjucks from 'gulp-nunjucks'
-import source from 'vinyl-source-stream'
-import buffer from 'vinyl-buffer'
-import browserify from 'browserify'
-import envify from 'loose-envify/custom'
 import plumber from 'gulp-plumber'
-import config from '../config'
+import webpackStream from 'webpack-stream'
+import webpack from 'webpack'
+import styleLintConfig from '../stylelint.config'
+import projectConfig from '../config'
 
 export const EXTRAS_GLOB = 'src/**/*.{txt,json,xml,ico,jpeg,jpg,png,gif,svg,ttf,otf,eot,woff,woff2,mp3,mp4,ogv,ogg,webm}'
 
-let bundler = browserify(['src/static/js/app.js'], { debug: true })
-  .transform('babelify')
-  .transform(envify(config.get()))
-  .transform('uglifyify')
-
-function bundle() {
-  return bundler.bundle()
-    .on('error', err => {
-      gutil.log(gutil.colors.red(err.message))
-      this.emit('end')
-    })
-    .pipe(source('bundle.js'))
-    .pipe(buffer())
-    .pipe(sourcemaps.init({ loadMaps: true }))
-    .pipe(sourcemaps.write())
-    .pipe(gulp.dest('public/static/js/'))
-}
-
-
 gulp.task('clean', () => del('public/'))
 
-gulp.task('browserify', () => bundle())
+gulp.task('remove-help', () => del('public/help'))
 
-gulp.task('watchify', () => {
-  const watchify = require('watchify')
-  bundler = watchify(bundler)
-  bundler.on('update', () => {
-    gutil.log('-> bundling...')
-    bundle()
-  })
-  return bundle
-})
+gulp.task('webpack', () =>
+  webpackStream(require('../webpack.config.js'), webpack)
+  .pipe(gulp.dest('public/static/js/')))
 
-gulp.task('sass', () =>
-  gulp.src('src/static/scss/**/*.scss')
-    .pipe(plumber())
+gulp.task('css', () =>
+  gulp.src('src/static/css/app.css')
     .pipe(sourcemaps.init())
-    .pipe(sass({% if cookiecutter.use_foundation_sites == 'y' -%}{
-      includePaths: ['node_modules/foundation-sites/scss'],
-    }{%- endif %}))
-    .pipe(postcss([autoprefixer({
-      // see https://github.com/ai/browserslist#queries
-      // and https://github.com/google/web-starter-kit/blob/128b2efdab595e0a4c8a563fcf1d1724ef98b8aa/gulpfile.babel.js#L73
-      browsers: [
-        'ie >= 10',
-        'ie_mob >= 10',
-        'ff >= 30',
-        'chrome >= 34',
-        'safari >= 7',
-        'opera >= 23',
-        'ios >= 7',
-        'android >= 4.4',
-        'bb >= 10'
-      ]
-    })]))
-    .pipe(sourcemaps.write())
-    .pipe(plumber.stop())
-    .pipe(gulp.dest('public/static/css/')))
+    .pipe(suitcss({
+      stylelint: styleLintConfig,
+      use: [ 'postcss-nested' ]
+    }))
+    .pipe(sourcemaps.write('.'))
+    .pipe(gulp.dest('public/static/css/'))
+)
 
 gulp.task('nunjucks', () =>
   gulp.src(['src/templates/**/*.html', '!**/_*'])
     .pipe(plumber())
-    .pipe(nunjucks.compile(config.get(), {
+    .pipe(nunjucks.compile(projectConfig.getProperties(), {
       throwOnUndefined: true,
     }))
     .pipe(plumber.stop())

{{cookiecutter.repo_name}}/gulp/production.js

@@ -49,6 +49,7 @@ gulp.task('critical', () =>
         height: 640,
       }],
     }))
+    .on('error', (err) => { console.log(err.message) })
     .pipe(gulp.dest('public/')))
 
 gulp.task('minify:html', () =>