UI structure (basic cards + css modules setup)

.gitignore

@@ -1,3 +1,4 @@
 dist/
 node_modules/
 npm-debug.log
+.DS_Store

package.json

@@ -27,6 +27,7 @@
     "babel-preset-react": "^6.5.0",
     "babel-register": "^6.5.2",
     "babel-runtime": "^6.5.0",
+    "css-loader": "^0.23.1",
     "eslint": "^1.10.3",
     "eslint-loader": "^1.2.1",
     "eslint-plugin-react": "^5.1.1",
@@ -39,6 +40,8 @@
     "mocha": "^2.4.5",
     "moment": "^2.11.2",
     "normalizr": "^2.0.0",
+    "postcss-cssnext": "^2.7.0",
+    "postcss-loader": "^0.9.1",
     "react": "^15.1.0",
     "react-dom": "^15.1.0",
     "react-immutable-proptypes": "^1.6.0",

src/components/UI/card/Card.css

@@ -0,0 +1,23 @@
+.card {
+  composes: base from "../theme.css";
+  composes: container from "../theme.css";
+  composes: rounded from "../theme.css";
+  composes: depth from "../theme.css";
+  overflow: hidden;
+}
+
+.card > *:not(iframe, video, img, header, footer) {
+  margin: 0 10px;
+}
+
+.card > *:not(iframe, video, img, header, footer):first-child {
+  margin-top: 10px;
+}
+
+.card > *:not(iframe, video, img, header, footer):last-child {
+  margin-bottom: 10px;
+}
+
+.card > iframe, .card > video, .card > img {
+  max-width: 100%;
+}

src/components/UI/card/Card.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import styles from './Card.css'
+
+
+export default function Card({style, children}) {
+  return <div className={styles.card} style={style}>{children}</div>
+}

src/components/UI/index.js

@@ -0,0 +1 @@
+export { default as Card } from './card/Card'

src/components/UI/theme.css

@@ -0,0 +1,26 @@
+:root {
+  --defaultColor: #333;
+  --backgroundColor: #fff;
+  --shadowColor: rgba(0, 0, 0, 0.25);
+  --successColor: #1c7;
+  --warningColor: #fa0;
+  --errorColor: #f52;
+}
+
+.base {
+  box-sizing: border-box;
+}
+
+.container {
+  margin: 10px;
+  color: var(--defaultColor);
+  background-color: var(--backgroundColor);
+}
+
+.rounded {
+  border-radius: 6px;
+}
+
+.depth {
+  box-shadow: 0px 1px 2px 0px var(--shadowColor);
+}

src/index.css

@@ -0,0 +1,13 @@
+html {
+  box-sizing: border-box;
+}
+
+html, body, #appRoot, #appRoot > * {
+  margin: 0;
+  height: 100%;
+}
+
+h1, h2, h3, h4, h5, h6, p, blockquote, figure, dl, ol, ul {
+  margin: 0;
+  padding: 0;
+}

src/index.js

@@ -4,12 +4,14 @@ import { Provider } from 'react-redux';
 import configureStore from './store/configureStore';
 import Routes from './routes/routes';
 import 'file?name=index.html!../example/index.html';
+import styles from './index.css';
 
 const store = configureStore();
 
 window.store = store;
 
 const el = document.createElement('div');
+el.id = 'appRoot';
 document.body.appendChild(el);
 
 render((

webpack.config.js

@@ -10,6 +10,10 @@ module.exports = {
         loader: 'file?name=/[hash].[ext]'
       },
       { test: /\.json$/, loader: 'json-loader' },
+      {
+        test: /\.css$/,
+        loader: 'style!css?modules!postcss'
+      },
       {
         loader: 'babel',
         test: /\.js?$/,
@@ -23,6 +27,10 @@ module.exports = {
     ]
   },
 
+  postcss: [
+    require('postcss-cssnext')
+  ],
+
   plugins: [
     new webpack.ProvidePlugin({
       'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'