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

5 Lessons (56m)
    • 1. Prototyping Utilities – Part I

      14:52
    • 2. Prototyping Utilities – Part II

      17:39
    • 3. Flexbox Utilities

      12:59
    • 4. Visibility Classes

      7:59
    • 5. Float Classes

      2:26
  • --
  • 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.

1

Student

--

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

These are various helper and utility classes to change the style of 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 4 components in the "Utilities" category and they are:

Prototyping Utilities, Flexbox Utilities, Visibility Classes, and Float Classes.

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. Prototyping Utilities – Part I: prototyping utilities. But these utility classes you can change the styling off constant on your page, off components or even create new components by using Reese utility classes and some more. These utility classes needs extra CSS compile process so they're not included in the default installation. Off Foundation. The push of this button You can change the style sheet to one that includes the prototyping utilities. So this is what we're gonna create. We can see that we can at a radius to a component, so he is a radio radius added to a bottle, or we can add it to a card as well. We can also make it round. It is rounded button around it. Image we can at a border to, for example, a pardon or card or a shadow effect toe a button or card. We can use a row utility to display arrows here. Four different arrows. We can use a separate a utility to create this effect with the blow or central line under the text, we changed the fun styling. We can have normal phoned boat front telephoned wide fund. We can change the list styling so we can remove the bullet from an on order list. We can said it could be a disk, a circum square and for ordered list. We can also remove the bullet for the first level here or we can make it dismal. Lower alfa or lover Latin No. One Roman and upper elephant about lettin or other Roman. So these are all different ways you can do that. We also have text help us that can be used for image replacement. So to hide the checks or to transform the text to upper case lower case capitalized text, we can change the text decoration to be underlined over Lined or what line through. We can truncate the text. We can make it not wrap or make it wrap. Then we have marching. Help us where we can change matching off elements. A lot of examples there and we can also use petting. Help us in a similar way to change the petting off elements. They we can set the sizing of elements the max with as well the height, Mac side. Then we can change the buck siding box sizing property. We can remove the border. We can use display classes to chains. What we year how the elements display on the page, for example, as a block or a line or in land block element. Then we can position change the precision off elements to relative absolute sticking and so on. We can control the overflow, for example, on all sides are only harsh on certain vertical axes so that it's a lot of different examples. I'll walk you through each of them. Let's go into the coat. So before we continue, let's go back again and see what the practice section looks like. So I have all this coat already put in. Now we're just using these basic classes to also the styling off all of these elements. So first we have a button and the car, and we want to make use of the radius utility class. So it's simply at the radios class next to the button class, you and for the cart. We also at the Radius class there. Now that's safe. Go back and re fresh, and we can see anything right now. But if we click this button, we can see that the correct style sheet is supplied, and now we can see the radius border areas on all four corners on the button and the card. Similarly, we can make it round it by adding the glass around it to a button or to an image we can at the glass rounded. Take a look. He was either around a bottle and round that image. Now let's look at the border to effect. So we have a button here and we're epic class bordered. And then we have a cat and we're at the class. Border it. It's safe. Go back where you fresh swap the style sheet. Now we can she see that a thin border has been applied to our button and the got Let's take a look at shadows. We simply at the cost shadow to the button and with God save, go back and refresh changed this statue here. Now we can see the shadow effect being applied to the button and card. So this is all part of what is called components dialing, so this could be used to also some of the components. If you want to add shadow border or make them around by applying by border radius. Now let's look at the next utility class to creating arrows. We have some into developments here to create these arrows for simply at the pero down class. Oh, to use the other directions. Yep, the era up right Who are left? Safeco Bang and refresh Jane Steiff Seed. Now we'll see our four arrows here We can also use a separator for headings. Here we have three headings. Free age too heading elements. Now let's create separator Left the line by adding the glass separated left This will left the line that text and that line underneath it but also make it center line by adding the class separator sender or writer lined by having the class separator right? It's safe Go back and re fresh change Our starchy it again Now we see are three separators We're different alignment Now let's take a look at front styling Here we have a strong element that makes the text of the boat. If you wanted to appear normal, we can at the class front normal you know Next paragraph We wanted to appear bolt so we can at the glass front bolt Then we want our paragraph to appear italic So we had the class fun italic And then we wanted appear wide. We had the class fund wide that safe go bang and refresh swept the style sheet and score down. Now we see our normal fund that's no longer bold, even though it inside a strong attack. Then we have our boat fund, a telephone and wide fund. Now let's look at lists styling. Here we have some in order lists and order list all of them. It's looking in their default way with the bullets and with the numbers. Let's see how we can change this. First, we want removed our bullet from the first level only so we can at the class no bullet, but also choose to use a disk instead of the default. Pull it by using the glass list disk or displayed as a circle by having the class least circle or as a square by adding the class list square than for ordered lists. We can also remove the bullet, which in these case is actually numbers. But the class we use is still no bullet, so the classes will now be removed from the first level, and then for our next order list, we can make it use a dismal, instead biting the class missed gizmo and making use lower L for characters firing the class list. Lower hell for like so we can make it. Use lower, letting characters by adding with glass list Lower Latin. We can make it. Use lower Roman characters by adding the class list. Lower Roman. We can make it. Use Upper Alfa characters by adding the glass list. Alfa. We can make it use up on letting characters by adding the glass list of a Letten. And finally, we can make it. Use up a Roman characters by adding the fast list of a Roman. Now that save this, go back, re fresh scroll up and changed the style sheet and scroll back down. Here we have the honor list with no bullet and then the on our list would a disc circle and square. Then we have the order list with no bullet, which exactly know, actually, no numbers for the first level. Then we can change that to a dismal or low Alfa, Lower Latin or lower Roman or Upper Alfa are by letting on Upper Roman noticed that the Alfa and letting actually looks the same. But it's a matter off which and computer or language the user is on when they visit your page. That might be a difference there. Great. Let's continue to look at text help us. We can visually hide text next to an image so the text will still be visible for screen readers but won't be visible for regular uses to do this. We have this in his tank with text next to it and then we have it wrapped in an anchor tech . So to that parent element, we have a class off six. Hide. No one was safe. Go back and re fresh. Change the stash it and scroll down here. We can see that the text is now hidden. Now let's look at text transformation and also text decoration at the same time. So to transform our characters, we can use different glasses. Text upper case to make up a case text lower case to make it lower case text capitalized to make capitalized and to make it change the text decoration. We can use the class text on the line to make underlined glass. Text overline to make it over lined what the class text line through to have text with a line through. Let's say this. Go back and re fresh. Just changed Starship Scroll down here Now you can see the advocates case Text lower case text capitalized Text on the line, text overline text and text with line through knowledge. Take a look at how we can truncate and rep or not wrap our text. So we have these three characters here. We can truncated to only one line by an English class text truncate. This won't remove the last characters or words and at three dust as we'll see in a moment, we can make it text, not rap, by adding the class ticked no rep all we can specifically make it breath by adding the class text. Great. Let's say this. Go back and re fresh Jean style sheet scroll down here. So we see the 1st 1 is being truncated and we have these three dots in the end. Next one has no rap. So it extent outside of the container and for 3rd 1 was said it to rep, which is also the default 2. Prototyping Utilities – Part II: We will now continue with the prototyping utilities, and first we'll have a look at marching and patting. Help us These help us you can easily at marching or penning's to one of the sides to of the sides or all four sides at once. They also works responsibly so you can put the class medium or large in front of the other class names that I'm going to show you now. Well, first, let's take a look at how to apply Martin toe all four sides. I should also say that we have full sizes to choose from Syria, which this year and then 12 and three ring. This can be changed in the cess five if you want to. Now let's go back into the code. It's him and that's Cilic Bees for Dave elements here now. Well at class Margin dash and then the number. Sure one Children three. That's safe. Go back and re fresh. Now We need to change the style sheet again. Scroll back down. You see margin of zero than a margin of one room to room on three room being applied. If you want to do this only in the top we could do with the following at glass margin, dash, chop and then the size like so, but still the bottom left and right as well. Margin, dash bottom and she'll 123 and the left side. Here, Martin left sheer 123 Finally, margin. Dash right, 01 23 That safe, good bag and refresh. She's starship and scroll back down. Now we see that the margin is only being applied to the tough. It's a little different, see right now. But if we are been up the inspector tours, we could definitely see that it's being applied only to the top and then two of the bottom left, side and right side. Now let's see how we can at the margins to two sides at once. The horizontal axis left and right, or the vertical axis top and bottom. But just select all eight of these deep element. Give them the class margin dash. Then, like the 1st 41 hurry. So until bash and then number. So Martin her Sanzo 012 or three. And if you want to apply it to the top and bottom we had at class vertical well, the word vertical toe glass. So it becomes Martin vertical than the number Safeco Pack. Brief fresh. Let's go back up. Changed style sheets. Quote like down. Now Receive the marching being applied 22 sides at the same time here, left and right And he took a bottom. Now go back and killed all these examples for the patting Help us which works in exactly the same way. So what I'm gonna do, it's select these full at the class Petting the number one, 23 Then Father padding jump! We had the petting chuck class number. We'll create all of these examples before we take a look in the browser petting bottom. Shira 123 Joe at padding to the bottom. Um, yeah. Petting Lift? Sure. 123 to a petting to left side. Thank petting right to 123 To a petting. To the right side. Been to a pairing to both the left and right side at the same time, that is, the hard stones were access. We have the grass petting. Are so and so then the number Xu through three. Finally, the vertical padding at the class petting vertical number one or Syria 12 and three, Let's say Go back and refresh screwed up and changed the starchy on dish rolled back down. Now we can see the petting apply to all sites only. That's up only the bottom or in the left side. Only the right side difficult to see when they start more content. But we concede right now when we inspect the elements and we have petting left and right on petting chapman bottom. Now let's take a look at sizing. Weaken set the with often element and also that Max with in the same way we can sit the height and Mex hide. So let's go down here. That coat now toe Keep an element of specific with in percent. We came at the classes with Dash 25. This will be 25% wide. We can also use the numbers 50 50% 75% 5% and 100 for the full with now the next example is she here? We have an image of 19 900 times 900 pictures. We can choose to make the Mex with under percent off the parent patina by adding glass necks with 100. Now, if you save this and go back and look in the browser, we can see that it extends outside off the parent element because the it has the initial max with I said that in line style right here to all right there de fort and coat of foundation so we can see in this example. Now let's see what happens when we refresh. Change the style sheet scroll back down. Now the image is contained in the pound and before chambers from before have the with 25 50 75 100% we could do assumes something similar for the height. So what's it like? Thes elements here at the classes. Height. 25 50 75 800. And for this MEC side here, what repress next? Hide 100. We can see that we have Dave Element with the height of 5500 pixels and the image inside off 900 times 900 pixels. So it extends beyond the parent container. But now we at this class make side 100 so it will only have the height of 100%. We can see that when we go back. Refresh. Before it was extending beyond parent container, and now it is contained in celebrate like So. You can also see that up. Here we have the height set 25 50 7500%. This container also has a set with off 500 fictions like the one for the image. All right, now, let's take a look at books sizing. We can change the bucks sizing behavior if you want to make it border box. I won't go into more specific details off what that means. But you can Google that. And now that's just at the class border box. That's also see how we can remove at border from an element we have to call out here. Primary call out, which by default, has a border. If we had the cross border none, it would remove that border that's safe and go back. Let's see here we have a call out with the border, and we have this development with the bucks sizing property with the Value Border Fox. No, I can refresh Jeanne Starr sheet and jump down to you. I can now see that the border box has been sitting explicitly, if that's what we need, and for the call out we can see that the border has now been a remote. Now let's see how we can change the display property and precision property and CSS using classes. First, we have a number off display classes to choose from. These examples are not super clear, but at least they were show you how to change this if you needed. So if you want element to be in line, you at the glass display in line. Something similar is true, but other examples. So all that the class this play cash and then the first line. Our 1st 1 in nine block, then just play block. It's played table. I don't just play tape. So now the next one is display flicks. We don't actually use that glass. You, which we might seem logical, but we used the flex chain of glass Instead. You can learn more about flex in the flex utilities like you. Before we watch these examples, let's just change the positioning a piece elements, which is the position property through that we had the class precision dash and then the value, for example, relative appreciation, absolute position, fixed position, fixed up position, fixed bottom and finally position static, You sick? Same was also the best ones. And I won't explain there except and definition of how these property values behave in the browser. You should Google position property. If you want to know more about that now, let's go back and re fresh sports with chop changed, starchy and scroll back down. We can now see here that we haven't elements turned into a in line element. And next to that, we have in line block element. That's why they're on the same line. Then we have a block element table element and the tape of serve element and finally a flex container. I forget to at one example here, So let's quickly go back. I can see that we have this none element here, so we want to hide that. Okay, do that by using visibility classes, which you can see right here in the text. So we need to use the class hide. So it's the same as the flex one. You don't ride display in front of it. These kind of belongs to the flex brush utilities and this one truth of visibility classes . So that's why they don't have that display class in front of the name. Let's go back and re fresh. Sorry off for forgetting that scroll Back down. Now we can see yet we have this one that's being hidden. I can't see it anywhere. And for the position Property. Here we have one that's positioned relative absolute one. A fixed one. A fixed one in the top. We can see that instead of just applying the position. Property with the value fixed this one fixed up. Also have the chop right and left and set index properties applied to it. Same. Goethe goes for the position, flexed bottom. And finally we have the position static. Now we only need to look at the overflow prototyping utilities if they want a new element to be visible. Well, the overflow to be visible on an element. We had the class off road visible. I wanted to be hidden. We have the class go off him and if wanted to scroll, we have class overflow. Screw. We can also specify that only for there are some so vertical access. So for the horizontal access we had a classes overflow X and then the value visible, hidden. We're screwed. And for the vertical access. We have the class overflow dash. Why bash and then the value visible, hidden or scroll, but safe. Go back and re fresh Scroll to the top. Changed, started and quickly menu over here to get down. No, we can't really see any specific effect of this since I haven't having a lot of content. This is just to show you how to change. Change the value. You can see the overflow value appear to the right side which corresponds to the class that I just add it whole floor visible, hidden and scroll overflow X visible, hidden and scroll and overflow. Why visible, hidden and scroll. Now, this was all about how you can use the prototyping utilities once again. Remember that this needs extra CSS compiled would assess what you convert more about in the official documentation or in another lecture in this course 3. Flexbox Utilities: Flex books utilities. These utility classes can be used to also elements and components that are using the flex display property. This is very useful for adjusting or changing the responsive grid system, so most of these examples will teach you how to do just that. Let's see what we can use these flecks bucks utilities for First of all, we have her center alignment off cells inside of a row that we see right here. Default left, center, right, justified and spaced would also have vertical alignment set for all Children. Default a stretch than top middle bottle or specify the stretched. We could do that for individual Children as well. Stretch, chop, mirror bottom and stretch again. The 1st 1 is the default. This is the last one is when we specified specifically. Then we can use that combined to have central alignment both horizontally and vertically. Then we have flex book bucks. Help the classes that we can use to turn any element into a flex container and then adjust some settings to display it in reversal like a column, for instance, or so grow off. Frink so charred from Children, all of these Hilbert glasses coming responsive variations. For example, medium flex child grow. You can learn much more about that on Faction Mozilla Developer Network. But I included two examples here which will take a closer look get or three examples. Actually, finally we have source ordering. We can use a number one through six to change the order off ourselves across different break points. Let's go ahead and create this. So if all these examples, as you can see in the kilt, I have a lot off course systems in use, we can also see that over here in the practice section we have all the grid system in place and now we want also these examples. The first we're looking at her source of alignment. The default is left so we won't do anything there. Two Alignment center. We must at the class online center to align it right. We have big last line, right, justified with the class online justify and to make its based which base in between. We at the grass align spaced. But save this and take a quick look in the browser refresh. And now we see that the 1st 1 has left alignment which is the default than center right, justified and spaced. We also set the vertical alignment off all Children at once. So if you do this well at some classes, too, the parent element has suggested the 1st 1 We won't do anything. This the default, which is stretched, stretched. We can align it to tuck by adding class lines up to the middle by adding class airline middle to the bottle by having class align bottom, and we could specifically make it stretched by adding the glass a line stretched or just a line strips. But say this. Go back and refresh. Now you can see it here. Default top, middle bottom and streets. We can also do that for individual Children, so let's see how we can do this. 1st 1 would be the default and for the 2nd 1 well at the class A line self top to make it aligned top for the next one online self middle, then a line self bottom. Finally, a line self stretch will say that Go back and re fresh scroll down right there. We can see that the first seller need script. That's the default stretch value than top middle bottom and stretch We can use a combination of these horizontal vertical enlightment classes to create a central alignment on both access at the same time. So to do this, we have the A line center middle. So one class that combines there are songs on vertical enlightment. When you refresh, we can see that there now have this central alignment. Now let's look at some flex books Helber classes. We have all of these. The 1st 1 will make it the flex container. Next one will make that direction, bro, which is the default the Fed one will reverse with Road. Then we can set the direction to be column or column reverse. Then we can sit a Children to have the order, property or value all we can make it grow or shrink. This is to control the size of the individual Children. All these him pick classes come in responsive variations. For example, medium flex child grow. You can learn more about the flex box property on more Sooner Development network or many other places on the Web. Now let's look at three examples using these flecks, bucks helper glasses, The first example it's a flex row were justified. Children so, you know, code here you simply have three def elements inside Another development. No classes added just yet. So first will turn this into a flex container biologically class flex potato. And then we're at the class online. Justify that we saw from before one of the first examples a sable bag and refresh. Now we can see that we have a flex road with justified Children. In the next example, real quick. Create a flex column, which based and Middle Alliance Children to create this. But first at the flex container class again. Then we have flex direction column class, which won't make a direction vertical instead of horizontal. Then we have the airline space class A patrol earlier on and the align middle class that we also so early on. We'll save this. Go back for your fresh. We can now see that it's aligned middle and space, and the direction is cut him the third example. It's responsive variations for flex container and flex child. One small devises. We want to have a reversed flex grow with a growing flex. Child number two. So the flex child up to here we'll be growing and on lots devises we want have reversed Flex column instead, which are shrinking flex Child number two. So let's see how we create this. We have the parent element here. First week. Give it the flex container class, then to make it at reversed. Bro initially be at the flex direction role, reverse class and then to make it that reverse column, The direction reversed. Column unlocked devices enough We had. The class is large. Flex direction column Rivers. I'm saying direction, but it's just day or whatever you want to pronounce. This s last flexed their column. Rivers All right now for a second child, we wanted to grow initially. So we have the flex chart grow class and little last devices and up. We wanted to shrink, so we have the large flex, charred shrink grasp, but safe Go back refresh. Let's resize our browser first. A small devices we can see that we have at reversed Flex Road, so flex child number three comes first. We can also see that flex job number two takes up most of the space and pushes the other one to the sites because it's growing on the large device size up, we can see that we now have it reversed Flex column and we have a shrinking flex chur number two. I can't really see that in the example, but it is being applied right there. You can see it up. You finally Let's take a look at source ordering where we can change the order off ourselves across different device break range. So we have this script, you wait six cells inside. All of them is 1/3 of the available with a wide. So we could see that we have these three columns here. No, we want to give the 1st 1 the order three for medium devices and up. So we had the medium order three to it. The 2nd 1 will be the first in the order and small devices that not so that be initially a very small break Point sizes. The 3rd 1 We'll have ordered the five large break franchises the 4th 1 We'll also initially on a very small screens half of the order number two. So it would be small order to the 5th 1 I will have order not before on medium devices. Enough. So we had the medium or four class and the 66 sell well, half the or six, which is the last one on lots device set up. So we had to class large order six. Now let's say this. Go back and refresh and let's resize it, Rosalind. Too small. We could not see that we have. So number one the first place, but then number three in the second place. This is because number two and before has been applied the order one. And to show y on A they know in the front. That's because the others haven't got any orders. So they were come before anyone with an auto specified. So these would be the one to Now, when we move into medium break point, we can see that we have or the one here in order to just get before and then we have order three and order fall so they only being set on medium devices in up the first to hear number seven. About three and six are still taking up the first Troops basis because they have haven't got the order to find yet. But under latched device sizes will now see that they moved to the very last places order five and six. Now we see the correct order. 123456 Since all of them have been applied now on a large screen, sizes end up. So this was how you can use the flex blocks utilities. 4. Visibility Classes: visibility classes with thesis utility classes. You can show and hide content on your page. You can do so by specific screen sizes or by orientation off the device. You can also do it for screen readers. Finally, you can grade what is called a skipping, so let's go through all of peace inside off good. It's a start by looking at how we can show content by screen size. So first of all, let's see how we can show for medium screen size and above. This means it will be hidden on the small screen size we at the class show for medium to long paragraph. We could do something similar, only showed for large devices end up. So we had the grass show for large. We'll also show for small screen size only, so it will be hidden for medium and large devices. So we need to add the class show for small only. You do something similar father, medium screen size so it will be hidden for small and large devices. So this time we used the glass chauffeur medium only. Finally, we can have the class show for Glatch only. But save let's go back and re fresh, select writer and refresh. Now let's open up, Inspector, so we can resize the window. First of all, we have this paragraph show for small screen size only now, when we reached the small or the medium break point right there we have the next two examples show for medium screen size and larger and chauffeur medium screen size only. Now let's see what happens will be moving to the lodge break point. We have the chauffeur large screen size and larger and the chauffeur lot screen size only. And finally, after the large break point, which is the extra large break point, the pair paragraph here show for large franchises only disappeared right there. So this was how it can show by screen size. Let's see how we do something opposite. Hide by screen size so we can hide for medium screen size and large up By adding the class hi DFO medium, we can hide for large screen size and lot shipped by adding the grass. How hateful, large we can hide for small only by adding the glass hide go small only we can hide full medium only. Buy it in class, hide for medium only we can hide for large only by adding class height for large only. So let's say this. Go back and re fresh. I'll just resized screen side to you. Now look carefully at this section. What can see that the text changes when we resize the browser window now in the medium break point and now there we reached the lunch break point, and now we're the apathy extra large break point. So this is how you can control how your element should be hidden by screen size. We can also hide four ways in two ways so we can use a glass hide, which for use, display none. So it won't be visible for screen readers, either, or we can use the class invisible so it will not be visible on the regular screen. But the screen readers can still access the content, and it also takes up space in the flow we can see right here. We have the invisible element right there, taking up space in the flow, but it's not visible. We can also show in Just show comes in, depending on your station detection. So we can, for example, show for landscape by adding the class show the landscape whips. I'm making love mistakes right there. Only make it show from mobile devices or, I mean portrait orientation by adding class show for portrait. So let's say this to go back and re fresh. Now this is landscape orientation, since when this took Oh, stop the responsive version here, swope it down. We can see that it says Chauffeur portrait orientation. Right now, if we select the iPad up here, we'll show for landscape orientation and back again show for portrait orientation. So this is to show how this works. Now. Let's take a look at accessibility. We can choose to show for screen readers by using the class Show. Four. Yes, sir, We can also hide the screen Regis only by using the area hidden attribute with the bite of True. Now, when we go back before I refresh, we concede that we can see both of these paragraph Now, after I refreshed, the 1st 1 is sitting on only visible for screen readers that read it aloud. The 2nd 1 won't be read aloud since we used that every hidden attribute with the value true still visible but won't be read aloud by screen readers. Finally, let's see how we can create a skip link. So we already have the link paragraph element would have linked inside that has the value hash main. So this is an ANC attack to a section on the page, and right below we have an empty main element. No country but the I. D s main, which we are referring through up here from the link. So this will jump to that section of the page when we create it. But now it won't do anything things, since the main content is just below and without any countries. Anyway, this I think it's always visible right now, but we wanted to only be visible when the user focuses it using the key boat. This is what's keeping us. So we at the glass shoe on focused not what will only be visible when it's being focused. So refresh the page now. It disappeared, and then I used to tech he here to go through all of my links. Now we can see that it's being focused. I removed back again and for want we can see that the skip link works when it's being focused. This was how we can use the visibility classes 5. Float Classes: float classes. With these utility classes, you could easily float elements to the left and right or clear their floats by any career fixed class. And you can also float an element to the center, which is actually not a real float, but more and alignment using auto margins. So let's see how we do this. In our practice section, we simply have empty call out elements with buttons inside for our first button, we want to float it to the left side. So we at the float left class for the second button wanted to flow to the right side. So we had the float right class to the button element. Let's go back and refresh. Now we can see that they have been floated, left and right. Since they have been taking out of the normal flow off the page, we can see that there's no constant left inside of the call out, so the buttons looks looks like it's outside of the component. We can fix that by adding the career fixed class. So in the next element, oh, example will flow to this burden to the right. So once again, we had the float right class to the bottom element inside, off the coal out. Now go back and re fresh will look the same. But this time we'll go back and at the clear fix class to the parent element like So now when we come back and refresh, we can see that the normal flow off the page won't be changed. So now it looks correct. Finally, we can flown element to the center by adding the class float center. But save this good back and refresh. But as I mentioned in the beginning, this is not a real float. We can see that we're foundation. It's using auto margins right here to singer aligned this element. So no float properties I used. This is how to use the float utilities.