Transcript

00:08 so what is this magic called utility
00:11 classes
00:12 well first off to enable utility classes
00:14 you need to add them via the features
00:17 option inside sight styles so once you
00:22 add them you can then use them now do
00:24 you address be fair they are baked into
00:26 edit modes you can use utility classes
00:28 in edit mode but they will not preview
00:30 or publish unless you add this utilities
00:33 class stack so um yeah a lot of people
00:37 just immediately add it to site styles
00:39 whenever they use it because the utility
00:40 classes are pretty awesome now what our
00:43 utility class is it's just it's
00:44 essentially a bunch of pre based classes
00:47 um that you can add to a whole bunch of
00:50 stuff and once you learn them you might
00:52 be using less swatches as well so let's
00:55 see with the art what can we know about
00:57 what utility classes there are there is
00:59 a clot a class's stack you can use and
01:02 the only purpose of the stack is to
01:04 document all of the various utility
01:07 classes that we can use now when you add
01:10 a class a stack um you'll see that there
01:13 are a small number of classes here well
01:15 there's still quite a bit but these are
01:17 actually available out of the box even
01:18 if you don't add the utility class okay
01:21 so I'm gonna I'm not gonna demo all of
01:24 these cuz there's so many classes um so
01:26 I'm just gonna give a brief overview
01:28 about them okay um and please go ahead
01:31 and play with them see what they do and
01:33 you know get to learn and know them okay
01:36 first off we have classes for h1 through
01:39 h6 okay so those are their actual class
01:43 names so h1 h2 h3 and these are if you
01:46 want a style text like your h1 or like
01:50 your h2 so let's say you have an h3 on
01:54 your page for SEO reasons you want it to
01:56 be in h3 but for style reasons you want
01:59 it to look like you styled your h2s well
02:02 all you have to do is put in h2 class in
02:04 there and you're good to go
02:05 right these are super useful and they're
02:08 going to be great okay next is we have a
02:11 lead paragraph this allows you if you
02:13 have
02:13 like um if you use the header stack and
02:16 set it to paragraph put lead in there um
02:18 actually I think there might be a
02:19 setting for this um but if you put lead
02:23 essentially what that does is it will
02:24 kind of make that text a little bit more
02:26 a little bit larger kinda like it'll be
02:29 the lead paragraph kind of like in
02:31 typography okay um then we have no
02:33 bullet lists we have a stats class to
02:36 kind of make things look a little bit
02:37 bigger and and whatnot so look like
02:39 stats we can truncate text um we can
02:42 affect how text is wrapped so you can
02:44 say text no wrap or wrap um we have some
02:48 content alignment so like text alignment
02:50 and content alignment so text align left
02:52 center right medium text left medium
02:55 text or large text left center right
02:57 blah blah blah
02:58 okay we have a bunch of visibility
03:01 classes these are all the classes that
03:02 also come in all the visibility's
03:05 settings that you see throughout all of
03:07 foundation six um these are the same
03:10 exact classes that that setting uses
03:12 okay but maybe you want to use these in
03:15 a stack that doesn't have that baked in
03:17 okay so there are classes you just add
03:20 this to the classes and it'll hide or
03:23 show on the stack when you want it to
03:26 next is float classes um these are
03:29 really useful if you want to float stuff
03:31 there is a template an example that
03:33 shows you how you can like use this to
03:35 float images within text um so yeah
03:38 these Fulop classes are really useful
03:40 for stuff like that
03:43 now if you want to use the utility
03:45 classes this classes stack has a setting
03:48 called show utility classes now let's
03:50 turn that on
03:52 so when we turn that on you'll see that
03:55 there are a lot more classes okay a lot
03:59 more
04:02 so first off we have a bunch of stuff
04:05 for list so we can i ordered list Eileen
04:08 a lot of these are there's actually a
04:09 list styling baked into site styles but
04:12 if you want to do some one-off stuff
04:14 that's some good utility classes this is
04:16 a very useful one for components island
04:18 so you adding radius and rounded and
04:20 shadow and bordered stuff right so these
04:23 are kind of useful for like one-off
04:24 quick little classes especially radius
04:26 and rounded I use those a lot um we have
04:30 font styling so you can do font normal
04:31 font bold font italic font wide which
04:34 makes it a little bit wider it includes
04:35 it increases the text distance okay we
04:39 have some text transforms so we can do
04:41 text uppercase that forces the text to
04:43 always be uppercase text lower case
04:45 obviously force it to be all lowercase
04:47 and capitalized forces sentence case
04:49 right or capitalized case so the first
04:51 letter is always going to be capitalized
04:53 we can use some text decoration so text
04:56 underlined text over line and text line
04:59 through and then we have margin classes
05:02 so margin is quite complex it is this is
05:07 a system of classes and we're going to
05:10 skip this we're gonna show you some
05:11 examples of this later but there's a lot
05:14 of possibilities here okay essentially
05:17 there are all these sizes available and
05:19 you can do four top bottom left right um
05:21 you can have specific margins for medium
05:24 small you can do negative margins all
05:26 kinds of stuff okay um we have padding
05:29 helpers very similar to the margin
05:31 there's lots of lots of options here um
05:34 with okay there's tons of different
05:37 sizes available here and then you could
05:39 just do W : and then your size right so
05:42 we'll look at some of that we have some
05:44 Z index template helpers so here you
05:46 just do here's all the possible Z index
05:48 values you can just set it to z : and
05:51 then one of these values okay or you can
05:54 use Emacs and that just puts it to the
05:56 maximum possible um z index value okay
06:00 so if you really want to make sure it's
06:02 the highest possible Z index value you
06:04 can use Emacs we have a bunch of new
06:07 height settings okay so all these allow
06:10 you to do either static Heights or
06:12 percentage heights of the browser window
06:16 okay um we have some border box stuff
06:19 some display classes so if we want to do
06:21 sometimes he's useful if you know what
06:23 display:inline is or display:block
06:24 display table though these are kinda
06:27 kind of coming in handy sometimes
06:29 okay um border none' is a good useful
06:32 thing if you just want to axe the border
06:34 on something really quick so that just
06:36 nicks the border on anything just say
06:38 border none' on that um positioning this
06:41 is important especially you want to do
06:43 like position:relative sometimes um the
06:45 position swatch it might not necessarily
06:49 position relative to parent to something
06:52 you'd think of so um you could always
06:55 throw in the position relative on
06:56 something if you really want to ensure
06:58 the position swatch is actually being
07:01 positioned relative to that element okay
07:04 um
07:06 then we have some overflow stuff and
07:07 then we have some color stuff at the end
07:09 so here we have background color utility
07:12 classes so we can do like BG white BG
07:15 black BG secondary BG primary um so you
07:19 can really add some really quick
07:20 background color stuff and these used
07:22 all of the colors that are defined
07:24 inside site Styles okay and next up is
07:27 text colors you can do color : then you
07:29 have white black medium gray dark gray
07:31 primary header text link color right
07:34 so all these affect the text color of
07:36 things and you can always use it uses
07:39 the colors that are defined inside cite
07:41 styles as well okay so right now we're
07:44 gonna look at how we can do some of
07:46 those margin swatches and luckily a lot
07:49 of these more complex class settings
07:51 such as margins padian's width and
07:53 height have a very similar syntax so
07:56 let's look at that first off if we just
07:59 do M :
08:01 and then one of the values that's
08:03 defined inside the margin right let's do
08:06 like 3
28:08 hey that will put a margin on all sides
08:11 of an element of 32 pixels now we can
08:16 target the top bottom left and right as
08:18 well so if we just want to target the
08:20 bottom we could do mb : 32 now a common
08:26 thing is you know a lot times we want to
08:28 remove the bottom margin on something
08:30 well that's easy you just do MV : zero
08:33 and that will remove the bottom margin
08:35 on something and actually you can
08:37 combine these so if you were to do these
08:39 and M : 32 and MB : zero that will mean
08:43 that the left right and top margins will
08:46 be 32 but the bottom margin will be zero
08:51 cool okay
08:54 now as I said we could do mt4 top so we
08:57 can do top margin we can do em are :
09:01 four right margin or margin right and
09:03 you can enter in one of those values and
09:05 then you can do ml or margin left do
09:09 that as a 3
29:12 cool okay now what else can we do
09:18 we can also do M X this is kind of kind
09:23 of a shorthand so we could do MX : 3
29:25 okay now substitute 32 for any value
09:28 again and this is just a shorthand for
09:30 doing left and right margin okay and
09:33 then you can do my colon 32 and that is
09:38 the same thing as same top and bottom
09:39 margin
09:41 okay now there are also the ability to
09:46 do negative margins and I've done videos
09:49 on how to use negative margins and
09:50 they're really cool
09:52 so and that's really really simple you
09:54 can use all of these and all you need to
09:57 do is put in a dash in front
10:01 so essentially it's the same exact
10:04 syntax if you want it to be a negative
10:05 you just put a dash in the front make it
10:08 a negative margin pretty simple
10:13 now there's one other thing that we can
10:15 do and it's possible with all these
10:16 combination and I want to show you how
10:19 we can do responsive margins on things
10:23 so if we supply just this class it will
10:27 apply to small medium and large but
10:31 let's say on medium we want something
10:33 different so if we do MD : let's say 64
10:38 what will happen is on small we will get
10:41 32 pixel margin and then on medium
10:44 you'll get 64 pixel margin now this is
10:48 possible I'm sorry oMG I got that : MD :
10:52 m :
10:54 64
10:56 almost messed that up okay so it's MD :
11:01 so medium margin 64 and then if we
11:05 wanted to do large we could do LG : M :
11:11 96
11:15 okay now this works for all of them so
11:18 if you could do you could um be in here
11:20 for on medium margin-bottom is 64 and on
11:24 large margin-top is 96 okay there's all
11:28 the combinations of these options
11:33 so I know that was probably a lot but as
11:35 you can see these are really really
11:37 powerful things and it could potentially
11:39 help you replace a lot of your swatches
11:43 potentially now padding is pretty much
11:47 identically the same so all the options
11:49 that we have for margins we also have
11:51 for patty so we do padding 32 we can do
11:55 padding top right padding top 90 96 on
12:01 large okay the only caveat with padding
12:04 is you can't have negative padding like
12:06 you can margin so there are no negative
12:08 options when it comes to padding but we
12:11 have all the same options right so you
12:13 can do padding top you know zero padding
12:16 bottom eight right padding right 32 and
12:22 padding left or whatever
12:29 so there's a lot of iterations a lot of
12:32 these utility classes and it has all the
12:35 iterations the same iterations as margin
12:37 - the negative okay next up is with okay
12:46 so with there's a lot of various options
12:48 first you can do static with so you
12:50 could do W :
12:51 you know all the various sizes 8 there
12:54 are a couple of ones like full that is
12:56 with full it always goes 100% it's the
12:59 full width okay um if you do w screen
13:03 this one's probably Oh a little more
13:05 esoteric um it actually makes whatever
13:08 element the width of the browser window
13:11 not necessarily that's different than
13:13 with full because with full will fill
13:15 the container it's within with screen
13:17 will make it the width of the browser
13:19 window regardless of what it's inside
13:22 okay so that could cause some funky
13:24 scenarios but it's useful if you ever
13:26 need that
13:28 and then you have all the various sizes
13:31 you know 32 64 um you know 256 all that
13:35 stuff okay so you have you have all
13:37 those values to set static width of
13:40 things okay and we have the same exact
13:44 media query stuff so you could do medium
13:46 with um and then you know you date 192
13:51 right uh and then large with oops large
13:55 : w :
13:57 256 okay now
14:03 there are some other things now what
14:05 about percentage widths okay so there
14:09 are a bunch of fractions okay actually
14:12 let me go ahead and bring rapid we were
14:14 back in
14:15 you'll see that we have a bunch of a
14:18 fraction options available as well so we
14:20 can do W : 1/2 which is 1/2 you have
14:24 thirds fourths fifths 6/10 and twelfths
14:29 okay that you can do all the fractions
14:32 inside of that you can do
14:34 so if we wanted it 50% we could do w :
14:38 1/2 or if we wanted um
14:42 2/3 you do w : 2/3 okay those are the
14:48 actual class names that you will use
14:51 okay it's just the fraction if you want
14:53 something 80% its W :
14:56 8/10
14:59 okay
15:06 um hike has a very similar set right you
15:10 just do H :
15:12 and then your static height so you could
15:13 do you know 256 or whatever and it has
15:16 all the the break points as well so you
15:18 could do you know MD : um H oops man
15:22 can't type today MD : H :
15:26 192 and then large height whatever right
15:30 and then height also has a bunch of
15:34 other values
15:39 so if we look at the height values here
15:41 you will see that we have 10 V H 20 V H
15:44 10 20 30 40 50 60 70 80 90 100 us have
15:48 25 50 75 33 and 66 okay so basically we
15:54 have um tenths fourths and thirds of the
15:58 browser window that we can do height on
16:01 so let's see an example of that maybe we
16:04 want something to be a height of 75 VH
16:09 okay that V H stands for a viewport
16:12 height okay if you're curious so we can
16:14 do 75 VH and then maybe on medium okay
16:18 we wanted to be a little bit smaller we
16:20 wanted to be 66 oops
16:22 H 1 6 th and then on large maybe we want
16:29 a height of 50 BH okay so this is kind
16:34 of how you can use those for height okay
16:36 again it's just H :
16:37 and then the value and then MD for
16:41 margin or for medium : height :
16:45 so you see there there is a a standard
16:48 syntax to these hopefully you'll learn
16:51 it and it'll become second nature to you
16:53 pretty soon
16:56 now for the colors it's pretty simple
16:58 you just do BG : and then the color
17:01 option that's available
17:02 okay so BG white we do BG black right
17:05 and then there's all the other color
17:07 options available the same thing for
17:09 colors you've color primary okay or
17:15 color sess right
17:19 and again background adds the background
17:21 color and the color changes the text
17:23 color and again if we want to look at
17:26 those classes again we have all the
17:29 colors are listed here right inside the
17:31 classes stack for background colors and
17:34 down here is the text colors and again
17:37 these text colors are are exactly what
17:40 are defined inside site styles or they
17:43 could potentially be if you define a
17:45 component swatch or a text color swatch
17:48 it could bring in those colors based on
17:50 how you built your page
18:00 "}]