Add: updates and refactor

jessicarush · Aug 6, 2019 · 621a0bc · 621a0bc
1 parent a4e0b55
commit 621a0bc
Show file tree

Hide file tree

Showing 12 changed files with 271 additions and 42 deletions.
diff --git a/css_js_height_transition/base.css b/css_js_height_transition/base.css
@@ -0,0 +1,71 @@
+@charset "UTF-8";
+
+
+
+/* VARIABLES -------------------------------------------------------------- */
+
+:root {
+  --heading-font: 'Open Sans', sans-serif;
+  --main-font: 'Open Sans', sans-serif;
+  --minor-font: 'Open Sans', sans-serif;
+  --heading-color: rgba(0,0,50,.9);
+  --main-color: rgba(70,70,90,.9);
+  --minor-color: rgb(190,190,200);
+  --emphasis-color: rgb(27,211,165);
+}
+
+
+
+/* DEFAULTS --------------------------------------------------------------- */
+
+html {
+  color: var(--main-color);
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-weight: 400;
+}
+
+p {
+  margin: 0;
+}
+
+/* TYPOGRAPHY ------------------------------------------------------------- */
+
+.primary-heading {
+  color: var(--heading-color);
+  font-family: var(--heading-font);
+  font-size: 2rem;
+  font-weight: 400;
+}
+
+
+/* LINKS & BUTTONS -------------------------------------------------------- */
+
+/* LAYOUT ----------------------------------------------------------------- */
+
+.content-box {
+  background: rgb(242,244,248);
+  padding: 15px;
+}
+
+.is-hidden {
+  transition: max-height 0.5s;
+  overflow: hidden;
+  max-height: 0;
+}
+
+.trigger:hover > .is-hidden {
+  max-height: var(--js-scrollHeight);
+}
+
+
+
+
+
+/* COMPONENTS ------------------------------------------------------------- */
+
+/* COSMETIC --------------------------------------------------------------- */
+
+/* UTILITY ---------------------------------------------------------------- */
+
+/* STATE ------------------------------------------------------------------ */
diff --git a/css_js_height_transition/index.html b/css_js_height_transition/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>CSS Height Transition</title>
+  <link href="base.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
+  <script src="script.js" defer></script>
+</head>
+
+<body>
+
+  <header>
+    <h1 class="primary-heading">CSS Height Transition</h1>
+    <nav></nav>
+  </header>
+
+  <main>
+
+    <div class="content-box trigger">
+      <p>Hover to see a height transition.</p>
+      <div class="is-hidden">This demo is full of issues. None of the browsers seem to be able to calculate the scrollHeight properly when using a google font. If I use a generic font, all is well. Next, this doesn't really work at all in firefox. Mozilla says "When an element's content does not generate a vertical scrollbar, then its scrollHeight property is equal to its clientHeight property." clientHeight logs as being undefined and scrollHeight logs as being 77px. The only way I was able to work-around this was to multiply the scrollHeight by a guessed amount like 1.7. Not an ideal solution at all. Lastly, Firefox seems to completely ignore line-height and width so overall it's crap.</div>
+    </div>
+
+  </main>
+
+  <footer>
+  </footer>
+
+</body>
+</html>
diff --git a/css_js_height_transition/script.js b/css_js_height_transition/script.js
@@ -0,0 +1,10 @@
+function setHeight() {
+  let el = document.querySelector('.is-hidden');
+  let height = el.scrollHeight;
+  console.log(el.scrollHeight, el.clientHeigh);
+  console.log(el.scrollWidth, el.clientWidth);
+  el.style.setProperty('--js-scrollHeight', (height * 1.7) + 'px');
+}
+
+
+setHeight();
diff --git a/css_transition_box-shadow/base.css b/css_transition_box-shadow/base.css
@@ -0,0 +1,57 @@
+@charset "UTF-8";
+
+
+
+/* VARIABLES -------------------------------------------------------------- */
+
+:root {
+  --heading-font: 'Open Sans', sans-serif;
+  --main-font: 'Open Sans', sans-serif;
+  --minor-font: 'Open Sans', sans-serif;
+  --heading-color: rgba(0,0,50,.9);
+  --main-color: rgba(70,70,90,.9);
+  --minor-color: rgb(190,190,200);
+  --emphasis-color: rgb(27,211,165);
+}
+
+
+
+/* DEFAULTS --------------------------------------------------------------- */
+
+html {
+  color: var(--main-color);
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-weight: 400;
+}
+
+/* TYPOGRAPHY ------------------------------------------------------------- */
+
+.primary-heading {
+  color: var(--heading-color);
+  font-family: var(--heading-font);
+  font-size: 2rem;
+  font-weight: 400;
+  width: 300px;
+}
+
+.box-shadow-transition {
+  box-shadow: inset 0 -.5em 0 rgb(145,252,240);
+  transition: box-shadow .2s ease-in-out;
+}
+
+.box-shadow-transition:hover {
+  box-shadow: inset 0 -1.4em 0 rgb(255,200,200);
+}
+
+/* LINKS & BUTTONS -------------------------------------------------------- */
+
+/* LAYOUT ----------------------------------------------------------------- */
+
+/* COMPONENTS ------------------------------------------------------------- */
+
+/* COSMETIC --------------------------------------------------------------- */
+
+/* UTILITY ---------------------------------------------------------------- */
+
+/* STATE ------------------------------------------------------------------ */
diff --git a/css_transition_box-shadow/index.html b/css_transition_box-shadow/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>CSS box-shadow transition</title>
+  <link href="base.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
+</head>
+
+<body>
+
+  <header>
+    <h1 class="primary-heading">
+      <span class="box-shadow-transition">CSS box-shadow transition using inset value</span>
+    </h1>
+    <nav></nav>
+  </header>
+
+  <main>
+  </main>
+
+  <footer>
+  </footer>
+
+</body>
+</html>
diff --git a/css_easing_transitions/base.css → css_transition_easing/base.css b/css_easing_transitions/base.css → css_transition_easing/base.css
diff --git a/css_easing_transitions/index.html → css_transition_easing/index.html b/css_easing_transitions/index.html → css_transition_easing/index.html
diff --git a/css_underline_animation/base.css → css_transition_underline/base.css b/css_underline_animation/base.css → css_transition_underline/base.css
diff --git a/css_underline_animation/index.html → css_transition_underline/index.html b/css_underline_animation/index.html → css_transition_underline/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="utf-8">
-  <title>CSS Underline Animation</title>
+  <title>CSS Underline Transition</title>
   <link href="base.css" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
 </head>
@@ -12,7 +12,7 @@
 
   <header>
     <h1 class="primary-heading underline-animation">
-      CSS Underline Animation
+      CSS Underline Transition
     </h1>
     <nav></nav>
   </header>

diff --git a/css_transitions/base.css b/css_transitions/base.css
@@ -23,9 +23,12 @@ html {
   font-family: var(--main-font);
   font-size: 16px;
   font-weight: 400;
+  line-height: 1.7em;
 }
-p {
-  margin: 0;
+
+code {
+  line-height: 1.5em;
+  background: lightcyan;
 }
 
 /* TYPOGRAPHY ------------------------------------------------------------- */
@@ -42,47 +45,45 @@ p {
 
 /* LAYOUT ----------------------------------------------------------------- */
 
-.flex-centered {
+.centered-container {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.box {
   width: 100px;
   height: 100px;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 5px 0;
+  float: left;
 }
 
+
 /* COMPONENTS ------------------------------------------------------------- */
 
-.content-box {
-  background: rgb(242,244,248);
-  padding: 15px;
-}
+/* COSMETIC --------------------------------------------------------------- */
 
-.is-hidden {
-  transition: max-height 0.5s;
-  overflow: hidden;
-  max-height: 0;
+.trans-example-1 {
+  margin-left: 0;
+  transition: margin-left .5s ease-in-out .5s;
 }
 
-.trigger:hover > .is-hidden {
-  max-height: var(--js-scrollHeight);
+.trans-example-1:hover {
+  margin-left: 50px;
 }
 
-
 .color-box {
   background: rgb(242,244,248);
-  transition: background 0.5s;
+  transition: background .5s;
 }
 
 .color-box:hover {
   background: var(--random-bg);
 }
 
 
-
-
-/* COSMETIC --------------------------------------------------------------- */
-
 /* UTILITY ---------------------------------------------------------------- */
 
 /* STATE ------------------------------------------------------------------ */
diff --git a/css_transitions/index.html b/css_transitions/index.html
@@ -11,19 +11,58 @@
 
 <body>
 
-  <header>
-    <h1 class="primary-heading">CSS Height Transition</h1>
+  <header class="centered-container">
+    <h1 class="primary-heading">CSS Transitions</h1>
+    <p>Create gradual transitions between the values of specific CSS properties. The behavior of these transitions can be controlled by specifying their timing, duration, and delay. The transition takes place between two states of an element, usually defined using pseudo-classes like :hover or :active or dynamically set using JavaScript.</p>
     <nav></nav>
   </header>
 
-  <main>
+  <main class="centered-container">
+
+    <h2 class="primary-heading">properties</h2>
+    <ul>
+      <li class="trans-example-1"><code>transition</code> -  shorthand for <code>transition-property</code>, <code>transition-duration</code>, <code>transition-timing-function</code>, and <code>transition-delay</code>. For example: <code>transition: margin-left .5s ease-in-out .5s;</code>. You can specify more than one property by separating each with a comma like: <code>transition: margin-left .5s, color 1s;</code> or you can use the keword all like: <code>transition: all .5s,</code></li>
+      <li><code>transition-delay</code> - the duration to wait before starting a property's transition effect. Can be in specified in <code>s</code> seconds or <code>ms</code> milliseconds.</li>
+      <li><code>transition-duration</code> - the length of time a transition animation should take to complete. Can be in specified in <code>s</code> seconds or <code>ms</code> milliseconds.</li>
+      <li><code>transition-property</code> - sets the CSS properties to which a transition effect should be applied. Multiple properties can be separated by a comma, or us ethe keyword <code>all</code>. Not all css properties can be transitioned. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties" target="_blank">here for an up to date list</a>.</li>
+      <li><code>transition-timing-function</code> -  lets you establish an acceleration curve so that the speed of the transition can vary over its duration. There are a number of pre-made keyword functions:
+        <ul>
+          <li><code>ease</code> - the default value, increases in velocity towards the middle of the transition, slowing back down at the end.</li>
+          <li><code>ease-in</code> - starts off slowly, with the transition speed increasing until complete.</li>
+          <li><code>ease-out</code> - starts transitioning quickly, slowing down the transition continues.</li>
+          <li><code>ease-in-out</code> -starts transitioning slowly, speeds up, and then slows down again.</li>
+          <li><code>linear</code> - transitions at an even speed.</li>
+          <li><code>step-start</code> - Equal to steps(1, jump-start)</li>
+          <li><code>step-end</code> - Equal to steps(1, jump-end)</li>
+        </ul>
+        or you can get really specific and build your own with these:
+        <ul>
+          <li><code>cubic-bezier(0.1, 0.7, 1.0, 0.1)</code></li>
+          <li><code>steps(4, jump-start)</code></li>
+          <li><code>steps(10, jump-end)</code></li>
+          <li><code>steps(20, jump-none)</code></li>
+          <li><code>steps(5, jump-both)</code></li>
+          <li><code>steps(6, start)</code></li>
+          <li><code>steps(8, end)</code></li>
+        </ul>
+        See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function" target="_blank">MDN for descriptions</a>.
+      </li>
+
+    </ul>
 
-    <div class="content-box trigger">
-      <p>Hover to see a height transition.</p>
-      <div class="is-hidden">This demo is full of issues. None of the browsers seem to be able to calculate the scrollHeight properly when using a google font. If I use a generic font, all is well. Next, this doesn't really work at all in firefox. Mozilla says "When an element's content does not generate a vertical scrollbar, then its scrollHeight property is equal to its clientHeight property." clientHeight logs as being undefined and scrollHeight logs as being 77px. The only way I was able to work-around this was to multiple the scrollHeight by a guessed amount like 1.7. Not an ideal solution at all. Lastly, Firefox seems to completely ignore line-height and width so overall it's crap.</div>
-    </div>
 
-    <div class="flex-centered color-box">
+    <h2 class="primary-heading">css transition + variable + js</h2>
+
+    <div class="box color-box">
+      <div>Hover</div>
+    </div>
+    <div class="box color-box">
+      <div>Hover</div>
+    </div>
+    <div class="box color-box">
+      <div>Hover</div>
+    </div>
+    <div class="box color-box">
       <div>Hover</div>
     </div>
 

diff --git a/css_transitions/script.js b/css_transitions/script.js
@@ -1,12 +1,3 @@
-function setHeight() {
-  let el = document.querySelector('.is-hidden');
-  let height = el.scrollHeight;
-  console.log(el.scrollHeight, el.clientHeigh);
-  console.log(el.scrollWidth, el.clientWidth);
-  el.style.setProperty('--js-scrollHeight', (height * 1.7) + 'px');
-}
-
-
 function randomBg() {
   // Generate a random number between 0 and given number (inclusive)
   function random(n) {
@@ -19,12 +10,13 @@ function randomBg() {
   }
   // Set an elements --random-bg property to a random color
   function changeBg() {
-    let el = document.querySelector('.color-box');
-    el.style.setProperty('--random-bg', randomRGB());
+    let els = document.querySelectorAll('.color-box');
+    for (el of els) {
+      el.style.setProperty('--random-bg', randomRGB());
+    }
+
   }
   changeBg();
 }
 
-
-setHeight();
 randomBg();