Making a Basic Site with Zurb Foundations 6 - #2 Project Setup

okay so let's get started so if you've downloaded the Foundation's file you're gonna have everything in there and if you have sublime or some other text editor a nice way to work is if you drag this over overtop of the sublime text and you get this nice file tree right here which is a nice way to work and so if we look at index we get a bunch of stuff and if we look at what it has it's basically giving us a demonstration of of what it can do which is nice but for us we don't want in and if you wanted to you could sort of go in here and sort of see how it works but let's just delete everything for now Soraa start just above the the scripts it's tempting just to do stuff without explaining it so I need to make sure I explain what I'm doing just above the scripts tag here you just grab it all and just below the body and highlight all that delete it and we got a clean file so that's great so save reload we got nothing and that's perfect that's the way it should be so let's take a look at our file structure here if we go into our CSS we have a few files we have our foundations da CSS and this is what they give us this is all of the CSS they've written in it's this massive file it's huge and if you're overwhelmed that's totally fine because everybody's like this it's a lot of stuff and then if we go the foundation's got min this is the exact same thing as this file except it is minified which means it's all all those unnecessary spaces are taken out and it's just yeah made as small as possible so it's faster to load no human being would ever read this this is not for any any of us this is just for a computer is fine to read stuff like this but not not no one would ever work in this this is just kind of something you would do at the very end of a project anyways and then we have an app CSS it is empty and this is assumed to be where we would write our own custom CSS and so if you look at our index you'll notice we have foundation CSS and then right after that we have Aptos CSS and this is an assumption that is being made by serb meaning they are assuming that we are going to want to overwrite their styles with our own styles in Aptos CSS and so if you're new to CSS a general one sort of way that it works is if I was to to make a roll and call this red and I call the h1 tag red and then later on so there's a bunch of code and then later on we write it again we call it blue this is not going to error out there's there's no error it's going to be made that it's basically just going to override overwrite this so it's not going to be red it can be blue it's going to assume whatever is at the whatever comes last is is what it's going to be now there's a lot more rules and CSS as to how did how to determine which rule wins but for now one of the main rules is whatever comes lower in the file gets priority and so blue wins now this is good this is a we can take advantage of it and we and serbs assumes you will take advantage of it so we have a foundation dot CSS and then we have our app dot CSS right in our index so this is called first then this is called and so what if we wanted to edit one of the CSS styles they define what you would not do is you would not go into here find what you want to edit and then change it that is not what you do I'm just to try to find a example here should have booked marked a spot here okay button right here perfect so we make a button they have styles sort of made for us already but say we wanted it a little bit different we wanted the padding to be 20 pixels instead you would not edit it in this file that would be you could it would work but it's really bad practice and nobody does it what the what we do is we just leave this file as it is and instead of changing it here we will write a rule in here so that was the button tag that they styled instead of going into their CSS we would write our own and now it's 20 pixels so this is great for a few reasons first of all it's organized right all of our styles are in one spot we don't need to hunt for this changes we made in someone else's file it's all right here and second of all it's just well that's one of the main reasons organization wise but you another reason maybe they might update the foundations CSS styles but it wouldn't matter because we've defined the ones we care about in our own file right here and so in foundations they had button padding you know zero this is not how you write CSS from just make an example here now we've written 20 because this is lower in the file like this comes after this it's going to be 20 and so that is great that means that we can read our own CSS and it will automatically overwrite the CSS that was already given to us by foundations so what happens is we take advantage of this huge file who wants to write all this we take advantage of this huge file and then we make our edits here and there where we where we need to and it's great so this is you know the reason why people use foundations you get all of this code right at the beginning you don't have to write this it's all given to you and you can use what you want and you can edit what you want and it's just a really nice way to work now if we go to JavaScript sorry at the image file we don't got anything in there the JavaScript file we're not going to be writing any JavaScript in this series but it's a similar sort of thing so they have foundations which is there big launch ava's script file they have a foundations min which is just the same thing minified then they have an app javascript file which is the assumed place that we're going to write our custom javascript so if you look at the index it's the same sort of thing so we have foundations here and then we have app dodge is that comes right after it and so they're assuming that we're going to take advantage of their code and write our own on top of it and so that's the idea with foundations we're going to write on top we're going to stand on the shoulders of giants that's basically where it is we have a vendor file which is just a bunch of code that foundations takes you advantage of to write their own foundations dodge yes and it's something we're not going to look at in detail in this series so there we go now one quick thing before we get started on a project a really important thing to do when you code is to make comments and the reason why is because you want your code to be at code to be as readable as possible so for example no one wants to read this right it's it's fine for a machine but it's totally impossible for human beings you don't write code like that we want code that looks like this and you see the comments and they explain stuff and so cerb takes a bit look how much comments there is in relation to how much code there is there's a lot of comments and that's to make it easier for other human beings and maybe the future you and you'll hear people talk about that the future you means if you come back to this file or this project in a month you want to be able to just use it and work on it and understand it very quickly and so if you comment you're going to help yourself out so how do you comment well depending on your text editor I think they're all the same but if you do command slash the question mark key you will automatically get a comment in whichever language you're doing so in HTML that's what a comment looks like and I'm going to make titles for each of the sections of our of our project so I'm going to make desktop navigation and I'm just going to copy and paste the rest of them I'm going to do that a lot in this series just to save time so we got titles for each of our sections and that's great if we go over to our CSS we're going to make a similar kind of thing and so in CSS I make my titles like super big super obvious and in the CSS you usually do your general global Styles first and then you get more specific as you go down so I'm just going to copy and paste some more titles now this is subjective just make your titles however you want them to be they don't have to look like this like a in CSS a comment looks like that so I could sometimes I make a comment like with like that and it's completely subjective just whatever mood you're in so if this is too bold for you you can do something like that but it really doesn't matter the point is we have sections we're sectioning off our code so that when we write our code it's really well organized and yeah so perfect so we are ready to go let's get started on our navigation

Channel: Gary Jennings

Views: 44,949

Rating: 4.7235022 out of 5

Keywords: ZURB (Business Operation), Web Design (Interest), Foundations 6, CSS

Id: WlqTTBul7ik

Length: 10min 47sec (647 seconds)

Published: Thu Dec 03 2015