🤖 Shapy: Images with CSS Gradients & Vue.js 🤖 🎨 Victoria Bergquist, @vicbergquist Vue Conf Toronto, November 15 2018

Victoria Bergquist, who? 🦄 Front End Dev & Community Manager @melsicon 🏢 CSS Frankfurt & Vue.js Frankfurt 😺 Vue Vixens DE 🦊 Cats & M&Ms ❤ (donations welcome) @vicbergquist Vue Conf Toronto

What is Shapy? 🧐 A CSS gradients generator + more ) Play around with gradients + Be a CSS artist ✂ Copy code (like a pro) @vicbergquist Vue Conf Toronto

Pre-talk demo! 😱 Let’s see what Shapy is! @vicbergquist Vue Conf Toronto

Origin 🌈 CSS 😍 JavaScript 😑 #DailyCSSImages @vicbergquist Vue Conf Toronto

Origin 🌈 #DailyCSSImages Daily e-mail prompts to make CSS images @vicbergquist Vue Conf Toronto

Origin 🌈 #DailyCSSImages Level 1: One tag per shape @vicbergquist Vue Conf Toronto

Origin 🌈 #DailyCSSImages Level 2: Fewer tag + Pseudo elements @vicbergquist Vue Conf Toronto

Origin 🌈 #DailyCSSImages God level: One tag + pseudo elements + gradients a.singlediv.com by Lynn Fisher @vicbergquist Vue Conf Toronto

Origin 🌈 😱 😱 CSS only CSS only What kind of magic is this? 😭 @vicbergquist Vue Conf Toronto

Origin 🌈 😱 😱 wtf 😰 @vicbergquist Vue Conf Toronto

Origin 🌈 There’s a generator for that, right? I don’t know 🤷 @vicbergquist Vue Conf Toronto

Origin 🌈 A year later: I still don’t know. 💁 But let’s just make one! @vicbergquist Vue Conf Toronto

Origin 🌈 But JavaScript 😑 But Vue.js! 😍 @vicbergquist Vue Conf Toronto

Origin 🌈 But JavaScript 😑 4👎 Slow progress… @vicbergquist Vue Conf Toronto

Origin 🌈 @vicbergquist Vue Conf Toronto

Origin 🌈 But Vue.js 😍 @vicbergquist Vue Conf Toronto

Origin 🌈 But Vue.js 😍 Gentle & Supportive

🦄 Makes all your ideas come true! productivity++ @vicbergquist Vue Conf Toronto

Origin 🌈 I WAS ON A ROLL 😎 @vicbergquist Vue Conf Toronto

The How 😯 Learn how CSS gradients work: background-color background-image background-position Shorthand: background background-repeat background-size + more @vicbergquist Vue Conf Toronto

The How 😯 Learn how CSS gradients work radial-gradient( linear-gradient( Width Height at X-axis Y-axis, Direction, Color start, Color stop) Color start, Color stop) no-repeat no-repeat X-axis Y-axis / Width Height X-axis Y-axis / Width Height) @vicbergquist Vue Conf Toronto

The How 😯 What did I use to build Shapy? Vuex vuex-map-fields vue-meta vue-color vue-highlightjs (vue-router) @vicbergquist Vue Conf Toronto

The How 😯 Gather your data: input fields in a form x 1000. V-model everything! @vicbergquist Vue Conf Toronto

The How 😯 Gather your data: update the store on changes @vicbergquist Vue Conf Toronto

The How 😯 Turn it into a string ${type}( ${shape}, ${repeat} ${colors}) ${box} @vicbergquist Vue Conf Toronto

The How 😯 Turn it into a string gradientString() { // TYPE const type = this.general.type // REPEATING const repeat = this.general.repeat // COLORS const colors = this.colorStops // COMMENT const comment = this.general.comment // DEGREE const degree = this.general.degree.size + this.general.degree.unit // BOX const box = this.boxCombined // SHAPE const shape = this.shapeCombined } if (type === 'radial-gradient') { return /* ${comment} */ ${type}(${shape}, ${colors}) ${repeat} ${box} } else if (type === 'linear-gradient' && this.general.degree.size > 0) { return /* ${comment} */ ${type}(${degree}, ${colors}) ${repeat} ${box} } else if (type === 'linear-gradient') { return /* ${comment} */ ${type}(${colors}) ${repeat} ${box} } @vicbergquist Vue Conf Toronto

The How 😯 Turn it into a string radial-gradient( 50% 50% at 50% 50%, #00978d 0%, #f3b6c9 100%) no-repeat 50% 50% / 100% 100% linear-gradient( 90deg, #00978d 0%, #f3b6c9 100%) no-repeat 50% 50% / 100% 100% @vicbergquist Vue Conf Toronto

The How 😯 Bind the style! <div class=“canvas” :style=“{ background: gradientString }”/> 🎉 🎉 @vicbergquist Vue Conf Toronto

Demo time! Let’s make the Vue logo together! @vicbergquist Vue Conf Toronto

Shapy’s Future 🧙 Plans and ideas for Shapy ) Gallery: like/fork/share 🦊 Shapy in the browser 💡 Your ideas? @vicbergquist Vue Conf Toronto

🤖 Play with Shapy shapy.app ❤ Contribute to Shapy github.com/vicbergquist/shapy @vicbergquist Vue Conf Toronto

Thank you! ☺🙏 @vicbergquist Vue Conf Toronto