Shapy: Images with CSS Gradients & Vue.js

A presentation at VueConf TO in November 2018 in Toronto, ON, Canada by Victoria Bergquist

Slide 1

Slide 1

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

Slide 2

Slide 2

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

Slide 3

Slide 3

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

Slide 4

Slide 4

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

Slide 5

Slide 5

Origin 🌈 CSS 😍 JavaScript πŸ˜‘ #DailyCSSImages @vicbergquist Vue Conf Toronto

Slide 6

Slide 6

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

Slide 7

Slide 7

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

Slide 8

Slide 8

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

Slide 9

Slide 9

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

Slide 10

Slide 10

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

Slide 11

Slide 11

Origin 🌈 😱 😱 wtf 😰 @vicbergquist Vue Conf Toronto

Slide 12

Slide 12

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

Slide 13

Slide 13

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

Slide 14

Slide 14

Origin 🌈 But JavaScript πŸ˜‘ But Vue.js! 😍 @vicbergquist Vue Conf Toronto

Slide 15

Slide 15

Origin 🌈 But JavaScript πŸ˜‘ 4πŸ‘Ž Slow progress… @vicbergquist Vue Conf Toronto

Slide 16

Slide 16

Origin 🌈 @vicbergquist Vue Conf Toronto

Slide 17

Slide 17

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

Slide 18

Slide 18

Origin 🌈 But Vue.js 😍 Gentle & Supportive

πŸ¦„ Makes all your ideas come true! productivity++ @vicbergquist Vue Conf Toronto

Slide 19

Slide 19

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

Slide 20

Slide 20

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

Slide 21

Slide 21

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

Slide 22

Slide 22

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

Slide 23

Slide 23

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

Slide 24

Slide 24

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

Slide 25

Slide 25

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

Slide 26

Slide 26

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

Slide 27

Slide 27

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

Slide 28

Slide 28

The How 😯 Bind the style! <div class=β€œcanvas” :style=β€œ{ background: gradientString }”/> πŸŽ‰ πŸŽ‰ @vicbergquist Vue Conf Toronto

Slide 29

Slide 29

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

Slide 30

Slide 30

Shapy’s Future πŸ§™ Plans and ideas for Shapy ) Gallery: like/fork/share 🦊 Shapy in the browser πŸ’‘ Your ideas? @vicbergquist Vue Conf Toronto

Slide 31

Slide 31

πŸ€– Play with Shapy shapy.app ❀ Contribute to Shapy github.com/vicbergquist/shapy @vicbergquist Vue Conf Toronto

Slide 32

Slide 32

Thank you! β˜ΊπŸ™ @vicbergquist Vue Conf Toronto