Foundation 6.5 – Controls | 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 (42m)
    • 1. Button

      10:36
    • 2. Button Group

      7:39
    • 3. Close Button

      5:05
    • 4. Slider

      10:30
    • 5. Switch

      8:09
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

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

These are different controls used in forms and for other user interaction.

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

Button, Button Group, Close Button, Slider, and Switch.

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. Button: button. With this control, you can create various kinds of buttons that you can use on any 80 mil element moment. Lee. It would be on an ANC attack for links or a bottom elements, but it can also be applied to other HTML elements he received. The various options have basic button, and we have different sizes off the button Chinese moment T Ford and watch a swell us and expand that button. Then we have various colors off the button and then some different stars. We have the hollow style with a transparent background and only the color being applied to the border and text. Then we have a disabled state and hear a combined hollow and disabled state. Finally, we have a clear style where the buttons looks like regular links. Then we have a bottom where it dropped down arrow and the button. What I can in text and the button wouldn't. I can only let's see how we create all of this come into our current. It's a start creating the basic button First, a quick, greater button would have ANC attack for a link, so we haven't a set with a thrift attribute with some value, and then we give it the class button. We could do something similar for in protect that links to part of the page. So we at another aid section H riff with an I D specified, like so hash symbol and then the name off the I. D of the value of the I D and the same classes before button. If we have a regular button element, we'll create the buttons act, but the type attribute with value of button and also give it the class. But no, let's take a look at this in the browser to make the right Chapman refresh. He was CR links. Let's see how we can change the size of these buttons. So for this would cover the code here for bottom element uses. Use it for these examples. So first of all, him at the cross tiny to make a tiny We can also use a class small to make it small. We can use no class and just have to default size, or we can use the latch class and have a large button, but also make the button explained it so it will take up all of the available with. We do that by adding the glass explained it. We can combine any of these sizes with the explain that class, so it's create a large explained it button like So let's say this. Go back into the browser and very fresh. Now we'll see the tiny small T for a large button as well. That's the expanded and the large expanded button. Let's continue to look at different colors for the button, so we'll just cover this goat up here. Pasted in. Now to get a primary burden, we need to add the class primary to create this secondary style. We have the last secondary, the section style. We have the class success, the alert style. We have the glass alert and the warning started. We at the class warning, Let's say this. Go back and re fresh. No, see the primary secondary success alert and warning stars here. Now let's see how we can great different styles off the burden. Also with the various color options. The first we have the hollow style with the transparent background and the color on the border and on the text of the button. So to do this well, copy this coat from appear with all the colors. And then we're at a glass Hello to all of these buttons. So it becomes button Hollow primary, for example, and so on. Let's say this. Go back and re fresh now is she transparent background and the border cholera at the color on the Texas? Well, okay, let's see how we create the disabled state will pace this code in again from before with the various colors now to make it disabled and attribute that disabled attribute this time to make a link disabled. Well, do something a bit different. Stop creating the ANC attack and give it the class Baden and now would also give it the class disabled. No, just before we used the disabled attribute for buttons, but for links and other HTML elements, we were used the disabled class and for accessibility at the area to saber attribute. Screen readers will know that this is at the saber link. We're at the text to Sacred Link and close to the attack again that saved this good back and refresh. You will see our disabled state for buttons and the link start a spark not has combined the hollow and disabled state. So go back here. This copy these hollow stars up up there and then we're at the disabled state. The disabled attribute. We'll also copy go for this link here and at the class. Hello, That same. There's good bag and refresh. He received a hollow and disabled state. You almost can't see the button. Let's do the final style, which is the crease style. So to do this well at oh, copy this code from up here with the normal colors in this time we're at the class. Kill you, just like so we're also great. An example. Phone disabled, clear button. So we just removed Carla here and that The attribute Disabled se back and refresh now is she create starts here, including the disabled. Clear style. Great. Let's continue to three special kind of buttons. But that dropped on ever and what ICANN's well at button tax type. Attribute value button. Give it the classes Spartan and drop down the safe. Go back and fresh. Now receive it. We have the drug down. I can edit automatically. We know so choose which I can set one of use with over that text. So Let's go back again. Great The bun with time Attribute that the value of Baden fast attribute with the value of Baden now inside of this will rep. I can in the Spain Czech the area hidden attribute the bad. True. So it will be hidden for screen readers. Then we'll at and I can using one of the actions from foundation. So we at the attack with the class if I and then the x I can close the I Tech again, we'll close this Pantech. Now we can. That's a check button. Would I've been and text. Let's say this could Gregory fresh he was We have a button with the ex Aiken. Ancient text. Let's see how we can Great one wouldn't I can only start adding the button. That's a bute with type button. The last part inside of this Well, first at Spain Tech. Well, some text that screen readers should show read. So we have the class show for SA, and the text will be text full screen readers close all Spain tech again, and then we can simply copy this code from up here for Aiken. Let me see right here, which is wrapped in Spain Tech. The area hidden attribute with value. True. So for screen readers, they read this text and hide this icon made for normal screens. This text would be hidden and that I can will will be visible. So it was safe to go back. Refresh. And here we see the button with the I can only this was all the various ways that you can create button controls. What foundation? 2. Button Group: button group. With this control, you can create groups of buttons. You can use the same kind of stars as you can with it individual pardons. This is just a way to group them together in different ways. You can see that we have a basic group than we can control the sizing off all the buttons inside a group we can color the individual pardons in a group or the entire group of pardons we're gonna also have full with. And even with button group like sir. Finally, we can stack our buttons for Missy that they're stacked for all screen sizes. Then we'll see an example where they're stacked only foot small screens or for the small and medium screens watch. When I increased with off the window here. Here, the second examples doesn't stack anymore, and now the third example doesn't stack anymore. Finally, we have a split button. Decide with two buttons, one of them having and I can instead of text. Now let's see how we create this so we go into our code. It is a start building the basic Bun group. We have a Dave Tech the class button group inside this Web as many buttons as we want, so we had the bun tech with type. Attribute the value but in the class, but we give it the text. But remember to close the barn tick and just triplicate this a few times. Notice that you can also use Anka Tech with the class button or any other eight steam male element. But for now we use the button settlement, so there's going to the browse like the right set and refresh. It was Yellow Button Group. Let's see how we can change the size of this group, so we'll copy this code here and create a tiny bottom group by adding the class tiny. Create a small button group by adding the class small. Create a default group by not adding any clauses and finally, the large bottom crew. By adding the class lodge, we save and go back into the browser and refresh. He would see the tiny small default and lots size off the button group. Now let's look at callous, just paste in the same code from before and now we want to give individual colors to these buttons. We can have a primary button secondary burden. Uh, success button and alert button and a warning button, just like you can with normal buttons, so thes other colors that you can choose from that safe. Go back and refresh. He received the various buttons inside the same button group. We can also control the corners for the entire group and older. Barton's inside. Let's see how we do this. Just scroll up and copy our basic group here. And then Now when you want to create a button group with primary colored buttons, we have a glass primary to the button group grass. So the parent element, it's same we do. But other Carlos. We have secondary color, the sections color, the warning color and the alert color. Let's save this coping to the browser and refresh now. Receive colors for the entire group. Primary secondary sexists, warning and alert. Let's see how we can create a full with and even with. But group well paced him the key for coat and simply at the class expanded. Now, when receding the browser, we can see that it explains to take up the full with all of the available with and divide it evenly for the pardon. Stay inside Let's see how we can create a button group that stacks on smaller screens. We can see here that all the default ones doesn't stake at any time, but we can make it do so if we want. So in accord, until we start pasting in the default and at the cross stepped. Now it will stack for all screen sizes. However, maybe we only wanted to stake for small screens. If we want that we can at the class stacked for small instead. And if we wanted to be stepped for small and medium franchises, we can use the glasses stacked for medium. So let's say this. Go back and re fresh. You can see the 1st 1 is being stepped for all screen sizes. The second X aim of is stacked only for the small screen size, and they're turning to regular Pardon group, and the third example is stacked on both small and medium devices. When we reached the lots break point right there, change to the regular button group. Finally, let's see how we can create a split button sign to do this. We start with our brethren element, which is Dave Tech with the class But instead of this we're at. But this time I'll demonstrate this using bank attack. But the class button and given text split button mixed to this increase. Create one more in contact with the glass baden and now also at class dropped out and the glass, Pero only inside of this. Well, that's a text text for screen readers, and we wrap that text in Spain Tech with the class show for it's Ah, which means it will only show for screen readers, which would read the text aloud for the regular user. He will see, uh, Arrow. So when you refresh, you can see we have this split button to sign now with the button at the music and quick and another button for other options. So this was how you can create button groups. 3. Close Button: close button. With this control, you could easily implement a button that the user can click on. Children move the parent element from the page. He received first the close button by its own, then received the close button as part off a call. Out. We click it, the call out will disappeared. We can also use a close herbal link instead of for close bottom. So here, when the user click the call out link, the Karla call out will disappear. We can use the motion you I animation together with this closing behavior. So now when I click this close bottom, it was slide away instead of fade away. You can learn more about the motion you I animation library in another lecture in this course. Now let's see how we create this close button. So in the next tap here, we can see that we already have these call out. The code for the call outs here will simply at the close button and the correct behavior. So in the code into, First of all, let's take a look at the basics basics. It's simply a bottle element with the type attribute with value button and the class close button and for accessibility, the area label attribute with the value dismissed alert. This would be read aloud by a screen reader and finally, the data close attribute to hook up the JavaScript functionality. It's out of this button. We'll place the Times simple. The 80 mil entity created by adding the 8% sign and the text times and cynical like so. This should also be hidden for screen readers. Since it's not, it's not necessary. So we had this pain tech with the area hidden attribute the value true like so, and remember to close this made check again. No, let's say this. Go back to the page Civic, the right term and refresh. We can see that this close button appears all the way in the top right corner, so it will position itself absolute in the top right corner. In the reference section here, we can see that it's allowed to the left. That's similar because I added some in line styles position relative and with and hide. If I removed the with, we can see that able align itself all the way to the right side. If I remove the height as well and the position tables or a line in the very top of the screen. So this is just to showcase the default behavior off the clothes. But now let's just continue and copy this text to you and paste it in to call out here after the call out link Now to connect this button to the parent element that we want to close, we must also at the data attribute data close, herbal like. So now let's refresh, go back and refresh, and here we see the button inside of Call out. Click it. It disappears. We could use in something seem allowed with a link. So to enable this feature, we're seemed the at the data close a tribute to the link and begin to the parent element. We have the data close herbal at your beard that save this. Go back and refresh. Now, when I click this link, this call out would disappear. Finally, let's see how we can use some kind of animation, too. Remove this element from the page, how pasting the button now here and once again we need to add the data close herbal attribute. But this time we'll also keep the Valium, which will be slide out, right? So, in this example, a slide out to the right side of the screen. It's safe. Nous go back and refresh. Now, when we click this close button, it will slide to the right side off the screen instead of simply fading away. So this is how you can use the close button for various elements. 4. Slider: controls slider. Now let's see how we could create different kinds of sliders, range sliders and law. Here we have the basic slider. We contract the handle here alone. This line we can set the step size. So now we can see it doesn't have as many steps us. In the first example. We can make it vertical and disable it going. Create a range slider with two panels to dragon. We can create data bindings or now the value off this slider will be updated in this import element. Like so, we can also have none. Linear value. Translation. So what? This means this. Right now we have the value of 25 and that value should actually have been some way around here. But now we can see that this it was very sensitive in the low area. This area here, the value changes rapidly and in the high area it changes slowly, less sensitive. The opposite is true with the 2nd 1 So in the lower area, it's not very sensitive. Changes slowly in the high area. It changes quickly. And this very sensitive. Finally, we have a native range slider. You think meeting a steam element if we change the star sheet since we need to compile some extra CSS for this to work, we can see that it looks like a range slider here. All right, let's get to work. So inside here we start creating the default slider using a day of tech but the crass slider. Then we must at the data slider attribute to initialize it with Javascript. Then we'll at the data start attributes with value where we wounded to start with this, like minimum value. So it will be syrup and the data and attribute, which is kind of the maximum value which will be 100. Finally, they're starting value data initial stop, which would be 25 inside of this work. Great. I'll handle losing a Spain tech with class slider handle and the attribute data slider handle. And for accessibility, roller spirit with better slider and Tep Index with value one. We're close to Spain sec again and empty. After this, we create another Spain check with class slide of Phil and the data slider fail. Attribute This Spain check should also be came to. Finally, we create an input with type with the value hidden, so this where this is where the and actual input will be stored so that they could be used to get over the phone. Let's save this. Go back in the browsers to make the right tap and refresh. Now we see that we have basic slider. We contract the handle. We can also click anywhere along the line. Now let's see how he changed the step size Okabe skulled pasted in. No, we're at their data step. Attribute. We'll give it the value of five, but safe. Go back and refresh. Now we can see that it only changes in values or steps off. Five. So 20 steps along this line with a maximum of 100. Let's see how we can create a vertical slider. To do this. We're simply at the class vertical to the slider class, and we must also at the data vertical attribute with better. True, Let's save this. Go back and refresh. Now you can see that we have a vertical slider. We can make it disabled to do this based in the default code again, and was simply at the class disabled. That's safe, back and refresh. Now we can see that it looks great out because it's to save it and the mouse cursor has changed. We can create a range line where two handles. Let's see how we do this now we'll based in default coat and for now, at another handle. So yeah, Spain Tech with the class slider. Handle the data slider. Painful attribute. But Roland I should be with about it was slider and the text in Next value one. So exactly the same. That's the one we have up here. We'll also create one morning put with type attribute value hidden. Now we must specify the initial end. Using that data initial and attributes will give it the value of 75. Now let's say this. Go back and re fresh. You will see that we have to start on ending handles. Now let's take a look at data binding based in the killed off a default slider and after that, well app input. But the type A tribute for the value number and the I V data finding what also remove this input from slider here and then for this handle or app. The area controls attribute the value data binding. This is the idea down here this is full accessibility to connect these two. Now, let's say this and take a look because either value 25 being stored here and when I drag in the handle value will change. Also, if I enter another value in here and press enter the hands and will update in the slider, we can have nonlinear value translation with this data binding. So let's go back here now on. Copy all of this coat here. First we have the luck. Invasion are just update this. I d here. None. Mania lock. And then well, that the data attribute called data precision value function. Give it the better do lock. We're also specify the base. So we have the data. None. Lenny up base. Give us a value. Five. You can, of course, change that. No, let's a copy. All of this code here. Paste it in. Down here first. Let's change this value too. None, Linear po. Then we'll change the value off the data position, value function, attribute power and will keep the base value off. Five. That's safe. Go bagging three fresh. Now we can see that this is very sensitive, low end and less sensitive in the high end the second. The opposite is true for the second example, which is less sensitive in the low end and much more sensitive in the high end. You should, of course, or can, of course, experiment with changing the base value for these none day near value. Translations. Finally, let's take a look at from native range slider. This is created using on input element with the type attribute but the value of range. Then we'll keep men Attribute value 25 max. Attribute the bad your 100 and we'll give it the step attributed with value five. Let's save this. Go back and re fresh. Now you see right here, you see, that moves in steps. If we change the style sheet here to the one with the compiled CSS that you need to do to use this, then we can see that it looks better. Takes up the full with it doesn't look exactly the same as the range slider component, But this is a way to make it look similar. If you need to use this native range slider. All right. This was all about the slider control 5. Switch: the switch is an alternative style for a cheque, books or radio button. So first we see the basic switch that that's now trained off, and now it's turned on for this assignment. Laughter. The checkbooks Being unchecked ain't checked the radios, which have the same decide as a checkbook switch. But these works as a radio button in a group where the user can only select one at a time. We can have different sizes off this switch, and we can also have inner labels. He received the yes and no used as a labor. Let's continue and create the exam owes in the code dated first, we'll create The basic switch will start with the attack with the class switch inside. This would create in protect, give it class, switch input and then I D which will be example radio switch, for example. Checkbooks switch. Thanks. So we'll give it the type that your group at the Value Check box and the main example checkbooks switch So the name is too. Give this some kind off idee when we submitted to the super, we won't do that right now, so this isn't necessary to produce the correct official style. I just use it anyway, since it's good practice. Next, we have a labour tech, the class switch pedal. And for which Butte? With value example Chick box, which so these two and are linked together with the fall and I d attributes inside a follow label. Well, a span tech, the class show for Assad and the text checkbooks switch. So this will be text on the visible for the screen readers. Now, let's say this. Go back to the browser, Select the right tap Refresh. All right, we can see that something is wrong here, so I just go back. Yes. I had a type of it should be built like this chauffeur Issa. Now let's go back again and refresh. He was, er, Switzer. It can be turned on and turned off. Let's see how we can use this with radio buttons. So I just copy this code from up here pays to Then they now change the I d and main to example radio switch. And this would be the 1st 1 So at the number one here and change changed the value of a type attribute radio are also change takes down here radio switch one. No. Copy this CO to you too tense and changed this number 22 and this number down here through three. Notice that the name here is exactly the same. This is necessary to show you how these related insider groups only one can be switched on at the time. This is also used to store the data. When we submit this to the server using this value in the name attribute s I or so explained up here with the check box situation. Finally, it's at the chick, a tribute to the first radius, which so it will be turned on when the page loads. Let's go back into the browser and refresh he was here. Or three radio bones could be turned off too long. I think so. And when you choose another one in the same group, the selective one will become un selected. You can switch one off. Only you can change which one is currently selected. So this behaves exactly as a group of regular radio buttons. Now, to see how we can control the size off this switch Probably the code from up here, paste it down Here, I'll change some values so it would become tiny switch and then oh, at the class to the parent element. The last tiny copy all of this, or change the tiny class and the tiny word in our values. Too small pasted coding. One more time. Changes change the tiny value to default but removed the glass. We don't need a glass for the default size, but we need to change this so it won't conflict with the other one. Finally, let's change the tiny class and value to large. Let's save this. Go back into the browser. Refresh how we can see the tiny small default and large sites. Great. The last example, but I look at is how to define inner labels for switch. So to do this paced in default code from up here and I just update these values true in our label switch. So So we still have checkbooks and inside off our paddle we have this text you for the in the labour Example so to at labels were created almost contact with class switch active and the area hidden. Attribute value true and the text yes, so this will be hidden full screen readers for all I know value well at the same span tech . But this John change the class to switch inactive like so. Now let's say this goes back into the present refresh. You will see how switch with in the labels. Yes and no. This was all about how you can use a switch as a control in your forms.