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

7 Lessons (45m)
    • 1. Badge

      4:30
    • 2. Responsive Embed

      2:46
    • 3. Label

      4:45
    • 4. Orbit

      15:12
    • 5. Progress Bar

      7:44
    • 6. Thumbnail

      2:13
    • 7. Tooltip

      7:51
  • --
  • 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.

3

Students

--

Projects

About This Class

ABOUT THE 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 "Media" that are part of the Foundation framework.

These are common UI components used to contain different kinds of media and other visual elements.

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

ABOUT THE COMPONENTS

There's a total of 7 components in the "Media" category and they are:

Badge, Responsive Embed, Label, Orbit, Progress Bar, Thumbnail, and Tooltip.

LEARNING KIT

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

Teacher

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!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
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.

Transcripts

1. Badge: batch. This is a media component used to highlight usually a number or a Nikon. This is a small round component that we can see here. The basic version with a Mumbai inside. We also have one wait, some accessibility enhancement. Then we have the various Collis that the batch can be. And then finally we have a best with him. I come instead of a number. This won't work. Well, foe. Ah, text inside it. Then they will be better to use a label component. All right, let's get started to create The basic batch was simply at the of tech. The cross batch It's out of this. Put the number one close out. Dave Tech, Go back to the browser Civic, The right tap Refresh. Now we can see that we have for this browned background A little background for our number to improve this for accessibility. We can Yep, a paragraph for you Detect new notifications. So this will be the ladle for batch. And to connect these well at the area described by a tribute the value message count. This rule would refer to the batch that we're great now. So we have a Dave Tech class batch, as we did before. And then we'll give the I D message count. Now will had our number again inside of the batch. And we'll also include this Pantech with the class show for It's Our which means it's only visible for screen readers and then the text unready. No T vacations. Close those by attack on clothes are Dave Tech. So what we get here? We have the label New notifications, 100 notifications that would be Brett allowed by the screen reader. But this text unreadiness applications will be hidden on a screen. So that's say this and go back and take a look at that in the browser. So the batch itself looks the same. We have this label above it, and the hidden screen were text. So this is the best way. Jordan's hands this for accessibility. Now let's go back and check out the different Carless. So we're just cubby the bets from up here, pasted in down here, we can get the primary best by adding the class prime me. This will be the same as the T 41 though we can also make it a secondary badge banning glass secondary a success. Batch and alert bitch. And finally we can that class with warning to make it a warning batch. Save this. Go back. Refresh. He received a blue grey, green, red and yellow versions for primary secondary sex is alert and warning. Now let's see how we can use in Aiken instead of a number you create Dave type with the class batch again on inside of this we Adeniken. So, for this example reviews the Aikens provided with foundation framework. So we haven't I attacked with the class. If I alert, close it again and close the high tech like so you could also put a small image or any other way to include Aiken's. It could be another. I confirmed on SPG at Jay Peak or whatever. As long as it's not too big, it should fit right inside the batch. So here we see. Oh, alert. I can. In the batch 2. Responsive Embed: responsive and bit. This is a media component used to imbed external content on your site and make it responsive while maintaining its aspect ratio. This is usually I frames, and it could be a video foe from YouTube, for example. So he will see the basic implementation where it maintains the aspect. Raise you off four by three and looking also used the widescreen aspect. Raise you. So now let's go into a coordinated so and first. Well, Dave Tech with class responsive in bed inside This will now pay Star I frame coat. So now let's go and find a YouTube video. We'll go to YouTube and, oh, search for front and work ship, which is my little company. Here, click this video, just pause it for a moment. Then I'll click the share button and then the impact. Pardon and then simply copy all of this in bit code here. That's just close this window again. Go back to a code. It is on paste in this I frame coat. Now that say this, go back and re fresh and here we see our video embedded. If I resize the window, we can see that it will size and take up the full with all of the available with. All right, Now let's see how we can create a widescreen aspect ratio. As you can see here, my BU was made s and widescreen video. So right now we can't see the sights off my video. So back in our goat into here will create a neat new detect with the class responsive in bed and modified class wide screen. Then, inside of this, a pasting the same code from YouTube will say, go back and re fresh. Now we can see that we have the white screen version where I can see more of the video. In fact, all of the video it will also resize and take up all of the available space. So this is how you can imbed external content, functional videos from YouTube 3. Label: label. This is a media object that you can use in line to highlight certain sections of your countered or, for example, to hold meter data. This is similar to the batch component, but this is useful if you have text content to go inside of the label, the batches only for numbers and Aikens. So we have the basic labor. We have one with excess ability improved. Then we have different background colors and finally a label with both and I can't and some text. So let's see how we create all of this. First, we start by creating the basic label by having a day of tech with the class label. We have a text default label and close that the attack again. Let's go back so that the right tab in the browser and re fresh Now we see our default labor. All right, let's see how we can improve accessibility for a label. So we'll copy this and pasted in down here. Now we'll give this an I D. That will be e mail, April, remember at a label or a description on top of it. So this will just be a paragraph tech on our paintings and text you. And now to connect this to the Labour were at an area described by a tribute with the value you made label. So now screen readers will know that this text to you describes this label here, So that is a way to improve a label for accessibility. Imagine that we had to labels. Then we can do something similar. So if we copy this code and have to labels here e mail labor 12 if, for example, be high priority and on Brett and that's just changed this formal one too high price or itchy as well. So now we have to ID's and will simply reverence both off them. Up here in the P Tech, it's out of the area described by a tribute. You may labour one and even labour true. But save this. Go back to the browser and refresh. Now we see that we have the first label improved with accessibility, and the two labels here improved for accessibility. All right, let's see how we can create various colors. So whoa, simply copy. Oh, default a label here and to make primary label we at the glass primary to make it a signature label. We had the class secondary to make a success label. We had the class success to make it an alert level. We had the class alert finally, to make it a warning label. We at the class warning. Now let's say this. Go back into the brush and re fresh. He received a different labels. We have the primary one second everyone sucks is alert and warning. Notice how both the background color and the text color changes accordingly. Now let's see how we can use this with Aiken's well paced in the D for code follow label. And now we're simply Adeniken before the text for years, and I couldn't included with foundation by riding the I'd say with the class if I and then the name of the Eiken alert and then remember to close the Eyetech again. You can also use other kinds off I confronts, or even an image like a J, P g SPG or PNG. Now let's go back to the browser and grief fresh. You will see label with the alert icon in front of the text 4. Orbit: orbit. This media component is what is to be called a slider or carousel, so we can have different slides with transition in between them. And these lights can be both image based or have various content inside of it. So we'll go through the examples. We have a grabber and the slight container that we can't see anything here. But I'll explain that in the code. And then we have the image based slides. We can see that each image have a caption as well, and it changes automatically to the next slide. On this we have a ton of it. It won't skip to the next slide, so it poses. We can also add next and previous Aeros, which we can see here so the user can navigate between the various slides begin at boots and butter to easily jump to a specific slide. Here, you see different contents. This is a call out with text inside of it. We can see that we can change the animation. So on the first examples, they're sliding on this example and have a fading transition. Sercan change that as well. You can also disabling the motion, your eyes so it will change or transition instantly. You can change the timer delay, which is the time between each slight. Now we've decreased it to 1,002,000 seconds. Here. Finally, we can disable the post on hover. So when I hover this over it down here, it won't affect anything. It just continues to go to the next slide. All right, let's see how we can greet all of this. So, you know code answer. First, I show you how to create the grabber. This is similar, Dave Tech, the class orbit and accessibility keeping the Rolex Butte value region and the area labour attributes the value caress little title change, allies it with JavaScript. We need to have the data will be to attribute as well. This is what the revel looks like. Now, instead of this, we have a slight container. So this consists of a US tech with the class over it container. Just like so, instead of this, we have some list items. The class orbit slide. Just copy this. One of them must have class is active, so this would be the 1st 1 shown when the page loads. Now, that's great. A fully working off it with image spaced slides so paid for this code in here. Now, inside our first this item, Well, I figure tech the class or would figure the know Evan in which sec and the source will be an image from our sub photo 910th 900 pics. IMS Big and the Al text will be descriptive text full slide and will give it the class orbit image. So this image can be found right here in this forum. Okay, We're also add a caption for the image. So we had the thick caption element, but the class orbit caption and we had some caption here. Caption for style number one. Okay, I don't know. Copy this code pasted in the second place ties him and also into the third best item. Just change text value like So. Now let's say this. Go back into the browser, refresh the right tap. See, one looks like admission earlier. The reverence life container can't be seen. It's just coat with no content. But here we have the full working orbit. Would image based slides. We see that we have caption in the bottom and we see that it automatically transitions to the next slide. All right, now let's at next and previous arrows so the user can control the transition from one slide to the next or previous covering all of this coat. Paste it in here now at the controls at the very top you. So before our container, we have a deep tech with crafts or weed controls. In service were two buttons. The first bottle will get to class orbit previous. I mean, inside of this, we had this ban tack with the cross show for S are So this would be the text previous slide that will only be available for screen readers to read aloud for the use of instead regular use of using a screen. Well, use some code here to create the arrow with using this code here now for the next button, or change the class to orbit next and text to next slide and a symbol. Aiken would be changed a little bit as well. Now that say this, go back to the browser and refresh score Down here we have our arrow that we can use to jump two previous and next slide. Great. Now let's continue and at bullets two hours light to our orbit. So, Cubby, this whole coat pasted in and we'll create the bullet the bottom. After our on order list, we had Navteq with class orbit bullets. Inside of this, we have three buttons. Since we have three flights 1st 1 will get The class is active since this will be the 1st 1 that's active when the pages oats and we'll give it a data slight attribute with value zero . So the index is syrah based. So this means the first it's life will have the number zero inside of this button. We first put some text for screen readers Soviet Spain Psych with the class show for S R. This will be caption throw slide number one. This will be read by a screen reader. And then we had one more span tech but the glass show for Okay, So, uh, and ticked current slide. This will also be riddle out by screen reader. I will copy this button and painted into times. I remove the effective class, change the value off the data slight attribute wanted to and also changed this text to you to two and three caption for slide two and three. Finally, I remove this current slide text e. Since it's only true for the first button. Now let's say this. Go back into the browser and refresh. Screw a bit down. Now we see that we have buttons, our bullets for orbit so we can't jump to a specific slide just like so Now, to see how we can use different kinds of content for our orbit, we'll copy this whole text or coat again. Now we're remove the content from our slights. So remove this figure element here all over three slides, then instead or create call out filament using a Dave Tech. Guys cold out on 51 will get success glasses well, and we're heading. Call out hitting and then pasting random text for paragraph. You Finally we're at Link called out, I think. Now one. Copy this. If you're times pasted in chains, classes to warning and alert. So you know we have three different call outs as our content for the slides, or let's say this. Go back and refresh he received. We have the first call, our success changing to the coal out warning and finally changing to the coloured alert right there. These transitions have all happened with a sliding animation. We change that. Using the motion you I library that comes with foundation. So now let's change it to fade in and out when we change slide. So well, Cubby, all of this pasted in Now we're at a data option attribute where we can pass in various options as the value of this data options attributes So we can use a short hand for animation so well and and him in from left, Colon and the value will be fading than a cynical on space and in from right cool, fading semi colon and then and out two left fade out, cynical on space and right fade out and seem cooler So I will say this back and refresh scroll down. Now we can see that we have a fading animation in between these three different call out. So the 1st 1 is success with the light green background than we have have the warning with the light yellow background and the alert colon with light red background. So these will fade in and out when we change slide. We also to save on the motion. You I so the transition will have instantly to do this Well paced in code for our orbit here and now, we're at the data use in you, I, which stains full use motion your I and give it the value of force. So the default value is true. Now, when we go back and refresh, we can see that change happens instantly no matter if we click the arrows or the bullet. So if it happens automatically now to see how we can choose, let's set the timer delay, which is how long it takes to change from one slide to the next, or how long times time it shows one slight before transitioning into the next. So to do this, well paced in the same code from before and now we're at the data time delay, attribute, and the value would be milliseconds. So we at the number 2000. So this will b two seconds for each slide. So we refresh. And now we're located. When we can see that changes every two seconds. Finally, let's see how it can disable the pores on hover. Right now I'm hovering. This example ended poses continues. When I remove the mouse, we can disable that so paste in the code that we have, and now we'll use that data pulse on, have a attribute value force that's safe. Go back and refresh and scroll to the bottom. Now we can see that when we put the mouse on top of this example, it will change to the next slide even though I'm hovering. So no posts on hover. This was all about how you can use the orbit to create a slideshow or carousel for various content. 5. Progress Bar: Media Progress Bar. With this component, you can create a progress by showing the progress. So we have this great background on the container and then we have a colored indicator to showing the current progress. We can also at some text inside of that and we can change the Carlos. You receive the secondary succes warning and a large Connor in use primary color. See that up here? We also used some may tip eight email. But to do that we need to compile some extra CSS. I have included a style sheet, but that extra CSS so you can change that style street by clicking here. You need to do that every time the page goat. But here we see that it looks the same. The codes of their different will come to that later. And we can also use the native meter with which acts in a bit of different way, or have a look at that when we get to it. Right now, let's get started with these basic Once in our code editor, we start creating the basic month. So we have Do you take the class progress then for accessibility were also at the role. Attribute better your progress by and for keyboard access. We had the temp index with the value Shiro and also the area value men the value of being Ciro, the area value Max the better being 100 and the area value now But the value being 50. And finally the area that you text with value 50%. So a lot off attributes, mainly youthful accessibility reasons. Inside of this development, we create the actual progress. So rather Dave checked with the class Progress meter and then to set the with off progress . We need to stylists fixable in our style sheet. But it can also be in line like we do right now, using their startle attribute with the value with 50% what Costa diva taken and leave it empty with no country. But save this. Go back selected, right tap and refresh. Now we see a 50% completed progress bar with the default cut off the primary car. But see how we can attest to this. So if we go back here and copy this coat now inside of the Progress Meter day if we can that Pitak, why not attack with class progress Media text and then at all text 50% close P tech again save this. Go back and re fresh. Now we see this text being added Right there. Let's see how we can change the Collis four progress back We're paste in the code for the default progress by at the class success the class warning and class alert For that this three examples will at the 4th 1 in the shop I forgot that that will be the secondary glass . Now let's save this. Go back and refresh Do you see the different colors being applied? Now let's see how we can create meitiv progress using the native Progress element To create this with simply use there progress element and give it a Mexico disappeared with Max Value 100 It could be another value and then the value attribute with the current progress So 75 means sent to 5% in this example where the progress Adam and empty But remember to close the progress tag again that save this Go back throughout browser refresh And then you can see that the native progress appears like so in its native way. But if we change the style sheet clicking the button, we can see that it appears exactly as your other ones to see how we can change the college for these native progress element that's coming. This coat pasted in five times. Then we'll at some color classes, primary for the 1st 1 and secondary sexists Morning and L'Art. Let's save this. Go back and refresh changed the style sheet again. Now we can see all the various call issue. All right, let's see how we can use the native meter. So in this case, we used the media element like so then we give it the value for this first of him. It will be 30 now. We should explain a little more about this meter element. You can specify the low hi optimum minimum and maximum values, and then they will automatically apply Carlos based on that so we don't need to use any color classes. So let's see. I would give it the men attribute about your show. The low after appeared with the Value 33 Hi Etch People, about 66. The optimum attribute the Value 100 the max attribute, but the bad 100 were close to meet a tag again and leave it empty with no content inside, covering this a few times and change the value to 50 and 100. Now let's save this. Go back and refresh, and here we could see that it has already applied some Cholestin natively. The 1st 1 is in the low range signal one. It's close to being in the high range. In this 3rd 1 has to the optimum and maximum value. If we change statute, we can see that it takes the exact same appearance. That's the Progress bond, the same collis that we know from foundation. So you should try to experiment with these attributes the low, high and optimum for this meter component or this meter element if you prefer to use that one to create the progress by component. 6. Thumbnail: thumbnail. This is a media component to usually create a thumbnail out off an image. It gives the image a white border and then a buck shadow with a thin grey line. So it becomes this nice thumbnail inside of all coordinated. We'll stop by adding an image tech source. That s I see value being the U L 20 image. So in this everything, kid, we have an image border over here, and we have the small 50 times 50 pixels p and G placeholder image. So we're just use that and for Evan, Out attributes as well and text alternative text description off the image. All right, now to train this into I thought name were at the grass from there. So let's say this. Go back to a browser servic right tip and refresh even see a small image turned into a thumbnail. We can also do this for a link that's been wrapped around an image. So an image What link? So to do this or simply covering this code from above, pasted in now that's removed the class from the image itself and instead at an anchor tech around it and keep that anger attack the class some name and close to the ankle tech again . After our image with Save and go back to the browser and refresh. Now we could see that it looks exactly the same as a fun name, but this time we can use it. That's a link instead, and it will also have this haver effect all around the film mail. 7. Tooltip: tool tip. With this media component, you can easily provide extra information to the user. When they have a or quick and element he was, see various ways in which you can use the tool tip. First of all, you can place it around your element. It could be on the top bottom left and right. Then you can make it open only on hover open on Lian click. You can also create a custom html inside of your Children. Finally, you can precision and the line the tool tip. So here we have the top left alignment. Look at the arrow on the tool tip container. We have top Senator Chuck, right bottom left, bottom center, bottom right, Lifts up left center, left bottom and right up rights and the right bottom. Great. Let's get to work. You know, Cody Detail will start creating a default tour tip, so I mention that we had paragraph element and inside of that one place, a tool tip around some text. So first of all, we had a Spain tech and then at the data tour Tipp Ex beard. We'll also give it a tip index attribute with the value one so this becomes terrible with keyboard finally looking with the title attribute with the Value Children time. This is what would be the content of our torture. So inside of the Spanish woman, we have the element or texts that we want to behave as a tool tip trigger so or at the text tool tip and close all of Spain attack again. Now let's save this. Go into the browser and refresh. Here we see the text and it has this darted underlying or border bottom and the text has become bold as well. Now, when hovered, we see to tip appearing on top of it and also the case that has become a question mark. Great. Let's continue to see how we can create the other placement bottom left and right side. So a copy all of this coat pated in here. I want to place it in the bottom or at the cross, but place it in the left side, put up the class lift and to place it in the right side. We're at the class, right but safe. Go back and refresh Now, receive the tools of placement in the bottom to the left side and the right side. These tools opens on hover but also on click where they will stay over. So click our side of tilted or on the tools of itself, excel on the Twitter or outside of the Children We can make it only open on hover To do this we're painting the court again. Then we had yeah at data click open Attribute the value false So the default is true When we saved Go back and refresh We can see that it opens and have a But when I click it nothing really happens So it works only on hover We can do the opposite sort only opens on click We do this by adding the data Disable However I attribute value True So the default value for this is false. Now inside of our browser, we can see that it doesn't open on hover we have The Kurds are changing to the question mark, but I have two quick talk to open up the Children bucks. Now let's see how we can at custom html to a tool to To do this, we must, at the data allow HTML That's beautiful. The value true, this is per default force now inside of our entirely I interviewed weaken that HTML. For example. We can at Spain tick with best able primary and text tools. A child close to Spain take again, like so notice that I used single quotes inside of my steam. L since I used the double quote for the whole value off the time latch beauty. Now that say this, go back and refresh When I have a collect the water, we can see the custom. Html Appearing in South Georgia This is primary labor that we created. Finally, let's look at how we can position and align our tour tip fame. Our tour. Chip him, arrow here, the triangle. So paste in the code and then we can use to different days. Attributes. We have the data position and the data alignment experience now for the first example, or position it at the chop and align it to the left in the next example will still position it at the top and a lion center and third example well, still, position it at the top and align it to the right side. Now we'll copy these three examples and change the position to that bottom will keep the left, center and right alignment here. No painted in one more time, and the position will now be at the left side. And the alignment for that would be Chuck, cinder and bottom. That's copy this coat pasty again, and now we're position it to the right side and still have the alignment. Top center bottom. Let's say this. Go back into the browser and refresh. Now we see the top left position and the lineman top center. Right bottom left, bottom center. Bottom right. We have the left top left center, lift bottom. Finally, the writer writes in tow and right bottom. This was all about how you can use the tool tip component.