Week 5

Monday Feb 22

Transition - Transform almosst any CSS property by animating the change in value from one to the other. Here's a Thimble example.

 /**
 property - name of the CSS property
 duration - in seconds, i.e. 2s
 **/
 .my-class {
     transition: background-color 1s
 }

Transform - Change the position or size of an HTML element. Options include skew scale rotate translate scale3d rotate3d translate3d. Here's a Thimble example combining scale and skew.
```
   .zoom-in {
       transform: scale(2);
   }
   .zoom-out {
       transform: scale(0.5);
   }
```
Filter Apply a visuaul effect to an element. Not covered yet in class, but feel free to explore.
Animation Applyustom / complex animations withultiple "keyframes" over time. Notovered yet in class, but feel free to explore.
Show & Tells: Polina and Echo

HTML elements can trigger JavaScript functions. A great example is the html onmousedown="nameOfFunction()" attribute because it works on desktop and mobile. The function name is case sensitive. Here's a (demo).

JavaScript lives inside of a script element in the <head> of the page:

  <script type="text/javascript">
      function myFunction() {
          // javascript goes here
      }
  </script>

document.getElementById("id-of-element") Returns the HTML element as a JavaScript object that we can manipulate.
classList.toggle("name-of-class-to-add-or-remove") Returns the HTML element as a JavaScript object that we can manipulate.

☰ CSS Tricks: Three line menu navigation. Find more special html/unicode characters here.
Vendor Prefixes. Some newer CSS properties like transition transform filter animation and flexbox require vendor prefixes to render properly on all browsers. You can check at shouldiprefix.com.

Redo prototypes, make them responsive, prepare for user testing on Feb 29th (due 2/29)
Read Responsive Patterns and Guide to Flexbox. Try one of the examples on your own.
Read CSS3 Transform, Transition, Animation Tutorial

DUE: Style Guide

CSS Transform, Transition, Filter, Animation (continued)
Review: CSS Display property
- By default, all HTML elements are either display:inline (e.g. <span>) or display:block (e.g. <div>).
- float clear
Flex Box basics:
- Containers can have:
  - display: flex
  - flex-flow: [flex-direction] | [flex-flow]
    - flex-direction: row | column | row-reverse | column-reverse | initial | inherit
    - Default value is "row".
    - flex-wrap: wrap | no-wrap | wrap-reverse Default value is "nowrap".
- Items within containers can have:
  - flex
  - order
- Example from class: Dropbox
- Similar example on my Thimble
- Similar example for Nav ul li display:inline-block on my Thimble

Use calc to calculate dimensions (i.e. max-width) with both fluid (%) and fixed (px) numbers. Example syntax: calc(50% - 10px). For example, this would be useful if you need to account for the margins that surround an element (or border and padding if your box-sizing is the default of content-box instead of border-box).
Guest Claire Kearney-Volpe from NYU's Ability Lab on Web Accessibility and User-Centered Design (slides)

HW:

Continue work on your midterm/prototypes, make them responsive, prepare for user testing on Monday