2.4 Base Code: HTML Shell and CSS Variables

Hey, welcome back to XD to code with Avocode 3. This is gonna be a really quick lesson. All we're gonna be doing is setting up the basics in our HTML file, linking in our CSS file, and bringing in the variables that we created in the last lesson in Avocode. We created a blank index file and style sheet earlier on. To fill it in really quickly, I'm gonna use a shortcut from emit. If you don't have the emit plugin installed, then I definitely recommend you get it. Because you can then just add an exclamation mark and hit the Tab key. And there you've got all of your basics. So we're just gonna give it a new title. Call it XD to code with Avocode. Now we need to link in our style sheet. So it's just style.css. And now we want to get all of our variables into our style sheet. So we'll go back into Avocode. And then down in the bottom right corner where we have our variables, you can see this little icon here that says import/export. Go ahead and hit that button, then go over to the Export tab. And then you can see that it's nicely packaged up all of our variables, that we can easily copy and paste them into our file. So we're just gonna copy to clipboard, jump back into our style sheet. Now we are gonna need to add the root element for these variables to go into. So that's :root and then we can paste everything in. At the moment, it's a bit of a mish mash. These variables aren't in order in any way at all. And it's gonna help us navigate our way around our own code if these things are categorized. So we're gonna put all the color variables up on the top. And we're gonna put them in the same order that they are in our list of swatches here. We've got site_bg_color. Site_wrapper_color, highlight_color. Actually, that should be named highlight_color_one, highlight_color_two. And then we've got our gradient variables, so the one for panel two, so that's p2_lg_s1. And then the three for our panel six gradient. So p6_rg s1 for the stop one, and then the one that ends in s2 and then the one that ends in s3. It looks like I missed one, lightest color, which should be listed before the highlight colors. Now let's get our font families in the right order. The title of the main font family. And then we'll just rearrange our spacing variables so that they increase in size as we go along. And then we'll put our arrow with variable on its own, cuz it's a little different. And then that is now all of our variables. Now let's preview what we've got so far, which is not much, but let's just check and make sure that these variables are being accessed by the browser. So I am going to use the plugin, Live Server for VS Code. If you're using Atom, then I recommend the plugin Atom Live Server instead. So to get a live preview going, all I need to do is right-click on my index file and choose open with Live Server. And it'll spin up a local host server and give you a preview in your default browser. So we haven't done anything yet, so obviously we have a blank screen. But we can open up the inspector tools, and we can see right away that on the root element, all of our variables are accessible. That's what we needed to do for this lesson, just a real quick process. In the next lesson, we're gonna finish up the preparation and basic stage of this course by establishing the basic layout and the background color of our site. So that's just gonna be this background color here and this site wrapper section of the design here. So we're going to put that together in the next lesson. I'll see you there.