Foundation 6.5 – Containers | 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

10 Lessons (1h 48m)
    • 1. Accordion

    • 2. Callout

    • 3. Card

    • 4. Dropdown

    • 5. Media Object

    • 6. Off canvas

    • 7. Reveal

    • 8. Table

    • 9. Tabs

    • 10. Responsive Accordion Tabs

  • --
  • 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 "Containers" that are part of the Foundation framework.

These are common UI components used to contain and layout different kinds of content.

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


There's a total of 10 components in the "Containers" category and they are:

Accordion, Callout, Card, Dropdown, Media Object, Off-canvas, Reveal, Table, Tabs, and Responsive Accordion Tabs.


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. Accordion: containers accordion. With this component, you can easily create Accordions where you have different panels that you can't explained one at a time. First proceeded basic version that we have these triggers, which is links when we're thinking one of these a content will expand beneath it. This basic X able only one can be expanded at a time. Okay, you can't close and open one again. You can also specify an active state, so that will be open when the pate slowed. You can have a disabled state so the user can click on the accordion. You can set the accordion to be multi explained, so that you can explain as many as you want, and when you click anyone, the others will stay open. You can also allow all to be closed. So here we open only one at a time. But if we have one open, we can click it again to close it. That wasn't possible with the basic version. Then we can to find the animation time for the panels. We can see that this any mates in a slower timber, we can use deep link. If we're quick, open a panel here, we can see that we have a deep ling a hash appended to the U L appear in the address bar, so we can actually use that as a direct link. So if we remember NuTec, we can see that that tap has now been expanded as a default Because we're using a deep link functionality. We can also adjust the browser history. So now I quick to explain the 2nd 1/3 1 and first month? No, when I go back Well, for one for the browser history, people open with clothes. These pants are just clicked on. This is how you in your browser history with the accordion component. Now let's get started and create all of this. So we go into our code a visa and we start creating our basic X able. So we had to Dave Tech. Yeah. Ah, you attack. Since this is a list off evidence, we came with the class accordion and also that data according attribute, to hook it up with JavaScript functionality inside this or first this item with the class I called you item and the data a Korean item that's appeared they were close with this item tech Then we'll create the trigger, which would be a link the trigger to open up the panel. Give it the class. I called you entitled and text the Korean tile close to the eight. Again. I will create our content using a Dave Tak of the class accordion content and the data content disappeared. Now it's out of this. We can great our country, so I just paid him some random text. You now copy this list handsome paste in a few times, but safe. But banging to the browser and refresh it was CEO cold gin, where we could open one at the time and, as I said earlier, can't close one when it's been opened. But if we refresh the pace the page, we can see that it's allowed to be fully coast on page load but can close it again. Now let's see how we can change settings for the accordion. We'll copy all of our code. Here. First will specify the active state which one should be open when the pace loads. So we'll select this first item here and that the class it's active. This will all be over on page load. So let's take a look we can see that the first tap ears open on page Note. Now let's take a look at the disabled state based in all the code here again. And we want to make the whole Cordiant just able. So we have the disabled attribute to the parent element up here that saved, put back and refresh. Now you can see we can click on anything and the curse of changes to show the use of that. This has been disabled. Let's see how we can use Margie explains. So we can explain as many as the pounds as we won't. And they won't close the other open ones o paste in a full co to you now on the parent element will at the data what she explain attributes of the value of being true. The default is floors that saved this. Go back and refresh. Now we can see when we quick one and then another one. It won't close the 1st 1 It would stay over. We can open up as many as we want and we're gonna close them again. But the always needs to be one open. We can change that. So allow all of the organ panels to be closed. Let's do that now paced in CO. And the parent element will at the data allow all close to attribute value being true, that default is fourth. Let's say this back on. We're you fresh now we can see we open one up another and 1/3. And now let's close with this 3rd 1 so all of them is closed. We can see that it's now possible. Let's take a look at animation time for parents paste in the four growth here and now we'll change the sliding speed when we open or close. Don't do this. We at the data slide speed attribute to the parent moment, and we give it a value off merely seconds. So that's at 500 milliseconds would be the time Refresh now the dizzy. When we open this up, it's closer than the other. It's slower than the other ones. The other one is rather quick, and this new one is rather slow. We will now continue and see how we can create deep link functionality with our kardian. So in the code, answer would paste in the coach with the basic accordion, and then we at the data deep link attribute the value true. Now we must also add some values for the eight ref attribute off ANC attacks and ideas to the accordion content tests. So we were at the value accordion deep link Penn one. Now there's copy this and at a nightie with same body instead the value here and changed her number 22 at an I. D the same value and number two. And in the third I assume you we have the same value and changing number two or three. All right now we should be able to test this in the browser. Notice what happens to the address. Babwin were quick one of the pounds. We can see that the Link Isse added up there. So if you use this link and open it from another in another window, for example, we can see that it's already being explained it. That is how you can use the deepening functionality. You can also do something called deep links much which I'll show you right now it's a way to scroll to the currently open tip in that accordion when you access it from another page . So first we have that data Deep link smudge attributes with the value truth. Now we're just update these values here so it will conflict with previous example. So I'll change the value to according Deeper Link Much panel. Let's say this go back and really fresh. Now we see something that looks similar. But notice that when we cover this link and open up a new page pasted in, we can see that it is scrolling down to that accordion with the open the open pedal that is selected by the deep link. Finally, let's take a look at browser History killed you right now. If we go back, we go to a whole other page. So let's see how we can use the opening closing taps as part of our browser history in our coordinates that would paste in a coat from before will remove the smartest fortune ality. And instead, at the data update, history attributes with the value true. And then we'll update these values again. So it would be a Korean browser history panel. Of course, it could be anything that you want. Now let's save this. Go back and re fresh. Now we never get through these. Tepes, you And now notice what happens when I use the history arrows up here in the browser, people change Tep, so each Oh, my closing tep will be a part of the browser history. That's how you can use the accordion in various ways. 2. Callout: call out with this component, you can create a call out to stand out from the rest of your page. This has a thin border all the way around and some petting. You can put any contact you want inside. For these examples, we have a heading paragraph and the link. You can see that we can also use the various color options to change the background off our coal out. Finally, we can change society. We have a small size, the default size and a lot size, and finally, we can also make it close herbal So we can at this close button that would remove the call out completely from the page when clicked by the user. All right, let's get started Inside off co dated to here will start by creating a regular Cole out. So we had Dave Tech with the class call out like so the inside of this will put our content first, will create a heading with the text call out hitting, then book paste in some text in a paragraph, Tech like so and finally at and in contact with the text. Call out, I think, and close the ANC tech again but save this back to our browser and select the right tap on re fresh. Now we see our call out. Here are basic Call out. Let's see how we can use different colors. So bagging all coated it's a copy of this coat and paste it in right here to make this a primary call out. We at the glass primary after the cold outclass to make it a secondary call out. We have class secondary to make it a success. Cola. We have class success to make it a warning. Call Lafayette dress warning and finally, to make it an alert call out we at the class alert. But save this. Go back and breathe fresh and here we see the various colors for the background. We have the primary secondary, the sexes, the warning and the alert called out. Now that's not get sizing options well paced in Go again. Now we're at the past small to make it small. Next wept the same coat, but without any extra classes. So this will just have to t Ford size. And now we'll painted in one more time and at the class large to make it a large coal out. Let's go back to the browser re fresh. He will see the small default and large call out notice that it's only the petting in the sites that changes. Finally, let's see how we can create a closer will call out that could be removed from the page. When the user clicks at button, I'll paste in the code again. No, I'll at at data close herbal attributes to the parent element that we wanted from the page . So this is our call out, and I want to place a bottom a close button. So at the button tech with the class ghost button and then for accessibility. We at the area label attribute with value Dismiss alert, so this will be read by screen. Readers were also at the type attribute value button and finally, the data close attribute inside of a button. We're at times simple, using the HTML energy coated like so, and we're rep this in a Spain attribute with the area hidden attribute the value true so this would be hidden for screen readers, since it's not necessary for them, they have the label up here. Dismiss alert. Now let's say this go back into the browser and refresh. We see that we have the basic call out, and when I click this close button, it disappears from the page. This was all about how to create the call out component. 3. Card: cod. This is a container component that's very flexible on where you can put any content inside . It will at a thin border in some petting around content, and you can use it to group content into different Kouts and also at a header, photo or image other kinds of content. You can control the sizing using the great system. So let's see how we create these cat components inside of coded. Start with just creating the card forever just to show you how simple it is. It's just detect with the cross Kat. If we view this in the browser, we won't see anything except for this thin line because we don't have any country inside. So let's go ahead. And that's content so that are here. Well, at the same day, VTech with the Class Kat and inside of this were at another day of tech with the class Can't section remember to kosher Dave Tex again, it's out of the cot section, with first out heading with the text count heading. This is an H two hitting element and then, well, let the paragraphs with this text I just pasted in. Let's say this go back and refreshing the browser. Now we can see that we have this got here with this thing border all the way around on some petting inside. Notice that in the reference section over here they only have a with off 400 pictures. That's because I chose to said to give them that fixed with Normally they will expand and take up all the available with off the parent element. So 100% normally, you would use them in your layout where they won't get as wide as what we see right here. But we'll return to that when we get to the sizing with great down here that's continuing to create account with a section and divider for header and photo. So we'll copy this code here pasted down. Yeah, no well, at a cat cheddar The top. So we have Dave Tech with class card divider and at the text card hitter in the bottom. After a section would do something similar, we had a big tech with the glass cut the writer and text card fouda. Now that's safe. Go back into the browser and refresh it received to divide us with the gray background for our header and footer. Now let's see how we can add a full played image to our God. So we'll copy the last example here, Pasted in now here now, one at an image after our header. So to do this, we have a day tech with class car image inside of this will add emits tag, and we'll pick in which, in the I am G folder with size of 900 pixels by 900 pixels. So this image is found right here, and I am G folder right there. Great. Let's just remove card food so it will look like me Examples in the reference section. Okay, that's safe. Go back and refresh. Now we have the cat, the head of the tough forbid image and the section down here with heading and paragraph. We're also at the leverage to the content, so let's see how that looks. Now, let's just copy all of this coat and pasted in here. So now we're just changed the card image class that wraps around the image to the class card section like we have down here. So I see what that shot will be. Now we can see now we have image inside of our card with same padding around all sides that our section No, he has. So the image and this content here both uses the cart section class to get this layout. Finally, let's see how we can control the sizing with the grid system. So here we have equity container and a bunch of empty cells. First, it's filling some code for some card examples and then, well, also at some bro's to define how big piece card should be. So we're just take this coat with a header on Florida. Well, paced it in down here six times in total. And that's just intent this like So Okay, let's see what it looks like now in the browser. We can see that now all the cells is just taking a toe each other. So back in here, you know, of course, container well at the row wrapping around the 1st 3 of ourselves. So we have detected class great X and crit padding X two Paride goddess and then for medium break from sizes and up. We want to Collins, but lunch break point devices and up. We want three counts. So now let's rabbit around these three cells by closing the Dave Tech down here. What was the same plane with the last three examples? So pace this code in here intent the three cells and close to Dave Tag again. Now let's say go back to the browser. And were you fresh for? Just adjust the with of the browser. Right now we're on the small screen. Everything stacks on top of each other. When we reached the medium break point, it shows two columns he with. Here we have the first road, which three cells and our second row would three cells. Then when we increase the with suddenly oh, reach this lots break point. And now we have three Collins in each row. So this is one way that you can. You sure cats to control the size of them by using the great system 4. Dropdown: drop down with this container, you can show additional content when you click a trigger. For example, a button. So the basic example. Here we have the drop down trigger. Click it and then we can see the content appearing. I'm a cricket again. It disappears. Now let's see how we can use this in different ways. We can have it open only on hover like, so we can have it stay open even though we have on the drop down pain up here April close. But he had stays open. We can make it close on body click clicking outside of the button. And finally we can position and align it. Here, here, here we have it in the top. Left top center Chuck. Right, bottom left, Bottom center. Bottom right, Left top, left center left bottom right top, Right, center and bright bottom. Let's see how we do this. In this code example, I've already have some Cote here. I have all the trigger buttons and I have Dave Element with the drop down content and an I d. So now connect this drop down trigger with the content. So to do this, how at the data Chocola tribute with the value of being the I d off the box we wanna show. So that is drop down basics now through that country here the day If we have the data drop down attribute and also the class drop down pain that saved this go back and select the right certain refresh. Now we can see that we have a country that became open and close by clicking. We can also make this happen on hover So to do this well, go down here. You know our next example? Well, after Peter Chocolate tribute with bad of being drop down How about this time? And then we'll absolute data drop down dispute at the class Drop down pain but save this. Go back and re fresh So something is wrong You Let's take a quick look. Drop down Have a yes, of course. I forgot to use the data. However, attribute that value true as a default basis falls, you're pregnant. Refresh Now it opens on harbor and disappears when we have off the button, We can also make it to stay open when they hover inside of the drop down pain. So to do this, we have the data talking attribute the value dropped down. I have a pain then data drop down. Attribute that data hover attribute with about a true and the data have a pain attributes with the value. True. Finally, the class dropped on paying again. Let's say this Go back were fresh. Sorry, said a little bit delayed. No. When we have a above the button, the content appears and would be hover inside of the country. It's not disappearing. You have to remove. We'll go outside of that country. So that's how you create a hover on drop down pain. We can also make it close on body body Click. So to do this, we go back here. Yep, Data Sokolac tribute. But the value drop down, buddy. Then we have data drop down. Attribute to the content and the data Close on click attribute, but value true. This will make it close by clicking on the body. We also at the class drop down, paid like so let's save. Go back and re fresh. Now that's open up trigger. Now when I quick outside, it will close. If we looked at the basic one up here, it won't close when clicking outside of the trigger. You need to trigger again. But here it will close by cleaning outside of trigger. Finally, let's take a look at precision and alignment. If we go to the reference section over here, we can see that we can position that drop down on all of the sites of trigger. So to the top, bottom left and right. Then we can also online the precision. So we have the top position here, Then we can align it to the left. Which was she right now with Senator or to the right? We do that in a similar way with all the other positions. So here we have the bottom left bottom send button, right, The left chop, left center, left bottom and right, Tuck. Right, center. Right. But let's go into the konitzer and create all of this. First, our selects all of the buttons here and I'll at the data so I can attribute the value being the I D that we have on the line below. So drop down, chop left. I'll change or the other buttons later on. Right now. This is referring to this. I d. Okay, Now we'll select all content panes and then we'll first at class struck down pain. Then the data drop down attribute than the data position attribute with the value being top and the data alignment experience with the value of being left. Now we can see that we have the top left up here. 1st 2 lines of code. The data precision as here has tough on the data alignment. Attribute has left. Now let's update all of the other. It dropped ounce. So well, stop but changing this value to center. And this by the heat center. And we'll change this to right and alignment. Right? That will change this tough here. True bottom. Also here bottom. And then we have the bottom left, bottom center and the bottom right. And we have the left position. So well, change this to left ID the value in the data position. Attributes change this to left and then we'll change. This year, too tough. Enlightment took change. The value to sender. The alignment sender Jesus spell you to drop down left bottom and the data alignment value to but And finally, for the last three examples, this is struck down. Right? Then it's up that must change thes three values as well, Right? Drop down, right center. Finally, I slept on right about him, and dead alignment should be bottom. I hope you could follow along here. If not, lend your ship post video and take a look at all of these values. It's basically just the three first examples that have been updated and changed to match the rest of the examples. Great, but say this. Go back, refresh in the right step, not with C that all of this. It's working exactly as we would expect. So this was thought about how you can used to dropped out component. Feel free to include any content inside of the drop down that you want. It could be a simple text or a menu. 5. Media Object: media object. This is a very common you. I patent that is used to position some kind of media makes you other kinds of content that doesn't rep. So here we see in media object with one media. It's a small image. Turn into a thumbnail next to it, we see your heading and a paragraph. We can also have a media object with two media items one in each side. We can control the vertical alignment off individual media items. You will see the right one being positions are lines to the bottom and we can control the vertical alignment off all media items. The same time he had both of them. I lied to the bottom. The default behavior is that the media object doesn't stack on small screens, but we can make it stick like this. This is a stacked media object that the stepped on small screens and will behave normally for medium screen sizes end up Finally, we can also nest media objects which we can see here. So this is common commonly found. If you have comments from uses to a block post on social media, then we see this kind of nested media objects where the media is the photo of the profile and then the comment itself. Let's see how we can great this. So we go into the cooperated certain, start creating a media object with one media Eisen. First, we have preparing development, the class media object. And then we'll create the media to the left side using a day of tech with the class media object section. This will be transformed into a thumb name. So we had to detect class thumbnail inside we can place our image. This is 50 times 50 pixel watch and we can see that image right over here in the image photo the i N G photo No, create one more section. So we had the Dave Tech with Mass media Object section and also the class main section. Since this will be where we put our content, the country would be a hitting media object hitting in a paragraph, just paste in some 60. Now that say this good back and refresh the page, you see that something is wrong. So let's go back and take a quick look. Media object Media uptick section Yes, we forgot to close this media object section up there. So now we have a media object with two media objects. Sections that safe go back and refresh. Now we can see that it works. Let's see how Begin Great. Another media Eisen's to the right side to do this. Copy this code Here couple this first media uptake section pasted in here. Safe banking. Refresh. Now we have to media items. Now let's look at vertical alignment off individual media items. Who pays him this whole code here and to a line individual items we can use flex utilities . So here we at the gas alliance off middle to the first media item into the 2nd 1 We at the cross a line self bottom. But save this, Go back and refresh. We can see that this is a line to the middle and this is a line to the bottle. I will see how we can align all media items at one time to do this. We're simply at the class up here to the parent element. So we used to flex glass, align bottom, go back and re fresh. Now I can see the both of them are lying to the bottom. Let's see how we can create stepped media objects for this example. Our scroll back copy the first example pasted in no blue at the class. Stick for small parent element. So we go back and re fresh. And now you can see on the smaller screens like so we can see that it becomes stepped. Great. Finally, let's see how we can missed media objects. What paste in the same code from before? No, we want a paste in a new media object just before the closing date of tech off our main section here. So it pays to this in. We're just invent this. Thanks. So that saved this. Go back and refresh. He was CEO in this that media object. It's for sale. You can use the media object to precision some kind of content next to some kind of media. 6. Off canvas: containers off canvas. With this component, it's possible to have a menu or other kinds of content position outside of the page and then revealed when you're quick on the trigger to see an example of this would have the basic example have a button to charge him this off canvas. So here we have a left side menu about that I can struggle by clicking the button or outside of the off chemist element, or clicking this close button here, but also use absolute precision. So here we have, yeah, element with a big picture inside to them. We have and off, chemist element. Inside of this, we can change the directions. So here we have the left side, right side, so bottom when you have multiple panels Exide right side at the same time, we can change the transitions. Push this the default. We can change this to overlap. If you want to, then we can. Then we can have this off. Candace content revealed on a specific screen size. So what I mean by this is here we have off. Can this content and for the media break point and in the next example lots break point this off can this country will be revealed so it would be opened automatically? So now when we under media break print size, we can see that this is automatically Bean revealed. I can't close it. When I increased with to the that's breaking size, we could see that the same happens to the other example. In a similar way. We can create what is caught in cameras not possible with absolute precision off canvas. But if we see here, we can talk this off canvas element. But when we reach the medium and large three point sighs respectably, this will be placed inside off the canvas. That's what they mean with in canvas. So now I can't reveal it as an sidebar, but it will be placed in canvas here. We can still do it. We are the medium break pint sized, but if I increase it with, we could see that it would be in canvas again. Finally, here's an example off child bar with off canvas functionality. When we click this hamburger button here, great, let's get started to create all of these examples, we will start creating the basic X able, So the first thing I want to do is take a look at what code we have for you. We have a Dave Element from I d wrapped around a vertical menu and then a close button. We want this content to appear in our off campus. So all of this country inside of the development. So the first thing we're gonna do this at some classes to the river. We had the class off chemise and position left. Precision it on the left side. We must also act the data off chemise attribute to hook it up with the JavaScript. Then we could see that we have to spotting here. That should function as a trigger. So you make this happen. We have the data chocolate tribute with the value of being the I. D. Off, uh, off canvas element, which we have right there. Finally, we need to specify off canvas content so we'll do that for main tack here by adding the class off can mess content and also the data off canvass content Attribute. Now let's say this go back in the browsers like right tip and brief fresh. Now when we quick total, but we can see that the off chemists appears in left side. We can close it by cleaning of the close button or clicking outside off the off canvas content on this button again. Now let's see how we can use absolute precision to precision it inside a specified parent element. We will scroll a bit down here to the absolute precision. Example. First, when using absolute positioning, we need to add and off Kendra's forever. So a development with the class off chemist forever this shoot wrap around both our off canvas content, which is peace lions. Here we have the vertical menu again. Then the close button and then also our content down here outside of this rapper will have our button to trigger open and close. Now we'll at from classes too. This wrapping element here first off canvas absolute and then position left to precision it at the left side. And we also at the data off tennis attributes notice Before we used the class off canvas and data off chemists attribute Now we use off canvas absolute and again data off campus. So a little different. Now we have this Dave Tech down here with me, which inside this should be our content. So we the off canvas content class and data off canvass content attribute This was what we before added to all main check up you. But now we want to specified to a specific parent element inside this, the off canvas content will appear. Finally, we need to at the data toggle attributes to the trigger button and at the I d off Kendra's position. Now it's safe. Go back and refresh. Now we can tell the off canvas right there in the left side. Now let's see how we can change directions left, right, chop bottom. So left. It's the D Fort one, but will create it again Right now, I just select all for these court blocks here to make it a quicker, especially at the driving class off Kendra's Revver and then for our rapping element. Here we have the classes, both can mess absolute and position left will change it in a moment. The other places and also that the data off chemise attribute Then we'll Yeah, I forget to at this year Sorry, the class off canvas Absolute position lift and the data off canvas attribute. Now we have added it too old for examples, then well, select this development, which should act as our main content. Therefore, we need toe the off canvas content and the data off canvas content attribute as well. Finally, for trigger buttons, we'll select these four 12 three folk and we at the data talking attribute, but the value being the I. D of all off canvas element. So that would be off. Chemist direction lift. Now let's just look at what we should change here. We have the 1st 1 position at the left. Then we need to change the next one, right or so. This battle here So it it's the same as this one. Next will be Chuck, and finally we have bottom, all right, we can now save this. Go back into the browse and refresh. You see the lifts direction, right? Direction. Please notice that the wrapping element is this large. It's just a image that's not us lunch. So that's why it appears all the way to the right side, and we have it in the top for with and in the bottom. For with we could also have multiple powers in the same main content area. Let's see how we create this. So we scroll a bit down here. Once again, we start adding the wrapping element since this is also absolute precision off Kenneth Settlement. So we had the off tennis grapple. Then we have the classes here off chemise, Absolute position left and the attribute data off Kendra's. We need to add that to the right side as well. Off chemists. Absolute position, right? And then data off canvas. We have all main content area here where we get off canvas content and data off. Can this content attribute? Finally, we have made a chocolate tribute with value being off chemists multiple lift, pained, right? So just a quick recap we have to do off campus rebel here, Then we have to off canvas countered 1st 1 second, one first oneness position to the left. 2nd 1 position to the right and we have one main content area and then we have to trigger buttons. You, let's say this circle back and refresh. Now we open up the left off campus and now open up the right off campus. Now let's see how we can but change the transition effects. So we have two examples here. The default one which is push and the oil at one. We start again by adding B Oh chemise, rapid class. Then we at the classes off chemists absolute and position left. Then the data off canvas a tribute. Now to set the transition, we must use the data transition Attribute value In the 1st 1 will be push, which is also the default one. And in the 2nd 1 will be Oh, well up then We were also specify our main content using the classes off. Can this content and data off Chemists content X butte. Finally we have to trigger buttons here They had talked like appeared and the idea off Chemist efficient push, transition push a transition Well, that now say this could bag and refresh if we scroll once that back look and see that the default is push. That's what we have here as well. But we can change it to be an overlap instead. All right, we'll allow check a little, get how we can create that review example. So to do this, we sort a bit down and we see we have to cope blocks one for medium and one for large. So we're gonna select both of them first at the wrapping element off canvas rebel. And then we go into the wrapping element here and we had some classes off cameras, absolute position lift and then a new class revealed for medium the 1st 1 and large in the 2nd 1 We must also at the data off canvas attributes tests we did in all the previous examples. Now they're civic to the mean content area at the pass, or can risk content and the data or can rest content attribute. Finally, we at some coat store trigger buns that data startle, attribute with value being off canvas re real, medium and large down here. In the second example, notice that this button it's hidden for large screen sizes and up and up here it's hidden for medium screen sizes end up. This would make sense when receive this in effect. Right now, we refresh the browser, open the developer tools and decrease that with. So now we have a small break point, which we can see you up here to the left side, and none of them is revealed when you reach the medium break point right there. The 1st 1 reviews the off campus content and also heights The talk about in the 2nd 7 we can still use there. Tuggle. Now, when you reach the lots break point right there 2nd 1 has also been revealed. We'll see a single effect now with the in canvas example which is, by the way, no possible absolute with absolute precision off canvas, we scroll down here now we're at the off canvas forever class. Then we'll wrap the crisis. Oh, Ken Mess Notice that we don't use off chemise. Absolute Because, as has just said, this is not possible with absolute precision off canvas. So the glass this time is off canvas and then precision left. And now a new class in canvas for and they're not brakeman. Medium down here should be large, of course. And then we must also at the data off canvas attributes allow civic. I mean content give it a class off canvas content and at the data off can rest content attribute as well. And finally we have the data talk about your beautiful value or can miss in canvas medium down here much. All right knows is that the bordens she is hidden for large and up and here for medium and up. Now let's say this and see what it looks like. We decrease that with here, too. Small devices so we can see now. But without then it's working and they are not absolute position. Yes, I also mentioned before when we reached the medium break point right there, we can see that this off campus content is now in canvas, meaning it appears that's part of the content, not as a sidebar. So it's the PS in canvas and not off canvas. Second example still works its before, but when we reach the last break point right there, it also positions their content in the canvas that is on the page. Finally, let's see how we can create a title bout over canvas. We scroll down to our lots example here, stop with adding the class off Ken this forever, Then Father off campus content, we at the class off canvas absolute and the position left glass and the data off canvas attribute. Now we have the main content down here. The bottom where we at the class Oh, canvas content and the data off canvas content. That's Butte. Notice that we have the title bar code right there inside this title. Love, we have this menu I can hear. This will act as a trigger. So we at the data charcoal that spirit the value being off Kendra's titled Bar, the idea of you was safe. Kubang refresh. Now we'll click this menu. I can. They're off content will appear. We can close it us well, clicking the close button or anywhere on the page This was all about how to use the off canvas plug in. 7. Reveal: reveal with this contain a component. You can create a dialog box, nodal pub up or whatever you wanna call it when the use of click a button or link this will trigger motile that bull, fade away the background main page and focus in on this new content that opens up. So now let's see what this looks like. A basic motor looks like this. We have some country inside of a button where we can closer voting. We can use the escape key or I can click outside. We can work with different sizing. We could. The basic one is 600 pics of white. We can also make it 30% 50% it a default again, 100% wide. So this make more sense to see do, like so precise of window 30 and 50% white. 600 pixels and 100% also notice when we're on small screens like so all of the Moto's will become foot screen. Finally, we have this foots being motor that works on the whole screen. No matter how allows your screen ISS, the one that's hunt apps and wide looks for the with of the container, we can nest our models. So here we have one more load and then another one listed inside of it. We can create no overlay. So now we're still see the content the page behind the only or behind the reveal. We can use different animations to open up and close the review. We were also see how we can enhance the accessibility for the mortal. Then we'll see how we can disable closing with outside click. So now I can't close this motile by clicking outside. We also to say from closing what escape key. So now or nothing happens when I used the escape key. Finally, we can create a deep links on notice that the address appear in the browser changes and includes the i. D. The anchor for this country. So you oppose it. It's removed again, and if we were to type it in directly, it would open up instantly. We can also set the browser history. So now we can see that we have his one over Close it again. Now we're gonna actually Chris go back and it opened up in the history. This is very nice future. Now let's see how we create part of this. For the basic reveal, Start having a day of tech. Keep it in Heidi. We'll call this one. Reveal basics and give me a glass reveal. Then we must, at the data real attributes to Rhenish life that you have a script on the element he will at some basic content country from moral then for that closed bottle. So we have a button tech type but class close battle. You can learn more about how to create this close button. In another lecture, the area label attributes but the close morning value and the data close that's beard inside of the bottle with Green. The greatest band tech with the area hidden attribute the value true and the value. The content of this would be an XT email entity the time simple and then closed the button . Take again. Now, after the code for the model will create bottom to trigger the moral. So we have a new but intact the type. But the class button and the data open attribute Value review basics, which the same s I d appear? We'll give it a text over motile and close the bottle again. That's safe. Kobe brothers select the right tip and refresh. Now, when you click the button, you can see that the border opens. We can close it by clicking on the club's Agon, the escape Garden, or click outside of Motile. Now let's see how we can create different sizes off the reveal noble. We can create a tiny one that's 30% wide. It's more one that's 50% wide. Have the default one, which is 600 pixels wide or a large one, which is 100% wide. So you know current, it's over. Start by copying off the coat from before and then tasted in here. Well, now update the i. D. Here that value and the value off the data open attribute. So we're called a reveal Chinese just so it won't conflict with the other one. Now to make this a tiny one was simply at the class tiny to the parent element that half the has the glass revere. Already, we paste the code in one more time at small variation, update thesis ideas again revealed small and that the class small. Then we have to default one well up date values to reveal default and we won't add any classes this time. This is the default size off 600 pixels wide. Then we have the large one update these values and at the cross blotch. Now let's say this. Go back into the browser and refresh. Here we see the Chinese motile, the small motile, our default moral and ah, large motile. So it takes up the available with inside of the parent 100%. Now let's see how we can create a four screen moral. I'll paste in this cold again. Update These two values here, too, reveal full. I know that the class full to the parent element that's safe and go back and refresh When we click open, we can see that we have a full screen Morton taking up all of the screen space we can nest mortals inside each other. Let's see how we do that. What pace the code in update the values to reveal nested one. And now we'll have one more instances off this three real down here Update This two nested to the button that opened this this down here so well, cut that and paste it in as part of our continent. Right there. No When we open the first model, we have a button that can open the second model. So let's see what this looks like in the browser. We opened the 1st 1 and then we open the 2nd 1 Then we close the 2nd 1 and then we close the 1st 1 That's how you can create nested normals. Now let's see how we can change some of the sittings for the motel. We can remove the overlay that's put on top of the page. Let's go back and copy all this. Kulti paste it in now to remove The only was simply at the data overlay attributes but the value false but must also update this value to be revealed. No overlay. Remember, you can call it whatever you want, but these needs to be the same values, and you can only have one unique idee per page. So that's why I'm changing these all the time. Great. Let's save. Go back and refresh. Now we see the content with the motile, with no overlays of the background is still clearly visible. We can change the animations paste in the code, update these values now we'll at a data attribute called data Any mation in We're used this spinning class here with spinning animation and then we at the data animation out attribute . But the values spin out. You can choose between different animations in the motion July library that comes with foundation. But save this. Go back and refresh. Now we can see that it spins ins and spins out again, right? Let's talk a bit about accessibility. How we can improve that that paste in the code update the values here Now we can at area labored by attribute the value reveal. So I stopped speaking. That's because I was supposed to save reveal than Alley, which is a show handful accessibility using the number 8 11 Why and then label. Now I'm gonna create that label so that would basically be heading for motile heading Element. The idea will be what we just saw reveal Alley label. So now this model has label, and that label is connected to the area labelled by attribute in the parent element. If we save and take a look. Well, though same conceded label visible here, which is connected to he parent element. So that was a bit about accessibility. Now Let's continue with other settings. We can disable closing with the outside quick. So first that's update this value here. Then we can at the data close on click experience with value flows that saved back of refresh. Now, when opening it up, it won't close. From click outside, you need to use the escape key like so use the close button like show we can also disabled . Closing with the escape key repast in the coat from before up Fate This value here Now we at the data close on USC for escape, distribute the value of falls that's safe. Go back into the browser on your fresh. Now when we open on motor, we can close it. Using the escape key, we need to use the close button or click outside of the motel. Now this greater motor with deep link functionality paste in the code Here change the value of these two attributes. And then we asked the data deep link about it. True. Now, when we go back and take a look, we can see that we have this deep link here. The ankle tech applied after our address for the euro, so now we can actually use this, so No, it is Here we go straight in to that anchor. Now it's the whole page. No one would paste this in with the deep link. It will open up the mortal. So that is how we can use a deep link functionality. We can also control the browser history. So paste in this coat here update value to browser history. And now we'll keep this data deep. Link Attribute the value true. And also at the data update. History attributes with value. True, I see what we can do now open up the Notre. Now, when we use these history burns to go backwards and forwards, it will open up the moral. So that is how we can use the browser history functionality with our mortal. And that was all about the Reeve evil component. 8. Table: cheaper. This is a container component used to have displayed tegra lot data so not used for lay out . But for a certain kind of data, he received the various examples. We have the basic example with table header and some shape rose with tape ourselves inside and we have a table with health estate activated so we can see the background changes a little bit. When we have a on the road, we can remove the stripes. So on the default, every second row has another background, Carter. But we can remove that. We can make it appear stacked on smaller screens for default. It doesn't stack, as you can see here, but we can make it stick like so for smaller screens. Notice that the table header won't show which being stacked like this. Finally, we can make a stroll if the table has two more state of play Or essentially, we can at this verse also scroll. But all right, let's see how we create this, you know, Code editor. Well, first great. A basic table. So we do this by having table tech into this where t hit tag for the head. Then we're at a t r. Check what shape row than a G eight stack for table header Sil. I would give it the text table header and copy it. Pasted three times after our table head. We create shaped body and a cheaper bro in a table cell. The 1st 1 we warned paragraph like so And And the other cells assembly want a little bit of text Chamber data cell. So we do like this now We'll copy and paste this row. So we have three rows here. We'll take a look at this in the browser. Now select the right chap and refresh. Now we can see that it automatically tries to size these columns or cells. Here. Change this well at with a tribute on the Value 300 which is pixel value to the first table here. That and the with 200. True. The third and fourth J pled forgot the letter h here. Now the safe. Go back. Refresh. Now you can see it looks a little pale. All right. Let's see how we can create different variations. First, we want o at the helm estate. So copy paste this coat and simply at the class hover to the parents table. Tech Apparent element Let's go back and refresh. Now we can see that we have a rose. Background changes now to see how we can remove all of these stripes, which is the different background colors for area signature role that we can see in both of these examples here. So we're pasting out of this Kurt again now who had class unstrapped to the table element safe. Go back and re fresh. Now we haven't done striped table or table without stripes. Now let's see how we can make this stack on smaller screens. To do this was simply at class. Stick to the table element. Now let's go back and refresh resize the browser window. I can see that it become stacked for smaller screens on notice. Also, that the table head won't display when it's being stacked. Right now, it's stack for small and medium screen sizes, and then, for large green choices, it displays Normally. Finally, let's see how we can make it scroll or centrally if we have too much content. So to do this, a paste in a table here with a lot of table cells in each row, we have one rule for the head on three rows for the body. So just intent this correct way. All right. Now, to create this scrolling behavior, we need to wrap this table in the data tech with the class table scroll. So we at the open, Dave, take their and the closing day. VTech there. Now, let's save go back and re fresh. Now we can see that we can scroll it or centrally, if we have too much content to show on the page. This was how you've been. Create tables. 9. Tabs: containers tests. With this component, you can switch between content in the panel using different tests. He received a basic example where we have a horse on the menu that features the taps and then we have the checked pattern below it that changes all of the content when quick New tep. But now it's only the number of changing. But in fact it is the whole content. But the content is just very similar in these examples. We can have vertical tax if we prefer that. And we can use that to place them in a great vertical taps in a great like so we can have collection chaps. So when we clicked the same check, it will collapse and remove all of the content below it. You can have a match height, so notice here that we have the same height off the content area, the tech panel, even though so one of the taps have this content some of the panels have in this country. So this is the way to Metz. The height we can great deep link functionality. So what were quick attack? We can see deep link up here, and when we open up in Utah and into this deep link, we can see that this temp has already been selected. We combine this with something called deep Links much so free. Copy this link. Open yet another tap. Then it will scroll down to the tap here and also have the right tap open. Finally, we can adjust the browser history. So now step through these tests and I can now in use the arrow keys up here to go back and forth in history. So that's a nice feature that you can choose to use a swell. Now let's get started. It's great. The tech component was stopped with a UFO element. Give it the I d. Accepts basics and the class Tepes. Finally, data tests attribute no well at a list element. The class tests trial inside of this right on the architect that would lead to the first constant panel. So well, use the I d attempts basics one and also used the area selected attribute the value true, since we want this to be the currently active one. So we must also at the class is active to this one. Now that's copy to greet the techno volin. We start craving ul element will give it the I D chats, basics class texts. And the data tapped that beard. Now we're creating the individual taps. So we have a list element to give you the class tests Time temple at Angkor Attack That leads to the I nd off the chap panel. It will create later. So we're used I de Temps Basics run. Give it the texts. Value chapter one. Now copy this a few times an update. The numbers here to to and three. Now we want the 1st 1 to be the active one. So we at the cross it's active and for accessibility were also at the area selected. Attribute value. True, I would create the chap continent. So we had to detect with class That's curtains and the data Tepes curtain and attributes the value thing I d off our text up you So these will be connected then. Inside of this would create the first country panel given the i d test basics one that we were referring to appear and class tips Penhall our at heading element with the text Tep paddle. But one and then Backdraft, which rained on texting and Now we can copy all of this Cody and pasted in a few times. Update this number 22 three. And now, since the 1st 1 was active one we need to add the class. It's active to this one as well. All right, let's safe. Go back into the browser. On re fresh. Here we see our tech panel working. Now let's see how we can make vertical taps. Instead, we'll go back and copy all of this. Go to you. Paste of in. Now we need to upper class vertical through the pound element here, and that is simply it. But to avoid conflicts, we need to our trade all of our ID's. So I was slicked all of these at the same time. And we're changed too. Taps, vertical that save and see how this looks like. Now we see all critical tests. See how we can use that to place it in a Great So we'll go back here, Then we'll stop creating our great Dave. Check with class quick container inside of this breath. Another day of tech. Sure create the road. So we had a class of scraped X and grit. Margon X been well at column. So we had that they've taken the class so on medium three. So it will take up 1/4 of the available with and now inside of this we can paste or text you like so the on order list. And then we created the other column using the classes sell on medium nine so it will take up 3/4 off the available with and then we'll copy and paste the content. The text country. Finally, we'll need to update Oh I ds and more so it won't conflict. So we're assembly at the word great becomes taps. Vertical. Great. Let's say this. Go back, refresh and see what it looks like. No, we have the great here. If we resize our browser window to small size, we can see that initially it looks like vertical tests because the greatest not turned into two columns yet. Then, on medium devices, it turns into a two column quit. Let's look at more options for the tests, so we'll scroll back and copy. Let's go to you Now we're creating collapsing tests where we collects the tech panel by clicking under currently open. Yet to do this, we must at the data active collapse attribute with the value being true. And as before, we'll update these values here. Taps collapsing, will say Go back and refresh. Now you can see it works normally and then we can also collapse the co only open tap. Let's look at match hide functionality well, paste in the code. Then we'll change the amount of content these tests you. Now we'll update these values. Too tense hide. And when I left, he had finished but will just take a quick look in the browser. We can see that the height changes and the rest of the page layout is jumping. We can great a match hide by adding the data Mitch Height attributes with value. True. Now we'll go back and look, look and see. We have to wait for reload. Now we can see that the height is maintained, so page wound job. Now let's continue and take a look at deep link functionality to create the deep link functionality. We'll copy the code from the fall like so pasted in. Then we'll remove this data and match height. Attributes that we used in the previous example instead will use the data deeply attribute of value. True. Now we'll update or these ID's select all of them. Change it to tips. Deep link. Now that's safe. Go bag in the browser. Refresh Now notice in the address bar up here. When I click attack people act deep link to the U L. This also means that if we copy this coat or this address over when you tap pasted in the current tap will automatically be selected on page load. If we use this deep link for geniality from another page, we can also create a deep links, much which will do the same thing. Plus, it will scroll down with, um, animation to the current Tep. So let's go back. Copy the previous code here, paste it in. Now we'll keep the data peopling attribute and also at the data deep link smudge attributes with the value troop. Well, now update or the values of I. D. C. So it will be called taps Deep Ling. It's much Let's say this. Go back and refresh. We open up a tep panel here. We see that right now, nothing looks changed, but if we copy, I link you from the Atra spot and open up a new chap pasted in. We can see that the browser scrolls down. Let's have another look. We can see that it scrolls down. True, The bride taps component. All right, finally. Let's see how we can use the browser history feature. Now, that's copy this code from before. Paste it in here Spring. Move this data attribute and instead for at the data update history attributes value true Will keep the data deepening. Attribute Now we'll copy Update these i D. C. So it will be texts. History will save it, go back and re fresh. Now we can see that when way step through this tax component. It has then been included to the browser history, which we can see when we navigate with the arrow shop here. Notice at the address will change and the current tap alot social change. So this is how you can include the tap navigation to the browser history. And that was all about the text component 10. Responsive Accordion Tabs: containers, responsive accordion steps. With this component, you can responsibly change between accordion and tepes, so depending on the with off the browser window, it will automatically change. She looked like an accordion or a tepes. So if we decrease this with you, we can see that initially, we have an accordion displayed for small devices than when we reach the medium Break point turns into a text panel component. And then, when we reach the last break point changes back. Join a cogent the opposite. It's true for our tax down here, so it starts out being a tax component on medium device. It changes two and the Korean component, you know, large devices. It changes back to a tax component. We can use the A C mo for either attacks component or an accordion component to create this responsive accordion tips. So let's get started. We start by having a ul tech to great ally Korea. We give it the I D accordion, the class accordion, and then we'll at items inside of me accordion. So we had a list item with glass accordion item and the data attribute data Accordion item No, well at some content inside first will happen trigger so it would be an ANC attack. The I D will be. Or it will lead to the i d. A court in one, which were created in a moment. We'll give it to class, according title, and it needs to get the data chapped content attribute. We'll give it the text Accordions title like So Now we'll create the actual content in another teeth with the i D according on one and the class guardian content. And this is actually the one that should have this date attempt content. I'm sorry about the confusion, so we have the ankle tech that is the accordion title. And then we have Dave Tech. That is the accordion content that day after Tech should have the data tap Country attributes no well at and hitting, but the text tech panel number two. Now it's just graft. Some text to you and this file. Just select it like so go back. I would pay seven p tech All right now. Well, I to me is so we'll have three of them in total. We'll change this value true to, and I don't hear what changed by their two or three state these headings as well. All right, finally, well at the is active grass to there active one, which is the 1st 1 And now to make this responsive accordion chaps component. We had the data responsive accordion taps attributes, but the value will be first specify the initial component we want to show, which will be in Cody in. Then we specified a break point, followed by a dash and the other component. We wanted to change, too. So this will be medium tats. We could do that again. So let's take with Lache Break, point dash and then back to an accordion component. Let's say this. Go back to the browser, select the right chap and refresh. Now let's resize the browser window first. We have the small with you. We see the accordion component, then will return to the medium break with received a tax component, and back to the large break point, it turns back into an accordion component. Everything seems to work great. Let's see how we can do that with the taps ht mo. So I scrolled down here well, thought creating a you attack. But the idea taps in class taps. Then We're at a list item with the cross textile and inside that that Thank attack. Meet to an I D. Chats. One for this 1st 1 Give it the text that one close to being a tech. Now, having this your times they look great chaps content in the Steve Tech with class that's content And also the data taps country attribute the value of being chaps now can create another day. VTech idee taps one that we were referring Drew just before we came with a glass tepes panel. Let me come paste in the actual content. So we're just copy subtext from up here, Jeff. Panel one. All right now, we'll copy this two times, and now we need to change some values. We'll have tex to three te pen. One step untrue and tech Panel three. I finally want to indicate the active one. This active class will be added to list item up here into the ink attack. We're at the area. Selected attributes by the truth. This is full accessibility. And down here in the first taps panel will at the glasses, active as well. Now, finally, as we did with the other component, we need to at this data respond to according UNTAET attribute, and first we want to specify which component we want to appear. Smaller sizes this would be taps. Then we specified break point, followed by a dash and the name of the component. We wanted to change, too. So for medium devices, I wanted to change to an accordion. And again, the large devices wanted to change back to tax component. But say this. Go back and re fresh and get down to the small screen size. Perceive we have 40 wearing taps you. Now it changes into and the code in proponent. Finally, it changes back into the tech power. We can see that something isn't looking quite right. Silver. It's just try and fix that. What could it be? We forgot to move this outside of the U attack, Of course, like so it's safe to go back and re fresh. Check that it looks right now. All right. It still changes like we did before. This was Lache, brakeman size. This is medium break franchise. This is the small break print size. So this is how you create the responsive accordion taps