Foundation Framework Crash Course

all right welcome to another web development crash course by traversing media in this course we're going to be looking at the foundation front-end framework also called ZURB foundation now keep in mind this is a course for people just learning foundation so I'm going to keep it simple and we're going to do things the easy way not necessarily the best and most convenient way for advanced developers so this tutorial will be very similar to my bootstrap beginner crash course the slides are going to be similar and we'll be building a cheat sheet just like we did in that video the goal is to get you familiar with the syntax of foundation and to give you something that you can use as a reference for your future projects alright so what exactly is foundation or ZURB foundation it's an advanced responsive front-end framework so front-end meaning it works with HTML CSS and JavaScript on the client side ok that's nothing to do with the server part of a website or application it's responsive and it can be used for all devices and screen sizes it's used for building website front ends as well as user interfaces for web and mobile applications so things like menus buttons lists and so on foundation uses a mobile first design which means it was created with smaller screen sizes in mind first and then tweaked for larger screen sizes and Twitter bootstrap has the same design pattern all right speaking of bootstrap foundation is very similar they essentially do the same thing in different ways and foundation is the second most popular front-end framework for websites and new eyes alright so let's take a look at why someone would want to use foundation and this is extremely similar to the list that we had in the bootstrap video because they're essentially they essentially have the same advantages all right so it gives you faster user interface and user experience development you don't need to create all of your HTML and CSS classes and styling from scratch if you want a style button just pop in the class name and obviously you may want to customize it but it gives you a really good starting point work with it gives you smarter and cleaner code so the markup is very semantic and it uses all the appropriate naming conventions and so forth things are laid out very nicely so foundation is mobile first and responsive so you can use it for mobile websites as well as mobile applications as well as desktop screens laptops it's optimized for all of these screen sizes so consistency and convenience your code is consistent because it follows a set of semantic guidelines it's obviously convenient for reasons I just went over it's also a huge advantage for when you're working with multiple developers if they know foundation they'll already understand your class names etc and if they don't they can just refer to the documentation all right it's also very customizable you can overwrite any of the default styling I think it was built to be a bit more customizable than bootstrap was so speaking of bootstrap let's take a look at some of the differences now I'm not going to go into detail that many of you probably want me to on this I'm thinking about making a video that will really compare the two looking at the syntax side-by-side I'm not going to go deep into it now all right so first thing I'm going to say is that in my opinion neither one is better it's all about preference and I know from my experience with my 2017 web development guide that many of you have very strong opinions and can take certain things to heart even with that said I personally don't see one as better than the other overall maybe in certain areas but not overall all right so bootstrap is definitely more popular so naturally it has more support and reference available more people know it and you can get help a little easier in my opinion bootstrap has an easier syntax in some areas class names and so forth now that may be a good thing but on the other hand I think foundation has more for advanced programmers so the grid system is a more in-depth and robust it's a bit more modular it's consistent with SAS while bootstrap focuses more and less although that's not true with bootstrap for for me personally I think that bootstrap is easier to work with and is fantastic to get something up and running really quickly the reason I use it all the time in my videos is because we're focusing on a technology like angular or react or PHP and I want it I don't want it to look horrible so bootstrap is great for doing that setting up a UI really quickly however foundation is more customizable if you want to focus on the design as a much flatter look by default so the second someone sees it they don't know it's a foundation website unlike with bootstrap most designers and developers can spot a default bootstrap style from a mile away so that's my personal opinion on the two frameworks and of course you feel free to disagree so installing boots off sorry foundation there's a million ways to set it up just like with bootstrap we're going to go with a simple method of downloading and including the CSS file it's not the most advanced and efficient way of doing things but again this is a beginner course you could also use a CDN or content delivery network which is just pointing to a remote file I would only suggest this for prototyping and development and never in production foundation also has a cool little command-line tool or command-line interface called the foundation CLI that you can use to set up a boilerplate and do other things and you can install this with NPM or gem let's see package managers create of course you can use NPM Bower which is a client-side package manager composer Nugent nugget I've actually never used that but of course you can use those as well so what we'll cover in this mini-course foundation for sites okay so they have foundation for sites they also have foundation for apps which focuses more on advanced stuff form command-line interface so we're going to slowly focus on the HTML and CSS syntax so class names etc there's also foundation for email which focuses on HTML email templates which is pretty cool so installation and setup we're going to get foundation set up and installed obviously get set up to create our cheat sheet so HTML CSS components we're going to look at things like typography UI elements like buttons and alerts helper classes and so on all right and also the grid system we'll look at the classes that we need for our 12 column grid system and we're going to create any foundation cheat sheet that you can use as a reference for future projects alright and really quickly guys I do have a 10 project course by onyx on foundation if you like this technology I would suggest it we build things like a simple business website photography site project management UI ecommerce theme and more so we do use foundation five not six but 98% of the info is still relevant all right so enough with these slides let's go ahead and jump into some code all right guys we're going to go ahead and get started on our foundation cheat sheet now I have foundations err comm open that's the official site for Foundation and if we go to Docs and then sites Doc's that's pretty much going to give us a rundown of all of the components all of the styles and classes and everything that's available for foundation for websites all right this is a really good resource just does get bootstrap is for Twitter bootstrap you can see we have resources for the grid for forms for the JavaScript widgets everything alright so we may reference this from time to time now what I have is I have a folder on my desktop called foundation underscore sandbox with an index.htm I'll file so go ahead and create that and all I have in it is this right now now I'm using Adam as my editor and I'm using the live server if you're using Adam you can go to see packages live server I can't remember if I installed I think I did install this as a separate plug-in so you'll have to do that and then I started it on port 4000 so if I go ahead and I edit this and say world and we'll save go over to the browser you'll see that that automatically reloads all right now try and bear with my typing I'm using a new keyboard it's actually supposed to be a silent keyboard some of you guys complained about the keystrokes so let me know if that if that's a positive change I actually had a comment saying that they liked hearing the keystrokes so let me know what what you guys feel about that if I should keep using this silent keyboard or not all right so first thing we want to do is download foundation so I'm going to go back to the website here and let's go to getting started and see actually they change this around a little bit I think we actually have to go to sites Docs and then install Foundation for sites and this gives you all the different options it shows you how to install the CLI tool if you want but we're not going to get we're not going to do that we're going to stick to the easy stuff and we're going to go down to CSS download click that button and then you have a few different options you have the complete complete foundation the essential you can also customize if we went to that you can see we could pick and choose different classes and so on but we're not going to do that we're just going to do the download everything and that will give us a zip file ok we'll go ahead and open that up and see we have a CSS J s and an index.html file alright so I'm going to bring all of that over all right and I'm even going to overwrite the index.html that I have all right so now you'll see that that will update to this now this is kind of a boilerplate that they give us I want to start from scratch so what I'm going to do is in that index.html file I'm going to get rid of everything that's in the body okay everything that's in the body aside from those script tags at the bottom so we'll delete all that and we'll start from here and I'll go through this now all right let's save that okay so now we have an empty page so we have our doctype we have our HTML tag with the lang direction left to right head our meta tags of the character set the http-equiv meta tag the name the viewport which we're setting to the device with at an initial scale of 1.0 all right so just standard HTML head stuff for the title here let's go ahead and change that we'll change it to foundation sandbox you know what's weird about this keyboard is that all the keys are silent except for space and enter which is kind of weird this is the keys this is space it's weird okay so anyway you can see work including CSS / foundation CSS and apps CSS all right now let's take a look in the CSS folder so foundation CSS is what we're including so we don't actually need the minified version unless you want to change and use that but I'm going to delete that all right and then app CSS is just a blank CSS file for your custom styles all right so that's what that is now in the jas folder we have apt js' which is just basically a blank I has this initializer but this is basically a blank J's file all right then we have our foundation j/s file which is all the JavaScript stuff that's being included right here we also have the minified version which we don't need so I'm going to delete that and jQuery so jQuery is a dependency for a fun day Jaso it includes that as well and then there's what input here this is for you certain events and we don't really need to we don't need this we're not even going to really deal with JavaScript at all this is purely HTML and CSS all right so let's jump in and get started I don't want this video to be too long all right now I'm going to kind of follow the same guideline that I did with the bootstrap video we're going to start with typography with headings paragraphs very simple things will move onto buttons and certain CSS widgets and then the top bar which is kind of like the nav bar so let's get started now with typography make sure you make this caps so I'm going to kind of try to keep this clean and comment it out for you guys because I want you guys to be able to use this as a reference for when you're building foundation you eyes and website so you can go back and look at it all right now with boots I'm going to do a lot of comparison with bootstrap because I'm sure a lot of you already know bootstrap and I think it'll make things easier now in bootstrap we have a container class to push everything into the middle you know set it the margin to Auto and so on in foundation we use the row class okay there is no container class so let's go ahead and do that and let's just say test okay you'll go over and you can see that now that's pushed over and let me just make this so that we can actually see it at the same time I want to keep all the coding view I guess that that'll be good for now okay so we have our row class now let's go ahead and put in a heading okay so let's put an h1 and we'll save that and it gives us a heading okay it has some styling to it we can put a small tag in here and let's say this would be the secondary text okay so looks like that now we can obviously do this for any size heading put an h2 we'll see what those look like okay we're not putting any special classes in here this is just how it looks naturally without any extra classes we can also use a sub header class so for this h2 let's give it a class of sub header and you can see it just kind of makes it a little lighter alright so paragraphs so throw in a paragraph here and see I'm just going to put some sample text in here just some lorem ipsum lips kind of it's kind of a lot I want that much text let's go ahead and get rid of that all right so I just want to make sure everything's in view for you guys so let's save that okay so that's what a power graph looks like naturally if we put some strong tags in here okay see just makes it bold no big surprise there what else we could put em tags okay so you can see that that makes that italic there now for links let's go ahead and put a link in wrap this save that you can see that the link gives it a kind of a light blue color matches the rest of the theme the default theme all right now there's there's not as many options with paragraph styling as there is with bootstrap there is a lead class we can use so copy this paragraph and let's go ahead and give this a class of lead okay now you can see that that is bigger okay it kind of just emphasizes it makes it bigger there's also a stat class so if we go down here and put in a paragraph and let's say server uptime this would be for like a hosting company and we can put in a div with a class of stat save 230 save that you can see that that makes that really big all right so I know this stuff is kind of boring but I do want to get it in here so I'm going to put in just a horizontal rule just to kind of separate this and we're going to take a look at alignment that's what I wrote that so let's say comment alignment classes okay now for this I'm actually going to just paste this in I'm going to do some copying and pasting throughout this video just to save some time but put that below the comment all right so we have a couple paragraphs here this one has a class of text left which is going to align to the last text center text right and text justified and these are actually the same classes that bootstrap uses so you can see here you can see the align text all right so really simple we also have some float classes right so this I'm actually going to put this in a call-out and I'll go over call-outs in a little bit so you'll say call out clear fix and just going to put in two buttons or linked formatted as buttons and I'll get to this don't worry about that and we're going to put in the class float:left for this one right and then copy that keep pressing the wrong key here I'm not used to this keyboard and this will be float right okay I'll save that [Music] whoops up in work because I didn't spell it right ready okay so you can see that we can now just put in float left and float right and that will float whatever element doesn't have to be a link or button it can be anything all right so now let's move on to code okay so if we want to put in for instance we want to display some HTML on the page we can do that so I'm going to just paste this part in here all right so we have our code tags and then we need to use for our angle brackets this ampersand LT for the the left side and then GT for the right side so we have a div with a class of my class inside the div hello world and then we have our closing div and then down here we have our QR keyboard commands here so we're saying press command + R or ctrl + R on windows so let's see what that looks like okay so you can see here it's basically highlight has a background of gray gives it some padding looks pretty nice and very readable alright so for block quotes I would say so I'll put in a block quote and let's say this is a block quote from foundation and then we want to put in our site okay put a name in here and save that and that's what a block quote looks like and boot in sorry foundation all right so really simple stuff let's move on to lists all right so let's see what a comment in here will say list let me just comment this stuff too I know it takes a little extra time but I want you guys to be able to understand what's going on okay so for a list I'm going to just paste this in so basically we have an unordered list here with a couple list items and then we have another unordered list so this is a nested list and I'm down here area the same thing we're just using oh L which is ordered list which will give it the number all right so let's save that and that's what it looks like okay just a standard list now if we want to remove the bullets we can use the no bullet class so let's say class no - bully okay now you can see it removes that if you want to do the nested list you'll have to add that as well okay that removes that it also removes the padding this is equivalent to list unstyled in bootstrap so next thing let's take a look at visibility classes okay I want to actually want to stay within the row all right so let's put some paragraphs in here okay notice they have they have text inside of them and I'm going to add classes to make these true okay so save it now right here we're going to add a class to hide this whatever is in this element so have a class of hide all right so if we save that it basically just completely removes it from the page okay there's no space where it where it used to be it's just completely removed so that's what high does and then we also have class invisible so if we will go ahead and save that you'll see that the text is gone but the space where it where it was contained is still there all right so that's the difference between hide and invisible now another cool thing we can do is we can actually add classes to either hide or display that the content depending on what size of screen is this paragraph here I'm going to leave just regular paragraph it says you are on a small screen or larger so that's pretty much anything with this one here it says you are on a medium screen or larger so what we can do is we can add a class of show or medium okay if we save that I remember it says you are on a medium screen or larger so it's showing right here now if I go larger you'll see it's still there if I go down small it's gone okay there's no more you are on a medium screen or larger so it'll it'll show based on if it's a large score medium screen or larger now this one he you're on a large screen or larger so this would be a class of show for large okay this one you are not on a small screen this would be actually yeah let's do this so this would be hide for small only which is kind of long but it makes sense okay this one here says you are not on a medium screen so this would be hide for medium only okay this one is you are not on a large screen so this would have the class of hide for large only and we can also go by if it's a landscape or portrait so this would be show for landscape and this would obviously be show for portrait okay so let's save that and now you'll see as I make this as I make this bigger and smaller different things show okay if you look at the bottom you are in the landscape forget to portrait put your portrait all right so it's kind of just changing as we move along so I think that's pretty cool that way that they give us those classes all right so now let's get out of the the helper classes and typography and let's move on to elements okay so let's let's do buttons okay so I'm going to just put an HR here and then we're going to say we're going to open up a new row or a new container okay let's say buttons all right so as with bootstrap we can format links buttons and inputs so let's say button and it has a class of buttons okay not BTN button so let's see what that looks like so that's a standard button has that blue color all right we can also do a link so say a href give it a class of button and say link okay we can also do input put the type of button or submit give it a value I'll give it a class all right so if we save that you see that they're all formatted the same way all right so those are buttons let's look at contextual buttons or colored buttons so let's see we'll just grab this all right so this first one here let's just add a class of success okay same as bootstrap that will give us a green button now instead of danger we have alert which will give us the red button warning will be yellow and then we also have secondary which will make it grey which is similar to default in bootstrap so let's save that and now you can see we have different colored buttons I'm just going to put a line break right here okay now we can also have a disabled button by adding the class disabled and you see when I hover over it it turns into that cross note circle thing all right now as far as sizes we can change those as well okay so let's say we want a really small button we can use tiny check that out look out small that is and put a line break here as well all right so we have tiny we have small which is a little bigger we have default which is we'll just leave with just button they have lodge let's take a look at those okay so tiny small default large we can also have expanded okay now expand it it is like button block and bootstrap it just basically goes across the whole element and we can also have expanded but also add large or small and so on alright so you'll see that's an expanded large button so quite a few choices as far as sizes and colors now what else is pretty cool is they have these holo buttons so kind of reverse now I'm just going to copy these and just put a comment here and then I'm just going to add the class holo to these okay check that out and you can see that it gives us these white buttons with a border and changes the color of the text so kind of reverses this version which is pretty cool alright so I want to keep moving along that's it for buttons now we're going to take a look at forms I'm going to open up a new row all right now with forms we actually don't have to add many classes at all to make our forms look good with bootstrap we have to add form group we have to add form control for our inputs or it looks like crap with foundation we can just kind of build a form okay so let's just put a div all right and let's do label say name and looks just two input type equals text and let's give it a placeholder okay if we take a look at that and see down here it looks pretty good all right I don't want you guys to have to keep looking at the bottom of the screen so what I'm going to do is just stick a div down here give it a class of spacer and then I'm just going to go up in the head area put style tag let's say spacer hike 500 pixels okay that way you guys don't have to just look way down at the bottom of the screen all right so back to where we were let's add another into another field here so I'm going to copy this div and this will be the email you can change the type to email we're using html5 okay then we have another text input we also have number inputs which is part of html5 so it's a number get rid of the placeholder okay if you look at that you'll see that it's formatted just like the text and we have this little arrow here we can change the number so what else text areas a message it will change this to text area which needs a closing tag as well okay so that's what a text area looks like we should probably take that email out change it to message all right now select let's do a select list paste that in and let's say gender again we don't need any class to make this look good say option and to be politically correct for you liberals out there let's say other nothing wrong with that save it and there we go we have a select list now if we want to make this multiple let's copy that div and let's say select and then we'll add in multiple which matrice an alien or something you can choose more than one alright so next thing we look at is check field sets and check boxes I'm going to put a set of check boxes in a field set all right so a field set I very rarely use field sets actually and it's going to have a legend so today a field set look just don't want that and let's put some check boxes will say input type checkbox' actually let's put that in a label all right so if we look at that you'll see that's what it looks like naturally but we can add a class of fieldset save it and then it looks like that okay which looks much nicer so we can also do upload buttons now it's usually very hard to style an upload button it doesn't work in most browsers but what we can do is let's say label and we're going to give it a four attribute of example example upload or let's say file upload okay and we're also going to give it a class of button and let's say upload file and then we'll put in our input and let's give it a type of file give it an ID file upload we're also going to give it this class of show 4sr okay and that's the same code that's in the documentation so now you can see we have a style upload file and if I click it it goes ahead opens this window to upload a file but obviously we don't have any back-end programming so it's not going to actually do anything all right but this is for the UI so next I want to look at help text for an input field so let's say let's go under here just separate these inputs okay so let's say we have a password field so we'll put a label and what's the input type password and we want some help text so we're going to put a paragraph and let's say your password must be eight characters or more okay so if we save that okay so that's just standard that's what it looks like without any special class but with this paragraph if we put the class of help text you can see that it gets smaller it it's italic and it loses the padding so that looks much better okay and also gives us this little icon here I think to that class do that okay um oh no it didn't oh that's too much stupid LastPass thing nevermind you guys don't have that all right so let's move on let's see we have a couple more things I want to do with input so let's take a look at input groups now this is used for if you want an inline button so a search form something like that where you want the button and the input to be inlined so what we'll do is say give class input group all right and then inside here we're going to have a span and let's give it a class actually we'll do that after that's just to add a special symbol but let's put an input with the class of input group input group field okay and we can give it a type let's say email now we want the button to be in line with it so we're going to actually put this in a div and we're going to give this a class of input group buttons okay and then here we'll put let's say input we'll give it a type of submit and give it a class of button and then a value of say search well not search because it's an email will say stab it alright so now you can see that we have the input and then the button is right next to it and in line with it now if we want to put a little symbol over here we can do that as well it's part of the input group so we'll say span class input group label and let's just put a little @ symbol okay actually why is that on that side oh I put the spin below the input should actually go above it all right so now it's on this side over here so you can do that so that's an input group now there's two more things that I want to show you as far as inputs and that's a switch and a slider alright and these are actually they look really good on mobile devices so let's do a switch so we'll say give class switch okay we're going to put an input with the type of switch input will give it an ID of my switch and it's actually going to have a type of check box okay and then we'll give it a name of example switch okay I think a much I think all these attributes are needed so then what we're going to do is have a label and inside actually the label we're going to give it a class of switch paddle okay switch paddle and we're going to say for my switch okay we're using my switch because that's what we gave the ID up here alright and then in that label we're going to have a span and that's going to have a class of show four si alright and this is in here I'm just going to say enabled ok let's save that and look what is that input alright so I think I did something wrong here oh I put type switch input that should be class there we go so now if I click that you'll see it has a nice little slide animation all right I think that looks pretty cool so next we have a slider now this I want to say sometime so I'm going to actually paint this in I don't like pasting copying pasting but because I want to save some time here alright so we have a div with the class of slider we have data slider as an attribute data initial start now this is where we want to slide it a start I put 0 and then it's going to end at 20 all right so as you slide it's going to go 0 through 20 we have a span with a class of slider handle data slider handle we have a role attribute of slider tab index 1 we want it to go to change 1 each each tick basically we have a span of with the class of slider fill data slider fill and then we have an input a hidden input so let's save that and there we go so each tick here is going to be one and it goes 0 through 20 all right so that's a slider and they remind me of mobile app UI Dom components iOS or Android okay so that's going to do it for forms I'm going to open up another row here and we're going to look at tables okay so I'm going to paste in a table okay so we just have a simple table of users let's go ahead and save that and notice that right away it looks good we have no classes we didn't have to add Striped in fact there is a strike class but it's it's there by default if we don't want it striped we could say class unstriped and now it removes it okay but I'm going to keep striped on okay now if we want to hover over these and have an effect we can add the class of hover okay so now you'll see that we get that lights up when we hover over we can also put in the class a stack which exactly sure oh there we go that's what it does so when it's a big screen it looks normal but when you get to a smaller screen it looks like that which is really cool actually because it's really hard to get responsive tables so that I like that alright let's see why are you doing that we can also put in a table scroll class and I believe that if you have enough fields you'll be able to scroll horizontally all right but I'm not going to change that up just know that that that's a thing all right so let's move on from tables there's actually not that much we can do as far as I know we can't use contextual classes here so for instance we can't say class success like we couldn't bootstrap and that would make that particular row green I don't see that happening all right and I didn't see that in the documentation either so that's tables let's create a new row and we're going to look at menus and I'll get to the top bar in a minute but let's just do some simple stuff so we have a ul and inside here let's put link will say link 1 copy that okay let's take a look at that just a standard list now if we go when we add class equals menu you'll see that it changes it goes in line those horizontal gives us some padding and looks pretty nice if we want an active link then we want to put on the li class active and you'll see that gives it a background padding and all that we can also add it add some text that's not a link so you may want to have for instance a title so right here we could say site title and then give this a class of menu text okay and I give this little site title well let's see what else I think that's it so if we want to make this vertical we could do that let's copy it and we could just add menu and then vertical and let's see that gives us vertical menu okay I'm going to take that site title note though although you can do that alright now we also have simple class simple we can put with it see what that does not even sure also just kind of removes all the padding and all that I guess alright now we can also use icons now which you want to use icons you actually have to include a separate file separate CSS file and some other files looks a foundation icons alright so this link here you up download the font so it's a bit zip file of foundation icons let's open that up the hell is it alright so in here we have a bunch of stuff we have the foundation icons dot CSS file and then the icons is the fonts themselves we have an SVG folder what I'm going to do is let's open up our project folder and inside CSS I'm going to create a folder called icons and we're going to bring over let's go bring over everything except that HTML file ok and then we'll go to our file here and we need to include that up here so we're going to say include CSS flash icons slash foundation - icons dot CSS and now we should be able to use icon classes so let's go back down here what I'm actually going to just paste this in okay so we have classes menu icon top is optional by default there on the left but we can move them to the top and then we're just using eye tags with the class of FI - and then whatever that icon and you can see a full list here all right so these are all the icons that you can use I prefer font awesome but if you don't want to include that extra library you can use this so let's go ahead and check that out and you can see it gives us the little icons on top all right if we remove that icon tot class puts it on puts them on the side all right so that's menu and icon now let's take a look at the top bar that the nav bar and we're going to put that up at the top so let's go up here all we've done a lot and we're going to go right under the body tag and let's say top bar and I hate to do the copy and pasting but we are kind of running out of time here so take a look we have a div with the class of top bar and then we have top bar left and top bar right okay just like in bootstrap we have navbar left and right so on this in the left we have a ul I gave you the class of drop-down menu because it does have a drop-down and then we have data drop-down menu we going to throw in there and we have a simple site title again we're using menu text for our class and then we have this li which is a link and then we have the UL which is the drop-down for it alright so that's how we do dropdowns in foundation and on this side I put a formul UL with the class of menu and then in this li I put search input a text input and then a button so let's see what that looks like we save that all right you'll see we have our drop down here and our search form over here okay so pretty simple I think it's it's easier than the bootstrap navbar all right so let's move on to some of the other UI components that are available so we're going to go back down to the bottom and I know I probably missed some comments and stuff up I'll probably shape this up a little bit before I give it to you guys to download let's see oh did I not end that all this should actually be inside the bib here all right so let's create a new row and now what I want to look out now what I want to look at now is call out and these are similar to alerts in bootstrap so we have it give the class it call out and let's say we'll do just put a paragraph we'll say this is example of a call out and take a look at that okay so there's a call out let me just put an HR here that's a standard call out now we can also add our contextual classes to these so I'm going to copy this okay so the sec this one kay let's do secondary to success warning and alert okay and you can see we have all different colors here that we can use so you'd use this for an error this for a success message and so on okay next thing I want to look at is progress bars HR here okay so we'll say give class let's see let's say success we'll make it green and progress and we're going to give it a roll attribute of progress bar okay and here we'll say give class and this is going to be progress meter and then what we do is give it a style and give it a width so we'll say with 25% okay and then inside here we'll put a paragraph and this is going to have a class this is optional text it's going to have a class of progress meter text all right and I'll just say 25% take a look at that and we have a progress bar so we can also use contextual classes here so change that to alert and you'll stay alert getting to 98% the whole facility is going to blow up so this one will say warning and I will say 75% okay take a look at that and there we go all right I'm really getting pressed for time here let's go let's add some labels actually what I'm going to do is put an HR and I'm going to paste this in okay so our labels we have spans here with the class of label and we can add our contextual classes here as well okay so those are what the labels look like we also have badges so let's put an HR okay pay season again just spans with the classes badge and we can also add these classes to that as well okay so that's what the badges look like so we also have a bread crumb which actually look really nice so to put a comment here and what we'll do what we need to do is we'll use a nav tag here give it a roll of navigation oops I want to do that tour that alright so in here we're going to do a ul and we're going to give it a class of breadcrumbs okay and then we'll put some Li let's make this a link okay so say home and let's do another link let's say post and then the current one won't be a link so we'll just say my post just take a look at that and there's what a breadcrumb looks like so I think it looks pretty nice you can also do disabled links so let's say or disabled text just give it a class disabled maybe it's a member page or something hopefully to put some text in here okay so it's what it looks like all right next thing we're going to look at is pagination okay so for pagination we're going to add a ul give it a class of pagination and let's also give it a role of navigation okay to put an li here and let's give this a class of current say one all right and then if we're on the current page then we probably want the the previous link to be disabled so it's a link class or Li class disabled say previous okay then we'll put our second link so this one actually won't have a class say - and it'll taste in a couple more three four and let's put our next so Li so this will be next now let's take a look at that alright so there's our pagination now if you want to have any lipsticks ellipses I think that's how it's pronounced we can do that as well if you want to kind of skip pages so say Li class Lipsey's that's really Lipsey's and let's just copy a couple of these and we'll say 13 and 14 so let's look at that alright so it gives us a little ellipses and then just these would probably be the end pages so they know exactly how many pages there are now obviously there's no functionality to this this is just the UI but it looks pretty nice alright so now what I want to look at is probably the most important part of any front-end framework and that's the grid system all right so we're going to open up a new row same grid okay so let's start out with just actually each grid is going to have its own row so I'm going to put the comment here so let's say we just want to main a main column and a sidebar so say div class you know all columns will have the class of columns alright and then we're going to say large eight now in bootstrap it would be call lg8 okay so the same thing alright and in here let's put an h3 will say main column and then I'll just put a paragraph with some sample text and I did that by typing in lorem tab alright someone actually just showed me how to do that I didn't even know you could do that next couple of videos ago they left it in a comment alright so that gives us an eight column gives now it's a twelve column layout just like Twitter bootstrap so the next one we want to do is four so we'll say give class columns large for okay we'll put an h3 will say sidebar and let's just copy some of this all right so let's take a look at that okay so we have our main column and our sidebar the padding is taken care of for us so that's it that's how you can create a grid now you have large medium and small so let's say that naturally when when this is small they're going to stack okay but the floats disappear and that's probably what you want but if you actually did want it to still float here we could put in small eighth and small for save it and now you'll see that they float all right you can also do it for medium so let's say medium say we want it to be six and six for medium all right so now if we're at medium you'll see now there's six column did so we get two large it goes back to eight four okay so let's say we want four three column divs go ahead and paste this in so we have a row with div class columns large three and medium three and we just have four of these save that and now we have four three column dips all right and if we even wanted to do twelve one columns we could do that as well so to paste that in so we have twelve large one medium one okay so there we go now if we want to offset let's say we want to have a twelve column but we want the content to start in the middle here then we could do that okay so whilst a div class columns so you'll say columns large 12 okay we'll just grab this okay so that gives us a 12 column and that's that's normal now let's say we want this to start over here then what we could do is we could say large offset six we want to offset it by six and now you can see it starts over here at six okay so that's how we can do offsets alright guys so we have reached the end of this crash course and we have quite a bit here that you can use as a reference now I didn't touch on everything Foundation offers especially when it comes to JavaScript widgets and so on so if you go to the site Docs a couple things that you may want to check out is let's see cards so if we look at containers with cards which is basically a header and image and a body and you can see it gives us the code here actually you know what I could take an extra five minutes and and add this stuff so let's create another row here and the file that I have for you guys to download will probably be you know I'll fix it up a little bit just paste that in card okay we'll save that and let's grab that image link okay let's check that out alright so there we go there's a car so it looks pretty nice you probably have like three or four of these in a row look cool let's see what else we have we have media objects which are really nice kind of like blog post let's see let's grab this so this would be a media object paste that in take a look and up let's grab that image link okay so that's a media object so we also have see I didn't plan for this [Music] accordions yep accordions which basically JavaScript widgets so if we grab this here paste that in okay now this let's see what this looks like okay so it gives us one according let's add another list item here we'll copy this one we'll add two more and there we go so now we have a cool little accordion widget and let's see this they all start open though I don't like that so let's remove is active from the second two and then only the first one should be open yep okay and then let's finally I just want to throw in tabs as well see tabs so tabs is this thing here I had two parts one is going to be the UL which is the actual tab links okay so that's the first part and look let's grab this this is the content okay so you just want to make sure that see so these have to match href panel one is going to match ID panel one panel two is going to match panel - all right let's take a look at that and now we have tabs all right so we're going to go ahead and start here so it's a nice little reference hopefully you guys enjoyed this if you did if you not subscribed please subscribe leave a like leave a dislike if you didn't like it and I will see you next time

Channel: Traversy Media

Views: 86,583

Keywords: foundation, zurb foundation, foundation tutorial, foundation css, foundation bootstrap

Id: DEu5xYEZx18

Length: 72min 59sec (4379 seconds)

Published: Tue Jan 17 2017