add remaining examples

Author: Peter Hozak

03-css-debugging/README.md

@@ -42,8 +42,16 @@ cd src/examples/
   * 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
+  * CSS [Cascade](https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade) and [Specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)
+  * Simplified model - do a sum of "values" for each part of the selector:
+    * 1 for `div` or `::before`
+    * 10 for `.class` or `:hover`
+    * 100 for `#id`
+    * 999 for inline
+    * 1000 for `!important` in the rule 
+* 04 Responsive design
+  * Always test, open multiple windows or connect devices
+  * `flex-wrap`, `grid-template-columns`, `<Col md={12} />`, `min-width`, ... not just @media
 * 05 Transitions
-  * TODO
+  * `transition` property applied from the "after" / "new" selector
+* Q&A 

03-css-debugging/src/App.scss

@@ -1,19 +1,23 @@
 .App {
   display: flex;
   flex-direction: column;
-  flex-wrap: wrap;
   align-items: center;
   height: 100vh;
-  background: #aaa;
+  background: #aaafae;
+  font-size: 32px;
 }
 
 .App__header {
   margin: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
 
   a {
     color: #557;
     text-decoration: none;
-    padding: 0 5px;
+    padding: 0 10px;
+    transition: 0.2s;
   }
   a.active {
     color: black;
@@ -28,7 +32,7 @@
   display: flex;
   flex: 1;
 
-  *:not(.Vertical) {
+  & > *:not(.Vertical) {
     margin: auto;
   }
 }

03-css-debugging/src/examples/03-selector-specificity.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import {Button} from './../lib'
+
+const Example = () => (
+  <div className="Selector">
+    Example 03: "cascade" style sheets
+    <Button>Default</Button>
+    <Button className="Selector__buttonWannaBe">Why not changed</Button>
+    <Button className="Selector__buttonModified">But fine here</Button>
+  </div>
+)
+
+export default {
+  id: '03',
+  title: 'Selector specificity',
+  component: Example,
+}

03-css-debugging/src/examples/04-responsive-design.js

@@ -0,0 +1,14 @@
+import React from 'react'
+
+const boxes = Array.from(Array(50)).map((_, i) => <div>{i}</div>)
+const Example = () => (
+  <div className="Responsive">
+    {boxes}
+  </div>
+)
+
+export default {
+  id: '04',
+  title: 'Responsive design',
+  component: Example,
+}

03-css-debugging/src/examples/05-transitions.js

@@ -0,0 +1,13 @@
+import React from 'react'
+
+const Example = () => (
+  <div className="Transitions">
+    Example 05: Transition defined on "after" class
+  </div>
+)
+
+export default {
+  id: '05',
+  title: 'Transitions',
+  component: Example,
+}

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

@@ -2,10 +2,12 @@
   .first {
     color: skyblue;
   }
+
   .second {
     color: navy;
   }
-  &__niceName {
+
+  &__niceName { // <-- won't be found by fulltext search of whole class name
     color: maroon;
   }
 }
@@ -24,6 +26,7 @@
   .Z__shouldBeOnTop {
     z-index: 9999;
   }
+
   .Z__evilStackingContext {
     position: relative;
     display: inline-block;
@@ -40,6 +43,58 @@
 }
 
 
+
+
+.Selector {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &__buttonWannaBe { // <-- "value" 10
+    background: darkolivegreen;
+  }
+
+  .Selector__buttonModified { // <-- "value" 20
+    background: darkolivegreen;
+  }
+}
+
+
+
+
+.Responsive {
+  width: 1200px;
+  @media (max-width: 1200px) {
+    width: 100%; // <-- % of what?
+  }
+  display: grid;
+  grid-template-columns: repeat(auto-fit, 70px);
+
+  div {
+    border: 1px solid gray;
+    margin: 5px;
+    text-align: center;
+  }
+}
+
+
+
+
+.Transitions {
+  cursor: default;
+  color: darkolivegreen;
+  transition: 1ms;
+
+  &:hover {
+    color: green;
+    font-weight: bold;
+    transition: 1s;
+  }
+}
+
+
+
+
 #ddfdsfas, div[dsfas*=fsafdsa], .first.second, .dfasfsafasdfc {
   // overwriting Intro styles "by accident"
   color: red;

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

@@ -3,9 +3,15 @@ import './examples.scss'
 import ex00 from './00-intro'
 import ex01 from './01-vertical-alignment'
 import ex02 from './02-z-index'
+import ex03 from './03-selector-specificity'
+import ex04 from './04-responsive-design'
+import ex05 from './05-transitions'
 
 export default [
   ex00,
   ex01,
   ex02,
+  ex03,
+  ex04,
+  ex05,
 ]

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

@@ -0,0 +1,4 @@
+import React from 'react'
+import './lib.scss'
+
+export const Button = ({className = '', children}) => <button className={`lib-button ${className}`}>{children}</button>

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

@@ -0,0 +1,16 @@
+.lib {
+  $bg: #998;
+  &-button {
+    border-radius: 5px;
+    border: 1px solid darken($bg, 20);
+    background: $bg;
+    font-size: inherit;
+    padding: 3px 10px;
+    margin: 3px;
+    cursor: pointer;
+  }
+  &-button:hover {
+    background: darken($bg, 10);
+    border-color: darken($bg, 100);
+  }
+}