Placeholder Image

字幕表 動画を再生する

  • Hi, guys.

  • Welcome back to today.

  • I'm doing a crash course on foundation.

  • Now.

  • Foundation is a CSS responsible framework that makes every website available on mobile tablet and desktop devices.

  • My name is Shadow, and I'm going to be showing you guys today how to implement this CSS sponsor framework called Foundation.

  • Now, for this tutorial I'm using, specifically, foundation Virgin six made my reserve.

  • Let's get straight into the crash course to go to Google or your browser and you're gonna type in foundation, not observe.

  • Should bring you to this website.

  • If it doesn't look like this might have been outdated.

  • So we're gonna go ahead and click download.

  • We're going to download the complete because it just gives us everything live download.

  • It should give you zip file down here.

  • Now you're gonna go to your desktop and you're gonna click.

  • You're gonna right?

  • Click Got a new older.

  • You're gonna name my name.

  • This foundation.

  • You can name it whatever you want back to your browser and go to your your foundation.

  • Download file, extract all click, browse, but a desktop.

  • The foundation Look select folder, then click extract.

  • What that does is basically makes all the files that we just downloaded it and put it into our desktop file called Foundation.

  • And we come down here and we read a little bit about it and how it works and it down here, and it shows, sites and e mails.

  • You can also do foundation for e mails.

  • But for this tutorial, we're just gonna do sites.

  • So we're gonna want to do is you're gonna go over to getting started.

  • Then you're gonna click sites, kitchen sink, and you should be in this giant on list called kitchen sink.

  • Now, kitchen sink is every element available in foundation all on one page.

  • As you see, if you scroll down, there's tons of tons of stuff you can put on to it.

  • We're gonna go through all of it we're gonna want to do now is gonna want to go down to your editor.

  • I'm using Adam in this example, and you're gonna want to click open a project, and we're gonna select on foundation.

  • It should bring us.

  • Okay, So what we get is this large interest a mile file pretty long.

  • So what we're gonna want to do is we're gonna want to leave everything out of the body tags.

  • Keep the body tax.

  • Really?

  • Everything inside of the body tags except for the job.

  • A script.

  • And you should be left with this.

  • Yes.

  • What we want to go in to do next is we're going to build some simple form validation inside of foundation.

  • Now we're gonna just start off with some form tax.

  • So we're gonna like that.

  • Right?

  • Form just like that.

  • We're gonna put some JavaScript data values in here, So we're gonna put data cache, abide and no validate.

  • We're gonna put a dip inside of here.

  • We're gonna give it a class called grid X in grid cash margin Nash eggs.

  • Now inside of that dip, we're gonna put another day if we're just gonna give it a class of cell going to make another day If we're gonna give it a class called alert.

  • Where?

  • All out.

  • Gonna give it a style display?

  • None.

  • We're gonna go back and we're gonna add some Java script values data provide cash.

  • You alert case the next you're gonna make another def and you're gonna call it You're gonna get the class of grid X and grid margin X and it's the same thing that's just went up here.

  • It's just how foundation sorts out its Ah, there dibs.

  • You're gonna put another dip in here.

  • You're gonna give it a classical itself.

  • Small dash 12 we're going to do next is inside of this day.

  • If you're gonna put a label and you're gonna put number number wire now, you're gonna write in input tag and set the type to text or keep it as text and then put a place holder of 1234 Since we are validating numbers and we want the user to know what kind of input the put and then you're gonna put something called area Dash described this ride.

  • Uh, I said equal and inside these are you're gonna put example.

  • Oh, text.

  • Make sure you capitalize the last two Campbell case.

  • Next, you're gonna put a required pattern you're gonna take required, and then you put a space and then pattern you're gonna set a equal to number, and then you could just take out this name and value.

  • It's not needed inside of there.

  • Next, you're gonna make a span, and you're gonna give it a class of form dash air And inside of this you could basically put whatever you want for when the user misspells something or something.

  • So you can say you know you for about something on form like that.

  • So when there's an heir message, it'll just give you this.

  • This is basically the air message.

  • And after this span, make sure you close out the label.

  • And after that label, you can put a paragraph tag and give it a class of help.

  • Text.

  • So gonna put class help ash text save it, then you're gonna give it an I.

  • D.

  • Of example.

  • Oh, text to make sure you camel case lows and the next you're gonna put whatever you want.

  • However, you want to help the user.

  • So I'ma put here is oh, you fill out and then save it.

  • It's what?

  • Whatever help text you really want to put into it.

  • Okay, so next you're gonna wanna make def.

  • I'm going to give it the class the same one as the one up here.

  • You just copy it paste, save it, you're gonna put a label, and you're just gonna put password liar.

  • And then after that, you're gonna put an input and you're gonna put the type as passed word.

  • Make sure the label is outside on the very end.

  • Make sure you add an i.

  • D and said it password.

  • And you could set the place holder to whatever you want, as long as it looks like a password.

  • So, like, uh, like, let's see if this was a password, Really?

  • The same thing we did up here with the that area described by.

  • So we're just gonna copy this and paste it down here, and then we're gonna right after it required.

  • And we could take out these name and values because we don't need them.

  • And after that, we're gonna put a span and at a class to it, And in that class, we're gonna call it form hair.

  • Where you gonna put I'm required.

  • Make sure your span and label.

  • And after that, if you want, you can invent them.

  • And after the span and label, we're gonna put a paragraph tack.

  • We're gonna give it the class as help text, and then we're gonna give him the i d.

  • As example help text camel cased inside of this, we're gonna put enter a has word police.

  • Now, if you open it up in your browser the HTML file you see you get these two ah input fields in here Now, if you're the type in something other than numbers, let's say ABC and press enter is going to say, Yo, you forgot something.

  • If you go to this password area and you just press enter, it's going to say I'm required.

  • So it basically validates your form to make sure there's an input.

  • Now these air just placeholders.

  • But other than placeholders, it's pretty much empty and you press enter and it says I'm required.

  • And if you put letters inside of the numbers, it's gonna say you forgot something in your form.

  • So that's just some simple form validation for numbers and passwords.

  • You can always just change it as you see in the code.

  • It's pretty much a pattern up here.

  • We can even add a comment right here.

  • Um, you just say, Ah Bao error message flush palate right here.

  • And this is basically what validates it.

  • And then down here is the number ballot date and then after that, there's, ah, pass word a lady and basically what you can do is you can copy any of these and just change the classes and stuff.

  • You can always check the foundation website too will also tell you how to change it.

  • But these are just some simple form validation for ah, foundation.

  • Okay, so up next is the accordion menu or just accordion, and so we're just gonna have a calm it down here.

  • We're just gonna call it, and I'm gonna tap it down here.

  • So basically, what we're gonna first do is put in a new order list, and we're gonna put a class up here.

  • We're gonna call accordion, and then we're gonna put a data value called data core in inside of here.

  • We're gonna put a list item tag, and then we're gonna give it class Name, Paul.

  • Accordion item.

  • It is active.

  • And they were just gonna give it a job.

  • Script value called data poured in item.

  • After that, we're gonna put a link.

  • So we're just gonna type in a an anchor tag.

  • We're gonna give it a class.

  • We're gonna give it the class called accordion title or just gonna call this one accordion one.

  • And then after that, we're gonna put it is we're gonna give this one a class called Accordion Clinton, and then we're gonna give it a job script value called data Nash tab content.

  • And then after this, we're gonna put a paragraph tag, and we're gonna go give it a class.

  • Next, we're gonna put a paragraph tag, and we're just gonna say hello world for this one, and then we're just gonna put a link.

  • We're just gonna put link in it.

  • It's just gonna be an empty link.

  • Now we go to our website and reload.

  • We get this little handle right here, but as you see, there's only one.

  • So we're gonna go back into our code and copy and paste it so we get more Accordions.

  • So So you were back in here and we're gonna copy and paste all of this.

  • Actually, we're only gonna copy and paste what's inside of the list item.

  • We're just gonna do it three times, and at the end, you're just gonna put the closing tax from the UN ordered list.

  • And then if you go back to your code you see here, you can minimize each tab.

  • So it's like an accordion and you can open them up by going like this.

  • It's pretty cool.

  • So we were gonna customize it a little bit more.

  • So instead of this being panel one we're gonna put panel to we're gonna take out this dummy text, and we're gonna call this one panel to this one.

  • Back to panel one.

  • This one, Panel three.

  • Take out all this dummy text.

  • And now if we go back to it, we reload.

  • We get all of these where it's like this and we can customize it even more Ngeze from saving it.

  • And then we reload them.

  • See, you get all organized with its content inside of it.

  • So accordion one panel one, they're just empty links, and you could open up each one, and it gives you a new panel.

  • Now, up next are something called badges.

  • Badges are an interesting kind of, uh, element inside of foundation, so I'm just gonna show you what they are.

  • So let's just put a comment saying badges and we're gonna make a span tuck.

  • We're gonna give it a class.

  • I'm gonna call it a primary badge.

  • And inside of that, we're just gonna put the letter a as capitalized so we can view it.

  • And if you go over to your browser and you click reload, you see down here, down in the bottom left corner of your screen, you should see the letter A and tied up inside of a little circle.

  • No, we can copy this code.

  • Make another version of it instead of primary.

  • We could do something called Secondary Secondary.

  • Badge them.

  • Just put it be.

  • Go back to the page and reload.

  • You get this, You get this gray badge down here.

  • Now I've added a diff that has a margin bottom of 200 pixels.

  • Just so you guys convey you the badges easily.

  • Now, if you go down here and make another span or copy and paste it instead of primary or secondary, we're gonna do warning.

  • And then we're gonna put this one with a C.

  • Save it.

  • Go to your Web page and click.

  • Reload and you'll get a yellow one.

  • The letter see inside of it.

  • Now, if you go back to your code, make another one.

  • There's also another class called alert and Alert badge and success badge.

  • And if you reload you see you have all different colors of badges and the purpose of a badge.

  • It's kind of like when something goes successfully or some sort of warning.

  • It shows up this badge next to, like some words saying Reform did not validate and it has a red badge to it.

  • It can signify something about your form or about something you're trying to fill out.

  • You're also just great little decorations.

  • But if I zoom out too normal, you can almost barely see them.

  • And I don't know why that is.

  • I don't think it's meant for reading.

  • I think I think it's meant just for the color and for signifying that something's not correctly filled out.

  • So up next we have buttons, and, uh, we're just start off by putting a comment saying, buttons we're just button were stopped by obviously making a button.

  • We're gonna keep the type is button, but we're gonna take away the The name of a button is we don't need the name and we're gonna give it a class called button.

  • Now, if you look at your website, you reload it.

  • You see down here, you get an empty blue box.

  • That's because you have to put text inside of it.

  • So we're just gonna put button if you go back and reload.

  • You see, you have a button down here.

  • Now, I'm gonna add that padding back in here just so that we can get sequin.

  • See it clearly we reload.

  • As you see, it's down here.

  • Now you can give each button a type of class that changes the color or look of the button.

  • So, for example, if we copy this, paste it and put, um, a second or, um, success button and you reload, it gives you a blue button.

  • If we were to paste it again and say alert button with a space and reload it, you would get a red one.

  • You can also do the same for sizing so you can do tiny button and it gives you a tinier button.

  • Or you could d'oh at large button.

  • I'll give you even bigger button, and you can even do things like expanded button.

  • So if we go to the class and put expanded button reload, you see it takes up the whole with the screen.

  • You can also have a small button, too, so that's in between the tiny and large button.

  • So if you just put small button and you reload, you get this medium sized button and these are basically all the buttons.

  • Obviously, they're not linked to anything because we didn't, uh, but hyper reference into here.

  • But you can link these two different things such as exists such as a success page or, um, an AARP age.

  • Take up the whole bottom of, ah, uh, portfolio object.

  • Or you could just have different sizing, buttons and colors.

  • They'll have automatic hover.

  • And whenever it's like a green button or black button will turn to white text or black Tex Next, we're gonna do something called call outs, No call.

  • Its are like little messages that show up on your screen.

  • They're not really messages.

  • They're more like sections.

  • So I'm gonna show you what they are and how they're useful.

  • Now we're gonna, um, just put a comment like always, and we're gonna call this call out and then just indented here, we're gonna make a div.

  • We're gonna have the class as call out.

  • We're gonna put in a TSH five.

  • We're just going to say hello world, and then we're gonna put a paragraph tag orders and say, This is a hole out.

  • We're gonna save it.

  • And, you know, just for fun were to put a link.

  • We're just going to say link.

  • Now, if we go to our browser, you see, down here, we have a call up.

  • It's just a simple little section that we have.

  • It says, hello, world.

  • This is a call out and link, which does nothing.

  • And but what we can do with it is we can change it.

  • So let's copy this and we're gonna set.

  • Um, actually, this copy the you call out part, not the in the margin we're gonna do.

  • Call out Warning, and it gives us this yellow call out.

  • Now, we can do this for success and alert to.

  • So if we do, pull out Yes, and all out alert and we reload.

  • You get the green one in the red one, which you're just basically, um, like like the buttons and the badges.

  • Success and warning.

  • Now, there's also a secondary one that shows the gray if we, um but call out secondary.

  • We save it, we reload.

  • You get this grayish kind of one now, another thing too about this is there's also a primary one where you can send it back to its default called calm.

  • Call out primary.

  • And if you save, can you reload?

  • You get back to this blue one.

  • There's a difference between just call out and call out Primary and secondary.

  • Obviously, alert, warning and success are completely different, but you always have to watch out for these, um, these class changes.

  • So when foundation, there's things called closed boxes or just close outs.

  • But you can basically do with, um as you can add them to call outs, for example, and you could be able to close out of a coal out and wipe it from your screen, and I'm gonna show you how to do that.

  • So what you're gonna want to do is you're gonna want to add a data value after your class called data.

  • That's close level.

  • Then.

  • After that, you're in Wana out of a button.

  • There's that button.

  • You can keep the type as button, and you can take out the name.

  • Gonna add a data value to this called data close.

  • You're not an area label before the data close, so area label you said that equal to You're gonna right close alert and you're gonna give it class called close button and save the file.

  • After this, you're gonna make a span inside of the first span tightening to put area dash hidden.

  • And you said the equal to true Colin and then save the file.

  • Now you're gonna wanna put this span, you're gonna copy it and then you're gonna put it inside of the clothes.

  • I mean, you're gonna put it inside of the button, and then you're gonna save now if you go to your website now, if you check your web browser, you should see this little X over here, and when you click it, it just disappears.

  • Now, when you reload, the page obviously comes back because it's not saved into your local data or cash A's.

  • But there's a way you can do that.

  • But you can basically exit out of any call out you want just by adding those data variables and the classes and make sure you do wrap the variables into the def.

  • So make sure there's one large div around the whole thing, Like in here.

  • I added a diff, so it would close off the call out, make sure you put a dis you close out the call out and the close button and the span and yeah, basically, that's how you add an exit out button or a it closed out tab on any coal out.

  • Okay, so up next, we're gonna do a drop down pain.

  • Now, drop down.

  • Paying is basically where you click the button, and it shows a little message below it.

  • These could be used for many things, such as heirs with badges or panels, uses as a little help text.

  • So we're gonna i'ma show you how to do this.

  • The first we're gonna scroll down.

  • After all the call outs, we're gonna make a comment.

  • Aren't Tabard Inn and we're gonna call it, dropped down pain and save it.

  • And then first we're gonna put a button.

  • I'm gonna leave the type alone.

  • We're just gonna take out the name.

  • We don't need it.

  • We're going to give it a class called button.

  • No class button.

  • This just gives primary button standards.

  • We're gonna put data toggle said it equal to we're gonna name it to example that drop down and now inside of this, but more just gonna put, um, threw up, actually, we just gonna say toggle drop down, and after this button, we're gonna make a div and it's gonna have the class drop down paying.

  • We're gonna give it to I D.

  • Of example.

  • That's drop down, and then we're gonna give it data cache drop down, and then we're just gonna call this one drop down thing.

  • And if we go to our website, this should be working and down in the bottom, right?

  • You should see this little button saying toggle dropped down.

  • If you click it and school down, you get this little text bubble saying drop down pain.

  • Now, if we center this, it works a little easier.

  • And if we add padding So we're going to do that.

  • Just a chauffeur full example.

  • Now we're gonna give this, um, we're gonna put this in the inside of the larger def.

  • So we're gonna put Div.

  • We're gonna copy all of this inside of here.

  • We're gonna just We're not gonna give this a class.

  • We're just gonna do inline styling.

  • We're gonna d'oh um, display flex.

  • And they were to do just if I s Khan.

  • 10 center text dash, lying center.

  • And we're just gonna add margin 15 pixels.

  • If we save this, this should give it a nice look to it.

  • So, as you see, it has pretty good.

  • But we're gonna add some more margin to it so that it centers more up.

  • We're just gonna say 25 and if you reload, it looks nicer.

  • Now, if you click it, you get this little text below it saying drop down pain.

  • Now, if we want to see the full example, we're gonna add about 50 and then we're just gonna do from margin we're going to do margin bottom.

  • That way we get what we want.

  • We reload, Click that says, drop down pain and we click the button again.

  • It goes away just like help text or in air.

  • Philip next is floating classes, and we're gonna be floating buttons to left or right.

  • So first we're gonna add a comment on we're gonna just say slow, but we're gonna put floating buttons and then just indented a little.

  • And then what you're gonna do first is just But you're gonna put the button.

  • I'm gonna take out the type and you're gonna actually can keep the type.

  • You're gonna take out the name.

  • You're gonna add class as just a button, and then you're gonna put a space and then float dash left, and then you're gonna put inside of the button.

  • Just some text saying float left.

  • And if you go to your browser, you should have a button floating to the left.

  • Now, as you see down here, you have a button floating to the left.

  • Also, you don't always have to use just the normal, um, primary button.

  • You can always go like you always go, Ah, success button and make it a green button or even a alert button.

  • So alert button but left.

  • And then you can just copy this.

  • And let's say we want this to be a service button and we're just gonna make a float to the right.

  • Where's continue?

  • Changed the text saying Right, they go back to our tab.

  • Reload.

  • You have a green buttons floating on the right and a red button loading on the left and those air basically the floating classes for buttons.

  • So up Knicks are labels and labels are basically almost like the badges, but you can actually put a word inside of them and be able to read the word, so I'm gonna show you what that is.

  • So we're gonna make a comment and we're just gonna put labels.

  • And then and then So what you're gonna first want to do is you're gonna put a span, you're gonna give it a class called primary label, and then inside of that, you're gonna put primary label.

  • I mean, you save it.

  • If you go to your browser as you see at the bottom, you see this little blue thing called Primary Label.

  • Now, if we go back and we copy it and you could put things like success and just keep pacing it, Ugo, copy it and you can paste it.

  • You could put, um, warning.

  • You could put alert and you can even do, um, secondary if you save it and go view in your browser.

  • You see, in the bottom left.

  • You have all these labels right here, and they're not buttons, so you can't really click on them and expect to go somewhere more like the badges where they're just They're the show.

  • You like a message of some sort, but like a very small message.

  • So such as success or virus or Hello, so they're kind of useful, but sometimes they're not.

  • So up next we're doing off campuses and off campuses.

  • Are those things you kind of see when you're on mobile devices?

  • So, for example, you're trying to look at the menu, but you're on your phone usually have an off campus appear, and it's the three little lines that you click on opens up aside canvas or an off campus and also referred to as off menus or side menus.

  • We're gonna learn how to make one of those in founding the first you start off a diff tax.

  • Obviously you're gonna give it a class called off dash.

  • Can this dash Rapper, you're gonna give it another day?

  • If the class is gonna be off?

  • Can this inner off canvass rapper dash inner?

  • You say that you're gonna give it the data type data off wrecker?

  • After this, you're gonna put another def and you're gonna give this one a class name of off can as oppose this Shawn bash left, you're gonna add an I D.

  • Well, uh, can this left and then you're gonna add data off, dash off dash and this And then, after all that, we're gonna leave those dibs empty for now.

  • After that, we're gonna add a button.

  • You're gonna take out the name like we usually d'oh!

  • And to give it class, we're just gonna.

  • But as the button class or the primary button, we're gonna add data as toggle instead of equal to off.

  • Can this left?

  • And then we're just gonna put it in here open or we're just gonna put off.

  • And this I forgot that the comments.

  • So we're just gonna add that really quick or just say it off?

  • Can this save it?

  • Now?

  • If you go to your browser, you should see this button down here When you click it.

  • It gives you this off campus kind of look, but it has no content inside of that.

  • So we're gonna add that really quick.

  • So over here in these inner dibs all the way into the middle, we're just gonna put in a TSH to tag.

  • And where does it say hello, world.

  • And then we're just gonna put in a TSH Ford just saying docks or where each to Mel and then another h four ST C s s, um, just another one called Java script and save that reload.

  • And we click off campus and gives us this little side menu we could bank.

  • We could make these links to just by adding opening and closing tax to the very ends, copying and pasting them and adding placeholders as hashtags save it, Can you reload?

  • And now they're links and you click on them and it just brings you back to the top of the page.

  • Open it.

  • And this is just these air just links.

  • And this is an off campus menu.

  • But when you minimize it, if we inspect and we go to mobile, let's just go to a Google pixel two.

  • When we click off canvass, it looks like one of those menus that you would have for a phone.

  • Oh, and this works on any phone.

  • We can go all the way down to Anna an iPhone five s E.

  • And it still works, which are usually the smaller phones.

  • So it's good to know that these still work on all devices toe up.

  • Next is Paige Nation.

  • Now, Paige Nation is like a type of navigation that hangs out at the bottom and you go through multiple pages, usually at the bottom of product pages or block pages.

  • You can go through multiple pages without having the navigate through the top navigation bar.

  • I'm going to show you how to do that done here.

  • We're just gonna make up another comment as usual just so we can divide up our code.

  • We're gonna save stagnation, bar dented a little, and then we'll start off a Norden list.

  • Give it a class of tag and nation.

  • We're gonna give it a role said equal to navigation.

  • And then we're gonna butt area lave ill and then said the equal to pack in nation with the capital P inside of this, we're gonna put on list item.

  • We're gonna give it a class called this table inside of this, we're gonna put previous and inside of this list item.

  • We're gonna put a span tag, we're gonna give it a class bold show, dash or Dash s r.

  • And then we're just gonna put Paige in between this fan tack, we could just close off the ends like that.

  • And then after this, you're gonna you're gonna copy this and paste it below.

  • You're gonna change the class name to current.

  • Actually, you not put any knocking for anything between.

  • Those are going to take out the previous it is, but you are on or on page.

  • And then in between the span and the list of your people one after that, you're gonna put another list item list item.

  • You're just gonna put a list item a link inside of this, you're gonna set it to just the hash tag.

  • A placeholder put area label.

  • You said it equal to page two in between.

  • You're gonna put it to between the anchor tab, and then you're just gonna copy and paste this and it's gonna change the numbers from 2 to 3.

  • For you could just take out this last one.

  • Really need to go four.

  • You should change this too.

  • Three or the next.

  • You're gonna add a list item you're gonna give it a class of he lifts and you're gonna do it area hidden equal.

  • They're gonna just do true.

  • If you're just gonna leave this as that, you're gonna copy just two of these and then you just put in for now.

  • We'll just, uh, pages 12 and 13.

  • We're gonna change this for that.

  • After that, you're gonna copy this.

  • This item right here, you're gonna paste it.

  • You're gonna set the area labeled to capital next space page.

  • Make sure the page is not capitalized.

  • And then after that, instead of 13 you're just gonna put me next, and then you're gonna copy this.

  • Ah, span right here.

  • You're gonna paste it after next instead of putting your on page is gonna put Paige, if you reload your web page, you should get this down here.

  • That looks like a little navigation that you would have for a website.

  • As you see, the disabled class works perfectly with previous and then go on to next pages and stuff, except for we only have one page, so it's not gonna go anywhere.

  • Uh, we're gonna style that stylized this a little bit more.

  • So you go to your, um, a nordle list.

  • We're gonna add a style tag.

  • We're gonna say, display flex, and then we're gonna put justify content, and then we're gonna set it to center.

  • And if we go back to our web browser, we reload it.

  • It should be in the middle, just like most Web pages would look like.

  • Now, Flex box does work pretty well with ah foundation.

  • I haven't found any heirs with it.

  • As you can see, I easily center that div or that, um, in order list into the middle with no problem.

  • So foundation does work pretty well with Flex box.

  • And this is ah, what a Paige nation looks like on Web browser.

  • And that's how you make it in foundation.

  • So up next is Progress Bar's.

  • Now, um, just a disclaimer.

  • In my opinion, Bull mas, uh, progress bars are much better than foundations, but we're so gonna learn them anyway, just to see the difference between the two.

  • So let's just go ahead and make them.

  • Um, you're gonna go down here, just make a comment, uh, roger.

  • And then we're gonna make it diff.

  • We're going to give it a class of primary progress.

  • Save that.

  • Here you go inside.

  • So inside of this, if you're gonna make another dip and you're gonna put the class name at Progress Meter and then style with 25% it's out of this, you're gonna put you paragraph tags.

  • You put 25%.

  • You're gonna give this paragraph Tech class.

  • It's gonna be progress.

  • Cash meter.

  • That text.

  • This is gonna be all there is to your progress.

  • Far.

  • Now, if you check your browser now, if you check your browser You see, you have this progress bar in here, and you couldn't customize it even more with the warning and success labels, as your all we have to do is copy it.

  • And we just put, uh, warning progress.

  • We reload it, We have a yellow one.

  • Do this the same four alert.

  • And we could do this the same four success.

  • And if we reload, you have all these different colors.

  • There is not a secondary one because the backgrounds already grey so would be kind of useless.

  • You want to be able to tell the difference between the progress, so they just decided not to have the secondary one in other ways.

  • You change the progress on the bars is go up to this with styling, and you just change it to whatever percent you want.

  • And then down here in the paragraph, you want to change it to match that.

  • So this primary progress should not be up.

  • 50% change any of these.

  • So what changes?

  • Uh, 65% finch, This 1 to 3%.

  • And yeah, basically, if we reload, you have all different types of with since stuff different colors for different types of labeling.

  • And now that's basically it for progress.

  • Fars.

  • So next our switches now switches.

  • They're kind of pointless without a back end, But I'm still gonna show you the front end and how they're used in foundation.

  • So first gonna make it comment, right?

  • As always, Foundation, uh, which and then we're gonna save that.

  • Gonna make it.

  • Def.

  • We're gonna give this a class called Tiny Switch.

  • We're gonna put an input.

  • We're gonna give this a class of switch ash input and save it.

  • We're gonna give it an I d.

  • Of Tiny, which, and we're gonna change the type from text check box.

  • And we're gonna change the name to example switch and we can take out the value as well.

  • Now, after that, we're gonna put a label, we're gonna add a class to it, and this one's gonna be called switch, dash, paddle.

  • Save that.

  • And then we're gonna put four small switch.

  • We're gonna put a span inside of the label.

  • We're gonna give it a class you're gonna be show Dash four, Dash s r.

  • And inside of this, we're gonna put small portion on Lee.

  • We're gonna capitalize each of these, and this should basically give you a switch.

  • Now, if you go ahead and check your browser So when you're out, you're gonna see this little switch down here.

  • And it This is all it does, kind of.

  • Ah, misleading.

  • But it still looks cool to play with clicking a 1,000,000 times, if you like.

  • With some back end, I guess.

  • Be kind of cool.

  • You can fill it out as a form.

  • Oh, like yes.

  • No.

  • Yes.

  • No.

  • Now, you can also add different classes so that you can make the bigger or smaller.

  • So we're basically gonna copy this, paced it down here or toe change every tiny, too small.

  • So we're just gonna go ahead and take every tiny we're gonna go small and then save it.

  • And if you re alone, you have another one that's slightly bigger than the 1st 1 We do the same thing and make it bigger.

  • We're just gonna copy this, and we're gonna find everywhere where it says small.

  • And the way I'm doing this is I'm holding control while I'm clicking and I'm just gonna backspace and put large.

  • I'm going to save that.

  • You're gonna reload.

  • You're gonna have a very large button or switch.

  • And this is basically how switches work in foundation up.

  • Next, we're gonna make tables now, tables look a little different in foundation.

  • And I'll you'll see why in a minute, uh, we're just gonna go ahead and start making that now.

  • So obviously you know the drill.

  • We're just gonna make some comment.

  • Seven.

  • Keep organized, then then you're gonna put a table tag just like that, and t head or table head, We're gonna make a table row.

  • Now we're gonna make a table header.

  • We're going to give it a with of 200.

  • I was gonna name this table header, and then we're gonna do another table header.

  • We're just gonna add No with to this and just say table header.

  • Now we're gonna copying paste this one twice Gonna change this one.

  • The 1 50 for a change.

  • This 11 50 as well.

  • And after the table head, we're gonna make a table body, and then we're gonna make a table, row and then table data.

  • And inside of this data, we're gonna put just some texts from filler texts or didn't say content goes here.

  • And next one, we're just gonna do tabled at it.

  • Lauren spm And we're just gonna minimize this down a little bit.

  • No, it's not too long.

  • And then we could just copy this one and paste it twice over there.

  • And after that we're gonna copy this, paste it three more times or two more times.

  • As you see, we have a perfectly made table over here.

  • You see, the first row goes gray or a light gray 2nd 1 goes full white, and then it's a pattern after that.

  • And basically, what we did is we made one with a certain amount of with and basically organizes it, like in a CSS grid, so that it goes one large and in two small ones.

  • And this is basically how a table works in foundation.

  • So up next is that title bar now the title bar.

  • It's very responsive.

  • Navigation usually used on mobile and Web APS, um, or mobile websites.

  • When you're designing for mobile first, they usually have the little cut out on the side of where the breadcrumbs that you can easily navigate through in their very response is gonna show you how to make one in foundation.

  • So just gonna make comment title car like that.

  • Then you're gonna give it a class called Title Dash Far inside of there.

  • You gonna make another def and it's gonna be called title cash are left because we're gonna make it to the left.

  • We're gonna put a button.

  • We believe the type is button, but we can take out the name.

  • We're gonna give it a class.

  • We're gonna call this menu Nash icon.

  • We're gonna put a span out for this and this is gonna have a class called Title Dash Bar Dash left inside of here was gonna put foundation.

  • And then after that, def inside of the title.

  • Barred if, but not inside of the title bar left Make another day.

  • If we're gonna call this one title that are That's right.

  • I'm gonna put a button, We're gonna take out the name gonna put a class in here.

  • You called Menu.

  • I put a dash in between, and this should give you your little title bar.

  • And if you check, your browser should have this little title bar Now, you wanna, uh, obviously put at the top of your Web page?

  • Still, it looks like a title now.

  • Added some margin, so it looks like it's at the top of the page.

  • It's really not.

  • It's just, uh it's just some margin, but it looks like it's at the top of the page, and this is basically what it looks like.

  • Pages don't do anything, but you can actually conduct the off campus to those, um, those to the menu icons, and they can open up side menus, especially if you're on mobile.

  • That could be useful.

  • This is all responsive firewood to go like this, all responsive.

  • There's not much to respond about, but it's still responsive.

  • If you have actual navigations inside of this black bar right here, it becomes responsive.

  • And yeah, that's basically how you make a navigation slash title bar in founding.

  • So up next is a tool tip, and a tool tip is like, um, you'll see them in Wikipedia lot and it kind of gives you ah, general definition of a word that the user might not quite understand right away.

  • So we're almost show you how to do that.

  • No, we're just gonna make a comment.

  • I'm gonna call this tool, and I'm gonna make a paragraph, tak, because it is a sentence and we're just gonna put the I'm gonna space it.

  • But we're gonna take out that space inside of this paragraph.

  • Tak wanna put a span now?

  • The spans gonna have a data type called data dash tool tip.

  • And that's gonna have area that has up, up.

  • We're gonna set that equal to true.

  • We're gonna set a Class two has dash Tip.

  • They were gonna say data dash, disable, ash cover.

  • We're gonna set that equal to fold, and they're gonna put tab Index, we're gonna set tab index equal to one, and then we're gonna put title and see were for a beetle.

  • And then this is just another word for a beetle.

  • I just copied and pasted it.

  • And then this is just some filler text I found a while.

  • What's gonna do?

  • Or a Miss Veum?

  • We're going to say that If you go into your browser and you reload, you see down here, you get the sentence and oops.

  • Make sure you put a space after the the title, not a space after the the definition word.

  • If you reload, you get this.

  • And when you hover over, it says fancy word for a beetle, and it's just a basic definition of what it is.

  • You'll see these a lot on Wikipedia and add these to your docks on your website.

  • Whatever.

  • And that's how it works in foundation.

  • So up next is something called HTML templates in foundation.

  • No Nation has their own set of templates.

  • They have a total of eight.

  • Goto foundation dot deserve dot com slash templates Nijdam out.

  • You'll find these HTML templates.

  • Now there's a total of eight You could download any of them, or you can just watch the demo.

  • They have newsmagazines, real estate, e commerce, blog's portfolios and product pages, and a few more.

  • He's very helpful if you're just trying to create a portfolio for your business or for getting a job, and you don't have too much experience and you just need something to get out there with Today we're just gonna do the portfolio.

  • So you're gonna click, See Demo.

  • And as you see, this is what the portfolio looks like or the template.

  • And if we right click and click view page source, there's all this code right here.

  • We're gonna click Control a control, See?

  • So basically, what we're gonna do is we're gonna click Control A and Control V and you're gonna save it.

  • Now, the first thing you're gonna notices everything is in one straight line and nothing is organized like we're organizing it earlier.

  • And that's okay.

  • You just need an Adam package or a package to go along with your code is gonna be a Lincoln description.

  • It's an Adam package called Adam Beautify, and this organizes your code just like we were doing with all the indentations and white space.

  • Now, ah, you can install this package just by clicking, install and open with Adam, and it shouldn't still like that.

  • If not, you can install use an M.

  • P.

  • M, um, or the A P m command line and just install it that way.

  • But it's so much easier if you just click install here.

  • But once you've installed this you should be able to go to your code and click packages.

  • Adam beautify and then click.

  • Beautify.

  • What this does is it organizes all the code automatically with all of its indentations and stuff.

  • Now, if you go to your file folder and you click your text or your document, you should find this as your document, not the link anymore.

  • And here's where we will reload and edit our website.

  • We could just minimize out of this Minimize out of that and the first things we can change is that title.

  • We're gonna change this, the portfolio so or full go safe.

  • You can leave all these links alone.

  • We can leave all these script tags alone.

  • As you see it.

  • It just doesn't Don't functionality and you see off campus position left revealed for large.

  • This is what the off campus looks like in this website, but there's not a button to open it, so it's just always open.

  • So we're gonna edit this off campus first.

  • Well, height is 100%.

  • Then down here, we're just gonna change just to Liam.

  • Stop Say that and then this is a little bio.

  • It looks like right Yeah, it's a little bio.

  • So I'm on copy and paste the bile from my portfolio.

  • So this is my portfolio, and we're just gonna go to about and I'ma just copy this and then you've done more than we're gonna go down here.

  • I'm not.

  • Paste it into this paragraph tag, and if you save it, reload.

  • I have my own about down here.

  • Now, you can obviously write your own, and you probably should and just change the span below too.

  • Stockton, Save that.

  • Then down here, there's a call out.

  • Well, our primary with this call out is this thing up here.

  • And they set the with so that it takes up the entire, um, heading basically.

  • And so we're going to change this.

  • We're gonna just change this too x and spend your creativity.

  • And that is just gonna have some words down here.

  • We're just going to change his text to something.

  • Whatever you really want, it's gonna come up here.

  • So you just kind of choose what you want to say up here.

  • Oh, my.

  • Just write some stuff.

  • So I wrote this is just little phrase right here.

  • And if we go ahead and reload.

  • You see, we get this over here and now we need to move on to the pictures.

  • So I pulled an image from my, um my personal images and i'ma just paste it into here and we're gonna rename this to me.

  • It's a J peg file.

  • So down and or we're gonna go back up to the image instead of this right here.

  • We're just gonna do me dot j p g If we reload.

  • There's a picture of me up here now.

  • Now, if, um, as far these projects go, we need to find images for them.

  • So over here are basically projects.

  • Now, of course, you're not gonna have, like, 12 projects as it's shown here, but you're gonna at least have at least three or four good ones.

  • So we're gonna take out some of these.

  • So if we go down here, well, look for it.

  • There's all these cells, it so we can take out the 1st 1234 I've six.

  • We'll just take out the 1st 6 saving.

  • We could take out two more because it kind of looks weird, actually.

  • No, we're just gonna copy and paste these two tasting back because we need them.

  • If we reload, you should have only eight.

  • And what we're gonna do is we're gonna fill in these projects.

  • We're just gonna put, um ah, there's gonna put pork polio as a project, and then we're gonna make it a link.

  • The portfolios.

  • One project.

  • I'm gonna make this one Java script.

  • Look, Welker, that's another project, and we just replace this pasting, and we're gonna put this one as, let's just say, personal website or we're gonna D'oh!

  • Personal long.

  • We're going to say that as a website, and these are just different projects done building in us.

  • Obviously, you can come up with your own projects.

  • These are just things that I've done a script.

  • Um, I'll give you a That was good

Hi, guys.

字幕と単語

ワンタップで英和辞典検索 単語をクリックすると、意味が表示されます

B1 中級

ファンデーションCSSフレームワークチュートリアル - 初心者のためのクラッシュコース (Foundation CSS Framework Tutorial - Crash Course for Beginners)

  • 0 0
    林宜悉 に公開 2021 年 01 月 14 日
動画の中の単語