Transcript

00:06 hey everyone this Joe Workman and today
00:09 today stacks three has dropped right I
00:12 mean this is exciting stacks we all love
00:15 stacks and stacks three is such a huge
00:18 improvement in so many ways and I know a
00:21 lot of us rely on stacks daily to make
00:24 our amazing websites and probably
00:26 provide for our families right so I'm
00:29 really excited I'm gonna do a quick
00:31 overview of stacks three via the
00:34 foundation update so foundation 1.5 was
00:37 released and it has a lot of amazing new
00:40 features and so what we're gonna do in
00:42 this video is basically show you all of
00:44 the new stacks three hotness through the
00:48 foundation 1.5 update to kind of show
00:50 you and show you how things are done
00:52 okay so without further ado let's jump
00:54 in and see how awesome it is so what
00:58 you'll notice when you open up your new
01:01 wrapper beaver projects in stacks 3 is
01:03 that stacks has a completely new user
01:06 interface and is actually extremely
01:09 beautiful and very flexible to you know
01:12 curtail itself to your workflow so as
01:15 you see over here on the Left we have
01:17 our stacks library pane that is now a
01:19 static pane instead of a popover but
01:22 that's always customizable and we'll
01:23 look at that in a little bit next we
01:26 have our settings over here on the right
01:28 and if you notice these stack settings
01:31 are now a part of the rapidweaver
01:33 inspector ok so inside the very
01:35 far-right tab you'll have all of our
01:37 stack settings and then just as before
01:40 we have our main content area in the
01:43 center of the stacks edit mode and then
01:46 we have just as before our toolbars as
01:48 well as on the top and the bottom our
01:50 formatting toolbars on the bottom now
01:53 there's a lot of different
01:54 configurations that we can do here if
01:57 you go in the settings pane if you go
01:59 down to the bottom you'll notice if you
02:00 click on this little button here you can
02:02 have the stack settings open up as a
02:04 popover you can also click on this other
02:07 window and have the stack settings
02:10 actually be a full-blown popover window
02:13 okay or if you want it back as the
02:15 painting go ahead and click that bottom
02:17 button there so very very powerful the
02:20 stack settings has been moved here so we
02:22 have a little bit more settings that we
02:24 can use for stacks three and then we
02:28 have the same exact options for our
02:30 stacks library so as you see we can I
02:32 show and hide the entire stacks pain
02:35 okay there's also keyboard shortcuts for
02:38 this as well and then we can also show
02:40 that as a popover as well which has kind
02:43 of a little similar look to the way it
02:45 was in stacks too okay if you notice
02:48 scrolling through stacks is now blazing
02:50 fast right I mean it's super super fast
02:53 we also have a lot more sorting and
02:57 viewing options now with the stacks
02:58 library as you see we have groups over
03:02 here on the left
03:04 now the stacks partials is something new
03:06 that we'll look at in a little bit then
03:08 we also have templates we have images we
03:12 have our favorites because you can mark
03:14 stacks as favorites then you also have
03:17 the built in stacks and then you can
03:19 create your own custom groups now I
03:21 recommend the first group you create is
03:23 definitely for the foundation stacks so
03:26 you have a group that contains just your
03:27 base foundation stacks it will really
03:30 speed things up when you go building
03:31 your websites now if we look at the
03:36 bottom oh there is actually a
03:37 configuration where you can actually
03:39 show you can change the icon size do you
03:41 want to arrange stack by tags by author
03:45 by the title of the stack do you want to
03:48 sort the built in stacks always at the
03:50 top do you want to ignore author tags do
03:53 you want to sort the reverse you can
03:55 also you know show stacks and finder and
03:57 show hidden stacks as well so there's a
03:59 lot of flexibility here and search is
04:02 really blazing fast now the search field
04:04 searches more than just the title of the
04:06 stack developers have tagged our stacks
04:09 so if we go ahead and search for
04:11 something like slider you'll see that
04:14 not only did you know stacks come up
04:16 that contain that word but also other
04:19 stacks that are tagged with that also
04:21 show up this makes the stacks library
04:24 very very powerful in easy
04:28 now I'm gonna jump into the biggest
04:30 feature of stacks three right at the
04:33 beginning and that's something called
04:34 partials and partials are what we've
04:38 always wanted for Global Content what
04:42 partials allow us to do is to define
04:46 content within a stack that can be made
04:49 global across multiple pages now what
04:53 you'll notice in foundation 1.5 is that
04:56 all the global templates are now hidden
04:58 now all of your existing stacks will
05:00 continue to work
05:01 however with partials we have even more
05:04 power than we ever did with templates
05:08 now as you'll see here is I've actually
05:11 already created a partial for my site
05:13 style stack and what I've done is in
05:16 this partial note you can have multiple
05:18 stacks inside of a partial and we'll see
05:20 that in a little bit but right now I
05:22 just wanted to show a simple example
05:24 where I have a single site style stack
05:26 inside of a partial now I've gone
05:29 through and changed all of my settings
05:31 inside site Styles now I've given my
05:36 partial a name of site Styles as well
05:38 and you can name it whatever you like
05:39 and what we'll notice is inside my
05:42 partials library I have my site Styles
05:45 partial I can then add this partial to
05:49 any page that I want or I can add it to
05:52 other partials and whenever I change it
05:56 once on any page inside that partial it
06:00 will change globally across all my pages
06:03 now let's look at a slightly more
06:05 complex example here I have a partial
06:08 called site header and if we double
06:10 click on that we'll enter in the partial
06:12 editor and inside here I have my site
06:16 Styles partial because partials can
06:20 contain other partials
06:21 it has a partials that I set up for a
06:24 top bar it then contains also a new
06:28 stack in foundation 1.5 called structure
06:30 and this structure stack defines that
06:32 this is going to be my header of my page
06:34 and inside there I have a two column
06:37 stack and then that two column stack
06:39 contains a background
06:40 with a a image overlay and then it has
06:43 two content areas that I've unpinned
06:47 okay and that is done with these little
06:50 pins now if you'll notice here when they
06:54 are blue when something is pinned to the
06:56 partial okay it means whatever I add to
07:00 this content area will be added to every
07:03 single instance of that partial but if I
07:07 unpin these drop areas this means that
07:10 that particular drop area is going to be
07:13 specific to each page so if we were to
07:19 look at this page we'll notice that this
07:22 is my site header and then inside this
07:25 content I've added specific content to
07:28 this page then in the second column I've
07:31 added an image which is specific to this
07:33 page but if I were to go to another page
07:38 we'll notice that all of my content is
07:41 the same except the areas that I've
07:43 unpinned inside of my partial and just
07:48 to show you that partials can change
07:50 let's go ahead and edit this partial and
07:52 I'm going to change the background color
07:54 or this this header here to be a let's
07:58 do blue okay so I've made the header
08:02 background blue okay let's go ahead and
08:05 go back and we'll see that my header is
08:07 changed blue now let's just go ahead and
08:09 go back to the page we were on
08:10 previously and we'll notice that that
08:13 new color has registered on this page
08:15 and if I were to publish this site it'll
08:18 it'll basically that style change will
08:20 happen on every page that contains this
08:23 partial this is extremely powerful now I
08:27 wanted to take a quick break out because
08:29 I want to make sure you understand how
08:30 vital these partials are I mean this
08:33 revolutionizes how we build sites using
08:36 foundation because now we can
08:38 compartmentalize and basically build our
08:42 theme using foundation this is huge
08:46 you can build your footer and then build
08:49 your sidebar build your page headers and
08:51 then include those partials
08:54 every page and you can easily edit those
08:58 areas your footer in one location and
09:01 then you see all the changes right there
09:04 in rapidweaver
09:05 and when you publish it publishes the
09:07 same thing across your entire website
09:09 right I mean I cannot just tell you how
09:13 exciting this makes me feel because it
09:15 really gives you the users the power to
09:19 really build exactly what you wanted and
09:21 not only build what you wanted cuz we
09:23 could build it before right but we had
09:26 to build it on every page now we can
09:29 build our themes using partials with
09:32 foundation and then our content could be
09:35 separate on every page I mean this is
09:38 astronomically huge I mean I'm excited
09:41 about this I hope you're so excited
09:43 about it too I mean because partials are
09:45 huge I said that like 10 times right
09:47 your price tired of me saying that but
09:49 they're huge okay so I just want to make
09:52 sure that you understood how huge
09:54 partials are and how cool and how you
09:56 really need to embrace them because
09:59 there are gonna revolutionize the way
10:01 that you build websites okay back to the
10:04 rest of the amazing features so now that
10:07 we've reviewed partials I want to make
10:09 sure that you know that I completely
10:11 rebuilt the entire foundation demo site
10:14 using stacks 3 and partials ok and this
10:19 new project file is available for
10:22 download from our doc portal so you can
10:24 go ahead and go to our doc portal and
10:26 download the the latest foundation theme
10:28 and you can see how I built out all my
10:30 partials ok you'll see that I have a
10:32 header set for my home because the home
10:34 header is a little bit different than
10:36 the other pages right and then I at the
10:39 very bottom I have a site footer which
10:42 contains basically the footer for my
10:44 entire site now one thing I do want to
10:47 point out with partials and foundation
10:49 is that there is a little gotcha
10:52 ok in this particular example I have my
10:55 site footer that I showed you earlier
10:57 and if you notice here all of the text
10:59 here is black ok and the links here are
11:03 blue now inside site Styles I had
11:08 my text to be white for my alternate
11:10 colors and slightly off-white grey for
11:14 my link colors however since I don't
11:17 have sight styles inside the partial I'm
11:20 not gonna see those styles be applied
11:22 okay but once I get out of the partial
11:25 editor will notice that site styles you
11:29 know CSS is now being applied to my
11:31 content so that I can see it here so
11:34 just to let you know that it's possible
11:35 that certain Styles some colorings and
11:38 whatnot may not look what you would
11:41 think
11:41 inside partial edit mode okay just
11:45 because site Styles isn't there but
11:48 don't fret once you get outside of
11:50 partial mode okay and site Styles is on
11:53 the page all your Styles should be
11:56 applied properly but now let's go ahead
11:59 now that we've gone over partials and
12:01 we've gone over the the new interface
12:03 some things that you'll probably have
12:05 noticed is that some of the settings
12:07 have changed a little bit in stacks okay
12:10 let's go into site Styles because this
12:12 contains a lot of settings so that we
12:15 can see so here we are in our site
12:16 Styles partial but let's go ahead and
12:18 look at some of these first you'll
12:22 notice that the default stack settings
12:23 have changed right we'll see that we
12:26 have a nice some nice buttons okay
12:29 instead of checkboxes or select boxes so
12:32 you can apply a color to something or a
12:34 background image and you have full
12:36 tiling options and image sizing all
12:40 within every single stack now the border
12:43 settings are awesome too because we have
12:45 this new plus button where we can then
12:47 go ahead and go from a generic border to
12:51 detailed bordered okay and what you'll
12:53 notice is we have all four
12:56 configurations all in one line this
12:58 saves a ton of space in our stack
13:00 settings so that we can you know provide
13:02 you a much more elegant interface to
13:05 configure your stacks in same thing for
13:09 margins and layouts now every stack also
13:12 has this new responsive hide this stack
13:15 feature so you now have the ability to
13:18 specify on what sites
13:21 or sorry what browser sizes you can
13:23 actually hide a particular stack in okay
13:27 now this doesn't replace the foundation
13:29 visibility stack because that has a few
13:31 more features than what this allows you
13:33 to do but if you just want a quick and
13:36 dirty I want to hide this particular
13:37 thing on mobile just go ahead and check
13:40 this on this stack and it will be hidden
13:43 on mobile so this provides a really
13:45 quick and dirty way of hi of hiding
13:48 content for a particular device now
13:53 let's go ahead and look at some of the
13:54 foundation specific features that we see
13:56 in site Styles now I'm gonna go a little
14:00 bit more in depth in a separate video on
14:02 all of the new foundation 1.5 features
14:04 such as the awesome new swatch colors
14:07 here okay but right now I just wanted to
14:09 to pinpoint some of the new layouts that
14:11 you will see in stacks 3 so you'll see
14:15 here that we have the ability to define
14:17 new colors schemes so we have the
14:19 ability not only have one color but we
14:21 can have two colors up to four colors in
14:24 a single row okay as you see same thing
14:27 for checkboxes and here we have the
14:29 numbered boxes so you see there's just a
14:32 nicer way of just allowing us to define
14:35 different layouts for our settings so
14:38 that you don't have to keep scrolling
14:39 forever to see all of your settings this
14:42 just you know again is a much cleaner
14:45 way to do things now the last major
14:48 thing that I want to review is a new
14:50 type of stack called a child of stack
14:53 and to illustrate this we're gonna go
14:56 ahead and let's go ahead and look at the
14:58 button group okay the button group was
15:01 completely redone using foundation 1.5
15:04 so let's go ahead and add this to our
15:06 page and what we'll notice here is that
15:10 it looks a lot different if you use
15:12 foundation button groups in the past and
15:15 what you'll see is that there's this now
15:17 this new plus button here and when I
15:20 click this plus button a new stack will
15:23 be added to the page but it is a stack
15:27 that is specific to the button group so
15:30 if you notice any inside here I now have
15:32 four buttons
15:33 and each of these buttons have their own
15:36 setting so I now can choose the text do
15:41 I want it to be a link so all of these
15:44 buttons have individual settings for
15:48 each one I can even choose different
15:50 styles for each button if I want so if I
15:52 wanted this first button to be a
15:55 secondary style and then the you know
15:58 this button to be primary you can now
16:00 create different colored buttons based
16:02 on sight styles and you can add up to
16:05 six of these buttons and if you want you
16:08 can go ahead and delete a button if you
16:10 no longer want it but this is a new
16:12 feature called child of and allows you
16:15 to easily reorder buttons right so you
16:18 can if I wanted this button to be over
16:20 here I can oops I can do that okay there
16:25 we go so I can now reorder these so it's
16:28 a little bit better than the little uh
16:30 kind of loop controls that we had access
16:33 to before and there's a lot of new
16:35 stacks in foundation that that used this
16:37 feature button groups one drop zones and
16:41 top bar is another one icon bar and a
16:44 new stack that was released with
16:47 foundation 1.5 is called SEO helper an
16:50 SEO helper allows you to add meta tags
16:53 to your page okay and these meta tags
16:58 will review this in a future video about
17:01 SEO helper but just to show you an
17:03 example of ways that this new child of
17:06 feature can be used so that when you see
17:09 it you're aware of what's going to
17:10 happen now updating stacks in the past
17:14 has kind of always been a chore and if
17:17 we preview this site you all have known
17:19 that dreaded foundation version mismatch
17:22 error well I'm happy to say that in
17:26 foundation 1.5 that is gone okay and we
17:29 now have specific very pinpoint way to
17:33 tell you that your foundation stacks are
17:36 out of date please update diversion and
17:38 it tells you the version now I have
17:42 version 1.5 10 installed and I've
17:46 released an update so let's go ahead and
17:49 see how stacks updates how stacks three
17:53 update stacks now so at the bottom of
17:58 the stacks library you'll notice that
18:00 there is a little refresh button and if
18:02 we click on that you'll get an entire UI
18:05 just for updating stacks and if we click
18:09 on check now we'll see that it is very
18:13 quickly okay it's going through I have
18:16 hundreds of stacks installed and it's
18:18 quickly gone through all of my stacks
18:21 and it's displayed every single one with
18:24 release notes that I have available to
18:27 install so this is huge this allows you
18:32 to see all the release notes for a stack
18:34 and if I need to go for my release notes
18:38 I also add a full URL that you can click
18:40 and go to that particular release notes
18:43 web page and you can update individual
18:47 stacks or you can go ahead and update
18:49 all stacks right
18:50 this is greatly improved right and I can
18:54 quickly let's go ahead and update all
18:55 stacks so you can see how quick this
18:57 happens right so right now stacks three
19:00 is downloading all the stacks and it's
19:03 installing those updates and it's done
19:06 right it's now updated every stack and
19:09 even displays the last few stack updates
19:12 at the bottom so that we could see kind
19:14 of what stacks have been recently
19:16 updated and see their release notes now
19:19 there's a few things under the hood in
19:21 the stacks three update that I should
19:23 mention right all of the built-in stacks
19:26 okay are now responsive so all of the
19:29 column stacks that come with stacks as
19:31 well as the image stacks right all of
19:34 those are going to be built in
19:35 responsive now so that's great now
19:37 obviously you're using foundation you're
19:39 probably going to be using the
19:40 foundation column stacks and just to let
19:43 you know all the foundation column
19:44 stacks got a complete redo so I didn't
19:47 really touch base in this video but make
19:49 sure you check out the foundation 1.5
19:50 updates video that kind of goes into all
19:53 the nitty-gritty of that stuff so a lot
19:55 of exciting stuff going on there
19:57 also stacks now has a better way of
20:01 managing jQuery and font awesome
20:05 so if you notice before in stacks 2 we
20:09 probably needed always have an internet
20:11 connection depending on the theme right
20:13 whether or not you we can actually edit
20:16 our websites and fully preview them
20:19 without an internet connection okay and
20:22 that was because bean stacks to stacks
20:25 always pulled in jQuery from Google and
20:28 if you didn't have an internet
20:30 connection that jQuery library didn't
20:32 get downloaded
20:33 however in sacks 3 now by default stacks
20:36 actually loads its own copy of jQuery
20:39 which is really exciting because that
20:41 means that we have full ability without
20:44 an internet connection to test our
20:46 websites ok and also I mean there are a
20:50 lot of people maybe you're on a company
20:51 firewall and really see DNS for jQuery
20:54 arguably some people say they don't make
20:56 sense anymore because there's so many
20:58 different versions of the CD ins out
21:00 there so whatever I'm gonna be using the
21:04 local version of jQuery from now on on
21:05 my site just that what everything comes
21:08 in through my site from my domain right
21:09 now a full control over all of it I
21:11 prefer it that way and now also sax 3
21:15 manages font awesome which is well it's
21:19 awesome right because before if a stack
21:22 wanted to use font awesome it had to
21:25 load its own version of font awesome now
21:28 I made sure that all of my stacks loaded
21:31 the same exact version so that you know
21:34 multiple copies weren't downloaded on
21:36 your web page however I had zero control
21:40 over other developers so if other
21:42 developers were using font awesome in
21:44 their stacks
21:45 I couldn't guarantee that font awesome
21:48 wouldn't download twice right and you
21:52 don't really want that because font
21:53 awesome well it's not very small so
21:56 stacks now manages font awesome and
21:59 basically stacks can I register with
22:01 stacks three with s3 that we are we want
22:05 to use font awesome okay so that means
22:08 we now have a centralized copy of font
22:10 awesome tea
22:11 use and now also stacks three ships with
22:15 font awesome 4.4 so we have access to
22:18 all the awesome new things right we got
22:22 Spock now we have rock-paper-scissors
22:24 right we got all that cool new icons
22:26 that ship with font awesome 4.4 so you
22:30 have all of that now and foundation all
22:31 that in all of my stacks that use felt
22:34 that use font awesome and any other
22:36 stack out there that has updated to use
22:38 the stacks three version will now use
22:42 font awesome 4.4 and they'll load the
22:45 same exact copy of font awesome
22:47 everywhere so I kind of beat that with a
22:50 with a dead stick now so without further
22:52 ado I hope you like foundation and
22:56 snacks 3 it's the huge both are I think
23:00 go ahead and watch the videos that I'm
23:03 doing on the foundation 1.5 update and
23:05 if you haven't gotten a copy of stacks 3
23:08 yet stop now and get it okay your head
23:11 comm slash stacks it's just it's awesome
23:15 it's gonna change your life right it's
23:19 just gonna make your life so much easier
23:21 gonna save so much time using partials
23:23 okay whether or not you're using
23:25 foundation or not okay partials are the
23:28 bomb okay and the new UI is faster its
23:33 slicker to use there's even on small
23:36 screens I mean I'm using it on a big 27
23:38 inch display so I have a lot of real
23:39 estate right but I mean the thought that
23:42 was when that went into how all of the
23:45 UI in the library collapses so that on
23:47 smaller screens it takes up less real
23:49 estate right
23:50 I mean Isaiah just did a phenomenal job
23:53 with stacks 3 and the quality and the
23:56 craftsmanship of it has really stood out
23:58 for me and I hope you enjoy it I hope
24:01 you go and you buy it and it makes your
24:03 websites great so thank you very much
24:05 everybody
24:06 have a great week and happy reading bye
24:18 you"}]