Transcript

00:01 excellent let's see in the chat excellent Martin thanks for popping in Crooklyn Beach design in the house
00:09 nice how's it going Scott Scott Pam the other Scott Scott number
00:17 two what's Su Dave super secret double probation
00:24 swatches nice Chris thanks for coming on today sweet
00:31 hey how you guys you know I I was like you know I need I need to wear a different hat to like one I don't wear much so I was like I pulled out the
00:38 bowler hat like man that's uh pretty I have to say it looks really big on this live stream like I don't know it feels
00:45 really big uh looking at in the video but uh anyway it's a cool hat it's actually really comfortable it's really nice too look at
00:54 he's even got the like the little peacock or Quail feathers I don't know what kind of feathers those are but yeah they're not nice so okay got this at the
01:02 Charles Dickens Festival that happens every year here in San Francisco um super cool Festival um but anyway
01:13 um the bowler isn't working a come on Jody
01:20 what man it's a cool hat you know I was like I got I got to wear something different you know so anyway um oh and
01:28 I'm clean shaving today look at that I just felt like shaving everything off today so or it was last night but yeah anyway
01:35 okay but we're not here to talk about hats we're here to talk about something more important than that okay we're talking about swatches today and
01:45 um hopefully all you already know what swatches are right they're in foundation and swatches allow us to do
01:53 all kinds of cool and amazing things um let me go ahead and uh let's just
02:09 YouTube which most people watch this live stream on YouTube um some watch it on Facebook and some watch it on Twitter um but if you are on Facebook and you
02:17 haven't subscribed to the channel I would love just go ahead and hit that subscribe button that would be awesome so do that thanks okay um so let's go
02:26 ahead and I'm actually going to go to Foundation stacks.com let's go to the demo you didn't know actually you for
02:35 the longest time there wasn't a link to the demo here like it was actually you'd have to go hear what's included not necessarily like crazy intuitive so uh I
02:44 don't know I think it was like a month ago or two months ago or so pretty recently I added this demo and docs button here so
02:53 um there are a lot to talk about in terms of swatches I'm not going to going to even try to
03:01 review all the default ones um I will quickly say the Swatch pack if you don't have the Swatch pack this is like an
03:08 extra 40 some odd swatches I think a lot of swatches that you get it's in it's a huge array of swatches that let you do
03:16 all kinds of stuff um here's the demo page for the Swatch pack if you don't have that um it's it's really cool really valuable some of my favorites
03:24 here the aspect ratio Swatch is really cool okay clip path is interesting I think that could be fun for some you know unique shapes and whatnot on your
03:33 site cursor um there's a custom display Swatch with some people love because you can actually Define a you know a custom
03:41 visibility Swatch here um so you can say you know hide this at this particular breakpoint right so that's a big thing
03:48 for some people The Equalizer Swatch super cool um gradients there's actually this layered gradient like this one
03:56 right here that's just super slick it's a little comp to get your head around cuz it actually is taking multiple gradients and kind of you know
04:04 overlaying them and then getting this really cool effect um but yeah it's pretty cool um actually I love this
04:11 Canon this conical not canonical conical gradient um so yeah that's really cool where it gives a very interesting effect
04:19 so check check out that one and we can hover that stuff protect and um scroll bar Styles those are new ones I just
04:26 shipped that a week a week ago I think it was last last week um those are really cool let me just show those off really quick since I don't think I
04:34 actually did a video on those um so normally you know content on the web is super easily accessible right
04:42 and like let's say I can select this text normally if there's an image I can like you know select it and like drag and drop it that's not an image but you
04:50 know um so but in this demo you'll notice that you can't write click on the image you can't drag it you can't even select the text like I can't I'm trying
04:58 to right click right now you cannot rightclick to do like inspect element and stuff like that so the protect Swatch allows you to do that it actually
05:06 lets you turn on and off different features so you can either have fully protected or you can like allow drag and drop you can allow text sele selection
05:14 so that you can turn on and off various protection features okay and uh pretty cool so like in this demo here I just
05:21 have this little gray box I have the class um just on this one box so you can protect a portion of the page if you
05:29 want want you can protect your entire page um I don't know that's probably not necessary but you could do that if you
05:36 wanted okay next is scroll bar Styles you'll notice that um here actually in also the scroll bar of this entire web
05:45 page is styled okay so it's not using the default browser scroll bar we actually can style it we can provide it
05:52 some colors we can give it a little bit around we can customize the the radius on it we can customize the color of the track as well as well as the color of
06:09 container so this container has content that Scrolls and uh as you see here the scroll bar is orange you're welcome
06:18 Chris right um we have SVG swatches here table swatches Toggler oh Toggler is
06:26 that's bees knes uh this is a really cool the Toggler one okay we can hover or click uh we can also do Toggler on
06:33 scroll so that you know things toggle on scroll super cool transform um this Swatch pack again if
06:42 you if you don't have it I I have a full video that goes over all this I could probably spend an hour um on all this at least um so this underscore Swatch is
06:50 really cool for some really cool interesting um you know underscore effects on links and whatnot so super cool there and there's a bunch more okay
06:59 so Swatch pack check that out if you don't have the Swatch pack um has a lot of really powerful stuff okay so but you're a foundation
07:08 owner and you already have the Swatch pack and you're like I got all the swatches but do you right there's some
07:16 secret swatches and um the reason there are secret swatches are because I try to
07:27 integrate um you know or I try to reward customers that have foundation and other products right um so there are a lot of
07:36 like there are a lot of Integrations between my products so all my products are Standalone um but if you have let's say
07:44 total CMS or you have feeds or you have Foundation depending on the mixture of things they will integrate and play very
07:51 nicely with each other okay and a lot of times what I will do is if I have a a
07:59 cool stack I'll create a Swatch for that stack so um I thought it would be fun
08:06 today to to look at foundation and some of the extra swatches that you might not even be aware exist okay so let's go
08:15 ahead and uh let's start let's look at my site Styles so you may have seen some of these things like as I do demos and I click on these various buttons and
08:24 there's a lot of stuff in my site styles that you might not have in your site styles and the reason for that is that when you
08:33 own multiple things um you'll start having and showing things that kind of magically show up in sight sight Styles
08:41 and I thought it' be fun today to to show off all of those now I can't go in depth into every single one of these um
08:49 because there there are a lot and so uh I'm just going to Breeze through some of them talk about a little bit especially these feature ones so like for example
08:57 here there's agent Lang um this just allows you to you know if you're using multilanguage sites with agent it allows you just conveniently
09:05 add into site style so that it's a part of the partial because a lot of times that's going to be something that you want to have inside your partial across every page right so it just makes sense
09:13 having it there in site Styles same similar thing for like page safe right page safe this isn't necessarily A a
09:21 special feature of foundation um but we allow you to add it into site Styles because if you're going to want to password protect a site chances are
09:29 you're going to want to have it on every page so it might be convenient to have it in side side Styles okay other things
09:36 like CMS core okay so total CMS oops that's that's the version you guys don't have access to yet there we go right so
09:44 CMS core so CMS core again that's something you're probably going to want on every page um so you know this is a
09:52 just a convenient way for you can add a lot of these things in site Styles because chances are your site Styles is going to be partialed across every page
10:09 page um okay let's go to the new ones uh let's see page safe pwa Pros is another one so if you're using uh my pwa stack
10:17 it's right there again it's probably going to be another thing that you're going to want to have inside every single page right so just makes sense having it inside sight Styles so that
10:25 it's just convenient and everything's kind of there in a nice tight package something that's pretty cool um is print
10:32 Styles so um if you have my printer stack right here let's just go to this one really quick this is one I want to
10:40 just kind of peruse okay so if you own my printer stack um it comes with a print Styles
10:49 and what this allows you to do is to create some special Styles okay purely for print for example let's say you have
10:58 some crazy image backgrounds or borders and you know colored backgrounds on your site and you want to force a black and white print right when someone prints
11:06 it'll actually force that background to be white um it has some cool things like append URLs to Links a lot of times if you have a a lot of links in your
11:14 text what happens is if someone prints that they don't necessarily know what that is linking to so what this will do is it'll actually append the URL that's
11:23 being linked to to the actual link so when someone prints out and is looking at a physical printed page they can
11:30 actually see the link or the URL that that web page is getting linked to so pretty cool um that's a really nice feature then you can customize the the
11:38 font size and Page margins and all that jazz too but that's a really cool one um sight lock um if you are a sight
11:47 lock user um is another one that it's probably going to want to be on every page the prefix stack okay um so that's some of
11:55 the kind of the more Global page features right that you know something that you're going to want to make sure is if you're using it you want to make
12:02 sure it's on every page so some really nice stuff there and did I oh one okay the last one
12:10 on the list this is a no-brainer okay pen is a lot of people argued maybe my most powerful stack out there okay maybe
12:20 most used let's let's say most used not most powerful is pen now pen is a part of my free starter pack okay
12:29 and I I won't do a full demo on pen right now but um it's a no-brainer go
12:36 get my free starter pack okay um and it includes pen and Pen one thing it allows you to do if you're using Foundation is
12:44 it allows you to you know kind of group um Stacks kind of have edit um edit mode notes right so you can kind of do a lot
12:52 of other stuff so pen a super powerful stack it's a no-brainer go get it it's free and it allows you to kind of
12:59 organize you know your swatches around a lot of project file developers use pen to organize their projects so it's
13:07 become a very popular stack check it out um it's very convenient to
13:16 use so uh before I go on I saw jod asked a very good question so site Styles you'll notice that I have um broken down
13:25 okay so let me I'm going to go ahead and let's back up I'm going to add a so if you notice in Foundation there's a sight Styles and a swatches stack the swatches
13:34 stack it it's the same thing as sight Styles it just it allows you you kind of put it wherever you want on the page and it access it allows you to access every
13:43 single Swatch okay now if you see this that that this menu isn't necessarily all that easy right I mean so what I tried
13:52 to do is instead of having one giant menu like this inside site Styles um what I wanted to do was kind
13:59 of break things up for you just uh give us a little bit of organization okay so really is think of features these are
14:07 things that aren't NE these they're features that you're adding to your project or to your page or to you know things so if I'm adding if I want to add
14:16 font awesome right if I want to add you know this prefetched links we're not going to go into that it's a cool one if you want to add this jQuery Legacy
14:23 support which we've talked about before um or any of those other ones I just found the features just
14:29 adding kind of features to your page or to your site right so these are just kind of things that aren't
14:37 necessarily they don't have to do with applying Styles or customizing your page content they're just kind of their features okay a lot of these are
14:46 integrated into foundation so like the font awesome one if you want to load font awesome fonts there it goes it's a feature
14:55 okay um now font and text these are going to going to be all swatches that pertain to font and
15:03 text General these are uh Styles or swatches that can be they're very general they're they're things that can
15:11 be added to practically anything they're sty mostly Styles or animations and the
15:18 the swatches that are inside General can be applied to anything okay I'd say that's probably like 95% true and there might be a few
15:27 things where it's like yeah that doesn't work if you apply to that but for the most part um these are General styles that can be applied to almost anything
15:36 okay now components these are swatches that are specific that have very specific purposes to them okay for
15:45 example let's look at some of the ones that come out of the Box menu Styles this is a Swatch that is only available
15:52 to menus right it's for a very specific reason you're you're not going to apply the menu Swatch to a container or to
16:07 specific Swatch to enable a feature um that allows you to equalize columns or equalize the height of content right um
16:15 it isn't necessarily a general thing it's just it's a very specific implementation okay actually we're going to be looking at a lot of these today because there's probably a lot in this
16:24 list that you guys don't have so that we're going to be spending a lot of time in here as SVG is another one right so we have an SVG Swatch but that only
16:32 applies to svgs you can't apply this Swatch to anything else right so again um that's what that's what these groups are hopefully that that kind of
16:40 clarifies that for you jod so again features are just features to add to your page or you know components that
16:47 maybe you want to have partialed across all your pages okay um font and text are font and text stuff General is general
16:56 and components are specific swatches for very specific situations
17:02 okay okay so um we've already looked at features let's look at font and Text Now
17:10 by default there's only one two three four five swatches here okay um with
17:17 Foundation however I have a lot more okay now I'm not going to dive into all of these but all of these are with a
17:24 product called font Pro okay let's go into font Pro just so you guys can see
17:30 it this is my font Pro stack set and what font Pro allows us to do is it it allows us to integrate with a lot of
17:38 different ways of integrating fonts custom fonts thirdparty fonts into our web pages so um if you're using like for
17:48 example um this font that I have on Weaver space here okay um this is a font that I've purchased from a a uh Foundry
17:56 called a type Foundry called Hoffler okay typography.com is actually their website now um and so I've purchased
18:05 this font and basically I load it from their server okay um it's actually really if you want some really beautiful
18:13 fonts check out hofler I think I pay like I think it's $100 a year um I've actually paid more so I can use this
18:21 font anywhere I want I can like print it on shirts or do whatever right so I've actually paid like $600 for this font
18:28 but um just to load it on web pages um I think it's $100 a year and you get access to their entire font library of
18:35 some really elegant fonts um so check out Hoffler um it's anyway but this stack allows you to load um those sites
18:44 or fonts from that site um and there's other ones like if you're using Adobe fonts I know there's a lot of adobe users here so um this allows us to load
18:53 fonts from Adobe um as well we can if you have your own font file you can actually load uh the web font this
19:08 let's say Google fonts Google fonts are all open source so if you were to download the actual Google font files um
19:16 actually Brett caral has it posted a great post on the community um I think I added it into the common questions area
19:23 that has a util there's an online utility that lets you convert these to what's called a waile I'm kind of getting into the into the weeds here but you basically download
19:32 all the Google fonts and instead of serving them from Google you can actually load them as a web font okay which is M much better okay you'll have
19:41 much faster uh response times as well as you know for gdpr and dsv and all those privacy things that you know don't like
19:49 loading resources from Google um that fixes that for us okay so font Pro allows us to do do a lot of font loading
19:58 from various Services I won't go into all of them and then there's also a font Pro style which gives us a lot of more control that the out of the-box
20:07 foundation ones don't such as you know character spacing line height word spacing so depending if you want really
20:14 fine grain control over your font and how it looks um the font Pro style Swatch is kind of a must because it
20:21 allows you again you can do sizing um line Heights you can have really fine grain control over your
20:28 typography okay so there we go in general um there there are no
20:39 um custom things in general okay if you have the foundation swatches and the foundation Swatch pack um you'll have
20:48 everything in here okay so there we go that was quick okay so let's start looking at some of these
20:57 other ones here so it's basically all of these that are down here some really cool
21:05 ones so let's look at columnist okay so um this Swatch allows us
21:14 to quickly well let's let's look at and this comes with my columnist um
21:23 product so columnist columnist allows us to basically do kind of a newspaper style
21:31 layout where um our text Will flow between colums it's not like this isn't
21:38 a I'm not creating a four column layout and then you know diving my text up across those the the text actually flows
21:46 between them okay and and it is responsive so as as it gets lower you'll see that the number of columns goes
21:54 down okay so really cool it it handles lists very nicely it does all kinds of
22:01 really really cool stuff okay now you could just use the columnist
22:08 stack right so you could do you know there is a columnist
22:15 stack and let's go ahead and uh we're just gonna we're gon to ax that you guys weren't supposed to see that
22:23 top secret stuff there right so we'll add columnist right and you could add columnist to the page and then um just put in your text into
22:31 here and columnist will do its job right um but why why would I use a use a
22:40 Swatch over the columnist stack like what what benefit does that give me okay because as you see a lot the
22:49 settings a lot of the settings are the same so inside columnist you can Define the number of columns and and whatnot okay and you can preview them or or not
22:57 preview them inside side um and there's dividers there's all kinds of stuff okay but if you notice the the the Swatch has
23:05 very similar settings there are some settings that actually aren't are not available in the Swatch okay um that's
23:12 just because that it's just the way things have to be okay um but why would
23:19 I use columnist Swatch over columnist let's say I have multiple um you know
23:26 columnist stacks on the page okay let's say you know it's one's in a blog post another one's somewhere else right
23:33 um or I have them across multiple pages and let's say I wanted I wanted to adjust that
23:41 layout you know either the the adjust the column Whip or the gap or change the the divider colors or anything like that
23:50 how would I how would I do that right well I'd have to go to every single column to stack and adjust those settings
23:58 right so let's say I wanted to change all of these to be four columns I'd have to go to this one and go to four I'd have to go to this one and go to four I
24:06 have to go to this one and go to four and what if what if I was using these across multiple Pages I'd have to look at every single page and yeah and what
24:15 if I had missed one right and then you know then my maybe my layouts wouldn't be uniform and that's where swatches really
24:23 give us benefit okay so let's implement this swatch let's just go ahead and let me get a get
24:30 a text stack here
24:38 right uh let's just go ahead and do like uh I'm just going to add in a bunch of
24:45 text in here just so we can see right there's a bunch of text okay
24:53 and so here's my columnist setup and uh let's just do um live-
25:02 columns and we'll do text columns how about that actually here newspaper so here's my newspaper class
25:11 okay and I want it to be four columns wide well we we'll just leave the rest as is so anything I add this newspaper class to should uh get the job done so
25:19 I'm going to go over here and pop in my newspaper class now
25:26 um this doesn't work inside edit mode okay here but it does give you previews um inside of the Swatch okay so let's go
25:35 ahead and preview this really quick you'll notice there now I have four Columns of my text okay now why is this
25:43 why is this important how is that any different well now if if this Swatch was in a partial across all my pages a all
25:52 I'd have to do is update this one Swatch let's say I wanted to go from four columns to three columns because because this is in sight Styles and sight Styles
25:59 is going to be on every single page I update my one Swatch and then anywhere that I use this newspaper layout is it
26:07 going to be automatically updated that's really powerful okay it also allows us to um
26:14 now the columnist stack probably will work it should work inside things like the blog list and and it should work in feeds as well um
26:24 but adding a class to something is a lot of times easier than having to drag out another stack on the page we need less
26:33 stacks on the page than we had before okay because um yeah because I'm just adding a class to an existing stack so
26:41 super powerful there I see a lot of support kind of
26:52 questions in the chat about how do I uh apply this to in this particular scenario please uh post your specific questions uh and maybe troubles that
27:06 Hangouts and we can help you out there too okay um so there's columnist okay
27:15 let's go ahead and dive it let's see what else we got um drift timeline now I really don't have time the time in this
27:24 live stream to go through this okay um this gives us the ability to um the entire drift Pro stack um allows us to
27:33 create a reusable animation okay uh drift Pro if you haven't checked out
27:39 drift um basically what the drift timeline Swatch allows us to do is it allows us to create reusable
27:48 animations uh that we can then apply to anything on the page so let's say I had an animation where I wanted to do this little I don't know for some reason I
27:55 wanted to do a little roll out thing and and I could just create a class that whatever I add it to did that little thing right um actually I
28:05 believe believe this demo here was actually done with swatches okay uh with the drift timeline
28:14 Swatch um so yeah drift Pro is very powerful um it allows you to create your own whatever animations you want like it
28:23 really is um create your own animation okay it's basically foundation swatches for
28:29 animations sky the limit okay um yeah you could do Mor you can do some really amazing stuff um with uh with that
28:39 actually one of my favorite I love this here's a timeline animation right um so you can kind of create some really cool really custom animations with drift so
28:48 I'm not going to I'm not going to go into drift okay um but this gives you ability to again create reusable animations that you can apply to
28:56 anything with with just a class pretty cool okay um what else we got oh these are
29:05 some cool ones okay these next couple are filter filter Pro and actually there's actually one I skipped up here
29:12 called Instagram filters okay um and so where do we get these all of these are a
29:20 part of my um my filters stack
29:28 all right so filters allows us to create all kinds of cool stuff um such as this image where I have a gradient overlay it
29:36 blurred the background um here's an example of the Instagram filters okay so it took a uh pretty much I replicated
29:45 all of the most popular filters on Instagram at least the old school ones Instagram's kind of Chang things um but there's a lot of these filters um that
29:54 you can just apply with a class which is pretty cool okay um and here is an example of the backdrop
30:02 filter where if you see here I have um I have this container that's on top of a background image but we have this
30:10 frosted glass look wherever this is on top right so it's blurring that but it's only blurring it where they intersect
30:19 right super super cool okay um and there's a bunch of hover effects and whatnot so check out filter Pro um or I
30:28 think it's just filters filters okay and we have three swatches that we can use okay here let's let's play around with some of these let's go ahead and um
30:36 let's just Chuck in a picture so we can uh let's look at here let's do some VW buses here
30:45 right so um here I have a picture let's go ahead and let's look at some of these Instagram filters and so let's go ahead
30:52 and I'm just going to take this class I'm going to copy it so I've basically created just a cop copyable list of um filter names and uh you can just go
31:01 ahead in here and let's just apply that okay and actually you see it right there in edit mode pretty
31:08 cool um so yeah these are just reusable classes that you can use and they will apply that filter to whatever class you
31:15 add to it okay now let's look at another one let's look at uh Loi I'm just picking them at random
31:24 right so let's go ahead here boom so there's lowii right and we delete that there it goes kind of gets out of
31:32 the filter so pretty cool again just a bunch of reusable kind of utility classes basically um that you can uh
31:39 apply any filter um here to any image that you want it's pretty cool all right
31:46 uh let's go to filter Pro and uh let's go ahead and uh let's just call it my filter okay
31:54 I'm I'm not feeling let's just do that my my filter and let's add that class here right so this allows you to create your
32:02 own custom filter basically and here uh I think it should apply directly in edit mode so if I go ahead and add
32:10 cpia um looks like I'm uh I don't apply it in edit mode for kind of for performance reasons but you
32:18 can you can see you can see it right up here okay so let's go ahead and if I add cpia you can see it be applied there um
32:26 I can then I can add a blur hopefully you guys can see that I'm blurring it right um so you can do a bunch of a
32:33 bunch of really interesting stuff now another thing you can do is let's say I want to do this on Hover right so maybe I want to apply these Styles just on
32:40 Hover so let's say on Hover I want to make this sepia and uh let's put the brightness back at
32:51 100 right so now when I go ahead and preview this when I hover over it we get the filter now we can then apply a
32:58 transition Swatch okay which will then transition that here just for fun let's go ahead and do that so I'm going to go over in general I'm going to go to
33:08 transition and we're going to do my filter because we want to transition from one state to the other okay and uh
33:17 th is a little much let's do 300 preview there we go as you see that it
33:24 it gives us a much nicer kind of transition between the non-filter and the CPA filter right and we can also do
33:32 the opposite right so we could do here let's for fun actually let's do grayscale so let's do um I'm going to do
33:40 one is hover and the other one's going to be non-hover and when we I want when we
33:48 hover it's going to be gray scale zero when we don't hover I want gray scale 100 so non non- Graden scale when I
33:57 hover gray scale boom there we go all right oops whatever
34:07 um so yeah and filter there's a bunch of other stuff you can do there's back Blends there's invert I I have a whole video okay on that but uh let's go to
34:15 the next uh the next one here is filter backdrop okay so let's change things up this actually uses um so let's go ahead
34:24 and let me just set this up really quick okay we're going to go ahead and let's just create a
34:31 background um we'll call this uh backdrop oops if I can
34:39 spell and we're going to go a background image and uh let's keep that same one
34:46 why not let's go ahead and I'll use a different one how about this one okay we're going to do that one okay we're
34:54 going to cover yep and then we're going to go here
35:09 have remember that backdrop it has like this inner the inner container right so let's go ahead and uh let's
35:18 128 I'm going to go ahead and add another container in there
35:25 and let's do backrop Dash
35:35 inner okay and so in backdrop inner we're going to want to have uh
35:42 background color is going to be white and let's just do a
35:49 blur all right so you can kind of see the the effect we're going for here right so we have that background
36:07 Sonoma okay um shoot I and I fixed it there's a UI bug okay I I knew this
36:16 particular color had a had an opacity of 50% um but if you notice it it didn't show the preview of that here this is
36:25 only a UI bug okay um but essentially the way to get out of it is
36:32 to click on the Color Picker close you don't have to don't even need to change anything close a Color Picker click on any other stack and go back into it and
36:41 the preview of of the opacity this only applies to colors that have an opacity um and again it's only showing it here
36:50 and it's in syoma so um yeah I reported the bug but there we go all right so um
36:58 let's go ahead I have my container let's just add some text into it so we have some content and we should be
37:07 good oh interesting I would have thought that oh I didn't add backdrop inner
37:15 back drop Dash inner there we go so now I've backd dropped iner
37:22 preview and there we go okay as you see where it's in intersecting it's blurry right let's make a little bit of uh
37:30 let's do like uh p po 64 there we go as you see it's getting a
37:39 nice blur super elegant solution and it's all done with a Swatch pretty
37:46 cool and why would I use a Swatch over the actual Stacks it's just it gives us the flexibility we don't have we don't
37:53 need to have as many stacks on the page because we can apply the Fe features from those stacks on our existing containers so pretty
38:02 cool okay um next up let me see if there was any
38:13 uh oh so some other people were asking I guess there was some confusion yes so all of these filters that I'm showing
38:20 you now okay they require that you purchase let's say this filters one those swatches come inside my filter
38:28 stack that's why I've been showing you the product page okay so yeah they come with the filter stack So when you buy this stack not only do you get the
38:37 stacks that are inside the stacks library right which is all of these three but you also get the three
38:44 swatches right same thing if if you bought columnist um
38:52 colum all right you get the columnist stack but you also get the column Swatch right so um so again these are
39:09 Stacks um next up is fit text okay um fit text allows us to here let's just
39:17 quickly open up the fit text uh demo fit text open I didn't have to re build
39:27 it I just quickly open up a oh and of course I don't have a demo
39:37 file work oh boy okay so what fitex allows us to do and let's just go ahead and uh let's do it uh so I'm going to go ahead and add a
39:46 header let's say um on this little in this little layout here I have my header okay and I want to make that big right I
39:54 want to make it like fill the entire area okay so what this allows us to do is um you supply a minimum and maximum
40:02 value um for a header and let's just call this um fit
40:09 text I'm going to put that on my header preview
40:17 that uh oh what happened there fit text
40:24 minimum 100 oh what did I do there
40:32 text there it goes it was Cash damn Safari in their cash right but what fitex will allow you to do is it will
40:39 actually dynamically change here let's make it a little bit let me adjust my thing a little bit so it actually uh let's go down to 60
40:50 again hey so what fit text will do is it will dynamically change the size of the header text okay so that it fits inside the
41:07 what fit text will do okay again it's pretty much for large text uh you know headers probably in this case where you
41:15 know up at the top of your page you have this big huge header and you want to make sure that that text fits in that area that's what fit text does okay um
41:25 and again that's another stack on the site you just search for fit
41:32 text there it is all right um next up so now uh these
41:41 next two are actually quite intricate okay so here is a magnifico Swatch and um instead of trying to
41:49 reimplement this let's show an implementation of using the magnifico Swatch so if you're not familiar with what mag magnifico stack is it allows
41:58 you to create some really cool stuff like this okay now of course all of these images here are um the magnifico
42:07 stack on the page okay but let's say let's look further down on the page where I have this grid okay and if you
42:16 look I could build this grid with six different magnifico Stacks but then I have to make sure that all the stacks
42:22 have the same setting right but what if I just set the settings once right and
42:29 if we look at this implementation here okay um it actually uses the magnifico
42:36 Swatch so here I just have a block grid um of pictures of stamps okay they're just
42:44 pictures and what I've done is on these pictures uh oops on the pictures where's where's my let's look
42:53 at the swatch where did I put the Swatch probably up in sight
43:02 Styles oh here it is there it is all right so what I did is um inside here um in my swatch I just
43:10 targeted I have a apparent class of stacks demo and I apply it to all images I could have also just added a class to
43:17 every single image but um instead what I did is uh if we look down here I put a class on block grid or maybe it was it
43:27 was stack oh here Stacks demo here look I put classes inside the titles that's that's good um so here I I have a class
43:34 of stacks demo basically what that swatch says is okay find every single image inside of this container and apply
43:41 the Swatch to it right so what it did is it took all the settings
43:49 here and applied it to every single image in that grid now this hopefully this you see the
43:57 benefit here because in instead of a lot of work of me having one two three you know eight different images each one
44:05 having a different magnifico stack and me trying to adjust the values for every single one individually rather than me
44:12 just creating it once with a Swatch and applying it to all the images right um pretty cool right I think it's pretty
44:21 interesting and if I ever wanted to change any of the magnifico settings I need to change it once once inside the
44:27 Swatch and all of these will get changed okay let's do that really quick so I'm going to go ahead and um inside this
44:36 Swatch um let's
44:39 [Music]
44:45 change let's change the effect to follow so instead of by default it was this fill okay where it actually you know the
44:52 stamp actually moved and let's change it to follow right okay right let's change it to drag okay let's go ahead and see
45:02 there D caching and there we go so now I can drag I go over here I can drag over here
45:11 and I did that I changed all of them with one Swatch pretty cool right um so
45:18 that's magnifico again magnifo it is it is not does not come with Foundation it is a separate Stacks purchase
45:26 um but it's a really cool stack if you need that image Loop tool super cool okay um next one on the list is another
45:36 really I think underappreciated stack is quick flip four and um so I'm going to go ahead and let's show you another demo
45:44 of quick flip so I don't have to rebuild this one right let's just preview this page again this is a separate stack um and
45:53 just like before quick flip is a stack stack that comes on the page but when you purchase quick flip 4 you also get
46:07 a simple implementation where it just flips a card okay the card actually this card is two images it's a front and a
46:14 back okay but they look like one image right that's just rotating okay um but it is two images okay the front of a
46:23 card and the back of the card here's an example of flipping a card okay what's actually kind of cool this is a really
46:30 clever implementation here um I I still love this where I have a card and as I flip you'll notice that it actually
46:38 Cycles through four different possible cards right pretty cool so we have three
46:45 four one two as you flip the side just changes the content just changes it's really really
46:52 cool okay now here's an example okay here's a demo that I I could have
46:59 created with I don't know what 12 quick flip Stacks I could have created it with 12
47:06 foot quick flip Stacks but then we have the same issue where if I were to create this the other one with magnifico where
47:14 if I want to tweak or make any adjustments it's annoying because I have to do it on all 12 of them okay so this is where the Swatch comes in so let's
47:23 look at this implementation here oh look I have the swatches directly above it this time that was even better okay um
47:30 and so I have two quick flip uh Stacks uh apparently I've I have one for black background and another one for white
47:38 background I probably have different implemented here let's see oh the the ones that have the black
47:45 flip upside uh flip up and down and the light colored ones flip left and right okay so it kind of gives us a little bit
47:52 different implementation so so here I just have a block grid okay and the block grid cell
48:09 either qf white or qf block and basically here the quick flip
48:18 stack does the rest so we Define what class we want to flip and then we can Define all the the
48:27 various animation the timing the interactions do we want to flip on click do we want to flip on Hover all that stuff so I I'm not going
48:35 to go into all the specifics but as you see here it's really powerful because I can actually apply an animation to multiple things on
48:45 the page with just one stack pretty cool very
48:54 powerful right next up is wallpaper okay and uh
49:03 this is actually a really great one um I think another underutilized stack actually
49:12 um so what wallpaper does is it allows us to create um background gradients and background
49:21 tiles okay so one thing gradients are hard right creating a very beautiful
49:28 gradient now if you have the Swatch pack there is there is a gradient stack or a gradient Swatch that that allows you to
49:36 create your own customized gradients and we saw that earlier however pretty what wallpaper is
49:42 is just a pre-built Suite of gradients that you can leverage okay um there's
49:50 180 gradients that looked really nice like this strong Bliss you can just look through the gallery of
49:57 gradients that comes with it and be like I like that one I'm just going to use it right so it just makes creating gradients and using gradients easier
50:07 another thing it does it has a bunch of SVG based tiles okay so for example here we have this here we have just a bunch of little
50:16 dots here we have some interesting backgrounds right so there's a lot of really cool stuff actually I I don't think I have a demo of my favorite one
50:24 there's one that has like a computer circuitry uh it's one of my favorites so wallpaper is a really great example
50:32 let's go ahead and um let's just call this let's uh delete some of these so we
50:37 can simplify things here okay and boom okay and we'll remove that right so
50:45 let's just go here and call this wallpaper okay let's go to my container let's give it a class of
50:54 wallpaper all right so in here we're going to go into U I'm going to apply a pattern okay
51:02 and let's was it circuits circuit board there it is I love that one I just think it's really cool okay um so we have
51:11 circuit board uh we can we can make it you know kind of transparent so you know it's not quite as in our face we can
51:19 adjust the color of the pattern so let's say I wanted this to be like a blue okay um and and let's apply a
51:27 gradient there we go I mean there there's a there's a ton of gradients available okay um and wallpaper actually comes with like a little stack that lets
51:35 you peruse and browse all of them right so wall man I cannot type today so there
51:43 is a gallery of gradients and a gallery of patterns okay that you can look at and there is a wallpaper stack but
51:53 again the the beauty of using a Swatch versus the wallpaper stack um is that it
52:09 I decide that I like this particular style it's just a class that I can add whatever I want right so wallpaper is
52:16 another really really great one
52:26 all right let's I see a couple questions um let's see uh how is this different from columns Pro I'm not sure what I'm sorry I I
52:35 didn't catch that in time not column I don't think I showed anything that was relatively similar to what columns Pro
52:41 does um don't know uh okay maybe we're talking about block grid uh I was using
52:48 a block grid um they are different tools so um columns Pro is columns and block
52:57 grid is a a grid um they I mean there is some overlap in them but uh there's a you
53:04 know they're kind of different use cases on quick flip can you batch select to apply the class yes so um you can
53:12 batch select anything right um let's go to uh here let's open up that uh
53:22 RW uh what was that quick flip right so yeah let's say I you know I'm
53:29 I'm in this grid here and I want to go this one this one this one this one right you can select all these and as
53:37 long as they're the as long as you're selecting the same type of Stack so I'm selecting a block grid cell multiple
53:44 times I can edit the class on all of them right so if I wanted to change all
53:52 of these to be qf um Joy okay there I go so now this one is now
53:59 qf Joy this one is now qf Joy this one is now oh that I didn't do that one I did this one this one is now qf joy and
54:06 this one was now oh I did this one right so as you see you can batch select
54:14 multiple things and add a class to them okay they they do I can't select a picture and a block grid cell um and
54:23 modify the class on both because they're two different Stacks but I can select multiple of the same type of Stack such as this block Rd cell and then I can
54:32 modify the settings so that they're all the same across all three of those Stacks or m whatever how however many you select hopefully that
54:45 helps columnist and columns Pro are very different um as I said earlier columnist is all about creating Columns of text
54:54 that flow across The Columns you cannot do that using columns
55:04 Pro okay don't want to save that okay I have one more one more Swatch we have five minutes left I have one more Swatch
55:12 to show you guys um and it's coming with my with my release this week okay you kind of saw
55:20 it earlier okay let's just go ahead and um let's show it off a little bit why not a little bit of Show and Tell okay
55:29 uh is it here so I am re-releasing a an updated version of share it okay um and it's
55:39 completely redone I won't do a full demo here um but let's just quickly show you how we can um here I have a share it
55:48 launch stack okay and uh let's just uh we'll keep with three why not
55:56 all right so here unshare it launch um let's go ahead and uh we'll make the background color a little bit different color um and what this allows us to do
56:04 is when you hover oops I need overflow hidden overflow visible thank you very
56:14 much there we go right now I could probably choose better colors here okay but what this allows us to do it allows
56:22 us to have um share our web page to various services and whatnot so by default it adds three and they're all set to Facebook but we could probably do
56:30 uh you know Facebook U we could do LinkedIn and we could do mastedon okay and here let's actually um use the
56:39 default colors for all of those right and we can add in another one and uh we can make this one go to
56:47 Twitter T formerly known as Twitter okay and um what you can do is you can say whenever I click on on this it's going
56:55 to share to what service so this one's going to share to X this one would share to Mastadon this one would share to LinkedIn and this one will share to
57:04 Facebook okay and so let's go ahead and preview that and we have this really cool animation here and when I go ahead
57:12 and click on any of these let's click on that to Mastadon it will open up a a pop-up window and it allows us to share um this
57:22 website whatever obviously you don't want to share it preview right but we can share this website on Mastadon or Twitter or LinkedIn or Facebook or any
57:31 of the other services that are available um here okay so there's a bunch of services you can also do things like email you can copy the link you can copy
57:39 the text you can also do a share sheet right so um let's go ahead and let's do that let's do a share sheet one so I'll
57:46 do the icon is share and the service is going to be share sheet okay and if I preview
57:53 that we can click on that we can get the actual share sheet which is pretty cool okay and then on mobile you get the
58:01 mobile version of the share sheet and all that jazz right um pretty cool I also added this morning actually I should print as well as well as copy
58:09 text and copy link um pretty cool um now this particular animation isn't
58:17 for everybody right not everyone now you can also make it let's do like 360 okay I'm not going to do a full demo
58:23 of everything here oops darn cash okay um so the animation here is really cool
58:32 you obviously you can customize the size and do all kinds of stuff there but there's more there's more Stacks so let's say you don't want to
58:40 use this you know little launcher you just want to have just a row of icons right we can easily just click on let's
58:47 say I want to have um I want to have Facebook and I want to have Mastadon and I want to have Twitter okay
58:56 we'll use the Twitter bird how about that okay and then you can you can configure each of those to be the services okay I won't won't bother with that right now and at that point it's
59:05 just icons and you can obviously customize the size you can customize the colors you can do all kinds of stuff you new custom s 3GS as well okay um so
59:14 there we go and if you click on this it would share it to Facebook click on that would share and M it on so on and so forth so it's just a really easy way to
59:23 um create share um things now you can also link right so let's say I wanted to create a list of links to my various profiles you can do
59:32 share link and then you could do um you know this one could then link to your Facebook this one would then link to
59:39 let's say your Mastadon and this one would link to LinkedIn okay so on and so forth so these are you know if you're
59:46 going to use this to create links to your various social media networks this is a great easy way to do
59:53 that all right so why am I talking about this in swatches today well what if what
01:00:08 icons but what if you want to create your own thing but you want to have that cool like little share um integration like when I click on it it goes to
01:00:16 Mastadon how can I how can I do that what if I want to use my own thing so that's where swatches come in so I'm just going to go ahead and
01:00:25 we're just going to add a button just to keep things simple okay uh we're going to add a button here and uh let's just
01:00:32 go share to Mastodon okay and uh let's make it look a little nicer at
01:00:40 least okay so now I have a button called share to Mast iton and let's say I want to click it and I want it to take me to
01:00:47 the share thing right and again this I'm using the button here it could be whatever it could be an image it could be whatever because all we need to do is
01:00:55 add a class so under components I'm going to Click Share Swatch okay and um
01:01:02 let's go ahead and say uh masto okay I'm going to create a masto
01:01:09 class and we want to share that to Mastadon so I'm going over here I'm going to create I'm going to add the
01:01:17 masto class preview and when I click on share to masteron guess what so now I've added my
01:01:27 custom integration with my share Swatch and you can click on whatever you want again I used a button here just to keep
01:01:34 things simple um but allows us to easily create reusable share widgets with whatever we want either if you like uh
01:01:43 the share it Stacks with its launcher or its icons or its Styles sweet but if you want to use your own custom thing we've
01:01:51 made it super easy to do that too now one caveat okay um let's say I want
01:01:59 to I want to make this called share masto okay let's say I want my class to be share masto and I'm going to go over here and
01:02:07 say share masto and let's preview let
01:02:14 refresh oh interesting share masto actually works dang I was trying to create something that broke
01:02:23 um what I did I did f i I did one for I was testing yesterday I I did one called FB share okay and um because it's it's
01:02:31 common right you want to create something to share to Facebook you call it FB share and I'm going to go ahead and preview this and if you look it's gone and I'm like what the heck is going
01:02:40 on here okay and um if you're curious what that is it's actually my content
01:02:47 blocker um because it's blocking anything that has for some reason it's capturing FB Shar somehow okay and it's
01:02:55 hiding that button it's there but my content blocker let's go ahead and pause content blocking and it shows up right so um
01:03:04 yeah if anyone is g to buy this I I'll make sure I have great tutorials on this when I do the videos for this but um be
01:03:12 careful if you're using the Swatch um and creating your own classes because yeah content blockers tend to um
01:03:20 especially something oblivious or or you know obvious like FB share right um so like you can do FB let's say right and
01:03:30 uh that class should work just fine right so um yeah while you're testing it it's kind
01:03:38 of become important to I think have a Content blocker just so you can test how your website behaves with content
01:03:45 blockers um because I I actually spent a lot of work on share it stack getting it
01:03:53 to work even if you have a Content blocker enabled um so yeah it's very interesting um that you know a lot of sharing and
01:04:02 things are actually blocked now um because of content blockers and that was a a huge problem with the existing
01:04:09 version of Sher it um content blockers would block almost the entire thing they'd block all the icons they'd block
01:04:16 um the sharing URLs they'd block they'd block everything and so I I thought this Sher it imple this new Sher it ref fresh
01:04:24 that I was working on was going to take me like 2 days and like 3 weeks later it's finally ready right and a lot of that had to do with getting around and
01:04:32 learning how content blockers worked so that your share buttons that you create
01:04:39 share it don't get blocked so anyway that was kind of a little side rant about sharing and content blockers um
01:04:46 and more to come about that in the videos but um anyway let's see if there's any more questions before we um you know get out of here uh let's see
01:04:54 well the bowler hat I nice the Peter Paul and Mary beard
01:05:03 yeah that would be that would have been nice one I don't think I can have that that huge cool beard though I don't know about
01:05:10 that okay sweet I think I've answered all the questions so I hope you guys enjoyed this today we reviewed a lot of really
01:05:20 cool swatches and I thought it was also I opening to kind of show
01:05:26 you and reinforce why swatches are so cool right why it's important to create
01:05:33 something as a Swatch versus having a stack to do that thing while having a stack is nice hopefully you see the benefit of using a Swatch especially
01:05:42 things for like wallpaper or I think it was really apparent for you know wallpaper um quick flip and magnifico because you know having all those
01:05:51 separate while possible like makes it so much nicer to do that with a Swatch so
01:05:58 cool guys thank you very much um sorry if I fil up your brains too much um but
01:06:06 yeah hopefully we'll see you guys on the Hangouts on Friday go forth and make your websites great we'll see you on the community go ahead and ask if there's
01:06:13 any questions that I wasn't able to get to today um I saw a couple font Pro questions go ahead and post those on the community and we'll help you out take
01:06:21 care everyone have a great rest of your week go out and subscribe down below if you aren't already and we'll see you with the Hangouts on Friday bye