Transcript

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