Transcript

00:07 hey everybody Joe here and today I want
00:10 to address some questions that I've been
00:12 getting about foundation six right I
00:14 mean so far I've made about twenty hours
00:16 of videos right on foundation six a lot
00:20 of video right and in a lot of that
00:23 video most of it be honest it's all
00:26 about how to do things how to do this
00:28 how to do that especially with swatches
00:30 right I mean swatches are the big new
00:32 thing and I've done a lot of video on
00:35 how to use them but a lot of people are
00:38 confused as to why why our swatch is
00:41 better why do we have them why is it
00:44 faster why should I care about using a
00:47 swatch because before I just added a
00:50 stack to the page and this all the
00:52 settings I need would be right there
00:53 right I'd have background settings and
00:55 border settings and font settings all
00:58 inside the stack like why is swatches
01:01 better so let's go back in back in time
01:05 right and before we would add a stack to
01:07 the page and again like I said we'd have
01:10 all the settings that we would
01:12 potentially need right we had border
01:14 settings margin settings padding
01:16 settings font color settings font styles
01:19 font weights I mean lots of settings I
01:22 some stacks would even go for miles all
01:24 the settings that have had right I mean
01:26 it was pretty crazy because over time
01:29 while maybe a stack started really
01:31 simple you know feature requests would
01:33 come in and we need to add more settings
01:34 and then we'd add more settings on top
01:36 of that and over time that Settings
01:39 panel just grew and grew and grew
01:41 now imagine we're building the page and
01:43 we have those stacks that have tons of
01:46 settings on them and we have like a
01:48 hundred of them on the page and chances
01:52 are we're not even using all the
01:53 settings that are inside those stacks
01:55 either now let's just think about it
01:57 from the stacks plug-in perspective it
02:00 actually go through every single plug in
02:02 every single stack through every single
02:05 setting
02:07 process all those settings render it in
02:10 edit mode and it only that when we
02:11 preview we want preview to be fast right
02:14 well guess what
02:15 stacks has to go through every single
02:16 stack we have on the page process every
02:19 single setting and that takes time
02:24 and over time as stacks became more
02:27 complex and had a lot more options and a
02:30 lot more settings yes they gave us a lot
02:33 of power it gives us a lot of
02:34 flexibility however we paid the price in
02:39 terms of performance
02:41 edit mode became slower previewing our
02:44 pages sometimes took minutes
02:48 because we built these really flexible
02:51 complex layouts but it took us tax a
02:55 long time to have to go through every
02:57 single stack that we have on the page
02:59 process every single setting output the
03:02 HTML output the JavaScript output the
03:05 CSS write output some PHP if it has that
03:08 right so there's a lot going on behind
03:11 the scenes okay
03:12 so let's enter into foundation six right
03:15 I wanted to when I started developing
03:17 foundation six I wanted to rethink I
03:20 wanted to think outside the box
03:22 I wanted to rethink how we're doing
03:23 things right now so that not only can we
03:29 have things faster but it also was more
03:32 flexible for the future and then I also
03:36 had a more ulterior motive of I wanted
03:40 you guys to become better web designers
03:43 so how could how do we get all of that
03:45 done it seems like an impossible task
03:47 but I think we've done that exactly that
03:51 with swatches because the swatch allows
03:55 us to infinitely extend a stack to
03:59 whatever settings we want
04:04 and this is done through something
04:05 called classes right and sometimes
04:09 classes confuses some people they're
04:11 like oh no that's a coding term think of
04:14 it as a tag okay
04:16 I thought long and hard about naming
04:18 them tags actually but I wanted to call
04:22 them what they are and they are a class
04:24 in if we look at HTML code or web design
04:28 code they are classes and as I said I
04:31 wanted to make you a better web designer
04:34 so instead of calling them tags we're
04:37 calling them a class but to be honest
04:40 just think of them and this as the same
04:41 thing let's say I had a a column stack
04:46 to my web page and I want that column to
04:48 have a background
04:49 well that background that column stack
04:52 doesn't have any background settings but
04:55 we can easily add a swatch
04:58 create a class inside there aka a tag
05:03 put it as column background is the class
05:07 name and wherever I put that class name
05:10 wherever I tagged it in any single stack
05:12 guess what that style is applied
05:16 and what's awesome is we can apply as
05:18 many swatches as we want to as many
05:21 stacks as we want now I recommend you go
05:24 watch the video on why and how to use
05:27 swatches it goes over some really basic
05:30 understanding I'm not gonna do any demos
05:32 here I just wanted to explain the
05:34 reasoning behind this
05:38 because now I can infinitely in extend a
05:41 Stax functionality with as many swatches
05:44 as I want
05:46 that way we're only stacks is only
05:49 processing the styles and the code that
05:51 we want not be 50 million other settings
05:56 that we don't even touch
05:59 okay and not only that swatches are
06:01 reusable right so I have one swatch on
06:04 the page that I can use on ten different
06:06 stacks well instead of stacks having to
06:10 go through each of those ten stacks and
06:12 process a background setting or whatever
06:14 it not only has to process one
06:16 background swatch
06:19 that is where we get all of the
06:22 performance benefits of foundation 6 you
06:25 will notice that in edit mode things are
06:27 a lot faster preview is almost
06:30 instantaneous and you're gonna love it
06:33 ok so I hope this gave you a little bit
06:36 of clarity on why um I did foundation
66:40 the way I did again think of classes as
06:44 just a tag it's just a way of creating a
06:47 swatch and assigning that style to as
06:50 many stacks as you want imagine that
06:53 that background setting is inside that
06:55 stack now
06:57 okay next up is performance we have a
07:01 lot faster performance okay much much
07:04 past faster with this approach okay and
07:07 then not only that but we can then copy
07:09 our Styles put it in a partial and
07:12 partial across all of our pages and we
07:14 have all of our Styles encapsulated
07:16 inside of a partial that we can then
07:18 edit easily on any page it's faster
07:21 again benefit ID may come up come up
07:25 with yet is this is a lot faster for
07:28 your your workflow in the future if you
07:31 ever want to redesign if you watch that
07:33 swatches video you see how I assigned a
07:36 red background color to two or three
07:38 different sections on my page and later
07:41 on I decided uh you know what that I
07:43 need that background darker well instead
07:45 of going to three different stacks and
07:47 changing three different background
07:49 colors all I needed to do is change that
07:52 one swatch and that color was changed
07:55 everywhere so it not only improves our
07:59 performance inside rapidweaver it
08:02 reduces our time for designing our
08:06 websites
08:08 that is gonna make you a better web
08:11 designer take care hope you're enjoying
08:12 foundation 6 go out and watch all the
08:15 other amazing videos that we have I hope
08:17 you enjoy it and we'll see you over on
08:18 Weaver space bye
08:29 you"}]