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

6 Lessons (1h 8m)
    • 1. Abide

    • 2. Equalizer

    • 3. Interchange

    • 4. Toggler

    • 5. Smooth Scroll

    • 6. Sticky

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

These are interactive JavaScript plugins used for more advanced layouts, animation, and more.

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 6 components in the "Plugins" category and they are:

Abide, Equalizer, Interchange, Toggler, Smooth Scroll, and Sticky.


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. Abide: pluck, ings, abide. This is a phone meditation plugging that you can use to make client side meditation on inputs in forms. So a basic same that this is an input that's required. So if we don't have any value and we click submit who can see a general error message appearing in the top and the input being highlighted with bread, front color and read borders and background. And also this specific. Aramis, it's you. If you put in some text and click outside, we can see that validates to true, and we can now submit it. We can use different patterns to validate. We'll look at them in more details when we get them. It is a quick overview. We have number into your of a numeric password. Carte cvv ul domain website color a month, a year and a day, month year. We can also ignore inputs. So if I submit this form here, 1st 1 is a normal input just to see the difference. 2nd 1 has been told to be ignored, and then we have a disabled one and the hidden one that you can see right now. Finally, we can have live validation so on every key press value date, the value. So here we have a letter number and then a question mark. Now it becomes invalid. Bring into it the same thing on blow instead off key press. So now if I had the same text here, click outside becomes blurred and it validates to false Great. Let's see how we do this In our practice section, we have all the form elements already there. We just need to add some extra elements and attributes. So let's go into our code to here first on all form element. We need to add the data abide attribute to hook this up with JavaScript. Then we also must, at the no value date attribute to tell the browser not to use the native meditation methods . Now we'll create the general air, a message that will show in step off our foam or wherever we wanted. We create a day of tech with the data Abide era that's appeared and we're giving us the class call out and theological class to make it the alert color. It could also be another element, but this will show and hide it under right times. Then we area live attributes with the value assertive to make this high priority for screen readers and finally would given in lifestyle with this play none. So this is hidden one pitch load. What happened? Message General era message like, So close are paragraph. Now let's continue down to this labor that wraps around our input. We see that it has this help text. So we're at the area described by a tribute with the value basics. Help text. No well at our error message, right after way in. But so we had a Spain Tech give it the I D basics era and the class phone era. Like so and at some text, this field is required close to Spain Tech again. And now let's go back to the input element and at another attribute area era ever message. So the value of this will be basics era. So this tells screen readers that the area that me ever message is this one, and that the input is described by this paragraph down here. Great. No, let's say this goes back into the browser and refresh that's submit without entering anything we could see. It doesn't work this because we're actually forgot one important thing we need to at the required attribute, which is also needed for mated form, validation. Now they're safe. Go back and refresh. We submit without entering anything and invalidates falls. So we had the general Aramis it show. And we have this in perfumed, highlighted with the red color. And this Aramis, it shone. All right. Now let's look at different validation patterns in our coat here. We already have the foam set up to validate. And we have all these area attributes on our inputs. And they required us. Well, we only need to app one thing, and that is to specify the patent to use. So here we want the number pattern. So we at the patent attribute the value number on the next one. We have the patent into patent attribute the value interred your bound here we at the Patton at appeared the value Alfa you Merrick. Then for our passport, we had the pattern that's appeared. The value hell for you, Merrick. And now for the Rienda password field. This is a little bit more difficult. So once again we had the pattern Alfa numeric. And this time we also at the data equal to attribute the bedroom being password input. This is referring to the I. D. That's already being set up here. So this input should be equal to that import. This is what it means. Let's continue down here to our cart. We'll give. Give it the patent attributes with that you cat next one SCV backside. Oh, security number on credit cuts. Give it the pattern attributes with value Cvv. Then we have you l patent at your group the value derail, then domain and we have our website. Then our color Patton. I'll explain how all of these works when we go back into the browser month. Okay, You remember to use these underscores. And the last one is they month. Yeah. All right, let's say this. Go back and refresh now. First number. That's easy. If we detect press step, we'll give. Get in the era numbers works you here we must have interjects, which is whole numbers and not using any dismal. So this gives an error. But whole numbers works after numeric means lettuce and numbers. So if we use a question, mark will get an error password. This was also using the Alpha numeric Patton. So we just into a one here now, in 2nd 1 we into a two. This will give us a problem. If I enter a one, it's equal to the 1st 1 and it relative to true Kat. It's full credit cards. It must be 16 digits long and start with 456 So let's do that back. So and then just in tow. 13 more digits? No, I can see right. Dispiriting to fault. That's just count. 30. Just want to a 3456789 10 11. True. Putting 40. We need need to more. Now we have 16 digits. Now we have 17. That's a mistake. 15. It's a mistake. 16. It's the right one if we using one. In the beginning, it's followed to its also forward, but we can use full five and six. Oh, at least four and five. I'm not totally sure how all these values works, but this should work for credit cards. CVS on the backside of credit card, it must be three full did just long. Not five. Not to, or longer or shorter. All right, then we have for you l We can fix him, but right google dot com But this will give us an error we need to at www in front or a C t p colon slash slash Then we have a domain. That could be google dot com. Oh, Www. Google did come, but it came not be with the http in front of it. Also, we came at the slash calenda. This won't work either. Has to be a domain in the U L. Up here we can had something. What a slash Then finally we ever website that could be kind of anything. So that's a difference in these three when you have a color which is hex color value, so it can be three on six long It can only be a to F and C 0 to 9. So, for example, like this but not like this. This is how you use hicks. A dismal color values. Then we have the month day year in this format. So this right 12th 30 2019 This works. If we had 13 you it's false. We only have 12 month in a year. This is a little opposite down here. So day first, then month and then year once again. But it validates all three of these numbers. So this waas all the patterns that you can use now let's continue to see how we can create ignored inputs. So let's go back into our code editor. Scope it down here. Once again, we have all the validation set up here. The 1st 1 It's a normal labor and input that will validate Sirti. That difference now, the 2nd 1 to make this being ignored? Yep, the data. Abide, ignore attribute. And for the 3rd 1 we want to savor this one. If we do this, it will also be ignored. Finally, the third way to ignore input field. It's when it's being hidden. So we have input here with type attribute with value hidden. Even though we have the required attribute for this, it would be ignored since it's hidden Safeco pregnant, refresh and submit. So the 1st 1 gets herself era, but not the second offered one or the hidden one. So this is how you can ignore inputs to be validated. Finally, let's see how we can create live validation right now. Well, old age only on submit. So let's scroll down here. We have the validation set up. We simply need to at the data Live value date the value. True. That's safe. Go back and refresh. Now on, Eric, keep Chris. It will validate to see if this it's true or false, valid or invalid. I would also validate Blur to do this. We go back here and we had the data ready. Date on a tribute with value. True safe, good bag and refresh. Now we can see when we click outside of the input, it's being validated. So this was how you can create client side relegation using the abide plug in. 2. Equalizer: plug ins Equaliser but this plugging you could easily make sure elements have equal heights . So for these examples, we have some quit systems here with cells and then we use the call out container component with various colors to show these exam it's and then we have small and large images. So here we see the small image, the large image and small image again. So notice how the first and last cell is taking up the same height as the middle one. We can also equalize on Steck, so the basic behavior is that they don't take up the same height when they're stacked, but we can make him do so if we want. So now this one equalizing stack, we also make them equalize on break point, so notice that this example it's not have not have not been equalized yet. But now when we reach the last break point right there, it will become equalized with same height. We can also missed elements you could Lytham well, see how we can do that in more detail later on. Finally, we can also equalize by a row so it will automatically look at each role. For example, in a great block and then adjust the height of the cells in each row. We'll take a closer look at that as well. Let's get started. So, as I said for these examples, we have some quit systems, which sells that has to call out inside would different colors and either a small or large image. So if you take a look at this first example here, we can see rep. They don't have the same height by default, so we'll make them have the same height by using this equalizer plucking Too late to do this, we have the data equalizer, a tribute to the pound element and then to each element that we want to have the same height we must at the Data E equalizer watch Attribute. Now let's save go back and re fresh. Now we can see that they have the same height on medium and small device sizes. When they don't stick, we can see that when they are stacked, they are not equalized by default. So this first example has three column layout for lots to buy sent up, but for medium break points down, they're stacks, so they're not equalized. We can make him equalized. If won't you, though, their stack. So we have the same Chris grid system down here Now, we'll also at the data. Hey, equalize attribute. But also that data equalize on a stack at your group of value. True. And as before, we must at the data equalizer watch not a safe go back and re fresh here. You can see it has been equalized on Steck. And or so, of course, when it's turned into a three column rose or now equalized across all break point sizes. All right, we can also set the brake find when we want this equalize to happen. So to do this, we go back in there goaded, so we have the data equalizer. It's not easy to Bill data equalizer attribute and then Data e equalize on and then the value should be. Outbreak on show will make it the lots break point and well at the data equalize. Watch to the Children, David equal. Liza Watch. Now let's go back and refresh so we can see currently right now on small and medium devices , they have not been equalized yet, even though it's turned into a three column grid. If it were a basic one, like up here, it would have been equalized now. But then when we reach the last great point, the equalization will happen. So that's how you can control that? No, let's look at nesting behaviour. So in the coat you can see that we have three main cells with the call out each inside the first cell. In the call out, we have three more call outs, so it looks like this three call outs in the first cell and free of the cells. We want these three in the first cell to be equalized on stack. That means all device sizes and warned the three main cells to equalize on the large device sizes. So to do this, we first at the data equalizer to the parent element. And then we give it the value of a parent so that we can differentiate between the parent and the child. So that's a way to nest. This plug in, we have the data equalize on large. We want this to heaven, unlatch to buy sizes, and then we'll add the data E equalizer. Watch the value parent. Now we'll create a new context for this device. So we'll do that on this cold out here. So adding the class or the attribute data equalizer this time with the Value Child were also at the data e equalize on stacked with about your true since you want these to equalize on stack now for these three call outs, we must at the Deer E core ELISA watch attribute, but the value charge So these will be connected to this one and the other three be connected to this one. So this is nesting off the plucking. Now let's go back and refresh. We can see that initially, here we have the 1st 3 of them being equalized on Stack, and then when we reach the large break point, the three main one has become equalized on the medium break point. The three main ones are still equalized, but not what that the three ones in the 1st 1 is still equalized. But not the three main ones that happens on the latch device eyes as we just saw perform. So this is how we can make use of nesting. Finally, let's look at how we can equalize by row, so able consider each row make sure that they, the columns inside, have the same height. So we were scored down here to our next example. We can see that we're using the block right feature where we want, Ah, three blocks or cells to appear on each row for small devices and up and then fall of them of each row for medium devices and up and then six on each row. For large devices end up. And now on this main element will at the data equalized attribute and the data equalize by bro attribute with the value true. And then, for all of these call outs, just select all of them carefully. We let our data equal. Liza watch. Now let's save this and go back and refresh before I refresh Notice that the cells just after from Carlos and 12 or three of the small images inside. No, we can see across different break points. We can see that each row has been equalized automatically. So this was all about how you can use the equalizer plug in 3. Interchange: plug ins into change. But this plug in you can easily change the image or background image, often element across different device sizes or break points. You can also even changed the content, often element by pulling in content from another file, depending on the with of the browser window. So he had received all examples just resize, browser window and refresh. First we see the screen image. Yeah, for both the image and the background. Then when I resize that window to the medium device size, we can see that it just changed changed. And when we reach the last break point, we can see that it changed again. So we have these three break points small, medium and large. We can also see that the content doesn't change. It only works on the server and would called from same domain, so you can't do it locally. But right here I have the Learning Kid in an online version found on front and worship that come slash courses, slash foundation, Responsive website and development slash learning Kid. I provide a link for this in the lecturers. Well, if we go to plug ins and interchange Reese ice, that's browser window. We can see that down here We have content inserted. Right now The content is a call out from the file small for 80 mill in the photo into chains. When I resize the window, it changes to another content. Another called out component from another fire. We'll take a closer look when we get there. Now let's get to work Great and image. We're changing images. We haven't. I am G tec. Then instead, off a source tag. Yes, I see that would normally at we have the data into change. Attribute Now, First we give the value for the smaller than the medium and the large break point. We use these square brackets and then we at the path joy image that that slash i m g slash 300 times 300 dash success of P and G. Then we have a comma space and then a break on the key word which is small Then after our and in ending square bracket, we have a comma, Have that I knew path square brackets. Now we can add another path which is quite similar 300 times 300 Warning. Dr. P and G is our image. Then we have a comma and the break point keyword medium. I would do it one final time. Remember the comer before the next in which here alert the P and G comer and large. No, if you come up this I am G photo here, we can see that these three images are actually right there. Those are the one that we're using now to apply this for a background to an image when you were doing in a cinema That way. So here we have a deaf tech with a set with and hide and simply at the exact same code Foundation will automatically know that this should be a background image sin. We're adding this to a Dave Tech. And not so when I am G tec. Finally, let's see how we can at hte email so we can add content from another a teammate of HTML five into our development. So let's create Dave Tactic. So now we'll paste in the same coat. But this time we need to specify a path to our a steamer coat. If I open up the left side again, we could see that we have this into change folder which three? Five large, medium and small. And they have this call out component success, warning and alert, and some Texas well, so we can see the example in effect. So now we need to change these path here. My guest. He raised all of these sexual than at the folder name into chains, followed by the slash and then small Dutch eight. Email. This is fine for the 1st 1 For the 2nd 1 we need to change too medium and then to watch. All right now there to save this, go back and select the right tip and really fresh Reese ice the browser window like so refresh again. Here we see a small break point with the in which being you'd used. And when we reached the medium break point right there, it changes from one to the other and back again. And when we reached a large break point, it changes to 1/3 1 Now, if we go back here through our online version off the learning kit, we can see that it also works for the content down here which is being inserted right into the state tech when were changed there with about our browser window. So this was all about how to use the inter jeans plug in 4. Toggler: Clarkin's Taqwa. With this chocolate clogging, you can easily chuckle classes on elements. You can also toggle on element to disappear, appear with animation or remove it all together with or without animation. So here we see the examples. Now with this button I am adding and removing a class for the call out to change Jakarta. And here I am, removing and inserting the call out again, using two different animations. It's spinning away, and it's feeding in. Yeah, I have Call out with that close button so you can mark an element is close. Herbal on April disappear from the page when clicked the poem. We can also use animation for this effect. We can also use to talk about together with Focus State instead of click. So here, when I click, I have an element appearing on my page, and when I own focus the input element it disappears again. It heights like so finally, we can specify in multiple targets that will all get their own class. So here all of these three call out to get their own class added and removed again. Let's see how we create all of this before I continue. That's critical back and take a look at the reference section here or the practice section so we can see that I have own these elements already created on these call outs and a few buttons. So now we were just make these appear and disappear and at some classes and remove them as well. So in our first example, I wanna the class primary to do this. We at the data chocolate attribute the value being Dr Primary Threat Glass. And now to connect this button up here to trigger this functionality, we at the data chocolate attribute, but the value call out class, which is the idea down here off our element. Notice the difference. Data toggle up here and data talking down here. We also do this with animation. So if we look down here, we can at for data talk like a tribute with no value, so this won't apply and remove a class. This will control the elements to make it disappear and appear using an animation that we set now using that data. And he made a tribute with two values fading to make it appear on the page and spin out to make it disappear again, finally, as what it before. We need to add the date a total attribute value being the I D. Which is call out animation, the value off our i d. Here. But say this. Go back and re fresh. Now we can see when I click this button, it tackles the primary class. Change the background color off our call out component and down here you will make the element appear and disappear, using two different types of animation. Spin out and fading one more time. Spin our and fading Not to see how we can knock an element as close herbal. First we have a D Ford way of doing that. We have to call out, and then we have a close button. This is simply a button with the class close bottom. The area labor Dismiss alert for accessibility type button and then a span element with the time simple and an area hidden experience with value. True, to hide this from screen readers, So this is just the official styling off this close button. You must know app. The data close attribute to the bottle to make that trigger and then chew a parent element here. We up data close herbal attribute to do this with animation. But it was something similar. We have They closed attribute on the trigger bottom, and then data close herbal a tribute to the parent element and give it the value, which is our animation. So this would be slide out left there can change between all the information that comes in the motion July library from foundation. All right. Notice that we don't need to commit please with ideas or anything like it before, since our body is inside of our element. Now that same this go back for your fresh. When I click the pardon here, we can see it disappears with devote feeding animation. Now we have an alternative animation slide out left. Now let's see how we can talk alone. Focus. We can see that we have this cold out here and input element. What a place order with the value Chuckle cone out on focus And that's exactly what we want to do. So, first we want to make this call out hidden. So we had the class is hidden. Then we want to talk in that glass on focus. So we have the data chocolate attribute value is hidden, just like in the first example. Then we add the data chuckle, focus! That's cute with the value being the idee off our element down here. So now it would struggle. This class is hidden on focus. Let's go back and refresh. We can see that it's now initially being hidden because of the class is hidden. When I focused this class, it is removed to show the element. And when we unfocused, the class is being applied again to make it disappear. This is how we have trouble in focus. I'll finally let's see how we can use multiple targets would eat their own class being tackled. We have three elements here now. We at the Peter Chocola attribute the first value would be the primary. This will be the primary class being juggled. That it will be got success and then dot alert now to connect all these to the trigger. But we had the data chuckle attribute with value being the I d off our elements separated with a space like this. Call out multiple success and call out multiple alert. So we have the three eyed easier Separated, which spaces that safe go back and re fresh. Now, when I click this button, you can see that three different colors of being applied to the call outers here. And if it think again, the classes are being removed. So this is how we can charge go a class for multiple target at once. This was all about the chocolate plugging. 5. Smooth Scroll: plug ins smooth grow. But this plug in you can connect links to different sections on the page. And when the user clicks that link, it will make an animation when scrolling down through that link instead of jumping instantly. So this is also one of the plug ins that, for some reason don't work in my learning kid once more. This is an example of how some of the foundation plug ins are not 100% reliable. So these indeed works with the exact same coat if we open it up in Copan. So we have to do that. I'm sorry. First, that see the basic example where we have this menu and five sections. When we opened this coat here in Copan, we can see that when we're quick a link. It has a smooth scrolling effect down to that section. Great next example. We can change the animation duration the speed of that animation. So let's take a look at that in Copan as well. Open up, and now we can see that it happens not slower since I changed situation time. That's close this again. And now Joe, 1/3 example. We have animation easing which we can change if you want to open this up in cope in as well . Now we can see that we have easing effect, which is swing instead of being just the near great. The next sitting is threshold. So if we open up this code in Copan, I can see that weekend, said the threshold. Now it's sealed so it jumps right next to the section. In the previous examples, it adds a little offset to the target. Speaking off office it you can also change that This is our next example that we open up here in Kerpen. Now we can see that we have set data offset of 50 pixels so it won't go all the way down to the target. It will stop 50 pixels before that. I'll final example is that weekend. Create a direct link to make this example. This link will create a smooth running effect to this target here, so we don't need to use the menu structure. It's open this up. Copan. I have a quick look. I click the direct link. It takes us all the way down to the that wrecked jacket here. No, let's see how we can create all these examples in our cooperated so but start creating the basic smooth effect. So here is your menu. We start with having the data smooth scroll attributes like so then we must give each eight riff attribute in our links in the list items the I d. If our sections we can see I've already added these I ds one basics to basics Three basics for basics and five basics. So I'm gonna into these now One basics two basics three basics for basics five basics but safe. Go back to the reference section that your scroll up to the top here now s a set. We have to view this in Copan but you can see here we have the exact same coat the data sleuths crow attribute It doesn't matter that we haven't empty value and then we have the values of the ID's of section elements. Ask the value off the H riff attributes you not this open Copan and see this works. Now it's close to 61 to three, four and five. Great. Let's continue to the next example where we can change the animation duration. So we scroll back down here in the coat it it's a and then we start with adding them. They smooth scroll attribute again and then we have the data animation operation aspirate value being that duration in milliseconds. So 2000 in this example means two seconds. Then I feeling all of these values, you can see that those ID's are down here. One generation, two duration, three duration or duration and five duration. That's safe back here on the rape. This girl here it's the exact same. So we can open this in Copan and verify that it works now. When were quick These sections, we can see that it scrolls very slowly. It takes two seconds to reach the target. It's called a bit faster when the distance uh, longer excerpt. Great. It's close. These two co pants on that continue with the animation easing. Currently, the default is linear, but we can change that. So down here we start with once again having the data smooth scroll attribute. Then we have the data animation duration the value of 2000. We only do this so we can better see the effect of this animation eating. Now we at the data information easing attributes with value being swing, so this will have a swing easing. Now we're feeling all of these Well, he was here one easing to using three, easing for using on five using Let's say this. Go back in the reference section that would kill here, which is the same as we just entered and the code editor. So we opened this in Copan, and now when I click, I think we can see that it's not that easy to see with the 1st 1 Let's take the last one. Now we can see the swing using where kind of accelerates. So in the start it's a little slow, and then it becomes quicker she's used to see in the last I had to meet You, So this was animation easing. Let's continue to the threshold where we can changed the default threshold. So let's do that scroll down to you. We have the data smooth, scrolled attribute, and then we have the data threshold attribute. This time with a value of zero. The default is larger than that. Oh, share your comparison when we go to the browser. Now, let's just feeling these values like so let's see, go back and let's take a quick booking killed here. We can see it's the same data threshold zero. So open. This in. Copan also screwed up to the basic one and open bet, just so you can see the difference. So first year we have the basic smooth grow effect on when they click section. We can see that it has this there is fresh old here, so there's some pictures before the target. It stops before it reaches the target. That's a fresh old. And when we now go to this fresh old example, we can see that it's now Ciro. So there's no threshold. That's how you can change that. Now let's look at office it how we can an officer too, where the target should be. So we scroll up it down here we have the they smooth scroll attribute and then the data offset attribute this time of the value 50 and we're filling all of these. A one off set to offset three officers for said and five officers were safe. Now we take a look at what Cody and we could see that it's the same. So we opened this up coat pen now in which brought down. We can see that That's a much bigger offset than the default. Now, the officer is 50 pixels, so you can win a seat. Which section wanted to close or with section five? Since it's be enough the page. But we can see this for the three middle items. You all right? Finally. Let's slogan a direct smooth throat. So here we can use that wreck link to scroll down to this direct target in the code. Right here we can see that we have the direct link in front of our section. We don't have any menu here. So to this link was simply at the data. Smooth scroll attribute. And then he's fought down and we find target down here. It already have the I. D of Tackett and up here back again at the direct link. We have this idee here. So target in the eighth. Rafe attribute. Now let's say we go back and check the coat. It is the same. We have to be h rift with target value here and target here with the I d target. Open this up in Copan and then we quick on the link we can see it's rolls down to the target. So this was all about how you can use the smooth scroll plug in to create these animation scroll effects. 6. Sticky: Parkins sticky. With this plug in, you can make elements stick to the screen. They can either be sticked at a specific place at all times. All they can have specified angers, so they will stick and unstick following other elements. Precision on the page. We can also enable and disable these across break points, and finally, we'll see an example of how we could create a sticking navigation. So first year is either basic example. We have this call out that is being sticked to screen the same place, no matter how far we scroll and where we are on the page. So that's just quickly removed that one go to the next example. With anchors, we can have a single anchor in the tux. So here we can see that it Angus at the chuck up that element. So when we scroll past the element, it stops being sticky. Now we can see Angus to the top of the screen, all right, The next example. Anchors to the bottom of our screen, as we can see right now. And when we script strolls past this element, it stops being sticky. So if it's for a bag out, we can see that able anger to the bottom of the screen. In the next example, we have chopped Ain't Bottom Angus so we can see that first it has the top anchor. And then when we get past this element, it stops being sticky. And if we're screwed up again, it from now anger to the top again. So this has a top and bottom anger here. We haven't example on sticky on break point. We can see that this sticky a large screen sizes right now. But when we below that, for example, on the medium screen size, it's not. Still only last devices end up. Finally, we have an example of a sticking navigation. So this is an eye frame with some condiment menu. And here we have tough the top of the second development with this text here, and when it reaches the menu, it stops being sticky. So it was. Take a look at how we can create all of this, So if we watch the practice section here, we can see that we have these tall boxes. Two column layout, the boxes sign, one column and the other column we have call out So this is the coat that we have from stop and we're now gonna make these sticky. We will start creating the basic example for this example. We just want the element to be sticky at the same position at all time. So we have the data sticky, a tribute to the court, our element and also the sticky class. And then to the containing element. We had the data sti container attribute. That's saying this Go back and refresh. Now we can see that we have to call out being sticky at all times. Let's continue to the next example which is sticky with anchors. Single anchor at the top. Scroll up it! Down here. Now we have another cow call out which you want to be sticky. So we have the data sti attribute to it as well as the sticky class And then on the containing government, we have the data sticky contain a glass or a tribute just like we did before. Now we want to make this told bucks the anchor follow sticky element. So to do this, we have the data anchor attribute with the value of being this I d that we have here sticky single anger. Chuck. Now that safe, go back and re fresh close to this. Call out here for the first example. Scroll down to second exam. Now we can see that it's been anchored at the top According to the element with the I. D. This told box, You okay? The next example. It's a single anger at the bottom. So we find our coloured component. Here we have the data sticky attribute paid sticky class and then through the containing element, we have the data sticky container. Now you wanna at the ankle data anger attribute the value of sticky seeing ankle bottom, which we have right here. And we also need to add the data stick to attribute the value bottom the default IHS Chuck . That's why we didn't need to add it. The previous X able No, I say this. Go back and refresh. Close this one from the first example. And now here we are with this example singling bottom. We can now see that this is anchored to the bottom of our screen in relation to the element here. So the bottom of this element So it's This is how this works. Now I'll continue to look at top and bottom Inca. Once again, we start with adding data sticky attributes, element and sticky class and then data sticky container attributes containing element. Now we have this told Bush with the I d sticky and gets up. So we had the data chop ankle attributes with the value sticky and get up and the data btm inka with the value sticky anger BTM and then a coat on and bottom to specify this being at the bottom. So this idea here this reference for this told Bakshi so the top anger iss The tour bucks in the column next to the call out and the sticky anchor bottom. Yes, this first column in the it below it a tall box. You so after the corn out and specify the colon bottom to say that it should look at the bottom of this element but save and see this in action to better understand it. Here we have it so tough anger. It's on this Tarbox in the left column and the bottom anger is the bottom off This next Tor books the current one receipt right now Notice that when we reached the bottom of this. It stops being sticking because it has the anger there who was crawling back up again. So the top anger at the first told box in the bottom anger at the signature Tarbox. Now let's see how we can define a sticky, only uncertain break points. We stroll up it down here and then we'll start adding the you show attribution classes, data staking attributes sticky class to the element that we wanted to stick into the containing element. We had data Stevie Container attribute. Now we must at the data and catch appeared. But the value of being the idea off ankle, which is sticking a break point received right up there. Now we specify break point by using the attribute data sticky own with the value of being large. This will only become steady, large screen sizes. Let's refresh resize browser window to medium is this one. Now we can see that our government is not STI, but when we increase it with to the large break point will now see that it behaves as a sticky element. This is how you get defined sticking elements on certain break punch finally, but see an example off a sticking navigation. So we have medication here. Then we have talked box and another told box what? Some content right there. So we want this content. We want this menu too sticky. And then when we scroll down, we want this country to push this digging menu that way, bagging our co ordinates. Receive that we have this I frame referenced so would open this up. It's in the sticky Florida called sticking navigation eight html Inside of this we now first one of make our Chuck bar ste element. So we at the data sticky attributes into the containing element. Here we have the data sticky container. Such beauty Now to find some options using data options attribute the value will be margin chop colon zero semi colon So now we won't have any margins in the top. We're also at the Data Tuck anchor and specified to Syria that it's that's the offset from the chop anchor and now specify the data bottom Anka Data pgm anger attribute. So what again? Just base. If I bottom anchor, this will be the element with the i d content I see down here and it would be the chuck that elements specified with colon and it up. We saw that in a previous example as well, so the top anger will just be at the top of the screen. Bottom anger will be at the top off the element with the content I d. And we set the mountaintop to Ciro. Let's say this. Go back and re fresh. It's get rid of that one. Now we can see I scroll inside this I framed and menu. It's sticky. Now Here we come. The last told box, with this content inside the top off the development with the idea of content. Now, when that reaches our menu, which is sticky element, it would push it away so it stops being sticky. Now I can scroll any further since the height of this Tor books is 100% off. This I free. But you could add more content as well. Of course, this is how you can use a sticking irrigation, make it stay as a default and then define when it should stop behaving as being sticky. That was all about how to use the sticky plug in