excellent let's see in the chat excellent Martin thanks for popping in Crooklyn Beach design in the house
nice how's it going Scott Scott Pam the other Scott Scott
number two what's Su
Dave super secret double probation swatches nice Chris thanks for coming on
today sweet 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
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 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 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 Charles Dickens Festival that happens
every year here in San Francisco um super cool Festival um but anyway
um the bowler isn't working a come on Jody
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
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 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
um hopefully all you already know what swatches are right they're in
foundation and swatches allow us to do all kinds of cool and amazing
things um let me go ahead and uh let's just jump in and start sharing a little bit
okay um actually before we get started something if if you are watching us on
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 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 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
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 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
um there are a lot to talk about in terms of swatches
I'm not going to going to even try to 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 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 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
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 site cursor um there's a custom display
Swatch with some people love because you can actually Define a you know a custom visibility Swatch here um so you can say
you know hide this at this particular breakpoint right so that's a big thing for some people The Equalizer Swatch
super cool um gradients there's actually this layered gradient like this one
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 overlaying them and then getting this really cool effect um but yeah it's
pretty cool um actually I love this Canon this conical not canonical conical
gradient um so yeah that's really cool where it gives a very interesting effect
so check check out that one and we can hover that stuff protect and um scroll
bar Styles those are new ones I just 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 actually did a video on those um so normally you know content on
the web is super easily accessible right 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 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
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 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 so that you can turn on and off various
protection features okay and uh pretty cool so like in this demo here I just 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
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 wanted okay next is scroll bar Styles
you'll notice that um here actually in also the scroll bar of this entire web page is styled okay so it's not using
the default browser scroll bar we actually can style it we can provide it 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
the thumb right which is pretty cool and as you see we can affect the browser or the scroll bar in a
particular window on the page right or a container so this container has content that Scrolls and uh as you see here the
scroll bar is orange you're welcome Chris right um we have SVG swatches here
table swatches Toggler oh Toggler is 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
scroll so that you know things toggle on scroll super cool
transform um this Swatch pack again if 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
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 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 owner and you already have the Swatch
pack and you're like I got all the swatches but do you right there's some
secret swatches and um the reason there are
secret swatches are because I try to
integrate um you know or I try to reward customers that have foundation and other
products right um so there are a lot of like there are a lot of Integrations
between my products so all my products are Standalone um but if you have let's say
total CMS or you have feeds or you have Foundation depending on the mixture of things they will integrate and play very
nicely with each other okay and a lot of times what I will do is if I have a a
cool stack I'll create a Swatch for that stack so um I thought it would be fun
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 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
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 own multiple things um you'll start
having and showing things that kind of magically show up in sight sight Styles 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
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 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 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
having it there in site Styles same similar thing for like page safe right page safe this isn't necessarily A a
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 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
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 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 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
right so these are going to be features that you're going to want to have on every single
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 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 it's just convenient and everything's
kind of there in a nice tight package something that's pretty cool um is print
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 just kind of peruse okay so if you own my printer
stack um it comes with a print Styles and what this allows you to do is to
create some special Styles okay purely for print for example let's say you have
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 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 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
being linked to to the actual link so when someone prints out and is looking at a physical printed page they can
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 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 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
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 sure it's on every page so some really nice stuff
there and did I oh one okay the last one 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
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 and I I won't do a full demo on pen
right now but um it's a no-brainer go 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 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
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
organize you know your swatches around a lot of project file developers use pen
to organize their projects so it's become a very popular stack check it out um it's very convenient to
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 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
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 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 to do is instead of having one giant
menu like this inside site Styles um what I wanted to do was kind of break things up for you just uh give
us a little bit of organization okay so really is think of features these are
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 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 support which we've talked about before
um or any of those other ones I just found the features just adding kind of features to your page or
to your site right so these are just kind of things that aren't 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
integrated into foundation so like the font awesome one if you want to load font awesome fonts there it goes it's a
feature okay um now font and text these are
going to going to be all swatches that pertain to font and
text General these are uh Styles or swatches that can be they're very
general they're they're things that can be added to practically anything they're sty mostly Styles or animations and the
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 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
okay now components these are swatches that are specific that have very
specific purposes to them okay for 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 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
anything else it's only going to be for menus right um equalizer that's a very
specific Swatch to enable a feature um that allows you to equalize columns or equalize the height of content right um
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 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
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 clarifies that for you jod so again
features are just features to add to your page or you know components that maybe you want to have partialed across
all your pages okay um font and text are font and text stuff General is general
and components are specific swatches for very specific situations
okay okay so um we've already looked at features let's look at font and Text Now
by default there's only one two three four five swatches here okay um with
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
product called font Pro okay let's go into font Pro just so you guys can see
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 different ways of integrating fonts custom fonts thirdparty fonts into our
web pages so um if you're using like for 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
called a type Foundry called Hoffler okay typography.com is actually their
website now um and so I've purchased this font and basically I load it from
their server okay um it's actually really if you want some really beautiful
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 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 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 some really elegant fonts um so check
out Hoffler um it's anyway but this stack allows you to load um those sites
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 fonts from Adobe um as well we can if
you have your own font file you can actually load uh the web font this allows you to load files that you've
uploaded to your server okay so this allows you to load your own actually a lot of times what I'd recommend is like
let's say Google fonts Google fonts are all open source so if you were to download the actual Google font files um
actually Brett caral has it posted a great post on the community um I think I
added it into the common questions area 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 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
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 loading resources from Google um that
fixes that for us okay so font Pro allows us to do do a lot of font loading
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 foundation ones don't such as you know character spacing line height word
spacing so depending if you want really fine grain control over your font and how it looks um the font Pro style
Swatch is kind of a must because it allows you again you can do sizing um
line Heights you can have really fine grain control over your typography okay so there we
go in general um there there are no
um custom things in general okay if you have the foundation swatches and the
foundation Swatch pack um you'll have everything in here okay so there we go
that was quick okay so let's start looking at some of these
other ones here so it's basically all of these that are
down here some really cool ones so let's look at columnist okay so
um this Swatch allows us to quickly well let's let's look at and
this comes with my columnist um
product so columnist columnist allows us to basically do kind of a newspaper style
layout where um our text Will flow between colums it's not like this isn't
a I'm not creating a four column layout and then you know diving my text up
across those the the text actually flows between them okay and and it is responsive so as as it gets lower you'll
see that the number of columns goes down okay so really cool it it handles
lists very nicely it does all kinds of really really cool stuff okay
now you could just use the columnist stack right so you could do you know
there is a columnist 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 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
here and columnist will do its job right um but why why would I use a use a
Swatch over the columnist stack like what what benefit does that give
me okay because as you see a lot the 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 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
very similar settings there are some settings that actually aren't are not available in the Swatch okay um that's
just because that it's just the way things have to be okay um but why would
I use columnist Swatch over columnist let's say I have multiple um you know
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
um or I have them across multiple pages and let's say I wanted I wanted to
adjust that layout you know either the the adjust the column Whip or the gap or change the
the divider colors or anything like that 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
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 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
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 give us benefit okay so let's implement
this swatch let's just go ahead and let me get a get a text stack
here right uh let's just go ahead and do like
uh I'm just going to add in a bunch of text in here just so we can
see right there's a bunch of text okay and so here's my columnist setup and uh
let's just do um live-
columns and we'll do text columns how about that actually here
newspaper so here's my newspaper class 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
I'm going to go over here and pop in my newspaper class now
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 ahead and preview this really quick you'll notice there now I have four
Columns of my text okay now why is this 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
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 is going to be on every single page I update my one Swatch and then anywhere
that I use this newspaper layout is it going to be automatically updated that's
really powerful okay it also allows us to um 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
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 stacks on the page than we had before
okay because um yeah because I'm just adding a class to an existing stack so
super powerful
there I see a lot of support kind of 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
You' having with font Pro or whatever else in the community and we'll help you out okay or join us on our Friday
Hangouts and we can help you out there too okay um so there's columnist okay
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 live stream to go through this okay um this gives us the ability to um the
entire drift Pro stack um allows us to create a reusable animation okay uh
drift Pro if you haven't checked out drift um basically what the drift
timeline Swatch allows us to do is it allows us to create reusable 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
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 believe believe this demo here was
actually done with swatches okay uh with the drift timeline
Swatch um so yeah drift Pro is very powerful um it allows you to create your
own whatever animations you want like it really is um create your own animation
okay it's basically foundation swatches for animations sky the limit okay um yeah
you could do Mor you can do some really amazing stuff um with uh with that
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 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 anything with with just a class pretty
cool okay um what else we got oh these are
some cool ones okay these next couple are filter filter Pro and actually
there's actually one I skipped up here called Instagram filters okay um and so
where do we get these all of these are a part of my
um my filters stack 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
blurred the background um here's an example of the Instagram filters okay so
it took a uh pretty much I replicated 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 you can just apply with a class which is
pretty cool okay um and here is an example of the backdrop
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 frosted glass look wherever this is on
top right so it's blurring that but it's only blurring it where they intersect
right super super cool okay um and there's a bunch of hover effects and
whatnot so check out filter Pro um or I 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
let's just Chuck in a picture so we can uh let's look at here let's do some VW buses here
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
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 ahead in here and let's just apply that
okay and actually you see it right there in edit mode pretty cool um so yeah these are just reusable
classes that you can use and they will apply that filter to whatever class you add to it okay now let's look at another
one let's look at uh Loi I'm just picking them at random
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 the filter so pretty cool again just a bunch of reusable kind of utility
classes basically um that you can uh apply any filter um here to any image
that you want it's pretty cool all right uh let's go to filter Pro and uh let's
go ahead and uh let's just call it my filter okay
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 own custom filter basically and here uh I think it should apply directly in edit
mode so if I go ahead and add cpia um looks like
I'm uh I don't apply it in edit mode for kind of for performance reasons but you
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
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 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 Hover so let's say on Hover I want to make this
sepia and uh let's put the brightness back at
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 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 transition and we're going to do my
filter because we want to transition from one state to the other okay and uh
th is a little much let's do 300 preview there we go as you see that it
it gives us a much nicer kind of transition between the non-filter and
the CPA filter right and we can also do 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
one is hover and the other one's going to be non-hover and when we I want when we
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 hover gray scale
boom there we go all right oops whatever
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
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 and let me just set this up really quick
okay we're going to go ahead and let's just create a background um we'll call this uh
backdrop oops if I can spell and we're going to go a background
image and uh let's keep that same one 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 going to cover yep and then we're going
to go here um and we're going to put backdrop here
back drop there we go and when I I I want to have remember that backdrop it has like
this inner the inner container right so let's go ahead and uh let's
128 I'm going to go ahead and add another container in there
and let's do backrop Dash
inner okay and so in backdrop inner we're going to want to have uh
background color is going to be white and let's just do a
blur all right so you can kind of see the the effect we're going for here right so we have that background
okay um let me tell you I I noticed that there is a a bug with color Pickers in
Sonoma okay um shoot I and I fixed it
there's a UI bug okay I I knew this 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
only a UI bug okay um but essentially the way to get out of it is
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 the preview of of the opacity this only
applies to colors that have an opacity um and again it's only showing it here
and it's in syoma so um yeah I reported the bug but there we go all right so um
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
good oh interesting I would have thought that oh I didn't add backdrop
inner back drop Dash inner there we
go so now I've backd dropped iner 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 let's do like uh
p po 64 there we go as you see it's getting a
nice blur super elegant solution and it's all done with a
Swatch pretty 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 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
cool okay um next up let me see if there was any
uh oh so some other people were asking I guess there was some confusion yes so
all of these filters that I'm showing you now okay they require that you
purchase let's say this filters one those swatches come inside my filter 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 stacks that are inside the stacks library right which is all of these
three but you also get the three swatches right same thing if if you
bought columnist um colum all right you get the columnist
stack but you also get the column Swatch right so um so again these are
just kind of extra features that you get um if you happen to have Foundation as
well as those other Stacks um next up is fit text okay um
fit text allows us to here let's just quickly open up the fit text uh demo fit
text open I didn't have to re build it I just quickly open up
a oh and of course I don't have a demo 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
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 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
value um for a header and let's just call this um fit
text I'm going to put that on my header preview
that uh oh what happened there fit text
minimum 100 oh what did I do there
text there it goes it was Cash damn Safari in their cash right but what
fitex will allow you to do is it will 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
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 area okay and you basically you can
provide and it will have it'll obey the minimum and maximum values so um that is
what fit text will do okay again it's pretty much for large text uh you know
headers probably in this case where you 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
and again that's another stack on the site you just search for fit
text there it is all right um next up so now uh these
next two are actually quite intricate okay so here is a magnifico
Swatch and um instead of trying to 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 you to create some really cool stuff
like this okay now of course all of these images here are um the magnifico
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 look I could build this grid with six
different magnifico Stacks but then I have to make sure that all the stacks have the same setting right but what if
I just set the settings once right and if we look at this implementation here
okay um it actually uses the magnifico Swatch so here I just have a block grid
um of pictures of stamps okay they're just pictures and what I've done is on these
pictures uh oops on the pictures where's where's my let's look
at the swatch where did I put the Swatch probably up in sight
Styles oh here it is there it is all right so what I did
is um inside here um in my swatch I just 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 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
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
of stacks demo basically what that swatch says is okay find every single image inside of this container and apply
the Swatch to it right so what it did is it took all the settings
here and applied it to every single image in that grid now this hopefully this you see the
benefit here because in instead of a lot of work of me having one two three you know eight different images each one
having a different magnifico stack and me trying to adjust the values for every single one individually rather than me
just creating it once with a Swatch and applying it to all the images right um
pretty cool right I think it's pretty interesting and if I ever wanted to change any of the magnifico settings I
need to change it once once inside the 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 Swatch um let's
[Music]
change let's change the effect to follow so instead of by default it was this fill okay where it actually you know the
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
there D caching and there we go so now I can
drag I go over here I can drag over here and I did that I changed all of them
with one Swatch pretty cool right um so that's magnifico again magnifo it is it
is not does not come with Foundation it is a separate Stacks purchase 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
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
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 just like before quick flip is a stack
stack that comes on the page but when you purchase quick flip 4 you also get the Swatch okay
so um here we have quick flip so here's a simple implementation where it just
flips a card okay the card actually this card is two images it's a front and a 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 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
clever implementation here um I I still love this where I have a card and as I
flip you'll notice that it actually Cycles through four different possible
cards right pretty cool so we have three four one two as you flip the side just
changes the content just changes it's really really cool okay now here's an example okay
here's a demo that I I could have created with I don't know what 12 quick
flip Stacks I could have created it with 12 foot quick flip Stacks but then we have
the same issue where if I were to create this the other one with magnifico where
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 look at this implementation here oh look I have the swatches directly above it
this time that was even better okay um and so I have two quick flip uh Stacks
uh apparently I've I have one for black background and another one for white background I probably have different
implemented here let's see oh the the ones that have the black
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 different implementation so so here I just have a
block grid okay and the block grid cell has a container with uh a colored
background and some headers and an image okay and each block grid cell has
either qf white or qf
block and basically here the quick flip stack does the rest so we Define what class we want to
flip and then we can Define all the the 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
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 the page with just one
stack pretty cool very
powerful right next up is wallpaper okay and uh
this is actually a really great one um I think another underutilized stack
actually um so what wallpaper does is it allows
us to create um background gradients and background
tiles okay so one thing gradients are hard right creating a very beautiful
gradient now if you have the Swatch pack there is there is a gradient stack or a gradient Swatch that that allows you to
create your own customized gradients and we saw that earlier however pretty what wallpaper is
is just a pre-built Suite of gradients that you can leverage okay um there's
180 gradients that looked really nice like this strong Bliss
you can just look through the gallery of 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
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 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 there's one that has like a computer
circuitry uh it's one of my favorites so wallpaper is a really great example
let's go ahead and um let's just call this let's uh delete some of these so we
can simplify things here okay and boom
okay and we'll remove that right so let's just go here and call this
wallpaper okay let's go to my container let's give it a class of
wallpaper all right so in here we're going to go into U I'm going to apply a pattern okay
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 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 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 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 you peruse and browse all of them right
so wall man I cannot type today so there is a gallery of gradients and a gallery
of patterns okay that you can look at and there is a wallpaper stack but
again the the beauty of using a Swatch versus the wallpaper stack um is that it
allows you to you know apply that same exact style to as many things as you want right so you know if if I Define if
I decide that I like this particular style it's just a class that I can add whatever I want right so wallpaper is
another really really great
one 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 didn't catch that in time not column I
don't think I showed anything that was relatively similar to what columns Pro does um don't know uh okay maybe we're
talking about block grid uh I was using a block grid um they are different tools
so um columns Pro is columns and block grid is a a
grid um they I mean there is some overlap in them but uh there's a you
know they're kind of different use cases on quick flip can you batch select to apply the class yes so um you can
batch select anything right um let's go to uh here let's open up that uh
RW uh what was that quick flip right so yeah let's say I you know I'm
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 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 times I can edit the class on all of
them right so if I wanted to change all of these to be qf um Joy
okay there I go so now this one is now 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 this one was now oh I did this one right
so as you see you can batch select 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
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 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
helps columnist and columns Pro are very different um as I said earlier columnist
is all about creating Columns of text that flow across The Columns you cannot
do that using columns
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 to show you guys um and it's coming with my with my
release this week okay you kind of saw 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
uh is it here so I am re-releasing a an updated
version of share it okay um and it's 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
launch stack okay and uh let's just uh we'll keep with three why not
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 is when you hover oops I need overflow
hidden overflow visible thank you very
much there we go right now I could probably choose better colors here okay
but what this allows us to do it allows 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 uh you know Facebook U we could do
LinkedIn and we could do mastedon okay and here let's actually um use the
default colors for all of those right and we can add in another one and uh we can make this one go to
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 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 Facebook okay and so let's go ahead and
preview that and we have this really cool animation here and when I go ahead 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
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 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
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
do the icon is share and the service is going to be share sheet okay and if I
preview 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 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 text and copy link um pretty cool
um now this particular animation isn't 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 of everything here oops darn cash okay
um so the animation here is really cool 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 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 say I want to have um I want to have
Facebook and I want to have Mastadon and I want to have Twitter okay
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 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
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 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
share link and then you could do um you know this one could then link to your Facebook this one would then link to
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 going to use this to create links to your various social media networks this
is a great easy way to do that all right so why am I talking about
this in swatches today well what if what if you didn't care for my layout now you
can you can't stylize these so you know you can't have a circle with the icon in it or you can have just the
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 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 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
go share to Mastodon okay and uh let's make it look
a little nicer at 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 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
add a class so under components I'm going to Click Share Swatch okay and um
let's go ahead and say uh masto okay I'm going to create a masto
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 masto class preview and when I click on share to
masteron guess what so now I've added my custom integration with my share Swatch
and you can click on whatever you want again I used a button here just to keep things simple um but allows us to easily
create reusable share widgets with whatever we want either if you like uh
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 made it super easy to do that too
now one caveat okay um let's say I want 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
say share masto and let's preview let
refresh oh interesting share masto actually works
dang I was trying to create something that broke 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
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 on here okay and um if you're curious
what that is it's actually my content blocker um because it's blocking
anything that has for some reason it's capturing FB Shar somehow okay and it's
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 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 careful if you're using the Swatch um
and creating your own classes because yeah content blockers tend to um
especially something oblivious or or you know obvious like FB share right um so
like you can do FB let's say right and uh that class should work just fine
right so um yeah while you're testing it it's kind of become important to I think have a
Content blocker just so you can test how your website behaves with content blockers um because I I actually spent a
lot of work on share it stack getting it 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
things are actually blocked now um because of content blockers and that was a a huge problem with the existing
version of Sher it um content blockers would block almost the entire thing they'd block all the icons they'd block
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 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 learning how content blockers worked so
that your share buttons that you create share it don't get blocked so anyway
that was kind of a little side rant about sharing and content blockers um 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
well the bowler hat I nice the Peter Paul and Mary beard
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
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 cool swatches and I thought it was also I opening to
kind of show you and reinforce why swatches are so
cool right why it's important to create 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
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 separate while possible like makes it so
much nicer to do that with a Swatch so cool guys thank you very much um sorry
if I fil up your brains too much um but 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
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 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