UI structure (basic cards + css modules setup)

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((