Merge pull request #13 from divio/release/2.0.1

Release/2.0.1

.stylelintrc.js

@@ -115,9 +115,9 @@ module.exports = {
         'selector-pseudo-element-case': 'lower',
         'selector-pseudo-element-colon-notation': 'single',
         'selector-pseudo-element-no-unknown': true,
-        'selector-no-type': true,
+        'selector-max-type': 0,
         'selector-no-vendor-prefix': true,
-        'selector-no-universal': true,
+        'selector-max-universal': 0,
         'selector-type-case': 'lower',
         'selector-type-no-unknown': true,
         'shorthand-property-no-redundant-values': true,

CHANGELOG.rst

@@ -2,6 +2,14 @@
 djangocms-boilerplate-webpack
 #############################
 
+2.0.1
+=====
+
+- Added an example of using web fonts
+- Removed leftover FontAwesome references
+- Fixed a problem with bundle splitting and IE11
+- Added minification to sass files by default
+
 
 2.0.0
 =====

boilerplate.json

@@ -1,7 +1,7 @@
 {
     "identifier": "bootstrap3",
     "package-name": "djangocms-boilerplate-webpack",
-    "version": "2.0.0",
+    "version": "2.0.1",
     "templates": [
         ["content.html", "Content"]
     ],

docs/general/whatsinside.rst

@@ -51,8 +51,7 @@ and the `JavaScript component <https://github.com/divio/djangocms-boilerplate-we
 
 The `Glyhpicon <http://getbootstrap.com/components/#glyphicons>`_ icon set has
 been `disabled <https://github.com/divio/djangocms-boilerplate-webpack/blob/master/private/sass/libs/_bootstrap.scss#L14>`_
-in favour of the `Font Awesome <http://fortawesome.github.io/Font-Awesome/>`_
-icon set.
+in favour of the custom icon set that can be built with ``gulp icons``.
 
 
 JavaScript

gulpfile.js

@@ -79,7 +79,7 @@ function task(id, extra) {
 // TASKS
 
 /**
- * WARNING: postcss-critical-split is considered experimental and may be buggy, so it's
+ * WARNING: postcss-critical-split is considered experimental and may be buggy, so it's disabled by default
  *
  * Usage:
  * - "gulp sass" (generates sass, splits the files, and injects the code)

package.json

@@ -33,7 +33,8 @@
     "minimist": "^1.2.0",
     "postcss-critical-split": "^2.5.0",
     "svg4everybody": "^2.1.8",
-    "webpack": "^3.0.0"
+    "webpack": "^3.0.0",
+    "webpack2-polyfill-plugin": "0.0.2"
   },
   "devDependencies": {}
 }

private/js/webpack.config.js

@@ -1,4 +1,5 @@
 const argv = require('minimist')(process.argv.slice(2));
+const WebpackPolyfillPlugin = require('webpack2-polyfill-plugin');
 const plugins = [];
 const webpack = require('webpack');
 const path = require('path');
@@ -8,8 +9,11 @@ const path = require('path');
 
 process.env.NODE_ENV = (argv.debug) ? 'development' : 'production';
 
-// Bundle splitting. Don't forget to {% addtoblock "js" %} afterwards
+plugins.push(
+    new WebpackPolyfillPlugin()
+);
 
+// Bundle splitting. Don't forget to {% addtoblock "js" %} afterwards
 plugins.push(
     new webpack.optimize.CommonsChunkPlugin({
         name: 'base',

private/sass/components/_all.scss

@@ -3,6 +3,7 @@
 // this folder contains required variables for colors, sizes, styles and more
 // add additional files for encapsulated settings
 
+@import "fonts";
 @import "browser";
 @import "icons";
 @import "buttons";

private/sass/components/_browser.scss

@@ -3,7 +3,7 @@
 // this addon adds modified styles to the outdated browser script found
 // on outdatedbrowser.com we specifically added changes to class names and
 // removed id references to be more compliant
-/* stylelint-disable selector-no-type, selector-no-universal */
+/* stylelint-disable selector-max-type, selector-max-universal */
 
 .browser-outdated {
     display: none;

private/sass/components/_fonts.scss

@@ -0,0 +1,39 @@
+// #############################################################################
+// FONTS
+
+// there are two options to choose from when integrating fonts:
+// "OPTION 1": importing fonts from an external resource
+// "OPTION 2": hosting the files yourself
+
+// OPTION 1
+// @import url("https://fonts.googleapis.com/css?family=Lobster");
+
+// OPTION 2
+// @font-face {
+//     font-family: "ClearSans";
+//     font-weight: 200;
+//     src: url("../fonts/clearsans/ClearSans-Light.eot?#iefix");
+//     src: url("../fonts/clearsans/ClearSans-Light.eot?#iefix") format("eot"),
+//          url("../fonts/clearsans/ClearSans-Light.woff") format("woff"),
+//          url("../fonts/clearsans/ClearSans-Light.ttf") format("truetype"),
+//          url("../fonts/clearsans/ClearSans-Light.svg#ClearSans-Light") format("svg");
+// }
+//
+// @font-face {
+//     font-family: "ClearSans";
+//     font-weight: 400;
+//     src: url("../fonts/clearsans/ClearSans-Regular.eot?#iefix");
+//     src: url("../fonts/clearsans/ClearSans-Regular.eot?#iefix") format("eot"),
+//          url("../fonts/clearsans/ClearSans-Regular.woff") format("woff"),
+//          url("../fonts/clearsans/ClearSans-Regular.ttf") format("truetype"),
+//          url("../fonts/clearsans/ClearSans-Regular.svg#ClearSans-Light") format("svg");
+// }
+// @font-face {
+//     font-family: "ClearSans";
+//     font-weight: 600;
+//     src: url("../fonts/clearsans/ClearSans-Medium.eot?#iefix");
+//     src: url("../fonts/clearsans/ClearSans-Medium.eot?#iefix") format("eot"),
+//          url("../fonts/clearsans/ClearSans-Medium.woff") format("woff"),
+//          url("../fonts/clearsans/ClearSans-Medium.ttf") format("truetype"),
+//          url("../fonts/clearsans/ClearSans-Medium.svg#ClearSans-Light") format("svg");
+// }

private/sass/components/_print.scss

@@ -2,7 +2,7 @@
 // PRINT
 // this file is intended for all print styles and rules
 // to ensure your website also works when printed
-/* stylelint-disable selector-no-type */
+/* stylelint-disable selector-max-type */
 
 @media print {
 

templates/content.html

@@ -86,7 +86,7 @@ <h1 class="sr-only" id="page-footer">{% trans "Sitemap" %}</h1>
         <div class="container">
             {% render_model_block request.current_page "changelist" %}
                 <ul class="list-inline">
-                    <li class="pull-right"><a href="#page-top" data-spy="scroll"><span class="fa fa-left fa-arrow-up"></span>{% trans "Back to top" %}</a></li>
+                    <li class="pull-right"><a href="#page-top" data-spy="scroll">&uarr; {% trans "Back to top" %}</a></li>
                     {% show_menu_below_id "footer" 0 0 100 100 %}
                 </ul>
             {% endrender_model_block %}

tools/tasks/sass/compile.js

@@ -3,6 +3,8 @@ const gulpif = require('gulp-if');
 const gutil = require('gulp-util');
 const postcss = require('gulp-postcss');
 const sass = require('gulp-sass');
+const cleanCSS = require('gulp-clean-css');
+const concat = require('gulp-concat-util');
 const sourcemaps = require('gulp-sourcemaps');
 // https://gist.github.com/chriseppstein/d7be56e21b216275bd86
 // Eyeglass is used to auto-discover bootstrap from npm.
@@ -44,6 +46,16 @@ module.exports = function (gulp, opts) {
                     }),
                 ])
             )
+            .pipe(gulpif(!opts.argv.debug, cleanCSS({
+                rebase: false,
+            })))
+            // this information is added on top of the generated .css file
+            .pipe(concat.header(
+                '/*\n    This file is generated.\n' +
+                '    Do not edit directly.\n' +
+                '    Edit original files in\n' +
+                '    /private/sass instead\n */ \n\n'
+            ))
             .pipe(gulpif(opts.argv.debug, sourcemaps.write()))
             .pipe(gulp.dest(opts.PROJECT_PATH.css));
     };