├── README.md ├── assets ├── Vue_Progressive-enhancement-workshop.pdf ├── Vue_Progressive-enhancement-workshop.pptx ├── Vue_Progressive-enhancment-workshop.pdf └── Vue_Progressive-enhancment-workshop.pptx ├── index.html ├── modal-animation.css ├── modal.css └── modal.js /README.md: -------------------------------------------------------------------------------- 1 | # Vue.js Progressive enhancement workshop 2 | 3 | ### Presentation 4 | [PDF](/assets/Vue_Progressive-enhancement-workshop.pdf) 5 | [PPTX](/assets/Vue_Progressive-enhancement-workshop.pptx) 6 | 7 | # Instructions 8 | Follow the slides to complete this workshop. Enjoy :) 9 | -------------------------------------------------------------------------------- /assets/Vue_Progressive-enhancement-workshop.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blake-newman/vue-progressive-enhancement-workshop/03ae72eaf7fb1951fab2426e0ff21060d358aa43/assets/Vue_Progressive-enhancement-workshop.pdf -------------------------------------------------------------------------------- /assets/Vue_Progressive-enhancement-workshop.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blake-newman/vue-progressive-enhancement-workshop/03ae72eaf7fb1951fab2426e0ff21060d358aa43/assets/Vue_Progressive-enhancement-workshop.pptx -------------------------------------------------------------------------------- /assets/Vue_Progressive-enhancment-workshop.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blake-newman/vue-progressive-enhancement-workshop/03ae72eaf7fb1951fab2426e0ff21060d358aa43/assets/Vue_Progressive-enhancment-workshop.pdf -------------------------------------------------------------------------------- /assets/Vue_Progressive-enhancment-workshop.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blake-newman/vue-progressive-enhancement-workshop/03ae72eaf7fb1951fab2426e0ff21060d358aa43/assets/Vue_Progressive-enhancment-workshop.pptx -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue.js Progressive enhancement 8 | 9 | 14 | 15 | 16 | 17 | 33 | 34 |
35 |
36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /modal-animation.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blake-newman/vue-progressive-enhancement-workshop/03ae72eaf7fb1951fab2426e0ff21060d358aa43/modal-animation.css -------------------------------------------------------------------------------- /modal.css: -------------------------------------------------------------------------------- 1 | .modal-mask { 2 | position: fixed; 3 | z-index: 9998; 4 | top: 0; 5 | left: 0; 6 | width: 100%; 7 | height: 100%; 8 | background-color: rgba(0, 0, 0, .5); 9 | display: table; 10 | transition: opacity .3s ease; 11 | } 12 | 13 | .modal-wrapper { 14 | display: table-cell; 15 | vertical-align: middle; 16 | } 17 | 18 | .modal-container { 19 | width: 300px; 20 | margin: 0px auto; 21 | padding: 20px 20px 30px; 22 | background-color: #fff; 23 | border-radius: 2px; 24 | box-shadow: 0 2px 8px rgba(0, 0, 0, .33); 25 | transition: all .3s ease; 26 | font-family: Helvetica, Arial, sans-serif; 27 | } 28 | 29 | .modal-header h3 { 30 | margin-top: 0; 31 | color: #42b983; 32 | } 33 | 34 | .modal-body { 35 | margin: 20px 0; 36 | } 37 | 38 | .modal-button { 39 | float: right; 40 | } 41 | -------------------------------------------------------------------------------- /modal.js: -------------------------------------------------------------------------------- 1 | Vue.component('modal', { 2 | 3 | }); 4 | 5 | // start app 6 | new Vue({ 7 | el: '#app' 8 | }); 9 | --------------------------------------------------------------------------------