Playing with CSS tech

• CSS Grid Layout W3c implementation
• CSS Grid Layouts, 4 methods
• A completed Guide to Grid
• React Responsive Grid
• Lots of components with BEMIT and PostCSS here
• input color polyfill: https://github.com/jonstipe/color-polyfill
• CSS Variables are a bad idea: https://www.aaron-gustafson.com/notebook/css-variables-are-a-bad-idea/
• Shim vs Polyfill: http://www.2ality.com/2011/12/shim-vs-polyfill.html
• Shim, Fallbacks and Polyfills: https://ruthlesslyhelpful.net/2011/05/26/html5-shims-fallbacks-and-polyfills/

• React
• ES6 (with babel)
• PostCSS using BEM + ITCSS = BEMIT methodology.
  • PostCSS + BEMIT Starter.
  • See this sample
  • PostCSS sample
  • PostCSS parts. Grids
• Hot Module Replacement (React Hot Loader 3)
• Webpack
  • Webpack-dev-server
  • Webpack PostCSS configuration
  • Webpack configuration for HMR
  • Webpack production configuration
    • Split out css files (two threads, JS and CSS) using ExtractTextPlugin
    • UglifyJsPlugin with options
    • Use include in the loader instead of the exclude. More info
    • More perfomance tips: here
  • Webpack stats (bundle optimization helper)
    • Generate stats.json file with profiler. Use (this tool)[http://webpack.github.io/analyse/] to analyze it.
    • webpack visualizer

• Redux
• Testing. Integrate with Jest
• Linting. Integrate with eslint

• Node.js and NPM: Download and install. I have version 6.6.0 of Node and 3.10.6 of NPM on Windows PC
• Git: Download and install. I have version 2.7.4 installed on Windows PC

1. Get the url of your forked project.
   • Go to https://github.com/username/react-webpack-postCSS
2. Click on "Clone or download" and Copy to clipboard the url ending on .git.
3. Open your command line and go to your directoy
   You don't need to create a specific folder for the project, it will be created by git
4. Clone your forked repo on your machine:

$ git clone https://github.com/username/react-webpack-postCSS

Note: That will create a new folder called react-webpack-postCSS with all the files in.

$ cd react-webpack-postCSS
$ npm i

I use VS Code https://code.visualstudio.com Open the project using this command:

$ code .

$ npm run start

Please feel free to add your own improvement

MIT License Copyright (c) 2016 Jose Quinto Zamora