#30 integrate sass, bulma.css

* sass integrated just as stated in tutorial (README.md)
* bulma is loaded from node_modules

webapp/.gitignore

@@ -20,3 +20,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+# css files (we're using sass, css is always auto generated)
+src/**/*.css

webapp/package.json

@@ -3,14 +3,21 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "bulma": "^0.6.1",
+    "node-sass-chokidar": "0.0.3",
+    "npm-run-all": "^4.1.2",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-scripts": "1.0.17"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
+    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
+    "start-js": "react-scripts start",
+    "start": "npm-run-all -p watch-css start-js",
+    "build-js": "react-scripts build",
+    "build": "npm-run-all build-css build-js",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}

webapp/src/App.css

@@ -1,32 +1,9 @@
-.App {
-    text-align: center;
-}
-
 .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-    height: 80px;
-}
-
-.App-header {
-    background-color: #222;
-    height: 150px;
-    padding: 20px;
-    color: white;
-}
-
-.App-title {
-    font-size: 1.5em;
-}
-
-.App-intro {
-    font-size: large;
-}
+  animation: App-logo-spin infinite 20s linear;
+  height: 80px; }
 
 @keyframes App-logo-spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}
+  from {
+    transform: rotate(0deg); }
+  to {
+    transform: rotate(360deg); } }

webapp/src/App.js

@@ -6,13 +6,27 @@ class App extends Component {
     render() {
         return (
             <div className="App">
-                <header className="App-header">
-                    <img src={logo} className="App-logo" alt="logo"/>
-                    <h1 className="App-title">Welcome to React</h1>
+                <header className="hero is-primary is-bold">
+                    <div className="hero-body">
+                        <div className="container">
+                            <div className="columns">
+                                <div className="column">
+                                    <h1 className="title">my app</h1>
+                                    <h2 className="subtitle">built with react</h2>
+                                </div>
+                                <div className="column is-narrow">
+                                    <img src={logo} className="App-logo" alt="logo"/>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </header>
-                <p className="App-intro">
-                    To get started, edit <code>src/App.js</code> and save to reload.
-                </p>
+                <section className="section">
+                    <div className="container">
+                        <h1 className="title">Section</h1>
+                        To get started, edit <code>src/App.js</code> and save to reload.
+                    </div>
+                </section>
             </div>
         );
     }

webapp/src/App.scss

@@ -0,0 +1,13 @@
+.App-logo {
+    animation: App-logo-spin infinite 20s linear;
+    height: 80px;
+}
+
+@keyframes App-logo-spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}