add first 3 examples and tips

Author: Peter Hozak

03-css-debugging/README.md

@@ -21,8 +21,26 @@ npm start
 
 ## Content
 
-* TODO links to code examples
-
-## Useful tips
-
-* TODO links to external pages
+```sh
+cd src/examples/
+```
+* 00 Intro
+  * Using [browser inspector](https://developers.google.com/web/tools/chrome-devtools/css/) (right click > Inspect)
+  * Good class names more important due to lack of step-by-step debug
+  * Know thy framework / use consistent code style to simplify search in code
+  * CSS vs CSS-in-JS => hot reload vs cleaner code over time
+* 01 Vertical alignment
+  * Parent height
+  * [`vertical-align`](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) is only for inline and table cells
+  * Know thy [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) (or trial & error)
+* 02 Z-index
+  * [Stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)
+  * `static` content is for elements that keep to themselves
+  * if they need to overlap in arbitrary ways, best to go `absolute`
+  * or [`grid`](https://css-tricks.com/snippets/css/complete-guide-grid/) (order in HTML according to Z order, manual row+column for position)
+* 03 Selector specificity
+  * TODO
+* 04 Responsive
+  * TODO
+* 05 Transitions
+  * TODO

03-css-debugging/package.json

@@ -3,8 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "emotion": "10.0.7",
+    "node-sass": "4.11.0",
     "react": "^16.7.0-alpha",
     "react-dom": "^16.7.0-alpha",
+    "react-router": "4.3.1",
+    "react-router-dom": "4.3.1",
     "react-scripts": "2.1.3"
   },
   "scripts": {

03-css-debugging/src/App.js

@@ -1,14 +1,20 @@
-import React, { Component } from 'react';
-import './App.scss';
+import React  from 'react'
+import {BrowserRouter as Router, Route, NavLink} from 'react-router-dom'
+import './App.scss'
+import examples from './examples'
 
-class App extends Component {
-  render() {
-    return (
-      <div className="App">
-        Case 01: vertical alignment
+const App = () => (
+  <Router>
+    <div className="App">
+      <div className="App__header">
+        {examples.map(ex => <NavLink key={ex.id} to={`/${ex.id}`}>{ex.title}</NavLink>)}
       </div>
-    );
-  }
-}
 
-export default App;
+      <div className="App__content">
+        {examples.map(ex => <Route key={ex.id} path={`/${ex.id}`} component={ex.component} />)}
+      </div>
+    </div>
+  </Router>
+)
+
+export default App

03-css-debugging/src/App.scss

@@ -1,8 +1,41 @@
-$debugColor: transparent;
-
 .App {
-  background: $debugColor;
   display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
   align-items: center;
-  justify-content: center;
+  height: 100vh;
+  background: #aaa;
 }
+
+.App__header {
+  margin: 10px;
+
+  a {
+    color: #557;
+    text-decoration: none;
+    padding: 0 5px;
+  }
+  a.active {
+    color: black;
+    font-weight: bold;
+  }
+  a:hover {
+    color: #33b;
+  }
+}
+
+.App__content {
+  display: flex;
+  flex: 1;
+
+  *:not(.Vertical) {
+    margin: auto;
+  }
+}
+
+//$debugColor: #c30;
+//* {
+//  background: rgba($debugColor, .1) !important;
+//  outline: 1px dotted $debugColor !important;
+//  color: $debugColor !important;
+//}

03-css-debugging/src/App.test.js

@@ -1,9 +1,17 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+import examples from './examples'
+import fs from 'fs'
 
 it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
+  const div = document.createElement('div')
+  ReactDOM.render(<App />, div)
+  ReactDOM.unmountComponentAtNode(div)
 });
+
+it('all examples are imported', () => {
+  const files = fs.readdirSync(`${__dirname}/examples`).filter(f => f.match(/^\d.*\.js$/)).map(f => f.slice(0, 2))
+  const imported = examples.map(e => e.id)
+  expect(imported.sort()).toEqual(files.sort())
+})

03-css-debugging/src/examples/00-intro.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import {css, cx} from 'emotion'
+
+const clsPrefix = 'Intro'
+const coin = 0.5 // Math.random()
+
+const randomStyle = css`color: orange;`
+const randomName = cx({
+  first: coin < 0.6,
+  second: coin > 0.4
+})
+const niceName = cx(`${clsPrefix}__niceName`, css`color: green;`)
+
+const Example = () => (
+  <div className={clsPrefix}>
+    Example 00: browser inspector + class names
+    <div className={randomStyle}>Lorem ipsum</div>
+    <div className={randomName}>Lorem ipsum</div>
+    <div className={niceName}>Lorem ipsum</div>
+  </div>
+)
+
+export default {
+  id: '00',
+  title: 'Intro',
+  component: Example,
+}

03-css-debugging/src/examples/01-vertical-alignment.js

@@ -0,0 +1,13 @@
+import React from 'react'
+
+const Example = () => (
+  <div className="Vertical">
+    Example 01: why am I not vertically centered?
+  </div>
+)
+
+export default {
+  id: '01',
+  title: 'Vertical alignment',
+  component: Example,
+}

03-css-debugging/src/examples/02-z-index.js

@@ -0,0 +1,18 @@
+import React from 'react'
+
+const Example = () => (
+  <div className="Z">
+    <div className="Z__shouldBeOnTop">
+      Example 02: why am I not on top?
+    </div>
+    <div className="Z__evilStackingContext">
+      Lorem ipsum
+    </div>
+  </div>
+)
+
+export default {
+  id: '02',
+  title: 'Z-index',
+  component: Example,
+}

03-css-debugging/src/examples/examples.scss

@@ -0,0 +1,45 @@
+.Intro {
+  .first {
+    color: skyblue;
+  }
+  .second {
+    color: navy;
+  }
+  &__niceName {
+    color: maroon;
+  }
+}
+
+
+
+
+.Vertical {
+  vertical-align: center; // <-- doesn't work
+}
+
+
+
+
+.Z {
+  .Z__shouldBeOnTop {
+    z-index: 9999;
+  }
+  .Z__evilStackingContext {
+    position: relative;
+    display: inline-block;
+    &::after {
+      z-index: 1;
+      position: absolute;
+      top: -20px;
+      right: 0;
+      color: red;
+      content: 'X';
+      font-size: 2em;
+    }
+  }
+}
+
+
+#ddfdsfas, div[dsfas*=fsafdsa], .first.second, .dfasfsafasdfc {
+  color: red;
+}

03-css-debugging/src/examples/index.js

@@ -0,0 +1,11 @@
+import './examples.scss'
+
+import ex00 from './00-intro'
+import ex01 from './01-vertical-alignment'
+import ex02 from './02-z-index'
+
+export default [
+  ex00,
+  ex01,
+  ex02,
+]