0:00 [Music]
0:07 in this video we're going to take a
0:09 quick look at how they respond to size
0:11 controls work in button + 2 we're all
0:16 familiar with the standard foundation
0:19 sizes for buttons of tiny small medium
0:21 and large um for the most part these are
0:24 the settings that you should use it will
0:27 ensure that all the buttons on your page
0:28 consistent and uniform there are times
0:33 though where you want to be able to
0:35 adjust the size of the text relative to
0:38 the button and he's mostly the case when
0:42 you're making round buttons and social
0:44 icons and such so if we turn this button
0:47 into an icon button just by pressing the
0:50 icon selector
0:53 then we'll see that the text lows is
0:57 still the same texts it was when it was
0:59 late said button text will accept now
1:03 it's a font awesome icon so let's first
1:06 of all just change that to a twitter
1:08 icon sort of more like a social button
1:13 and that's we can even change the year
1:16 this style to the custom color and make
1:24 it look a bit more like a twitter icon
1:26 we change the icon color as well to
1:29 white that's looking better now so we
1:34 can see now when we change the size of
1:38 the button just like the normal text
1:41 buttons the buttons changing size but
1:47 the fonts are awesome icon isn't really
1:50 doing what we want when we're using it
1:53 as a book so we've got various options
1:58 first of all in the icon settings we
2:01 have an icon scale and this is what you
2:04 can use virtually all the time it's very
2:06 simple and it just scales the icon from
2:10 its normal one hundred percent value up
2:12 to two and a half times two hundred and
2:14 fifty percent so we've generals sizes of
2:21 buttons this will be sufficient
2:23 underneath is also a nudge control now
2:26 not all icons are perfectly square and
2:28 the font awesome family so to get it
2:31 absolutely aligned in some cases you
2:34 will need to just nudge it till only
2:36 goes a small amount either side in the
2:38 case of this one it's nice and central
2:40 anyway now what happens if you want more
2:47 extreme sizes or if you've got an icon
2:50 that doesn't behave quite as well as
2:53 this is twitter icon does well we have
2:56 the same responsive size settings those
3:00 are in paragraph pro and edit pro and we
3:04 need to do to way or four-way breakpoint
3:06 control
3:07 sizing so let's just go to waiting for
3:10 that and we can see immediately now it's
3:11 applied the one REM default text size
3:15 and the whole button has got small so
3:19 let's put this up to 1.6 and the scale
3:25 is still at two hundred and nine percent
3:27 so let's put the scale back to one
3:31 hundred percent so now we're actually
3:33 seeing the 1.6 around the font size so
3:36 if we were to change this to something
3:37 very big lips make this six REM then the
3:41 button looks fine put the twitter icons
3:45 to close to the sides we can't do
3:48 negative scales but what we can do this
3:51 is just the space around the icon and
3:53 this gives us a lot more precise control
3:55 and again there are four breakpoint
3:58 controlled REM font sizes here so we're
4:03 on medium at the moment I think so if we
4:05 just change that to one them instead of
4:07 half then you can see now it's given us
4:10 a bit more space around it if I keep
4:12 going up then we can increase the size
4:15 of the button by cutting around the font
4:21 now this is the reason you don't want to
4:23 do this all the time because a button is
4:27 just a piece of texts are linked usually
4:30 with cutting around it now you want the
4:33 buttons to be the same size I cross your
4:36 page in your site so you don't want to
4:38 start messing with the padding away from
4:41 the previous predefined settings but in
4:44 the case of making a group of social
4:46 icons touch the menu bar or the footer
4:49 then it does become useful to be able to
4:52 control it on a more granular level and
4:58 if we for instance take the example of
5:03 the Facebook icon so this is the square
5:10 one now if we change the radius of the
5:13 button we can start to get close to it
5:19 and this is where the space around
5:22 really becomes quite useful because it
5:24 essentially makes a border so if we say
5:27 go down to North Point six perhaps north
5:30 point seven we can almost we can almost
5:33 match the the exposed part of our button
5:41 to the thickness to the Facebook are
5:43 going to make them rather attractive
5:45 buttons that way if we take another
5:50 common example where this useful if we
5:53 go to a menu bar hamburger fa bars icon
5:59 if you wanted that to be on a round
6:02 button if we change the radius back to
6:04 fifty percent you can see because we're
6:06 trying to fit a square peg into a round
6:08 hole it comes right up to the edges of
6:12 the corners and doesn't look that
6:13 attractive so in this case we want to
6:16 increase our space around probably not
6:19 that much to turn out to ramble there
6:22 about and that is the essence of
6:26 creating custom size icon buttons if we
6:32 click to combi button straight away you
6:35 can see that font size has been applied
6:37 to the text and the icon as well now in
6:44 this case we can adjust the size of the
6:49 icon separately to the text by clicking
6:52 the custom icon size and then we now
6:56 have more detailed settings for actual
7:00 REM settings for the icon doesn't make
7:02 sense just to scale it up and down it's
7:04 better to be able to have a REM setting
7:07 because then you can set it relative to
7:09 your font so if we set the font size
7:11 back to something a bit more reasonable
7:14 perhaps let's put it to 1.6 red and we
7:20 can now control the size of a car split
7:23 icon relative to that so if we can make
7:27 we make up to it just makes it a bit
7:29 more prominent
7:31 engine as if we had a sa info it's
7:35 better than having it all exactly the
7:37 same size it just brings out the the
7:41 importance of it one other thing you can
7:43 do is adjust the vertical align now if
7:49 the icon is the same size or bigger than
7:52 the font there's no space to move it up
7:54 and down but if we make it smaller than
7:57 the font so if we make the icon one gram
7:59 in the font 1.6 we can then see how the
8:03 vertical align changes so that's
8:06 vertical line toc baseline bottom side
8:11 and back to centre
8:14 so if the vertical line doesn't seem to
8:16 be doing is doing anything it's probably
8:19 because your icon is the same or larger
8:21 than the text size in which case there's
8:24 nowhere for it to go so that's about it
8:28 so responsive sizing it's pretty obvious
8:32 as long as you remember that what we
8:36 have there is essentially a link with
8:38 some cutting around it and the
8:40 background so if you make the text
8:42 bigger it's going to make the background
8:45 bigger as well unless you reduce the
8:48 padding and we started looking at the
8:52 sizing settings in their layout section
8:55 and there is a custom padding that he's
8:58 very much like the one in button + 1 but
9:01 it's a bit easier to use to know if so
9:04 you can adjust the cutting top bottom
9:08 left and right on your button now again
9:10 this is not the sort of thing that you
9:13 want to be doing as a matter of course
9:16 but occasionally for the odd button that
9:19 needs to stand out it can be useful main
9:22 case in point green in the menu bar
9:23 where you may need a support that's a
9:27 bit tighter padded and the controls for
9:33 it pretty obvious pretty visual in edit
9:36 mode so that you can easily set up your
9:39 button that I would stress again don't
9:42 start altering every button on your page
9:45 because you will lose all the benefits
9:47 of the consistent styling that comes
9:51 with the foundation framework so thanks
9:53 for watching and I'll see you in the
9:56 next video"}]