Merge pull request #10 from ravasthi/package-upgrades

Package upgrades
ravasthi · May 23, 2018 · a944056 · a944056
2 parents 682e9aa + ab01b5b
commit a944056
Show file tree

Hide file tree

Showing 10 changed files with 3,739 additions and 1,229 deletions.
diff --git a/NOTICE b/NOTICE
@@ -1,5 +1,4 @@
-55 Minutes CSS3 Foundation
-Copyright 2017 55 Minutes
+CSS3 Foundation
+Copyright 2010–2018 55 Minutes and Richa Avasthi
 
-This product includes software developed at 55 Minutes.
-(http://www.55minutes.com/).
+This project is [derived from software](https://github.com/55minutes/css3-foundation) originally developed at [55 Minutes](http://www.55minutes.com/).
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# 55 Minutes CSS3/HTML5 Foundation
+# CSS3/HTML5 Foundation
 
 This project is a CSS3/HTML5 template for crafting modern web applications. This latest iteration of the template is well-suited for building simple static websites, or serving as the foundation for web applications. For a React/Redux-based application, see my [create-react-app-based starter project](https://github.com/ravasthi/yaras).
 

diff --git a/index.html b/index.html
@@ -88,7 +88,6 @@ <h2>Resources</h2>
     </section> <!-- /#resources -->
 
     <footer>
-      &copy; 2017 55 Minutes.
     </footer>
   </div> <!-- /.page -->
 

diff --git a/login.html b/login.html
@@ -76,7 +76,6 @@ <h1>You know the drill.</h1>
     </form>
 
     <footer>
-      &copy; 2017 55 Minutes.
     </footer>
   </div> <!-- /.page -->
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "css3-foundation",
-  "version": "6.1.0",
+  "version": "7.0.0",
   "description": "A simple CSS3/HTML5 bootstrap for static sites and web apps",
   "main": "index.html",
   "repository": "[email protected]:ravasthi/css3-foundation.git",
@@ -11,33 +11,37 @@
     "node": ">=8.5.0"
   },
   "devDependencies": {
+    "autoprefixer": "^8.2.0",
     "browser-sync": "^2.18.13",
-    "browser-sync-webpack-plugin": "^1.2.0",
+    "browser-sync-webpack-plugin": "^2.2.2",
     "clean-webpack-plugin": "^0.1.16",
     "css-loader": "^0.28.7",
-    "extract-text-webpack-plugin": "^3.0.0",
-    "file-loader": "1.1.5",
+    "file-loader": "^1.1.11",
+    "mini-css-extract-plugin": "^0.4.0",
     "node-sass": "^4.5.3",
     "npm-run-all": "^4.1.1",
     "postcss-loader": "^2.0.6",
-    "reset-css": "^2.2.1",
-    "sass-loader": "^6.0.6",
-    "style-loader": "0.19.0",
-    "stylelint": "^8.1.1",
+    "reset-css": "^3.0.0",
+    "rimraf": "^2.6.2",
+    "sass-loader": "^7.0.1",
+    "style-loader": "^0.21.0",
+    "stylelint": "^9.1.3",
     "stylelint-config-standard": "^18.0.0",
-    "stylelint-order": "0.7.0",
+    "stylelint-order": "^0.8.1",
     "susy": "^3.0.1",
-    "url-loader": "0.6.2",
-    "webpack": "^3.6.0"
+    "url-loader": "^1.0.1",
+    "webpack": "^4.2.0",
+    "webpack-cli": "^2.0.13"
   },
   "dependencies": {
-    "font-awesome": "^4.7.0",
+    "@fortawesome/fontawesome-free-webfonts": "^1.0.5",
     "jquery": "^3.2.1"
   },
   "scripts": {
+    "clean-extra": "rimraf distribution/scripts/ie.js distribution/scripts/print.js distribution/scripts/styles.js",
     "lint:scss": "stylelint 'source/**/*.scss' --syntax scss --config stylelint.config.js",
-    "compile": "webpack",
-    "build": "run-s lint:scss compile",
-    "start": "webpack --watch"
+    "compile": "webpack --mode production",
+    "build": "run-s lint:scss compile clean-extra",
+    "start": "webpack --mode development --watch"
   }
 }
diff --git a/source/styles/_style-guide.scss b/source/styles/_style-guide.scss
@@ -175,7 +175,7 @@
 }
 
 @media (min-width: $screen-xl-min) {
-  #style-guide .page {
+  #style-guide > .page {
     margin-right: auto;
     margin-left: auto;
     max-width: $page-content-width;

diff --git a/source/styles/application.scss b/source/styles/application.scss
@@ -18,9 +18,10 @@
 @import 'susy/sass/susy';
 
 // ----- Icon fonts
-$fa-font-path: '~font-awesome/fonts';
+$fa-font-path: '~@fortawesome/fontawesome-free-webfonts/webfonts';
 
-@import 'font-awesome/scss/font-awesome';
+@import '@fortawesome/fontawesome-free-webfonts/scss/fontawesome';
+@import '@fortawesome/fontawesome-free-webfonts/scss/fa-solid';
 
 // Basics
 @import 'basics/colors';

diff --git a/source/styles/shared/_alerts.scss b/source/styles/shared/_alerts.scss
@@ -18,6 +18,11 @@
     }
 
     .icon {
+      @include fa-icon;
+
+      @extend .fas;
+      @extend .fa-fw;
+
       padding-top: $vertical-nudge;
       width: 2 * $horizontal-spacing;
 
@@ -32,7 +37,6 @@
 
         margin-right: 0.5 * $horizontal-spacing;
         margin-left: 0.5 * $horizontal-spacing;
-        width: $horizontal-spacing;
       }
     }
 
@@ -44,14 +48,12 @@
       border-color: $success-feedback;
 
       .icon {
-        background-color: $success-feedback-bg;
-
         @extend .fa-check;
 
-        &::before {
-          @include fa-icon();
+        background-color: $success-feedback-bg;
 
-          top: 1px;
+        &::before {
+          top: 2px;
 
           color: $success-feedback;
 
@@ -69,9 +71,7 @@
         background-color: $warning-feedback-bg;
 
         &::before {
-          @include fa-icon();
-
-          top: 2px;
+          top: 3px;
 
           color: $warning-feedback;
 
@@ -89,8 +89,6 @@
         background-color: $error-feedback-bg;
 
         &::before {
-          @include fa-icon();
-
           top: 2px;
 
           color: $error-feedback;
@@ -109,8 +107,6 @@
         background-color: $info-feedback-bg;
 
         &::before {
-          @include fa-icon();
-
           top: 3px;
 
           color: $info-feedback;

diff --git a/webpack.config.js b/webpack.config.js
@@ -1,7 +1,7 @@
 const path = require('path');
 const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = {
     entry: {
@@ -22,30 +22,31 @@ module.exports = {
             {
                 test: /\.scss$/,
                 // include: /node_modules/,
-                use: ExtractTextPlugin.extract({
-                    fallback: 'style-loader',
-                    use: [
-                        {
-                            loader: 'css-loader',
-                            options: {
-                                sourceMap: true
-                            }
-                        },
-                        {
-                            loader: 'postcss-loader',
-                            options: {
-                                sourceMap: true
-                            }
-                        },
-                        {
-                            loader: 'sass-loader',
-                            options: {
-                                includePaths: [ 'node_modules' ],
-                                sourceMap: true
-                            }
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            sourceMap: true
                         }
-                    ]
-                })
+                    },
+                    {
+                        loader: 'postcss-loader',
+                        options: {
+                            plugins: () => [
+                                require('autoprefixer')
+                            ],
+                            sourceMap: true
+                        }
+                    },
+                    {
+                        loader: 'sass-loader',
+                        options: {
+                            includePaths: [ 'node_modules' ],
+                            sourceMap: true
+                        }
+                    }
+                ],
             },
             {
                 // Capture eot, svg, ttf, woff, and woff2
@@ -76,9 +77,9 @@ module.exports = {
             'distribution/styles/*.*',
             'distribution/fonts/*.*'
         ]),
-        new ExtractTextPlugin({
-            filename: 'styles/[name].css',
-            allChunks: true,
+        new MiniCssExtractPlugin({
+            filename: "styles/[name].css",
+            chunkFilename: "styles/[id].css",
         }),
         new BrowserSyncPlugin({
             files: [