Foundation 6.5 – General | Jeppe Schaumburg Jensen | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

3 Lessons (46m)
    • 1. XY Grid

    • 2. Forms

    • 3. Icons

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class


This class is for the beginner who wants to get a quick introduction to the latest version of Foundation. This framework is one of the most popular ones used today by web designers and developers all over the world.

In this class you will learn about all of the components in the category "General" that are part of the Foundation framework.

These includes a responsive grid system, forms and icons.

We'll go through each one of them and see how they are used and in what variations you can use them.


In addition to the videos this class contains a special built Foundation Learning Kit that you can download and use for referencing and practicing building Foundation components.

You can download the Learning Kit from the "Project & Resources" tab under "Resources" in the right side or access the Learning Kit online.

Meet Your Teacher

Teacher Profile Image

Jeppe Schaumburg Jensen

Front-end developer and digital designer


Hi there,

My name is Jeppe Schaumburg Jensen and I'm a teacher in topics related to front-end development, interaction design, music and productivity.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. XY Grid: X Y grit. This is the latest version of a responsive grid system that comes with foundation. Previously, it has been float great and a flex Great. Now it's the X Y grit. Let's take a look at what we can do with this first preseason basic examples, which will dive deeper into later on. Then we see How can you Scott us from marginal patting. We can use quit containers. A normal one flowed one off full one. We can have cells being auto sized or shrink. We can collapse cells with the margin collapse or pairing collapse and use offsets. We can have a block grid and the verdict great. Hence the name X Y grits of this Issa. Why version? We have a great frame that takes up the full height. The page. Finally, we can missed great inside. Another great. Let's go ahead and create these examples. First, we have the basic, great example. We at Dave Tech the class Great X. Since we want this to be our son's regret, their own will look at how to create vertical quits. It's out of this which we can look at as a row or at our columns but using the class cell just like so, we'll have two of these. These will, by default, stack on top of each other. However, we can also make them turn into Motor Column greats. So it's at the class small full to these cells here and just at 1/3 1 Now we can use the total off. 12th columns follow. Great. So each one of these will take up fall out of 12 columns, meaning 1/3. So these well for small devices and up, meaning all devices take up one foot off available with Let's create 1/3 example. This time our first come, we'll take up full with and four million break points, half of the available with and for last break point 3/4 of the available with just at some helpful text to you. I will copy this and change a second cell to take up 1/4 of the available with for large devices send up. But say this Go bagging drop browser and look at these examples. The 1st 2 lions here is our first example. They will stay on top of each other for all device sizes. Our second example. It's this one that will take up 1/3 of the available with for all device sizes. And now we see that responsive example here. Initially, they were stacked on top of each other. When we get to the medium break point right there, they take up half of the available with and when we reach the last break point right there , they take a 3/4 and 1/4 will be available with. Now, let's see how we can use got us with our great system. That's copy this last example here? No. Well, that margin goddess using the grit Martin X Class, we can also use padding goddess by using the class great petting X instead. Let's say this go back and re fresh. He was seeing the first example. We have Margin Goddess being marching outside off our cells and in this signature same, we have padding gutters being got us inside of ourselves. So the most common one to use is probably the padding goddess. This is what I mostly use. Now let's take a look at great containers for these examples to work. We can see that I have taking them out off. Uh, a great container used on this in this learning kid. Now let's go back here. Well paced in this example from here. Like so? No, we want to create a great container for this. So we wrap it in the Dave tank with the class. Great container. This will give the Maxwell and send right on page. We can also create a florid container. So if you do this coming paste a coat and at the class fluid we can also create a 41 and then at the same time, usual eyes margin goddess. A petting goddess. Either one of them. So we're asked the class full and then great marching X to use margin goddess. And he was at a class full. And then yeah, great patting x to use patting goes that safe and take a look at B sex symbols. We can see that the first examples have this Max with applied with secondly, X Able has floored with, which means it would take up all of the available with almost us a little spacing in the sights and we have the full example. We can see that it takes up the full with this one Includes marching goddess. Add it to that for with and last example have a petting goddess added to it, which is added in south ourselves. It's still a full with great country. Now let's take a look at other features for grid system. First, take a look at auto sizing. We'll create and you through here you're seeing there great X class liberal at a cell using the sir class and the small full class. So this will take up 1/3 of the available with for small devices ain't up. We'll copy this and change the 2nd 1 to 3 on the inside of these two. Well at Dave Tech glasses sell and order so this order class will make the cell automatically defines its size, depending on the size that's available after the other columns of taking up there a size. Let's create one more X or two more examples. Before we viewed this in the browser were created that cell, with the small five class taking up five out of 12th. Cohn's small devices end up, and then we have two cells being order sized, just like so, and 1/3 example. And then after that, we'll take look in the browser. We'll have a Phil here, but initially were Stack and then for medium devices up. It will take up 1/3 of the available with it last devices enough seven out of 12 of the available with or copy this one time and change this large seven class two large three will take up three of you available there, three out of 12th cones and finally, well, change 2nd 12 large auto so able automatically size itself in life brake parts and up. Now let's go into the browser and refresh. Here we can see in the first example, which is the first row. We have the middle cell being ostracised in the second exam, but we have cell number two and three being older sized, taking up the same space each. And finally, we have our responsive example. So initially they are stepped on medium devices. They took up 1/3 a third of the available with each and for large devices. This third, so will become a little smaller, and this second cell will take up whatever that's left by using the large order class. Now let's see how we can use three King shrinking. It's a little difficult for me to say we'll stop by creating the column here, using that great X glass inside of that at the cell and then the three classes. Well, then we'll at an order science cell like so And finally we're at a cell with the with off 1/4. So three out of 12th columns. Let's say this. Oh, wait. Before we take a look, let's create a few more examples. That's copy this one here, and that's to like so now have to decide cells and there and last example for this three king feature at the room. Then we take a So that's we'll stack initially and then take 1/3 of the available with for medium devices and up and then, for large devises, able finally drink itself. We'll copy this a few times, and now for the 2nd 1 we'll make it order sized unlatched devices end up. Let's go back into the brows of refresh on have a look. He was our first example. We have the middle cell being or the first soul being three, so it only takes up the base that it needs. This is also true for the second example, we have the first cell being shrink the others to auto sized, then for the final exam. But we have a responsive example. So first, all of this of a stacked been from medium break points. They take up 1/3 of the available with and then for the last spray point. The first ones rinks, second ones becomes office sized and the 3rd 13 x as well. So this summer can use this shrinking feature. Now let's take a look and how we can collect cells, which only works for the X quit. The horse owns a quit, so it's going to our code itself. Now we're great the row here and adding to South Steck initially, then take a possibly available with medium and then 3/4 of the remember with for lots break points and so close like this, and the 2nd 1 would be changed. So it takes up three out of 12 meaning 1/4 of the available with for lunch break from size and up. Now it's just coverages and pasted in here now trap a margin collapse for large device sizes, with first at the great margin. X And then we have the large margin collect class conduce, um, something similar with the padding collapse for this example for medium devices. So first we must must at the grip petting X, Then medium devices or not, we had the medium medium padding collects class. Let's take a look in the browse and see what this really means. So here we have a small device size and we first have the marching collapse for last devices. These are now stacks on meeting devices. They take up half of with each. We can see that they have margin, got us. And then when I reached a large break point, we could see that it collapses. It is simply removed. Now. I was taking a look at the petty example down here, initially stacked and from medium devices. We can see that it takes up half of the available with and that petting gotta has now disappeared. Let's take a look again. He and small devices. We have padding gotta and for medium devices and up it's gone. Let's take a look at office. It's This is only only this is also only for ex quits. We're great. The rapping element the CO that X has a condom with the critics. Class of them were Create yourselves, giving the classes cell Medium six, large three. And then to create the offset, we had the large offset three class. So we have the device break boomed keyword here than offset. And then the number of columns we wanted to be offset. But just at in this takes to You, which I find useful movies examples. No, look, wait a second. So with the classes. So medium six pain match three. This one shouldn't be offset. The 1st 1 myself said, Well, push to this one so we don't need to add it to everyone. Now let's say this. Go back and refresh. It's resize this a bit so you can see here for the medium break point. It takes up half of the available with and it hasn't been upset yet offset. Yet now, for the last great point, we can see that the 1st 1 have been offset. Three columns pushing to the 2nd 1 as well, but they are three columns wide each and be offset by three Curlin's, and that means we have three common lift to the right side here. Now let's take a look at block quits. This also only works for the excrete. The horror sounds great. Set the Dave Tech with the class. Great X No, that's at some simple cell, Shia. Only with the class cell. So we want to add 12 of these. So we're Peyton. 23456789 10 11 12. This should be a 12. Yes. So now, instead of defining the number of columns that we want to be the width of each cell we define how many sets wound across each break points. So for small devices and up, we won't three cells, Perot and then from medium devices end up. We want for cells, Perot, and for large devices end up. We want six cells. Peru. So that's save this. Go back and refresh and take a look. So, initially we had We want three cells, paro and from medium devices. We want forces throw on for last advisers warned six cells. Perrault, this is a quick way to create a block. Quit now. This. Take a look at vertical quit, which is finally the why in the name X Y grid. So this is a great why. So we created by adding Dave Tech with the class Great. Why now? We must give this us set hide. So we had an in line style attributes, but that height being 20 Rennes. This can, of course, also be yeah. Add it in other ways, using CSS in an external style sheet. For example, inside this two Selves, 1st 1 taking up 2/3 of the available space initially, then for medium devices taking up 50% and for last devises 1/4 of the available with Oh at in this text to you and we'll create a second example here will change this small eight small four, so it would be 1/3 small to lie sizes. You know lots of ice. Ice is it would be nine out of 12 columns, but save this. Go back and refresh now that free size. This received it. It's a very great and initially we have a small eight small four than for medium break points. They take up half of the height each, and finally they take up 1/4 and 3/4 of the height each. When I was writing the code, I probably said with because I've said that so many times for the early examples. But of course, this is the height that you need to consider how much of the height each cell should take up. Now let's take a look at the great frame example, which is also at vertical grit. So we at a day of tech with the class great y, and then we had the great frame class. This will make it take up all of the height of the browser window. Now we will actually just paste in these two cells. He from the previous example. Let's say this go back and re fresh. Now we can see that this whole grit takes up exactly 100% of the browser. Hide on the inside of that. It will act as the other here example from before. But this time the height is just 100% of the browser hide, and not only 20 rooms, as in the previous example. Finally, let's take a look at nested grits who stopped by creating our souls will great again. Then we'll that a basic sell here and one more of them. But inside the 2nd 1 we actually want to create a new quit. So we had a 50 with the class Great X, and then we have the class sell small six and we want to Avi's Now. We also we'll create two more great systems just to showcase this example better. So we had three cells inside of this with the classes so small for and we're great Finally , great. And two cells inside with glasses. So, me, I'm six watch nine So and changed this second cell too. March 3. All right, now, let's take a final look in the browser. So what do we see here? We can see that we have three great systems on top of each other. The 1st 1 has a nested grit inside of its second cell, so these cells are stacked. But in the 2nd 1 it has a new grid system that has two cells that takes up half of the available with for older by sizes. After that, we have this great system would each cell taking up federally available with for all device sizes. And finally, we have this responsive great here that change when I Reese ice the browse the window. But what We need to really look at this. The first grade here that has this nested quit so you can easily missed a great inside another Great. This was all about how you can use the X Y grit to create all kinds of responsive good systems for your layout. 2. Forms: forms will now see how we can create forms using various form elements. First we see and normal input where the label. Then we have a text terry of it label. Then we see a select menu and a multiple select menu. Then we have regular check boxes and radio buttons. Then we have a feet set, styles wrapped around a set of Radio Bunch. Then we have help text fault and input on me. Learn how to precision a label using the grid system, how to make in line neighbors and buttons next to import elements out a great file upload button. And finally, how to at Labour's and help text for custom controls like this custom slider that you see down here. All right, let's get to work in our coded. So first will create an input put label to do this, we at a label tech, then at the labour ticks inside and the input element also inside of the label. This will get the type attributes with value text and place, order, attribute with the Value Place order. This input could also have the type number email, password. Oh, any off the available in prototypes so This is just to show an example off using the type text. Now that's safe. Go back to browse and refresh the right tip. He ever see our baby would input with the place order. Let's see how we can create a text area with label. To do this, we create the labor attack at the labour text inside and then at the sixth area element. This needs to be closed like this with the closing text, every attack, not like the input tech that doesn't have a question. Input tech. We have the close placeholder attributes with Value Place, order and the roads. That's beautiful body of five. To sit the height of this text area element, let's go back and check in the process. He received the text area with label. Next, let's create this licked menu and the multiple select menu to do this. We that labour attack again and text for label them. We create our select take. It's out of this. We at an option tack with the value, attribute the value of one and the text value Option one and closed the option. Take again. Copy and paste with a few times. Change the value to three, four and five. Then we'll probably all of this code and pasted in down here and at the multiple attribute to the parents select element inside of the label. Now let's say this. Go back and refresh. Here. We can see that we have have the regular select menu where the user can select only one at a time, and the multiple select menu where the user can select multiple values at the time. Now, let's continue to see how we can great check Buckner's to do this. First, create a field set element. It's out of this. The first Children will be the Regent Element, which will act as a label for all of our check boxes. So check boxes label like so close religion Tech again. Now we can create different input. Tex and given type check box. We won't use the name right now, since we're nuts dealing with how the super should direct this, we're given the I d chip Push one. Now we're also at labor attack the full attribute with the value of being the I D from the checkbooks. So checkbooks one and a text value. Jake Books one now cover this to chance Update the number two and three. So now we have three inputs and one legend inside off a field set tech. All the inputs have type checkbooks, but safe. Go back in. Refresh. Here we see our three chick boxes rep inside of our field set, which you can't really see that right now, but we're using it anyways to make it more semantic. All right, let's see how we can create radio buttons in a similar way. So for this, a couple of this coat we have the fields that again a legend changed text Ray, you burden slavery. And then, of course, for a change, the type attribute value to radio the I D would update that to radio as well. And now, to make thes act together as a group, we need to use the name attributes. We removed it from up here the check boxes, since they don't have any meaning with check boxes only with radio buttons in the friend, and they're so necessary to store data when you send it to the server anyway, were given the name with the value of radio, the same value for all three of these. Now it's safe. Go back. Refresh, you see already burns When I click one another. The other one becomes de selected this because we use the seen value off the name. Attribute now that she helped him, Stylist Field said. So to do this or simply copy all of this code here and to the fields that tech or at the glass fields it well safe kopek Refresh. Now we can see we have some styling for this field set, which is a thin border all the way around. With the legend being inside of football, let's continue to see how we can add help texts to an input. How screwed up. Copy the standard text in Pretty pasted in not little at paragraph element below what some have text help text for input Feared I would give this the class help Text for accessibility were also give it the I D input Help text and connect that to the input, using an area just scrapped by attribute. But the value input had six, so this input is described by this paragraph. The input here, let's say this. Go back and refresh Now we'll see how I help text below our input. Now let's talk about labour positioning using a grid system. So first great form forever. I think so. Inside of this well quickly created a great a normal great X grip. What? Petting as goddess you learn more about how the system works in a lecture? No, Great. Also, what should B six columns wide for small devices end up meaning that it should always only take up half of the available with So in the first column we want at our label. So we had a labour attack with the class text, right To align it to the right side, we had to text, right aligned label and close only protect. We're also at a forward tribute the value right Labour Like so this will be used to connect to the emperor element that will create in the other column I'm adding right now. So the same code has we caught him before and this time at in protect the type But you people about text and the I d right label which we were referring to appear in Babel. Finally the place order attributes with value Place order. No, we wanna duplicate this Our phone to look at a slightly different example. This time it will also be middle of line, so it would be right gained, middle aligned labour. We need to add the class middle here and we can also chance to spell you to write middle label Now that saved this go back really fresh. He was CR two forms created with the grid system with one row and two columns. So this is a writer land label, and this is a bridal and middle aligned labour. This is how you can use a great system to precision positioning your labels next to the inputs. We also create in line labels and and puts with buttons in another way. So let's take a look at that right now. Stop creating Dave Technical Class Input Group inside of this one and this Pantech the class in boot group labor and at our labor. Then we'll create in protect this time with type being number in the class with the input or the class input group field. Then we'll create a day of tech class input group, but and so this with Burton Jack with type, attribute with values, admit in the class. But we had the text button and close buttons check again. So we have this parent element Input Group Three elements inside Spain around the label than input. And then, finally, that they've taken the pardon inside now. But to save this, go back, be fresh. You can see we have a label. We have our input. And finally, the bottom. Let's see how we can create a file upload button to do this. We at a label with floral tribute with value file upload and class, but and given the text file and close on labour tech, then we're at in protect with type. Attribute. With the value of file. The idea will be file a blow to that be used up here in the full attributes. Finally, we'll at the class show so screen readers so this will be hidden for moment screen, but save and see what this looks like. So we have a button here. Click it. It would open up the file, upload dialogue. Finally, let's see how we can get labels and help text for custom controls. So to do this, we'll cheat a little bit and just copy and paste him The code for slider which you can learn more about in another lecture pasted in right there. No, try a label well, first at Labor Tek above with the I d being cutem control label and protect labour close over labour Check again and below this slider code who at paragraph with the I d Custom control, help text and because kept text and at the text up text for custom troll close paragraph again. Now we need to connect the label and paragraph to this slider. So we do this by adding the area labeled labour by attributes the value custom control label and the area described by attribute with value custom control help text like so that saved this to go back and re fresh. Here we have our customs slider and we have the label above it and help text below it. This was all about how you can great forms using various form elements 3. Icons: I Accounts Foundation comes with a pack of 283 Aikens free to use their very easy to implement. They can be inserted under old together with text, and you can easily change the color and sizing of the Aikens. You can view all 283 of Able Foundation icons by clicking this link here. Now let's take a quick look How to install these you need to at separately to the basic foundation starts so you can go toe foundation dot soup dot com slash i confound start HTML . Then you should click this bun, download them from the playground. Protect you took this display off all of the Aiken's and you click the button in the top down on the fund. Donald the sip file and you open it up and simply include all of that in your CSS fora. I've already done that in the vendor photo. Here, it's up to you how you structure your coat. But as you can see, we have these six files and the folder, and I have these exact same fires right here, here and there. So I've already include a bet. Now let's see how we can use these Aiken's you know, coding is a great and I can we use the attack can keep it The class with the name off the I condemn you want to use it is perfect prefixed with If I foundation I can and then the name of the I consider hero used to the address book. Then you closely I can and leave it empty with no content inside. Now let's go back and refresh. We continue our small little address prove dragon. Now let's see how we can use it with text inside of a heading will create an H two heading element with the text hitting where I can. Now we're just copy the Seiken from before pasted in here in front of the text on EPA space . Let's see bagging Refresh. We can see it takes the front size off the parent fund, so this is the same front side as to the heading element. Now let's change the color for ICANN pasted in here. We could do that in various ways with CSS selectors in a separate star sheet if you prefer for this demonstration, I used in line style attribute of the value of being color, then a hex value here. 17 79 b a semi colon. To close this statement, let's say go back and re fresh. This Aiken will also inherit the color of the parent element if there has been set for actionable for the heading or another element. Now let's have a little get sizing before I come paste it in four time to you and then now at the inland style, check again. All right, front size property. Give value off to him and then the line. High property. Get with the bed, you off one and remember to use their closing quote. Tech Oh, quote. Now I'll just change this value to 3 a.m. for him and 5 a.m. So now people take up twice has much space three times as much four times as much and five times as much off the current front size of the parent element. So one them is the same as the parent element. Let's go back and refresh here we can see the different sizes. You could learn more about how to use these actions by following the guide on this page here and on the previous page. I have included the links to these two pages, together with the lecture