Refactor to use CSS Modules (#1)

* Move config.json into package.json.

* Update dependencies.

* Add react-fastclick.

* Add react-router-scroll.

* Remove Radium dependency.

* Add Eslint rule to allow jsx in .js files.

* Disable react/require-extension rule.

* Add dependencies for CSS modules.

* Add CSS modules & PostCSS to Webpack config.

* Update dev_server to run on 0.0.0.0

* Commit isomorphic Webpack config.

* Add CSS bundle support for build_static.

* Refactor components to CSS Modules.

* Add normalize.css dependency.

* Update README.

* Bump version.

README.md

@@ -1,57 +1,43 @@
 # React Static Plate
 
-> Build static sites with React to host on [Amazon S3](https://aws.amazon.com/s3/), [Github Pages](https://pages.github.com/), [Surge](https://surge.sh/) et cetera<br>
-> (React.js, React Router, Radium, Babel 6, Webpack)
+> Build static sites with React & CSS Modules to host on [Amazon S3](https://aws.amazon.com/s3/), [Github Pages](https://pages.github.com/), [Surge](https://surge.sh/) etc.
+> *React | React Router | Babel 6 | CSS Modules | PostCSS | Webpack*
 
 ### Features
 
-&nbsp; &nbsp; ✓ ES6+.<br>
-&nbsp; &nbsp; ✓ Hot Reloading.<br>
-&nbsp; &nbsp; ✓ ESLint rules based on Airbnb's Javascript Styleguide.<br>
-&nbsp; &nbsp; ✓ Every route is completely rendered into a `.html` page with `renderToString`.<br>
-&nbsp; &nbsp; ✓ Deferred script loading, so the browser can render the html without waiting for the js bundle first.<br>
-&nbsp; &nbsp; ✓ Hash is added to every asset's filename, so you can cache all assets forever.<br>
-&nbsp; &nbsp; ✓ Title, Meta and other SEO tags with [react-helmet](https://github.com/nfl/react-helmet).<br>
-&nbsp; &nbsp; ✓ SEO friendly, no JavaScript required to view a page.<br>
-&nbsp; &nbsp; ✓ Generates sitemap.xml <br>
+- ES6+.
+- Hot Reloading.
+- ESLint rules based on Airbnb's Javascript Styleguide.
+- Every route is completely rendered into a `.html` page with `renderToString`.
+- Deferred script loading, so the browser can render the html without waiting for the js bundle first.
+- Hash is added to every asset's filename, so you can cache all assets forever.
+- Title, Meta and other SEO tags with [react-helmet](https://github.com/nfl/react-helmet).
+- SEO friendly, no JavaScript required to view a page.
+- Generates sitemap.xml
 
 ### Getting Started
 
-Clone the repo, install Node modules and run the development server:
+Fork the repo, install the node modules and run the dev server:
 
 ```
-$ git clone -o react-static-plate -b master --single-branch \
-	https://github.com/webyak/react-static-plate.git my-site
-$ cd my-site
 $ npm install
 $ npm start
 ```
 
-Then open [http://localhost:3000](http://localhost:3000) and have fun ;)
+Open [http://localhost:3000](http://localhost:3000) & have fun. 🐒
 
 ### Deploy
 
-Set your `host` in `config.json` and generate all the static files with `npm run build`. Then upload the contents of the `build/` folder to your hosting solution of choice. Finish.
+Set your `host` in `config.json` and generate all the static files with `npm run build`. Then upload the contents of the `build/` folder to your hosting solution of choice. Finish!
 
-You can also see the production site on your local machine using `http-server`:
+You can also check out the production build on your local machine using `http-server`:
 
 ```
 $ npm install -g http-server
 $ cd build
 $ http-server
 ```
 
-### Update
-
-You can fetch and merge recent changes from this repo into your own project:
-
-```
-$ git checkout master
-$ git fetch react-static-plate
-$ git merge react-static-plate/master
-$ npm install
-```
-
 ### FAQ
 
 **My site is not working properly on Amazon S3**:<br>

client/components/hello/index.js

@@ -0,0 +1,15 @@
+// ==================================================
+// Hello
+// ==================================================
+
+import React from 'react';
+import { wrap, heading } from './style.css';
+
+const Hello = () => (
+  <div className={wrap}>
+    <h1 className={heading}>Hello React</h1>
+    <div>🙈</div>
+  </div>
+);
+
+export default Hello;

client/components/hello/style.css

@@ -0,0 +1,13 @@
+.wrap {
+  padding-top: rem(150);
+  text-align: center;
+}
+
+.heading {
+  font-size: rem(45);
+  line-height: 2;
+  cursor: default;
+}
+.heading:hover {
+  font-weight: bold;
+}

client/components/layout/index.js

@@ -0,0 +1,28 @@
+// ==================================================
+// Layout
+// ==================================================
+
+import React from 'react';
+import Helmet from 'react-helmet';
+import './style.css';
+
+const Layout = ({ children }) => (
+  <div>
+    <Helmet
+      title="My site"
+      meta={[
+        { name: 'description', content: 'A static site.' },
+      ]}
+      link={[
+        { rel: 'shortcut icon', href: require('../../assets/favicon.ico') },
+      ]}
+    />
+    {children}
+  </div>
+);
+
+Layout.propTypes = {
+  children: React.PropTypes.element,
+};
+
+export default Layout;

client/components/layout/style.css

@@ -0,0 +1,63 @@
+@import 'normalize.css';
+@import '../../styling/colors.css';
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
+body {
+  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+  font-weight: 400;
+  line-height: 1.4;
+  color: $darkGray;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  box-sizing: border-box;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+a:hover {
+  color: inherit;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  padding: 0;
+  margin: 0;
+  font-weight: 400;
+  line-height: 1.2;
+}
+
+input,
+textarea {
+  display: block;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  outline: none;
+}
+input:-webkit-autofill: {
+  -webkit-box-shadow: 0 0 0 1000px #fff inset;
+}
+textarea {
+  resize: none;
+}
+
+ul,
+p {
+  padding: 0;
+  margin: 0;
+}

client/components/not_found.js

@@ -3,10 +3,9 @@
 // ==================================================
 
 import React from 'react';
-import Radium from 'radium';
 
 const NotFound = () => (
   <div>404</div>
 );
 
-export default Radium(NotFound);
+export default NotFound;

client/components/root.js

@@ -5,12 +5,17 @@
 // ==================================================
 
 import React from 'react';
-import { Router, browserHistory } from 'react-router';
+import { Router, browserHistory, applyRouterMiddleware } from 'react-router';
+import { useScroll } from 'react-router-scroll';
 
 import routes from '../routes.js';
 
 const Root = () => (
-  <Router routes={routes} history={browserHistory} />
+  <Router
+    routes={routes}
+    history={browserHistory}
+    render={applyRouterMiddleware(useScroll())}
+  />
 );
 
 export default Root;

client/index.js

@@ -1,4 +1,5 @@
 /* eslint-disable global-require */
+import 'react-fastclick';
 import React from 'react';
 import ReactDOM from 'react-dom';
 

client/routes.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Route, IndexRoute } from 'react-router';
 
-import Layout from './components/layout.js';
-import Hello from './components/hello.js';
+import Layout from './components/layout/';
+import Hello from './components/hello/';
 import NotFound from './components/not_found.js';
 
 const routes = (

client/styling/colors.css

@@ -0,0 +1 @@
+$darkGray: #323233;