adding latest

firebase.md

@@ -754,3 +754,169 @@ The following is a codepen showing how you can dynamically populate a hint to sh
 ### Designs
 
 Dual image: <https://codepen.io/eddyerburgh/pen/EPYVVX>
+background-image: linear-gradient( 109.6deg, rgba(113,14,51,0.83) 15.2%, rgba(217,43,23,0.95) 96.8% );
+
+## Animations
+
+### Router Animations
+
+<https://github.com/Orlandster/vue-page-transition>
+
+`yarn add vue-page-transition`
+
+```javascript
+import VuePageTransition from "vue-page-transition";
+Vue.use(VuePageTransition);
+```
+
+You should wrap the `<router-view>`:
+
+```html
+<vue-page-transition name="fade-in-right">
+  <router-view />
+</vue-page-transition>
+```
+
+A list of all transitions is here: <https://orlandster.github.io/vue-page-transition/#/>
+
+### Animate on scroll
+
+You can use vue transitions or you can use a helper library.
+
+<https://michalsnik.github.io/aos/> can be used to quickly apply animations on scroll.
+
+To use install with yarn:
+`yarn add aos@next`
+
+Then, in `main.js` add:
+
+```javascript
+import AOS from "aos";
+import "aos/dist/aos.css";
+```
+
+And then add to the Vue instance the `AOS.init`:
+
+```javascript
+new Vue({
+  created() {
+    AOS.init();
+  },
+  router,
+  store,
+  vuetify,
+  render: h => h(App)
+}).$mount("#app");
+```
+
+You can then in any component add any of the animations from the documentation:
+`data-aos="zoom-in"`
+
+To use with nuxt install as a plugin:
+<https://www.yasminzy.com/nuxt/aos.html#steps>
+
+## Alternative to fill-height
+
+Using `fill-height` prop on a `<v-container>` can result in a bug where the width of the container doesn't reach all the way to the right hand side.
+
+An alternative is to use `d-flex` on the `<v-container>`:
+
+```html
+<v-container
+  fluid
+  class="d-flex align-center"
+  style="height: 100vh;"
+></v-container>
+```
+
+document usign align with viewport
+set a default which applies to all, set the one you want to apply for upwards
+
+document setting a default cols (check this with triangle)
+
+## CSS Spacing
+
+<https://vuetifyjs.com/en/styles/spacing/>
+
+You can use the helper classes `pa-10` to control padding/margins.
+
+You can also viewport widths in these too:
+`pb-xs-10 pr-sm-10`
+
+When wanting to use a default value and only apply another one on a certain viewport:
+
+`class="d-flex justify-sm-end justify-center pb-10 pb-sm-0 pr-sm-10"`
+
+This will set a padding on the bottom of 10 for xs and then 0 for anything higher.
+
+## Dynamically Apply Classes
+
+<https://michaelnthiessen.com/dynamically-add-class-name/>
+
+### Apply classes based on viewport
+
+You can use the breakpoint variables:
+<https://vuetifyjs.com/en/customization/breakpoints/#breakpoint-service-object>
+
+In javascript to determine what the breakpoint/size/dimension etc is. You should prepend:
+`$vuetify.breakpoint`
+before each breakpoint service object.
+
+You can also use a neat javascript check with `switch` and `case` to create a computed variable:
+
+```javascript
+computed: {
+  imageHeight () {
+    switch (this.$vuetify.breakpoint.name) {
+      case 'xs': return '220px'
+      case 'sm': return '400px'
+      case 'md': return '500px'
+      case 'lg': return '600px'
+      case 'xl': return '800px'
+    }
+  },
+}
+```
+
+Alternatively, you can create a normal computed variable and reference it in your props:
+
+```javascript
+computed: {
+  isXSmall() {
+    return this.$vuetify.breakpoint.xsOnly;
+  }
+}
+```
+
+You can then dynamically set classes with the `:class` prop:
+
+```html
+<div
+  class="d-flex flex-column align-sm-end align-center justify-center"
+  :class="[isXSmall ? 'text-align-center' : 'text-align-right']"
+></div>
+```
+
+You can use both `class` and the prop `:class` together. You can use different methods to do this, here we used an array, but you can also use a javascript object.
+<https://michaelnthiessen.com/dynamically-add-class-name/>
+
+A cleaner way to do this is to use computed properties exclusively, either returning a single value, or an array as above:
+
+```javascript
+computed: {
+  alignOnViewport() {
+    return this.$vuetify.breakpoint.xsOnly
+      ? "text-align-center"
+      : "text-align-right";
+  }
+}
+```
+
+Using the `:class` prop:
+
+```html
+<div
+  class="d-flex flex-column align-sm-end align-center justify-center"
+  :class="alignOnViewport"
+></div>
+```