4.1 Build Your Basic Code Shell

Hello and welcome back to responsive web design revisited. In this lesson you'll be creating the basic code shell that your project will be based on. Okay now the first thing that I want you to start with is just creating a new fold, a new folder to hold your project. Now were going to go in to that and we're going to begin by just creating. An index.html file. And the next thing we want are a couple of folders. We want a css folder, an images folder, and. A JavaScript folder. Now, there are a couple of pre-existing files that I'm gonna want you to drop into these folders straight away, and I'll provide links for where you can download each of these. Now, the first one is normalize.css. And this is a file that will. Make some of the basic behaviors between one browser and the next all consistent. While you're inside your CSS folder, go ahead and create a CSS file and name is style.css. Alright, next stop, into the images folder. I have an image named wide image. I'm just going to drop that in there. Now, all this is it's a public domain free image that's just quite wide. And you can use this to make sure that your basic image responsive functionality is working. And next up in the JavaScript folder, we want to add jQuery, because we'll be using it as a basis for some of our responsive functionality, we want,. Modernizer, so that we can make some of the older browsers out there behave a bit better. There are some browsers that are still being used that don't support media queries, and media queries are critical for responsive functionality. And then finally we're just going to create a custom JavaScript file. And we're gonna call it rwd.js. Okay, so now we've got our basic structure prepared. There's just a couple things that we need to do to get our development environment together. Now we're gonna start by. Having a look at Sublime Text. Now, if you don't already have Sublime Text installed, this is a free download. The trial is infinite, so you can use it as long as you need to before you eventually purchase it. So go ahead and grab yourself a copy of Sublime Text 3. And the next thing you're going to need is Sublime Text Package manager. So if you don't have that head to this URL, I'll provide a link in the information below this video and go ahead and install Sublime Text Package Control. And this will let you add basically extensions into sublime text. And the reason we are putting this in place is so that you can install this package, called REM PX. And what this does, it allows you to highlight any pixel-based value that's in your CSS, and automatically convert it into a Rem value. So, let me show you how to install this package. So, I have sublime text here. Head up to some sublime text, this is on Mac. It'll be much the same on Windows so you should be able to follow you knows. Go to Package Control. Click install packages. It'll show a little display down here while it's loading up the latest repositories. And then just type in REM. And that will bring up the one that we want. Now click that, and it will install for you. Just give it a second. All right so that has been successfully installed. Now I'll just show you how it works. If we grab the blank CSS file that we just created. Now, let's just enter a test class. Now if I am to type, width 40 pixels. Now, for reasons that we've already covered, you don't wanna use straight pixel values. You wanna use ram values, so all you need to do is highlight the text, press Ctrl or Cmd, and then Shift. R for rem. And there you go. That's automatically converted, that value of 40 pixels into 2.5 rem. And that's how you're gonna be going though the process of making your whole layout rem based. Okay. Next up, let's add some basic HTML. And metatags to our index.html file. In another package that I recommend in the link for Sublime is Emmet. And Emmet will allow you to just add a small amount of code, hit Tab, and then have that expand into several different. Often used HTML snippets. Now, one of the things that Emmet can do is this. If I just type an exclamation mark and then I press tab, there's my whole basic document structure for my HTML. So just whack in a title. All right, now, the first thing that we wanna do to make sure that our site behaves responsively is to add this meta viewport tag. Now, what this does is it makes sure that the. Way the browser zooms is how you expect it to. Basically, if you don't put this view port tag into your HTML, none of the responsive functionality that you build will work in the way that you think it will. All right, so next up, we want to include some of the CSS that we looked at just a moment ago. Now, we wanna make sure that we're linking in our normalized CSS, and our own custom style sheet, and then next up, we also want to load in Modernizr and J Query, and then finally. We also want to add, our own custom JavaScript, which we will be filling out in just a moment. And then to wrap things up. We also want a little bit of placeholder content, just so that we can test the basic functionality of our site. So, here, we've got a wrap class, and we'll be applying our foundational level of responsive functionality to this class. We've got some typography we can test against, so we've got all of our six heading tags and some paragraph tags. We're loading in our wide image, so we can test and make sure that that is being resized properly. And we have a video from YouTube added in as an iframe. And what we're gonna be adding to our rwd JavaScript file is a little bit of code that will also enable. This YouTube video to resize correctly with the, with the viewpoint. And that's all we need to get started with our html, so we'll save that. Now, the next thing that we need is a way to preview how this site is actually looking. And to do that, we're gonna use a program called Prepros. Now Prepros is free and I'll include a link for where you can grab a copy. And we're gonna use this so we have live reload. Now that means that whenever we make a change to our CSS and save it. This will automatically update our browser preview, and we can have a preview open in Chrome, Firefox, any other browser, and they will all update. It'll also let you simultaneously set a test on mobile devices. Any mobile devices on the same network, you'll be able to test your site through this application. So we just grab the folder and drop it on to Prepros. And now we can right click the project name. Copy the preview URL and paste that into our browser. And here is our base HTML. And obviously,. Its missing some CSS, so lets go ahead and add some now. Okay so, rather than you having to watch me go through and type all of the CSS out that we'll be using,. I'll just paste it all in and then we'll run through what we've got happening. So, this is our basic code shell CSS. First up, we're using box-sizing, border-box to make it easier for us to set padding and margin amounts without throwing out our layer. Next up we have an optional minimum width. Now, you can make a call on whether you want to have a minimum width that your site can collapse down to. I like to incorporate a minimum width because I feel that there is a width below which, content becomes illegible. This is RAM based, not pixel based. So this just makes sure you don't ever end up with a layout where you've got, you know, for example, one word stacked on top of another word, stacked on top of another word. It makes sure that you have a minimum amount of legibility in your content. Next up, we've set the base font size in rim values. Now this is based off our style tiles. And that's what we had to get our style tiles together before we went ahead with this code. So that has set the regular font size. To what we worked with there. Now notice that I haven't set this font size against the html element and that's because rem units work off the font size that is set on the html element. So, if I were to change the value of the font size. And the HTML element. I would be taking that control away from the user that we talked about earlier and I would throw out the rest of my layout. So if you want to change how your regular takes looks without upsetting your rem values in your designs, make sure that any. Tweaks to that font size are set against the body tag, not the HTML tag. Next up we have our image basic responsive functionality. Now, this makes sure that no matter how wide an image is, it never goes any wider than 100% of the element it's contained within. And you'll see that working in just a moment. Next up we have some basic link coding, styling. Almost nobody. In this case we are just removing the underlines. As is fairly common practice. Following that, we have some basic line height, font size and margin settings for all of our headings. And then we just have a couple of utility classes. So this is a clear fixed class, so we can apply that to any element that's going to have floated. Objects inside it, so make sure that we clear underneath those floats. And we have a hidden class that we'll be using later on to hide some things that need to be in the HTML but don't need to be seen on the page. And then lastly, we have our wrap class. And this little class here is what gives us the foundation of our responsive functionality. What it does, is it says to always make the element that this class is applied to 100% width. However,. That should only be to a maximum of 75 rem. So a wrapper will never get any wider than 75 rem, which prevents it from just occupying the whole screen on a widescreen monitor, but in any display where the amount of space is less than 75 rem of width then it will fill up to 100% of that available space. Okay, let's save that. And then we'll have a look at our updated site. Right, so we have our topography settings in place. We have our regular font sized at the size that we wanted. I'm recording at a width of 1280, so I'll just zoom this down so you can see how this layout would look on a widescreen monitor. Just show you the effect of the responsiveness a bit more clearly. Okay. So, you can see that when the viewport gets smaller, that's already got the basics of its responsive flexibility in there. And you can also see that the image is scaling as we want it to. Now the last thing left to do is to handle this video. At the moment, that's not scaling, and that's where our RWD JavaScript file is gonna come into play. So we'll grab our currently empty JavaScript file. And we'll add some code into that. Now I won't go too heavily into what this JavaScript does, so don't want to get too off topic, but what we have going on here is a script that watches to see when the window is resized. Or to see if the front settings for the browser are resized. Now if either of those things happens, it will have a look at the I frame and it will update it's height and width so that it fits properly inside whatever element it's contained in. So we'll save that. And now when we head back to our site, now when we crunch it down, there you go, it's scaling and it's maintaining its aspect ratio. And that's it. That's everything you need for the essential foundation of your responsive web design projects. In the next lesson, you'll learn how to start putting your content elements into this foundation. They'll start out being unstyled, so we can focus purely on layout control and topography, and getting that responsive functionality in place. I'll see you in the next lesson.