Transcript

00:09 so what is a swatch now if you've been
00:14 using foundation six at all you probably
00:16 notice that a lot of the content stacks
00:18 that come with foundation don't have a
00:21 lot of settings within them right so
00:24 there's not there's hardly any style
00:26 based settings in any of the foundation
00:29 six stacks for example in the tech stack
00:32 there's no text size there's no
00:34 background color there's no font color
00:36 well why is that
00:40 well the answer is instead of me adding
00:43 all of these various settings that you
00:45 could potentially want in every use case
00:48 we decided to centralize all of those
00:51 into something called a swatch because
00:55 if we look at what swatches are
00:56 available we have component colors text
00:59 colors backgrounds borders font colors
01:02 Heights margins opacities overlays
01:04 padding positions rounding shadows with
01:07 right custom CSS there are even
01:10 third-party swatches that you can use so
01:12 if you have things like my fit tech
01:14 stack in my wallpaper stack um there are
01:16 actually swatches built specifically for
01:19 those if you actually already own those
01:21 stacks so really cool it's very
01:23 extendable and this is really gonna
01:26 revolutionize the way that we build
01:28 websites because all of these foundation
01:31 stacks don't have a ton of settings that
01:34 means edit mode and preview and
01:36 publishing aren't so much faster now
01:39 let's show you how we can add a couple
01:41 swatches and apply it to our content so
01:44 for right now I'm gonna add a background
01:46 swatch and what I do is let's just call
01:49 it my background
01:54 okay and as you see here inside the
01:57 background now I'm not gonna go through
01:58 all the settings in every swatch but we
02:00 have a lot of settings in here right
02:02 there's background colors there's
02:04 background images you can do a
02:05 background warehouse image you do custom
02:07 CSS you can choose a color from a swatch
02:11 right so if you want to use backgrounds
02:13 secondary um you know success color or
02:16 so on and so forth as schools you kind
02:18 of get a preview of what the background
02:20 is directly right here inside edit mode
02:23 now for right now we're just gonna keep
02:25 things simple and I'm gonna use
02:26 background color and let's just so we
02:29 can see it I'm gonna make it red
02:31 okay and actually maybe we call this red
02:36 - section
02:39 okay
02:41 so cool how can we apply this let's say
02:44 I wanted to add something make something
02:45 have a red background so let's say I
02:48 wanted to make this entire section have
02:50 a red background all I have to do is do
02:53 red - section and we're done
02:58 cool math we scroll further down the
03:01 page we'll notice that oh this one I
03:03 want to have let's say plain colored
03:05 white the same default color as the site
03:07 background let's say I wanted to make
03:09 this one red as well I could just simply
03:10 add red - section here
03:15 and we're done now let's say for example
03:18 in the future I'm like you know what
03:20 that color red is really really bright
03:23 or maybe it's too bright I want to
03:24 change that so we could just kind of go
03:26 in and maybe make that shade of red a
03:28 little bit darker and what you'll notice
03:30 is it changes everywhere so I no longer
03:35 need to go to every single possible
03:37 stack that used this background and
03:39 change it I can now manage this style in
03:42 one location now this black text for
03:47 example doesn't really look all that
03:48 great on on my red section so let's go
03:51 ahead and maybe we change the font
03:53 colors okay
03:55 so let's actually work what we're gonna
03:56 do is we're gonna use the text color
03:57 swatch what you'll notice is this text
04:00 color swatch has all of the colors
04:02 available that kind of overrides the
04:05 colors that are set here inside site
04:06 Styles so we have header colors sub
04:09 header colors text colors link colors so
04:12 on and so forth right but I wanted to
04:14 find colors for my red section so I can
04:17 do is I'm gonna do a head and go I'm
04:18 gonna add a class to this text color
04:20 swatch and we're gonna add the same
04:22 exact class red section
04:24 so here I've created a color scheme for
04:27 various text colors that are going to be
04:29 used inside my red section and look for
04:32 fun actually let's go ahead and
04:33 underline links as well so all links are
04:35 going to be underlined inside my red
04:36 section let's go ahead and let's scroll
04:38 down you'll notice as all these colors
04:41 are used directly inside edit mode and
04:43 if I ever want to change any of these
04:45 codes let's say the header for example
04:46 maybe I want to make it a little bit
04:48 more blue tint right we can make that
04:50 change and we see those Styles reflected
04:53 directly inside a edit mode and they're
04:55 reflected everywhere that that red
04:57 section class is used
05:01 now it's great with swatches that you
05:03 can combine different styles together so
05:06 if we were to preview this page you'll
05:07 notice that a I'm not gonna win any
05:09 style of words for this but let's say we
05:11 wanted to add a little bit of padding in
05:13 between each section so that it had a
05:15 little bit of breathing room between
05:16 each section on my page so what I'm
05:19 gonna do is I'm gonna add a padding
05:21 stack in here we're gonna call this
05:23 content section okay because maybe a
05:26 section of content now I recommend you
05:27 kind of make your classes as descriptive
05:30 as possible and you can use dashes you
05:33 cannot use spaces but you can use dashes
05:35 to kind of so that when you look at that
05:38 class name we kind of realized what that
05:40 is right and what we're gonna do is
05:42 we're gonna go to detail padding and I'm
05:45 gonna set we have a lot of options here
05:49 if you notice these values here
05:51 represent the scale that is in the
05:53 background of site styles so we can kind
05:55 of give an idea about how much padding
05:57 we want I'm gonna go for a lot let's go
05:59 with 96 so I'm gonna do 96 on the top
06:01 actually no we're gonna cut that in half
06:03 because I have let's do 64 and do 64 on
06:07 the top 64 on the bottom and then I'm
06:11 gonna leave the left and right patty
06:12 NetZero okay
06:14 now I have this this class called
06:16 section content section anyways I'm
06:18 gonna go to this container and now here
06:21 I already have a class called read
06:23 section but I can add another class just
06:25 do a space and then put in your second
06:28 class name and you'll notice that that
06:31 is applied directly in edit mode let's
06:33 go ahead and add this to every section
06:35 on the page
06:41 and there we go and again as you see
06:44 that kind of adds us gives us some more
06:46 breathing room within our sections if I
06:49 ever wanted to change this I can
06:51 immediately adjust this and it'll just
06:53 all the sections at one time so as you
06:57 see there are a ton of swatches
06:59 available here that really provide the
07:02 gamut of most colors and styles that
07:05 you're gonna want to apply to your
07:07 content so swatches is really powerful
07:10 you'll notice that you can get a lot of
07:12 work done quicker this is easier to
07:14 maintain faster not only in a wrap
07:16 Weaver but on our published websites as
07:18 well and I am really excited about this
07:21 amazing feature in foundation
67:29 "}]