CSS

• Selector Types

  • Class: Selects elements with classname
  • Element: Selects HTML elements
  • ID: Selects elements with a certain id, generally used if only want to style one element

• Chaining Selectors

  • .class1 .class 2: the properties will apply if this descendant pattern is met
  • You can use as many as you like so long they are descendants

  .class1 .class2 .name1 .name2 {
      /* Styles here */
  }
  

• Psuedo classes define specific states of classes, such as hover, active, etc.

Basis CSS Animations in Vue w/ no Transition component

1. Set up Data property that will control when the class is toggled on
2. Define the class that shall be used for the animation, using animation property (defening specifier name, duration, easing function and fill mode
3. Define keyframes that will define the animation properties

Vue CSS Animations using Transition component

• Components entering and exiting have three states in which classes can be applied to. Enter From, Active and Enter to
• Generally you use the transition component when a component needs to be both added and removed from the DOM

Planning applications

• Define Features
• From the Features, derive the data that you need
  • Define the State
  • Define the Actions necessary
• Define the Design and layout
  • Find the components that can be derived form the designs