3.2.0: new sass mixins, es6 functionality, autoprefixer, linting

Summary

This marks a pretty big release for Foundation.

Some great new mixins have been added. One of which is the accessible-text() mixin that will return compliant text colors given a background color to ensure a quality reading experience for all users. Another mixin that was added as an aspect-ratio mixin that will take a width and height parameter and automatically create styles that will make elements' dimensions flexible when resized and maintain their aspect ratio (4:3, 16:9, etc.).

There was quite a large overhaul on JavaScript portion to aid in maintenance and modern best practices. Authors now have the ability to write in the latest flavors of JavaScript (es6+), which babel will transpile down to plain es5. Browserify then bundles the es5 together and polyfills the usage of require. This allows authors to divide up JavaScript functionality into smaller chunked files, which can be imported into a root file via import.

Coding standards have been improved for both JavaScript and Sass due to the latest @wordpress/eslint-plugin and grunt-sasslint packages. These tools offer ways to autofix code so that usage of tabs, punctuation, and syntax is consistently applied.

Concrete browser support is now added in package.json under the browserslist key. See https://github.com/browserslist/browserslist and the Foundation PR #210 for more information.

Among these new features, there were also a few bug fixes/updates applied in this release:

• _tools-cgb.scss was updated with new icons implementation introduced in version 3.1.0.
• Improved styling to Edit links in burf-theme.
• Several packages were updated to latest to reduce warnings of security vulnerabilities on NPM install.

Complete changelog is listed below.

Changelog

• Adds grunt-postcss and autoprefixer.
• Adds a helper aspect-ratio mixin.
• Adds a new function, accessible-text(), which returns WCAG 2.0-compliant
  text colors when given a background color and desired text color.
• Adds es6 functionality via a variety of npm packages and Gruntfile
  modifications:
  • grunt-browserify: Provides ability to use require for separating files into
    modules. Polyfills require for the browser.
  • babelify: Provides a transform for browserify so we can leverage
    import and export features that will transpile into something
    browserify can interpret for the browser.
  • @babel/core: Required babel library for babelify package.
  • @babel/preset-env: The recommended "smart" preset for configuring babel
    to take advantage of latest es6 features.
  • grunt-contrib-uglify: For minifying the resulting es5 code from
    browserify, and providing source maps.
  • browserify-shim: makes CommonJS incompatible files browserifyable (files
    that don’t support require from the CommonJS module syntax). This
    includes things like our version of jQuery, but can be extended for any
    library that cannot be included using latest es6 sytax style import
    statements. Shims are specified in package.json
  • eslint, @wordpress/eslint-plugin, eslint-plugin-import,
    eslint-plugin-jsx-a11y, eslint-plugin-react: For code climate and
    text editors to lint and autofix their code.
  • grunt-contrib-clean: Clears contents of directories for new compiled
    files to reside in, so that old irrelevant files don't stick around.
• Adds grunt-sass-lint for separate grunt sasslint task.
• Adds browserslist to package.json so front-end tooling packages like babel
  and autoprefixer can share the same configurations
  for browser support.
• Adds .eslint configuration file
• Adds theme.js in the js-dev directory. This acts as an entry point for all
  modules such as toggle.js to be imported into.
• Refactors Gruntfile.js and toggle.js to be written in es6
• Updates sassdoc to take advantage of latest js workflow changes.
• Adds browserify-shim to allow import of global version of jQuery that should
  already exist on the page.
• Fixes broken paths in imports of sass partials.
• Updates codeclimate to use eslint-5 and sass-lint instead of scss-lint which
  will eventually be deprecated or will not support latest sass features.
• Adds .sasslintrc for grunt sasslint command and code climate.
• Adds missing bs-html-injector package for the browserSync task.
• Updates dependencies to resolve warnings about security vulnerabilities.
• Updates _tools-cgb.scss with new icons implementation introduced in version
  3.1.0.
• Adds improved styling to Edit links throughout burf-theme.