Add support for css modules; upgrade dependencies

Author: calvinl

.eslintrc

@@ -30,7 +30,6 @@
     "node": true
   },
   "globals": {
-    '__CORDOVA__': true,
     '__BASE_URL__': true,
     expect: true
   },

.gitignore

@@ -5,13 +5,3 @@ npm-debug.log*
 # ignore built static files
 dist/
 webpack-assets.json
-
-# cordova ignores
-cordova/www/*
-cordova/www/**.*
-!cordova/www/.gitkeep
-cordova/plugins/
-cordova/platforms/
-
-# cordova build and release configurations
-scripts/cordova/config/*.json

README.md

@@ -38,32 +38,48 @@ Direct your browser to `http://localhost:3000`.
 
 ## Directory Structure
 ```
-├── client                    # Client-side code.
-├── common                    # Shared code between client and server.
-│   ├── assets                # All fonts, images, stylsheets.
-│   │   ├── fonts
-│   │   ├── images
-│   │   └── stylesheets       # Follows the 7-1 pattern: http://sass-guidelin.es/#the-7-1-pattern
-│   │       ├── base
-│   │       ├── components
-│   │       ├── layout
-│   │       ├── pages
-│   │       ├── shame
-│   │       ├── utils
-│   │       └── vendors
-│   ├── components            # "Dumb" components directory
-│   ├── config                # Contains the redux store configuration. Add anything else you like.
-│   ├── containers            # "Smart" containers directory
-│   ├── layouts               # Layout files
-│   ├── middleware            # Custom redux middleware can be placed here.
-│   ├── reducers              # Redux reducers
-|   |   └── index.js          # Root reducer. Imports all other reducers.
-│   ├── routes                # Routes each have an index.js which exports a react-router Route.
-│   │   ├── example.js        # Individual routing file
-│   │   └── index.js          # Root route
-│   └── selectors             # Memoized selectors. See https://github.com/rackt/reselect
-├── server                    # Server-side code.
-└── webpack                   # Webpack configuration files.
+├── README.md
+├── client
+│   └── index.js
+├── common
+│   ├── css
+│   ├── fonts
+│   ├── images
+│   ├── js
+│   │   ├── actions
+│   │   ├── components            # "Dumb" components
+│   │   ├── containers            # Smart containers
+│   │   ├── lib                   # Misc. libraries like helpers, etc.
+│   │   ├── middleware            # Middleware for redux
+│   │   ├── reducers              # Redux reducers
+│   │   ├── routes                # Routes each have an index.js which exports a react-router Route.
+│   │   ├── selectors             # Selectors for getting state data
+│   │   └── store                 # Store configuration for production and dev.
+│   └── layouts                   # Layout files to be rendered by the server.
+├── nodemon.json
+├── package.json
+├── server
+│   ├── config.js
+│   ├── index.js
+│   └── server.js
+├── webpack
+│   ├── base.js
+│   ├── development.js
+│   ├── development.server.js
+│   ├── hmr.js
+│   ├── host.js
+│   ├── isomorphic.js
+│   └── production.js
+```
+
+## CSS Modules
+This project uses [CSS Modules](https://github.com/css-modules/css-modules).
+Class names should be in `camelCase`. Place the css file as a sibling to the
+component with the same name, for example:
+```
+├── components
+│   ├── Header.js
+│   ├── Header.scss
 ```
 
 ## Writing Tests
@@ -118,7 +134,3 @@ heroku config:set ASSET_HOST=/dist/
 # OR
 heroku config:set ASSET_HOST=https://s3.amazonaws.com/mybucket/myasssets/
 ```
-
-## Building Cordova Apps
-
-Please see [Building Cordova Apps](docs/cordova.md)

client/index.js

@@ -14,13 +14,6 @@ import routes from 'routes';
  */
 import '../common/images/favicon.png';
 
-/* Stylesheets
- * Main.scss should @import all the other stylesheets that you need. If you want
- * to use LESS or another preprocessor, you can include it here and update your
- * webpack configure to use the appropriate loader.
- */
-import '../common/css/main.scss';
-
 // The root element of your app
 const rootElement = document.getElementById('app');
 

common/css/vendors.scss

@@ -1,2 +1,2 @@
 // vendor styles
-@import 'vendors/bootstrap';
+@import 'vendors/include-media';

common/css/vendors/_bootstrap.scss

@@ -0,0 +1 @@
+@import "~include-media/dist/include-media";

common/css/vendors/_include-media.scss

@@ -1,11 +1,12 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router';
+import css from './Header.scss';
 
 export default class Header extends Component {
   render() {
     return (
       <header>
-        <ul>
+        <ul className={css.headerLinks}>
           <li><Link to="/">Home</Link></li>
           <li><Link to="/example">Example</Link></li>
           <li><Link to="/example/2">Example 2</Link></li>

common/js/components/Header.js

@@ -0,0 +1,4 @@
+
+.headerLinks {
+  color: red;
+}

common/js/components/Header.scss

@@ -10,6 +10,7 @@
 <body>
   <div id="app"><%= html %></div>
   <script>window.__INITIAL_STATE__ = <%= JSON.stringify(initialState) %>;</script>
-  <script src="<%= bundleJs %>"></script>
+  <script src="<%= vendorJs %>"></script>
+  <script src="<%= appJs %>"></script>
 </body>
 </html>