An Advanced Guide to Pure CSS Images (Powering Up With Vue.js)

What you’re getting into: A quite lengthy guide into doing more exciting stuff with pure CSS images, specifically, utilizing Vue.js

If you like this: I have a video course called Power Up With Pure CSS Images & Vue.js to Make Fun Apps. It is similar to this tutorial except it’s in video format, it breaks down the basics of Vue.js piece by piece, it includes assignment and projects, and it also includes access to an exclusive Facebook group and email challenge.


Final Pen/Demo: http://codepen.io/mikemang/live/931b37207a9527f069c9d2492a92f153

Introduction

In the beginner’s guide, we discussed how to create a basic pure CSS image, in our case, a cute koala.

In the intermediate guide, we discussed how to create a pure CSS image that was comprised of several stand-alone pure CSS images that can come together to form a final pure CSS image.

In this guide, we are going to discuss how we can take a pure CSS image, like the one above, and making it more interactive by using Vue.js. Specifically, we will be making an interactive developer desk.

Final Pen/Demo: http://codepen.io/mikemang/live/931b37207a9527f069c9d2492a92f153

Template: http://codepen.io/mikemang/pen/ca5e601b10c1b614869a3224ee6f832e

In this article, I am going to assume you have read the two previous guides. I will go over the components that make up this pure CSS image, but the tutorial won’t be focused on how to create it.



Instead, you will be provided a template with the developer desk already coded. From there, we will go over how to make the developer desk interactive by using Vue.js.

First, let’s recap the broad objectives of this tutorial:

  1. Briefly, break down our pure CSS image
  2. Quick overview of Vue.js
  3. Spawn “scenes” when certain things are clicked
  4. Have each scene provide some interaction that utilizes key features of Vue.js

We will define our objectives more specifically as we go along, but first, let’s take a look at the pure CSS image.

Breaking Down the Pure CSS Image

If you really want to get good at either vector graphic design and/or creating pure CSS images. You should be able to look at an image like we have here and break it down into its components.

Take some time to examine this image. Write down the components that you think make up this image. When you are done, you can check the segment below.

Main Components

  1. Desk
  2. Laptop
  3. Mouse
  4. Sticky Notes
  5. Pen
  6. Gameboy

Desk

For our desk, we will have a box that will be the container of our pure CSS image. We will give it a light brown, wood-like color.

Next, we will have a dark brown strip on the bottom.

Now, we can finish the desk by adding some lighter grains.

Cool! Now, let’s break down our laptop.

Laptop

First, we will have the top shell of our laptop.

We then add the screen.

Next, we have the bottom shell of the laptop.

We then add the container for our keyboard.

And then the trackpad….

Lastly, we add the keyboard to finish this off. (Note: the Apple logo is an actual image using an <img /> tag, not a pure CSS image)

Sweeet!

Mouse

The mouse is simply a rounded rectangle with a gray rectangle for the wheel.

Sticky Notes

The sticky notes are pretty easy. Just two colored squares and a bottom strip.

With the strips…

Pen

The pen has three shapes. Two rectangles, one large and one small, and a triangle.

Gameboy

This one is a bit more complex, but nothing crazy.

We first have a rounded rectangle as the shell. The bottom-left corner is rounded more than the others.

Next, we add the screen which is just two squares, the lower layer being a bit bigger.

We then add our d-pad in both directions.

Then, we can add our circular buttons and two rounded rectangle buttons to finish off.

Cool beans! You have an entire desk.

Before we move on, you can either try to create this yourself and/or design it to your liking. Or, you can just use the template and follow along as we tackle making this interactive.

Overview of Vue.js

Cover for Power Up With Pure CSS Images & Vue.js video course

Vue.js is a JavaScript framework for creating progressive web applications. It is gaining popularity for its readability, approachability, and lean file sizes in comparison to popular alternatives like Angular 2 and React.

Vue.js can be used to make complete dynamic web applications, or you can use it to sprinkle some extra wow into an existing website or web application.

I find Vue.js to be perfect for frontend developers with an emphasis on design who want to make fun, mini applications. You can easily make things interactive and add some extra spice, making it perfect if you love contributing to sites like Codepen.

If you have a grasp on HTML, CSS, and a tad of JS, then Vue.js will be a perfect introduction to bridge the gap between pure CSS images to interactive mini-apps.

I won’t go too much detail on the benefits of Vue.js beyond this. As we complete our interactive desk, you should see why I love it so much.

I will do my best not to make assumptions and explain what is going on when we start our Vue.js code. However, it is hard to crunch everything in one blog post. If you are hungery to really break down Vue.js and make even more fun, mini-apps, I recently launched a video course you can check out after you complete this.

For now, go to the template I provided and let’s start adding that Vue.js.

Creating Scenes

As of now, we don’t have any Vue.js code added. We just have a static developer desk.

In order to make this interactive, we will have different “scenes”. By scenes, I mean that we will be able to toggle on and off different pure CSS images. The image we have above is our default scene. When we click on the sticky notes, laptop, and Gameboy, we will toggle off this default scene and toggle on another scene.

Let’s look at all the scenes so it makes more sense.

  1. Default view (seen above)
  2. Yellow sticky note

3. Red Sticky Note

4. Gameboy

5. Laptop

So what the secret behind all these scenes? Each scene is a pure CSS image wrapped around our box class. We can make all of these scenes up front. We only add the HTML elements that we want for each scene. We also add new CSS classes for the elements in each scene so they are centered and look as if we zoomed in.

For example, the laptop scene above is the following:

HTML

<div class="box">
<div id="grains">
<div class="grain-1"></div>
<div class="grain-2"></div>
<div class="grain-3"></div>
<div class="grain-4"></div>
<div class="grain-5"></div>
<div class="grain-6"></div>
</div>
<div class="computer-container-large">
<div class="pen">
<div class="cap"></div>
<div class="end"></div>
</div>
<div class="screen">
<div class="logo-container">
<img class="screen-logo" />
</div>
<div class="progress-bar">
<div class="progress-fill"></div>

</div>
</div>
<div class="bottom-computer">
<div class="keyboard-container">
<div id = "keyboard-row-1">
<div class="top-bar-1">
</div>
<div class="top-bar-2">
</div>
<div class="top-bar-3">
</div>
<div class="top-bar-4">
</div>
<div class="top-bar-5">
</div>
<div class="top-bar-6">
</div>
<div class="top-bar-7">
</div>
<div class="top-bar-8">
</div>
</div>
<div id = "keyboard-row-2">
<div class="mid-bar-1">
</div>
<div class="mid-bar-2">
</div>
<div class="mid-bar-3">
</div>
<div class="mid-bar-4">
</div>
<div class="mid-bar-5">
</div>
<div class="mid-bar-6">
</div>
<div class="mid-bar-7">
</div>
<div class="mid-bar-8">
</div>
</div>

<div id = "keyboard-row-3">
<div class="bottom-bar-1">
</div>
<div class="bottom-bar-2">
</div>
<div class="bottom-bar-3">
</div>
<div class="bottom-bar-4">
</div>
<div class="bottom-bar-5">
</div>
<div class="bottom-bar-6">
</div>
<div class="bottom-bar-7">
</div>
<div class="bottom-bar-8">
</div>
</div>
</div>
<div class="trackpad"></div>
</div>
<div class="mouse-large">
<div class="tracker"></div>
</div>
</div>
</div>

It is a separate pure CSS image that we add. It is pretty similar to the default pure CSS image, except, we remove some stuff and added new classes (in bold) to adjust the styling for this specific scene.

If you were making this entirely from scratch you would do the following:

  1. Create default pure CSS image
  2. Create pure CSS images for other scenes
  3. Add Vue.js to toggle between scenes (conditional rendering)

In this tutorial, I have provided all the CSS for every scene. We will add the HTML for each scene as we work our way through adding the Vue.js code.


Now that we have explained the concept of scenes, let’s start adding the Vue.js to our template which currently just has the default scene of our complete, static developer desk.


Yellow Sticky Note Scene

First things first, we will add the shell of our Vue.js instance. Each Vue.js instance has data and functions to manipulate the data. Each scene will be a separate Vue.js instance which we will toggle on and off.

For our default Vue.js instance, we add the following:

JS

var desk = new Vue({
el: "#desk",
data: {
},
methods: {

}
})

What we have done is we declared a new Vue instance called desk. We add an el with a value of “#desk”. What this is doing is saying “hey, this instance must be connected with a div with an ID of desk in our HTML”.

The data will hold injected into our HTML. The methods allow us to change data. This makes everything more dynamic. For example, we could have some data that is a title. We can change the value of the title in a method (i.e. Hello World → method → Hello Vue) We call functions in our methods by using event handlers. We will get into this more, but for now, let’s wrap a div with an id of #desk around our pure CSS image in our HTML so our instance can be connected.

HTML

<div id="desk">
<div class="box">...</div>
</div>

Alright, now let’s start adding some data. An easy way to start is to add the URL for the SRC of the Apple logo image in this tag.

Let’s add some data called screenLogo that will hold the URL:

var desk = new Vue({
el: "#desk",
data: {
   screenLogo: "http://apple-wholesale-store.com/wp-  content/uploads/2017/01/Apple_Logo_Solid_White-1.png"
  },
methods: {

}
})

Nothing changes… We need to connect the src of the img tag in our HTML with our Vue.js instance.

To do this, we can add v-bind:src= “screenLogo” . This essentially does the following, “Hey, there’s a v-bind:src= “screenLogo” here in this img tag! Let me check the Vue instance data to see if there’s a screenLogo. Hey! I found screenLogo and it has the value of this URL for an Apple logo. It checks out. Let’s go ahead and use this URL as the SRC.

HTML

<div class="screen">
<div class="logo-container">
<img v-bind:src= “screenLogo” class="screen-logo" />
</div>
</div>

We should now see the Apple logo.

Pretty neat! That is how Vue.js works with our HTML. We make an association from our HTML where we need to use data in our Vue.js instance.

Now that we’ve added the logo, let’s add some data that will control whether or not this scene renders.

JS

var desk = new Vue({
el: "#desk",
data: {
showDesk: true,
screenLogo: "http://apple-wholesale-store.com/wp-content/uploads/2017/01/Apple_Logo_Solid_White-1.png"
},
methods: {

}
})

showDesk is a flag that will be true or false. If it is true, it will render (appear). If it is false, it won’t render. This is our default scene so we want it to be true.

Now, let’s tell our HTML to only display our pure CSS image of the entire developer desk, the default scene, if showDesk is true.

We can do this by using v-if= “showDesk” which we place in the same div that as an id of desk.

HTML

<div v-if="showDesk" id="desk">
<!-- rest of our pure css image -->
</div>

Trying setting showDesk to false and see what happens. You should no longer see the image.

Using these v-if to control what in our HTML we want to render will allow us to have the effect of using several “scenes”.

Next, we will add our yellow sticky note scene and it’s own Vue.js instance. We will add the code to toggle it on/off.

Copy and paste the following into your HTML below the entire desk scene:

<div class="box">
<div id="grains">
<div class="grain-1"></div>
<div class="grain-2"></div>
<div class="grain-3"></div>
<div class="grain-4"></div>
<div class="grain-5"></div>
<div class="grain-6"></div>
</div>
<div class="sticky-note-large-yellow">
<input type="text"/>
</div>
</div>

We will now see two scenes at the same time.

To adjust this, let’s make the Vue.js instance for our yellow sticky note scene and add a flag that will initially be set to false and the div with a pairing id to establish the connection.

JS

var stickyYellow = new Vue({
el: "#stickyYellow",
data: {
showStickyYellow: false
},
methods: {
  }
})

HTML

<div v-if="showStickyYellow" id="stickyYellow">
<!-- scene's pure css image -->
</div>

We should now only see our first scene, the complete developer desk.

Cool! Now, we let’s have it so when we click on the yellow sticky note in our first scene that it goes to the yellow sticky note scene.

To do that, we have to add an event handler in our first scene and a corresponding function that will do the magic:

HTML

<div id="sticky-notes">
<div class="sticky-note-1">
<div class="sticky-text">
</div>
<div class="bottom-strip-1">
</div>
</div>
<div @click="processSticky(2)" class="sticky-note-2">
<div class="sticky-text">
</div>
<div class="bottom-strip-2">
</div>
</div>
</div>

JS

//under methods in var desk
processSticky: function(selection) {


}

@click=processSticky(2) in our HTML says “Hey! If someone clicks this div, I will check for a matching function!” This is an event handler. The syntax being @[event] = “[name of function in this instance]”.

We pass a parameter of 2since processSticky will handle the clicking of our yellow and red sticky notes in our original scene and toggle the correct scene accordingly. A parameter of 2 will specify that the yellow sticky scene needs to be called. We will later add an event handler with a parameter of 1 to specify that the red sticky scene should be called.

Let’s add the logic in processSticky:

   processSticky: function(selection) {
if(selection === 1) {
//same but for red sticky scene
} else if(selection === 2){
this.showDesk = false
stickyYellow.showStickyYellow = true
}
}

First, we added an event handler to read the parameter (1 or 2) and do stuff accordingly. We passed in 2 which will cause some stuff to happen. We do two things.

  1. Toggle off the instance of our original scene which is called desk
this.showDesk = false

showDesk is the flag in our data that controls whether our first scene renders. We want to go to the yellow sticky note scene so we first change showDesk to false.

We refer to our data from our method using “this”. We use “this” because showDesk is in the data of the same instance as the current function (processSticky). Therefore, we use this.showDesk and change it to false.

2. We toggle on our yellow sticky scene by changing the flag that controls whether it renders, showStickyYellow.

stickyYellow.showStickyYellow = true

As you can see, we don’t use this to reference our data called showStickYellow. Why? We are trying to change showStickyYellow from processSticky which is in another Vue instance called stickyYellow. Therefore, we specify the Vue instance that holds the data we want to change, stickyYellow, then the data, and then change the value (true).

If we test, we can click on the yellow sticky note and go to the yellow sticky note scene.

Looks great! But… we have no way to go back other than resetting.

Let’s add that functionality and then we can take care of adding a cool feature to our sticky note scene.

So to get to our yellow sticky note scene we did the following:

  1. Added event handler to go to function
  2. Added code so function toggles off current scene and goes to yellow sticky note scene

To go back, we do the same. Except, the event handler and function will be in our stickyYellow Vue instance.

In our HTML for the yellow sticky note scene, let’s add the following event handler:

HTML

<div class="sticky-note-large-yellow">
<input @keyup.enter="processText" v-model="stickyText" type="text"/>
</div>

Now, let’s add the function called processText:

JS

var stickyYellow = new Vue({
el: "#stickyYellow",
data: {
showStickyYellow: false
},
methods: {
processText: function(){

}

}
})

In our processText, we will do the opposite of our last function. We will set showStickyYellow back to false and showDesk to true:

var stickyYellow = new Vue({
el: "#stickyYellow",
data: {
showStickyYellow: false
},
methods: {
processText: function(){
this.showStickyYellow = false
desk.showDesk = true

}
}
})

We can test by clicking the yellow sticky note. We then have a yellow sticky note, which if we click in the center, will get us into an input field.

With this input active, hit enter.

You should now be back to the first scene.

How did this happen? Our event handler was “keyup.enter”. Keyup refers to the event of a keystroke, we add the “.enter” to specify when enter is pressed.

So when enter is pressed from the input, we called processText which toggles off this scene and goes back to the original.


Sweet deal. We can toggle between scenes. However, we need to add the main functionality of our yellow sticky note scene.

We want to store whatever is in the input field so when enter is pressed, and we go back to the original scene, we can see that text.

So how do we do this? First, let’s add some data in the stickyYellow instance that is set to an empty string.

JS

data: {
showStickyYellow: false,
stickyText: ""
}

In order to store stickyText with the value of the input, we use some Vue.js. Fortunately, Vue makes this super easy. We can use v-model= “stickyText” so stickyText is also equal to whatever the input tag holds.

<div class="sticky-note-large-yellow">
<input @keyup.enter="processText" v-model="stickyText" type="text"/>
</div>

Great! Now, we need to have it show the value of stickyText is duplicated in our original scene. So, we need to add data to our desk instance that will hold the sticky text for that scene.

JS

var desk = new Vue({
el: "#desk",
data: {
showDesk: true,
stickyTextYellow: "",
screenLogo: "http://apple-wholesale-store.com/wp-content/uploads/2017/01/Apple_Logo_Solid_White-1.png"
}
  //methods
})

Next, we have the value of stickTextYellow be injected into the original scene’s yellow sticky note. We add the following:

    <div @click="processSticky(2)" class="sticky-note-2">
<div class="sticky-text">
{{stickyTextYellow}}
</div>
<div class="bottom-strip-2">
</div>
</div>

Vue allows you to easily inject data by using the syntax: {{ [data in instance] }}

Ok, we are almost set with this functionality. Next, we need to finish up the processText function in the stickyYellow instance:

methods: {
processText: function(){
desk.stickyTextYellow = this.stickyText
this.showStickyYellow = false
desk.showDesk = true
}
}

Again, we access stickyTextYellow (in desk instance) by preceding it with desk since it is not local. We set it equal to some local data, stickyText, which we access with this.

Now, the functionality should be completed.

Red Sticky Note

Everything is the exact same. I will just provide the additional code.

Desk Instance JS

var desk = new Vue({
el: "#desk",
data: {
showDesk: true,
stickyTextYellow: "",
stickyTextRed: "",
screenLogo: "http://apple-wholesale-store.com/wp-content/uploads/2017/01/Apple_Logo_Solid_White-1.png"
},
methods: {
processSticky: function(selection) {
if(selection === 1) {
this.showDesk = false
stickyRed.showStickyRed = true
}
else if(selection === 2){
this.showDesk = false
stickyYellow.showStickyYellow = true
}

}
}

Desk Instance HTML

   <div @click="processSticky(1)" class="sticky-note-1">
<div class="sticky-text">
{{stickyTextRed}}
</div>
<div class="bottom-strip-1">
</div>
</div>

Red Instance HTML

<div v-if="showStickyRed" id="stickyRed">
<div class="box">
<div id="grains">
<div class="grain-1"></div>
<div class="grain-2"></div>
<div class="grain-3"></div>
<div class="grain-4"></div>
<div class="grain-5"></div>
<div class="grain-6"></div>
</div>
<div class="sticky-note-large-red">
<input @keyup.enter="processText" v-model="stickyText" type="text"/>
</div>
</div>
</div>

Red Instance JS

var stickyRed = new Vue({
el: "#stickyRed",
data: {
showStickyRed: false,
stickyText: ""
},
methods: {
processText: function(){
desk.stickyTextRed = this.stickyText
this.showStickyRed = false
desk.showDesk = true
}
}
})
  • if you’re confused with the copy and pasting, you can check the final code

Gameboy Scene

At this point, you should get the gist of how this is working. The more you work with Vue.js, the more you will see the possibilities.

Let’s move on and add the Gameboy scene.

First, you can copy and paste the following which will be a new scene:

HTML

<div v-if="showGameboy" id="gameboy">
<div class="box">
<div id="grains">
<div class="grain-1"></div>
<div class="grain-2"></div>
<div class="grain-3"></div>
<div class="grain-4"></div>
<div class="grain-5"></div>
<div class="grain-6"></div>
</div>
<div class="gameboy-large">
<div class="gameboy-screen-back">
<div class="gameboy-dot"></div>
<div class="gameboy-screen-front">
<div class="game-container">
<img class="screen-logo" :src="screenLogo" />
</div>
</div>
</div>
<div class="dpad-container">
<div class="horizontal-dpad"></div>
<div class="vertical-dpad"></div>
</div>
<div class="button-1"></div>
<div class="button-2"></div>
<div class="start"></div>
<div class="select"></div>
</div>
</div>
</div>

Next, let’s add the shell of a Gameboy Vue instance and the showGameboy and screenLogo highlighted above:

JS

var gameboy = new Vue({
el: "#gameboy",
data: {
showGameboy: false,
screenLogo: "http://lparchive.org/Pokemon-Blue/Update%2001/1-capture_02042010_120644.png"
},
methods: {

}
})

Cool! Just like last time, let’s add the toggling both to and from this scene.

In our desk/original scene, we want to have a function that handles the toggling called on the click of the Gameboy.

Therefore, we can add to the desk HTML the following:

<div @click="processGameboy" class="gameboy">
<div class="gameboy-screen-back">
<div class="gameboy-screen-front"></div>
</div>
<div class="dpad-container">
<div class="horizontal-dpad"></div>
<div class="vertical-dpad"></div>
</div>
<div class="button-1"></div>
<div class="button-2"></div>
<div class="start"></div>
<div class="select"></div>
</div>

Now, we need to define processGameboy and add the toggling:

JS

//methods in desk instance
processGameboy: function(){
this.showDesk = false
gameboy.showGameboy = true

}

So on the click of the Gameboy in the original scene, we call processGameboy which turns off showDesk and turns on showGameboy. When we test, clicking the Gameboy will take us to the Gameboy scene.

Now, we need to add a function in the Gameboy instance, and an event handler, so we can go back to the original scene.

We will add the event handler on the click on the circular buttons:

HTML (Gameboy Scene)

<div @click="backToDesk" class="button-1"></div>
<div @click="backToDesk" class="button-2"></div>

Now, let’s add the function backToDesk in the Gameboy instance:

    backToDesk: function(){
this.showGameboy = false
desk.showDesk = true
}

We can now go to and from the Gameboy scene.

Next, let’s add the major functionality for this scene.

We want to have an image of a game and a red dot both appear on the click of the bottom buttons.

We will need to add data for a flag to control the appearance of these things and an URL for the SRC of the game image (much like the Apple logo).

JS

data: {
showGameboy: false,
on: false,
screenLogo: "
http://lparchive.org/Pokemon-Blue/Update%2001/1-capture_02042010_120644.png"
}

Next, let’s add the HTML so our red dot and image on render when on is true. We also will add v-bind:src= “screenLogo”.

HTML

    <div class="gameboy-screen-back">
<div v-if="on" class="gameboy-dot"></div>
<div class="gameboy-screen-front">
<div v-if="on" class="game-container">
<img class="screen-logo" :src="screenLogo" />
</div>
</div>
</div>

Lastly, we add a new function in the Gameboy instance to handle the changing of “on” from false to true on the click of the bottom buttons and the according event handlers:

JS

 methods: {
startGameboy: function(){
this.on = true
},

backToDesk: function(){
this.showGameboy = false
desk.showDesk = true
}
}

HTML

<div @click="backToDesk" class="button-1"></div>
<div @click="backToDesk" class="button-2"></div>
<div @click="startGameboy" class="start"></div>
<div @click="startGameboy" class="select"></div>

We should see the functionality working.

Laptop/Computer Scene

Our finally scene! This will be pretty basic, more on that later.

For now, copy and paste the following in your HTML as a new scene:

<div v-if="showComputer" id="computer">
<div class="box">
<div id="grains">
<div class="grain-1"></div>
<div class="grain-2"></div>
<div class="grain-3"></div>
<div class="grain-4"></div>
<div class="grain-5"></div>
<div class="grain-6"></div>
</div>
<div class="computer-container-large">
<div class="pen">
<div class="cap"></div>
<div class="end"></div>
</div>
<div class="screen">
<div class="logo-container">
<img class="screen-logo" :src="screenLogo" />
</div>
</div>
<div class="bottom-computer">
<div class="keyboard-container">
<div id = "keyboard-row-1">
<div class="top-bar-1">
</div>
<div class="top-bar-2">
</div>
<div class="top-bar-3">
</div>
<div class="top-bar-4">
</div>
<div class="top-bar-5">
</div>
<div class="top-bar-6">
</div>
<div class="top-bar-7">
</div>
<div class="top-bar-8">
</div>
</div>
<div id = "keyboard-row-2">
<div class="mid-bar-1">
</div>
<div class="mid-bar-2">
</div>
<div class="mid-bar-3">
</div>
<div class="mid-bar-4">
</div>
<div class="mid-bar-5">
</div>
<div class="mid-bar-6">
</div>
<div class="mid-bar-7">
</div>
<div class="mid-bar-8">
</div>
</div>

<div id = "keyboard-row-3">
<div class="bottom-bar-1">
</div>
<div class="bottom-bar-2">
</div>
<div class="bottom-bar-3">
</div>
<div class="bottom-bar-4">
</div>
<div class="bottom-bar-5">
</div>
<div class="bottom-bar-6">
</div>
<div class="bottom-bar-7">
</div>
<div class="bottom-bar-8">
</div>
</div>
</div>
<div class="trackpad"></div>
</div>
<div class="mouse-large">
<div class="tracker"></div>
</div>
</div>
</div>
</div>

Now, we can add the shell of a new Vue instance and the showComputer and screenLogo which I highlighted above:

JS

var computer = new Vue({
el: "#computer",
data: {
showComputer: false,
screenLogo: "http://apple-wholesale-store.com/wp-content/uploads/2017/01/Apple_Logo_Solid_White-1.png"
},
methods: {
 }
})

Cool! Now, let’s wrap things up by and the toggling both to and from this scene.

Try to do this on your own since we have two examples under our belt. We should arrive at this scene on the click of the computer from the first scene. We can exit this scene by clicking the mouse.

Here is what you should have:

Desk Instance Methods

processComputer: function(){
this.showDesk = false
computer.showComputer = true
}

Desk Scene HTML

<div @click="processComputer" class="computer-container">
<div class="pen">
<div class="cap"></div>
<div class="end"></div>
</div>
<!-- .... -->

Computer Instance JS Methods

backToDesk: function(){
this.showComputer = false
desk.showDesk = true
}

Computer Scene HTML

<div @click="backToDesk" class="mouse-large">
<div class="tracker"></div>
</div>

Like before, we have event handlers and functions that toggle the scenes.

Final Code/Demo: http://codepen.io/mikemang/live/931b37207a9527f069c9d2492a92f153

We will not be adding any major functionality for this scene…we are now done! The reason being that my original pen, which was the inspiration for this post, mimicked a loading screen of a Macbook. This is far too complex to cram into this blog post, which brings me to my next point.


Future Work

While I tried my best to be as detailed as possible and not make any assumptions, it’s difficult to crunch the basics of Vue.js into a blog format. However, I have recently launched a new video course called Power Up With Pure CSS Images & Vue.js to Make Fun Apps. In this video course, I cover the basics of the Vue.js framework and assign homework and projects to really make everything click. I also provide exclusive access to a Facebook group and an email challenge called “Vue.js Weekly Apps”.

I put a ton of time and effort in sharing what I have learned, specifically, my journey to being a frontend developer with a heavy emphasis on design. If you’re interested in becoming a Coding Artist, this course is the perfect fit.


All feedback appreciated.

Cheers,
Mike Mangialardi