Transcript

00:01 okay boom how's everyone doing today hopefully everyone is doing well
00:08 um i'm figuring i'm actually starting one minute early today
00:13 right crazy crazy crazy stuff getting early today um so yeah cool
00:21 hopefully everyone's doing well excellent mr cole is in the house as always thank you for coming again
00:31 excellent carl how's it going bud
00:36 are you the carl cool new total cms stack if you guys um i believe it's the same carl probably
00:42 um check out weaver space um carl posted a pretty slick little stack that works with total cms and easy
00:48 cms um it uh it's like an email off obfuscator
00:54 man that that is a weird word right obfuscator excellent well thank you car for making
00:59 that looks really really slick haven't had time to uh really dive in and look at it um but uh look nice so cool if you guys
01:07 want to like hide your emails from bots and stuff like that on your website and manage that with total cms um carl's
01:13 got you hooked up so that's really cool thanks carl um sweet so today
01:21 we are going to um go over something that i i kind of reviewed on uh or we kind of came up
01:29 with the idea on the hangout on friday so plug for the hangouts if you're not joining the hangouts on fridays you are
01:35 missing out because we go over so much cool stacks uh so much cool stuff um thanks for the
01:42 love fernando on the email stacks i appreciate that as usual we got dr bob here oliver
01:48 thanks for coming from germany wolf um jeff thanks for coming on bill francis
01:53 from the uk excellent um so anyway today we're going to be
01:59 reviewing something we did on the hangout last friday and um i'll show you the inspiration
02:05 behind it it was actually davide is working on a new site davide is behind foundation
02:10 box check that out if you're not on foundation box go to foundation box dot studio
02:15 um and davide has got some amazing project files um that are pre-built with foundation
62:21 and he also has versions that are available total cms as well super cool super stylistic um get your
02:28 design game up leveled right so cool okay um okay
02:34 and it looked like my my screen is working now okay cool there we go oh we lose my
02:41 little preview of of me but uh oh i know why see that
02:48 boom there we go look at that okay
02:57 so this is what we're going to be working on um on friday at the hangout um davide was talking
03:04 about he wanted to create this cool um interact kind of interactive svg map of italy
03:09 right and um so he had found this uh map of italy and uh he actually created these
03:16 kind of these a lot of these hover effects but he wanted to link to them anyway you know what you'll notice if you click on one of these
03:23 it um it links over and i believe this is a limelight i could be wrong but it launches the limelight whenever
03:30 you click on the state and it kind of gives information about that state right um pretty cool and um so this
03:37 looks like something that's like crazy complicated right but really really it's not all that
03:42 complicated and um so i thought it would be fun today to kind of go over and um show how we can do this and
03:49 i'll show you some new goodies um that are coming up in the future that are going to make this a little bit
03:54 easier um so anyway um this is what what we're going to be working on today
04:00 okay uh mine's not going to look quite as fancy that we're going to be doing today i'll probably just link out to something and
04:06 maybe we'll add a drop down he also has these little tool tips right so if you um if you notice when you hover over any
04:13 of these it actually shows a tooltip with the uh with the name of the state okay cool so let's go ahead and
04:21 um actually to start off where do we find these cool maps
04:27 so there is a very slick website called simplemaps.com
04:34 and um for some reason they they have all these amazing um things for free um actually well they
04:41 do have a lot of free ones world map
04:48 they do have free ones interesting these ones are licensed
04:54 that's looks like that's if you want to buy their interactive one but they'd have one let's see in my
05:00 history
05:06 there we go okay so i guess you have to search them on their site i think i found this just via some google searches um
05:13 but yes they have oh all free svg maps here i'll plot this in the um plop this in the
05:22 in the stream for everybody in the chat so you guys have this these are all free svg maps which is cool right apparently
05:30 i didn't even realize this until right now you can actually buy um bi-maps and then they kind of do those little tool taps for tooltips for
05:36 you as well probably have some cool javascript features oh look like zooms in and everything that's pretty interesting
05:41 okay um but um we're going to do something simple um
05:47 which is basically what davide did okay and we're going to use this um i'm gonna use the us map for right now
05:53 okay and i think i already have one downloaded
05:59 maybe not okay let's download the uh this us map download svg yep okay boom
06:05 so we're going to be playing around with the u.s map um what what i'm going to be showing you today it doesn't matter it could be u.s
06:12 italy it's all the same okay it's just a map um but we're going to learn a little bit about svgs
06:17 um right now okay so let's go ahead and open up a little
06:23 code editor and um so if you didn't know svgs are just code okay and um
06:34 shrink this down a little bit okay um now we're going to be copying
06:42 and pasting this inside rapidweaver um well we don't need this xml and probably for licensing purposes you know
06:48 they want you to keep this comment in there so we'll be nice and we'll keep that okay but you definitely want to remove
06:55 that xml tag okay um and so i'm going to delete that xml tag
07:02 you do want that if you're going to be referencing this svg as like a um as an image so like if you're
07:08 warehousing this and you're going to use it inside the picture stack or something like that you definitely want to have that xml tag
07:13 but we're going to be pasting this directly into an svg stack and we do not want that xml tag okay
07:28 cool so um let's go ahead and start uh by
07:34 here let's open up rapidweaver
07:44 i think i actually already started a little page here i'm actually just gonna i'm gonna delete it
07:54 we will start from scratch all right this is just an svg map um this is svg stack and you'll notice
08:00 all i did is i'm just going to go and control a i'm going to copy that and i'm going to
08:06 delete all that i'm going to paste it okay so it's tons of crazy xml svg code you don't need to really
08:14 understand it you just need to know how to copy and paste it okay cool boom let's preview that in a browser
08:23 so there we go there is an svg map oops hold on one second let me uh i forgot i need to delete some of these
08:29 things um
08:38 okay i'm just going to delete all these things we don't need any of those
08:47 okay um okay cool let's preview that now we just have a blank svg on the page
08:53 that's it right can't do any cool effects with it um so let's analyze
09:00 um this svg map okay so i'm going to expect inspect the element on the page and
09:06 because svgs are uh pretty much just like html um you can inspect them
09:12 right and if you notice here each individual there's something called a path right so
09:18 if you look here um oh let me get my little screen uh my screen brush tool going here
09:28 okay so if you look here this is a path okay this is a path tag and um
09:36 when i highlight that this path input this particular path is the state of minnesota okay
09:42 and actually it's cool this they actually you know put in little little ids for mn which is the
09:48 the abbreviation um for this state right they have data name equals minnesota
09:53 they have some ids right and then this all these numbers are basically how to draw uh mint the
09:59 state of minnesota right so each of these paths here is a different state
10:04 okay and that's all it is and the path itself is all these crazy numbers we don't need to understand any of that
10:10 okay this particular one is hawaii which is way down here which is kind of crazy it's all these islands okay um here's another path this one's
10:18 idaho right so there's idaho here's washington okay so on and so forth so each of these
10:24 states is a path
10:30 and uh actually here's california okay what what i'm gonna do since i'm in california we're gonna we're gonna play
10:35 around with california right now okay and um so first thing i wanna do
10:41 is i want to um when i hover over a state i want to change the color how can we do
10:49 that so um let's go ahead and close this off
10:54 there so let me back up a little bit as well um i'm currently using a beta version of
11:01 foundation six that nobody else has except me um and you might notice there's site styles is slightly different
11:07 um i there's a new component swatches section so i've added a little bit more organization here i'm not gonna dive
11:12 into everything i've done maybe at the end i'll kind of review that um and i've given some hints um
11:20 over the past couple months that i i plan on releasing a swatches pack and um so i i started working on
11:28 a swatches pack and um svg is one of them so um there is going to be a new svg
11:34 swatch um that will become a part of this swatches pack and inside this we'll be able to do some
11:40 cool stuff so what we can do is inside of an svg
11:47 we can adjust things such as the fill okay so let's go ahead and give it a fill of
11:53 purple or let's do red so it's really nice and vibrant we can totally see it
11:59 so we can do things like um class so i can give this a class if i wanted um and i can say um if i
12:06 wanted let's go ahead and um we'll go into this let's search for california really quick because we're
12:11 gonna muck around california okay so this is california okay and uh this
12:18 this path right this cr all these crazy numbers this is california so i could target this
12:26 i could target this and i could do something like this right we're going to do class equals
12:37 my state okay i'll just do my state why not
12:43 so that is my class i'm adding this class to to the california path okay and only the
12:50 california path for right now okay let's go ahead and copy this
12:55 i'm going to go into this svg and i'm going to paste that in there
13:02 okay so now california has a has that right and uh it was the the class was my state
13:10 okay and um yeah we're setting anything as a class
13:16 of my state we're setting the fill to be read now um in this particular map
13:22 um they actually set the fill um locally okay um so in order to override
13:29 that um we're gonna have to use this this important flag and well you notice this boom california
13:35 is now red cool that's nice and cool and you know
13:41 as any swatches we can actually hover that right so um if we want to do pseudo state a hover
13:47 we can do boom when i hover over california it turns red but that's kind of annoying because um
13:55 that works for california right um but it doesn't i don't want to
14:00 go ahead and put classes on all of these states that's uh that's kind of crazy because there's 50 of them
14:05 here in in the u.s and um that's no fun okay so how how can we do this uh at a more
14:12 global scale okay so um we're gonna not use a class we're gonna use
14:17 elements okay and i'm gonna go ahead and find that there's some new svg elements
14:24 now i'm gonna choose svg path okay because if you remember all of those um
14:32 all the states every single one was a path okay so we're going to select all the svg paths
14:38 and so when we hover over an svg path i want to set the fill to red
14:47 boom so we set the fill of every single one of these paths to
14:52 red when we hover over it pretty cool right
14:59 very slick couldn't be any easier right um now we could change the stroke i i
15:05 know in this particular example i played around it doesn't really look all that great i just leave the stroke the same
15:11 um but uh but yeah you could change the stroke if you wanted as well with the stroke is the
15:16 the outline and with stroke we have the ability to change the color the size of it um you can make it dashed
15:23 right um and then we can we can make the the lines so that they're either um rounded at the ends and all kinds of
15:30 crazy stuff so um that's kind of cool um but in this example we're just gonna stick with phil
15:36 okay um and so we have unhover that's pretty slick now um let's say
15:42 for example i'm going to go one more level um hopefully not to confuse you guys too much but right now this is going to
15:49 um if we copy and paste this let's do two different usa stacks the usa svgs and um if i hover over any of these
15:58 okay you'll notice that it does the path on all of them now what if i only wanted to affect uh
16:03 the first one how can we do that right um so in the svg stack um just like any
16:10 other swatches we have access to something called the parent stack or the parent class okay um and we're going to call this uh
16:17 us map so i want to apply this
16:23 only apply this hover red on something that's called the u.s map okay
16:29 and where are we going to add that okay well i'm going to remove my state from
16:34 california right now okay and if we just go all the way up to the the main svg which is the parent
16:41 of all of those paths i'm just going to go ahead and do uh class equals
16:48 us dash cool and copy that
16:56 okay and then i'm going to go ahead and paste it
17:04 now when i preview we get the red on this one but not on the one down here okay um
17:10 now i should note that i could have actually added that usmap class to the container or one column um
17:18 i just think adding it directly to the svg was would be nice because then it's really limited to
17:23 just that svg right um but it we would have got the same exact results
17:29 if i would have added it to this one column like for example i'm going to add it to this one column and it's actually going to apply that
17:34 that hover style to both maps because both maps are inside this one column right um so boop boop still works
17:42 okay um so yeah you could have added it to the one column um i just think it was a little bit cleaner since we're in
17:49 the svg anyway to go ahead and do that
17:54 okay so um that's pretty simple right so far um i know this svg code
18:01 looks pretty scary right and we're like oh joe this is crazy nuts um we are gonna get a little bit more
18:08 crazy nuts um but yeah not not too crazy i think i think it's all doable for you guys
18:16 okay um one thing i wanted to do is these the the color like it's very
18:21 abrupt right i'd love to have it like fade in like a little a little nicer right how can we do that because it's
18:27 just very red immediately so um we already have a
18:32 transition swatch inside foundation six and that works great with the svg stacks as well
18:40 um so we're gonna do a transition on the svg paths
18:45 okay and uh we'll do the parent class of us-map since that was what we were we were
18:51 doing over here okay and let's do a transition of 500 milliseconds okay with no delay
18:59 let's preview it now now i don't know if you if you see this that a difference over
19:05 the live stream but um there's now a delay right for these which is pretty slick
19:15 okay cool so now what so now that we have these styles okay
19:21 let's we want to link to something right so i can do is i'm going to we're going to muck with just california
19:27 for right now and i'm going to add a link i'm going to i'm going to link california to weaver space
19:35 okay so let's go ahead and link whenever i click on california it's going to take me to
19:40 weaver space okay so um here we go uh oh we want the
19:46 code let's go over to the code here and let's find california okay there's
19:52 california so
19:59 i know a lot of you are scared of code right um but we're going to have to do a little bit of code because we need to add a link
20:05 to this path okay so what we're going to do is i'm going to add or we're going to add a link
20:12 around this path and we're going to use htm an html link hopefully some of you have already seen
20:18 this so it's just an anchor tag and we're going to do href okay and i'm going to link to
20:26 um stacks we're going to link to weaver space here oops i forgot to put in my quotes
20:35 double quote there double quote there and then i want to open this in a new tab let's say okay i'm going to do target
20:42 equals um and to do that we're going to do underscore blank
20:47 boom all right so now there we go i added a uh a link okay now what i'm gonna have
20:54 to do is we want this link only only to be applied to california so what i have to do is i have to go all the way
21:00 down to the bottom of california this path and i have to close that path and we do
21:05 that with just a simple closing a tag okay
21:10 so um what i've done here okay is i i've i have what's called an
21:16 anchor tag this is why it's an a it's an anchor we have the opening tag that links to
21:22 weaver space and this opens in a new tab this target if you didn't want to open in a new tab
21:28 this will work just fine too okay i just want to open a new a new tab just to show you guys that
21:35 um and then at to close to define where our link is ending um we define this
21:41 closing anchor tag and it just has that little slash in there
21:47 okay so i'm going to copy this now copy it we're going to go over here
21:54 i'm going to go ahead and paste this in okay and uh let's go ahead and preview
22:03 and you'll notice that when i hover over california now i now have my little pointer that tells me it's a link
22:09 and if i click on it it takes us to weaver space
22:17 pretty cool right so yeah it is a little bit of code and there there's a little bit of work to be done
22:23 here um hold on one second let's just turn it on
22:31 um but it's pretty slick right it's not it's not rocket science and for for the
22:37 us if you wanted to have a link for every single state yeah it could be a lot of work right um because you'd have to create
22:43 these these links around every single state okay so definitely is a little bit of
22:49 work there okay um what uh what else can we do
22:58 um so davide um had little tool tips when he hovered over um every state right how let's do that
23:06 let's let's so when you when we hover over um let's do california i'm going to do california for right now so when we
23:12 hover over california we are going to get a tool tip
23:20 okay so in order to do that we're gonna have to muck around with some code and um here i am using foundation six
23:28 so i'm gonna show you guys how to do this with foundation six okay um if you're using other frameworks
23:34 or other stacks you could probably use some other tool tip stacks out there and get the whatever snippet that stack needs to
23:42 show the tooltip but for right now we're gonna i'm gonna show you how to do this with foundation six
23:47 okay so in order to do this actually i'm going to go over to the um
23:52 foundation six the open source docs okay so these are at get dot foundation um
24:00 and then you can go up to the docs menu and go to sites docs and here's all the raw documentation for
24:06 all of the code that's behind the foundation 6 stacks right and so foundation 6 has
24:14 tool tips so like right here if we hover over this we'll see that we have a tool tip right and i do have those documented
24:21 here as well so if you go into uh snippets
24:28 okay um you'll see that in here i actually have snippets for all the various
24:33 um code things um that you can do with foundation oh they only work in they only work in edit
24:39 mode forgot about that okay um so you can kind of see what those are so there's an abbreviation there's tooltips as well
24:46 okay or i i think i mean this while this stack is useful it kind of
24:51 shows you inside rapidweaver um i'm going to go ahead and head over this code here
24:58 so to add a tool tips to something um essentially we just we need two things okay um i need a title attribute
25:07 okay so we're gonna go ahead and um i'm gonna go over here and on this link okay
25:14 i'm gonna put a title in here so it's just title equals and this is california right so uh or
25:20 we're gonna put home of weaver's space
25:25 cool okay so that has a title and let's show you what what that does actually just having a title on there
25:31 because that that actually does some stuff let's go ahead and go into rapidweaver
25:36 i'm going to paste that in there
25:47 and it should
25:52 oh maybe safari 14 doesn't do that anymore normally when you have a title on a link
25:58 and you hover over it it actually shows you a little tool tip like a browser tool tip not a very nicely styled one
26:08 um safari change its behavior yeah title it's there interesting
26:17 i guess uh safari doesn't do that any longer okay um so anyway uh let's go ahead and we
26:23 need to tweak this a little bit more okay um we need this data dash tool tip attribute
26:31 so i'm going to go ahead and copy that and let's go back in here and all i need to
26:36 do is add um that data dash tooltip attribute
26:44 and uh let's go ahead and copy this back into rapidweaver and paste it
26:52 now you can do all this work directly inside rapidweaver but um i don't know i i like using like a
26:57 nice code editor this is one called nova there's a bunch of free ones out there as well vs code
27:03 sublime text um text wrangler or actually no text wrangler doesn't
27:09 exist anymore it's now just bb edit which has a free version um yeah so uh i prefer using code editor
27:15 yeah i have to copy and paste um things back into rapidweaver but it just makes life a little bit easier
27:21 okay so now that we have that tooltip if i hover over that voila cool i get my little
27:28 uh when i hover over now it actually it changed my cursor to be a foundation does that okay foundation
27:34 does change the cursor uh to be a question mark um over the
27:39 tool tip but since this is the link we can actually change that okay um and uh what i'm gonna do is i'm gonna
27:46 use the cursor swatch and this is another one that's a part of the swatches pack coming up
27:52 okay and i kind of know this is just has tip um and we're going to
28:00 set that to be pointer where's pointer pointer there we go so i
28:07 want that one um has tip is a class that the foundation adds to all tooltips okay um so i'm just going to
28:16 do that there we go now i still have my little pointer back
28:22 um and i have my tool tip which is cool again i would i would then if i wanted
28:28 this for all 50 states i would then need to replicate what i just did um
28:33 inside the svg for all states so it is a lot of work okay um
28:42 but i mean this is a really nice solution and i saw that danny um in the chat
28:48 mentioned that you know this could be applicable for floor plans yes i mean this is well i'm showing you a use case of an
28:55 svg with a map but this this same exact thing could work with anything that is an svg it could be a
29:02 floor plan it could be an im any image okay um i i just think
29:07 maps are kind of portray this very easily because we can kind of grasp how a map is
29:12 divvied up into different sections okay and then we can style those sections and add little links and tool tips to all
29:17 that stuff cool so what else could we do
29:24 um i'll go i'll take this one step farther and then i'll kind of just ask some questions um and
29:31 see if you guys have any questions and then we'll maybe dive into some other cool stuff i've just been working on this week so let's um let's launch the
29:39 light box why not okay so i want when i click california
29:45 instead of it launching a link i wanted to launch a light box okay let's do it
29:56 um oh in order to do that though we're gonna go over to
30:05 uh what's it called what's it called orbit
30:12 all right reveal is the um the light box that's a part of foundation six
30:18 okay and to launch a reveal um doesn't take much okay um so we have
30:26 uh this for example so we have a button and uh we can open
30:32 uh open a modal okay um
30:47 hold on one second just making sure just a toggle okay
31:04 oops okay so we want to um launch a lightbox
31:11 and um we're going to use this button here okay uh we don't need to have a class of
31:17 button that's to actually make it look like a button um we just need data dash open and then
31:22 our lightbox id okay and so what we're gonna do is we're
31:27 gonna we're gonna copy that and i don't want this link any longer so
31:34 we're going to remove that okay and actually what i can do is
31:39 i'm going to take all of this this data tool tip let's say we still want a tool tip okay we don't want to link any longer so
31:46 i'm going to delete that link tag i'm going to and we got to delete this closing link tag
31:53 okay um what i'm going to do is i'm going to go ahead and i'm going to i'm going to paste in that
31:59 data tool tip um that had that we had on that link so that it's directly on the path
32:06 and then i also want to do um this data open and let's call this um
32:14 ca modal okay um so we're going to open we want
32:20 to open a light box that's called ca modal um whenever we click on this
32:26 cool let's um let's go ahead and copy this
32:32 over here paste that in there okay
32:40 um and you notice i i have my little um now when i click on this it actually
32:46 doesn't do anything because i didn't create that light box yet right okay so let's go ahead and create that light
32:51 box um and
32:57 we're gonna do a light box okay um
33:08 i'm not gonna take time to you know create a fancy light box or anything like that guys uh we're just gonna do
33:21 we're just gonna do that okay um and then this lightbox oh yeah the lightbox name was uh what
33:28 did i call it uh called it ca-modal okay um c-a-modal modals are like a
33:38 geeky term for lightbox if you guys are always if you're curious like why the heck you're using the term modal it's weird
33:44 yes it is weird okay um so now that i created that lightbox um it should oh yeah
33:57 we get california again you could do that for all 50 states you can create different light boxes um
34:05 you can do all kinds of stuff right um let's do um let's do another one
34:10 um let's do a drop down okay so um
34:19 let's see we just do data dash toggle
34:27 um and then the drop down id okay so um inside
34:33 this code um i think we could just do data dash toggle okay um we're going to see a drop
34:43 okay copy that
34:51 paste that in there okay we need to create our drop-down i'm
34:57 going to create a drop down here this is the drop down container component not a
35:02 drop down menu okay um and we're going to call this it was what ca drop
35:10 over there keep the size that we're going to open on hover we want to open it on hover not on click and let's preview that
35:20 so when we hover you see oh i didn't add any content
35:30 oop or when i hover over it i get the the nice drop down pretty cool right
35:39 maybe there we can we can change the um the cursor maybe maybe there if we do uh
35:47 let's do svg path on hover
35:56 cursor help there we go there we go so now whenever whenever i
36:02 hover over i mean only california has the drop down now right but you can kind of see boom hover over california and get the
36:08 information if you hovered over other states you would get information about those states right pretty slick
36:18 let me see if there's any uh variable content by state imagine how you could be used for covid um interesting um
36:27 especially if the variable content was populated from an external source yep um um you know this interesting
36:35 concept would be interesting to see how we can integrate this with total cms or something like that um then you can you
36:40 know update the cms and um yeah you could do both right so then you know you can update all the
36:47 information and have it dynamically displayed um on the website just by updating the content in the cms
36:53 pretty it's pretty slick okay um cool any let's see
37:00 uh i i think there aren't many questions hopefully hopefully i i tried to get the i tried not to go too
37:05 fast um here i'll put the i'll put the um url to this
37:10 docs site um you know on in the chat room for anyone that wants to see it
37:17 it's just get.foundation this is again the the docs for the actual framework that is
37:24 all the code that's behind foundation six the stacks okay um obviously i
37:29 i have some code that's on top but this is obviously all this code um any code that you see here will work
37:34 in foundation 6. that's really cool and i just used it to copy paste some of those parameters for things like
37:40 the lightbox and the tooltips and whatnot so useful stuff there okay um
37:48 cool so i guess we'll uh i'll kind of move on in
37:56 closing i'll just kind of go over some some cool stuff i've been working on i guess you guys are curious at all
38:02 um don't have an etn release this will be foundation 6.7 um and it will um i'll have a
38:09 a new foundation swatch pack for sale um hopefully or early next year january february
38:15 somewhere around that um time frame and um um site styles you will get some new
38:21 things um obviously in foundation 6.7 um one big one that i added is the ability to customize the gutters
38:28 in your columns um i didn't think this was going to be possible but i figured finally figured it out
38:33 yesterday and inside site styles you have the ability to customize the size of the gutters
38:39 and that is the values applied when you click on these little buttons here
38:44 okay so now you have access to control what those what those actually do okay so you have the size of the gutter
38:51 on small medium and large and those will get added when you apply
38:57 uh these buttons okay so you can you know add and remove only certain gutters or whatnot if you
39:02 want okay so it's really cool stuff there uh you'll notice that site styles um it
39:08 has a new area this um the general swatches menu was starting
39:13 it was growing and growing and growing and growing and so i wanted to be able to um kind of you know spread that out a
39:20 little bit um so um in the font now i added the font color and text color swatches
39:26 so you know anything that has to do with text or fonts uh will can now be added up here okay um
39:34 so um that's just kind of a reorganization um i renamed this one to general
39:40 swatches it was just swatches before um and you'll notice that there are some new ones in here and let's see
39:46 you've seen a couple already so cursor um svg um transform is a new one we'll look at
39:52 that one in a minute and um there's a specific one for z index now um because sometimes people wanted to
39:59 change just the z index and they were applying a position swatch which adds some other things that you
40:05 might not want right so now there's a z index swatch transform cursor
40:10 um and svg uh transition was already there that was that was something that's already in uh foundation six
40:17 and i think that was it with oh display okay there's another one
40:24 not sure why it's down there i need to alphabetize it um
40:31 yeah so these are all the new swatches so we have the svg swatch which you've seen um allows us to apply styles to svgs
40:39 fill and stroke and then obviously we can change those values with a transition swatch
40:44 okay we have the cursor swatch which allows you as you see all the various cursor modes so there's
40:51 all kinds of crazy cursor things that you can do you can customize your cursor or whatever you want okay um
40:59 transform transform allows us to do um things like nudging or rotating
41:06 or um so for example um for fun let's just go ahead and i'm
41:14 gonna i'm gonna do svg paths we're going to do on an svg path on
41:21 hover okay i want to um
41:27 i want to rotate a stack by 10 degrees and i want to zoom in
41:34 one point in point one okay um so that's on hover actually
41:41 we're going to do two just kind of give you an example
41:48 yeah it doesn't doesn't matter uh here we're going to take off hover none and i'm just going to
41:55 apply this to zero and one just that we have some default
42:01 values applied um and i already have a transition so now when we preview this
42:10 um yeah the rotate kind of doesn't work does it but uh yeah interesting there we go uh here
42:16 let's take i'm gonna take that rotate off let's play around here um let's take off rotate take off rotate
42:24 we're just gonna zoom in
42:30 with the way this svg is built it kind of some of them is cool like that one right there but this particular one the way
42:36 it's layered i wonder if you add a z index um all right here i i we're
42:44 i'm just playing around here i have no clue if this is even going to work let's see if we add a path
42:51 we do a z index of 999 on hover
42:58 so we're changing the z index on hover i have no clue if that's going to work
43:04 nah that doesn't seem to work you see that this this particular one is still underneath the other one right it's interesting
43:12 i i bet you if we play around with a little bit more we can probably get it get it working a little bit and some of them move too not sure why
43:19 that is but um yeah but imagine i mean you so you can do this you could do simple little um you know
43:26 very simple animations with this if you use transforms and um you know transitions
43:32 you can do that or you can just rotate something on the page right so um let's say i create a class called
43:40 rotate okay and let's go ahead and rotate something 90 degrees
43:47 so anything i rotate or let's do 45 degrees you can kind of see you can see it right here in in preview
43:53 i kind of the transform's applied to this little black box here okay um so we can rotate anything by 45
44:01 degrees just by adding a class so now i'm going to go to this text and i'm going to say um rotate
44:09 okay um obviously it doesn't work in edit mode uh but we should oops did i
44:17 what's that oh i have it on hover uh let's just do none
44:23 there we go so this text is rotated now for text it doesn't really make much sense okay but
44:29 um you know you can now rotate all kinds of stuff on the page so um you know you can rotate it move
44:35 allows you to like to shift it so you can like you know shift it over a little bit and kind of change his positions and all kinds of stuff
44:42 um zoom obviously scales it in or scales it out um and then skew excuse kind of a funky
44:47 one like obviously you know what a skew is it just kind of skews things um i'm not really a huge fan of skew but
44:54 anyway that's the transform swatch it's gonna be super powerful um you can do not only just transforms but
45:00 also kind of simple animations um with this out of the box especially on hover
45:07 um that's cool um so i kind of showed you with z index right you could just add the z index to
45:13 whatever and then display what is display so i think that probably the biggest use case
45:19 for display um
45:24 is a custom visibility stack so in display you can affect a property so we're gonna do display none okay on
45:32 something so let's call this um uh my hide okay and uh what you can do is
45:39 you actually do a custom break point here so i can say display none from you know um
45:45 let's do something like 600 to or no let's do like
45:50 hang it um let's do from like 700 pixels to 900 pixels just to kind of show you so
45:57 between 700 and 900 pixels um this is going to be whatever i apply this class to is going to be hidden
46:05 okay so let's go ahead and um let's just apply it to this this entire
46:10 map just for fun all right so this entire map is going to be hidden from 700 to 900 pixels
46:17 okay so if i scroll down up it's hidden because we've we're now
46:23 below 900 pixels and boom so it's now below 700 so it's
46:28 displaying right so between those two break points you can hide something
46:33 right pretty cool so this is i i get a lot of requests for you know custom break points for
46:39 visibility um so yeah this gives you that this allows you to um you know effect
46:44 you know you can do a lot more stuff besides just hiding stuff um you know display inline can be useful
46:50 some of these other things are more a little more esoteric so some of these table stuff but um i figured i was building this i would just
46:56 give all the options that we needed chances are you're going to be using this for displaying um you know either
47:01 none block inline or inline block those are probably going to be the most for used settings in here the rest of
47:07 them are a little bit more advanced and esoteric on what you're going to be using but this custom breakpoint is going to be
47:13 pretty cool okay um there's one more so here down here we have new component
47:19 swatches and some of these i moved from the general swatches area right and this is component colors menu styles and top bar
47:27 styles um and these are going to be again swatches that are applied to particular components right so um you'll
47:34 notice that there is a new one called gutters and this allows you to you know define custom gutters for a particular column
47:42 right so um you know you can do uh my gutter and then you can do custom
47:49 values for that and whatever column you apply that my gutter class to will get those um we'll get those values
48:00 cool well not a lot of questions today guys i i assume i just blew you away
48:05 and that you loved it i'll assume that um yeah we did do we did do some
48:12 advanced stuff today but i think it was pretty cool hopefully you guys got a little bit of love um and some a little bit more
48:19 um glimpse into how svgs are right and it was kind of cool just you know we can find a free svg we can
48:25 kind of tweak the code a little bit maybe integrate it with foundation six um and then we got some cool new
48:31 swatches coming up right um that are gonna let us style those things
48:36 now i guess i i probably could have showed you like if you want to do this today you don't have that svg swatch um
48:43 right um here let me just um let's go ahead and
48:51 um really really really quick so if you wanted to do um some of this
48:58 today um so like if you just wanted to do um you know path okay
49:06 so this is just kind of some some um or we can do here my parent
49:13 okay uh so you can add a parent class to something so it's dot my parent and then all paths
49:19 in it you can then do fill colon um you know red something like that right
49:27 so um that's that's the general gist of what that fill is doing it's really not all that much of a rocket science
49:33 obviously then you can use your transition swatches to do transitions and um and stuff like that i'll put this
49:39 uh this little snippet in the in the chat for you guys
49:44 um so yeah cool hope you guys enjoyed that
49:50 um learned a little bit uh about what svgs are um how they are they are html right or
49:56 they're actually xml okay but um html is also xml so it works um and you know you can integrate this
50:04 stuff with foundation six using some of those snippets from the foundation six uh documentation
50:10 the open source docs um and uh and you can also use swatches to play with them and
50:16 modify them as well so hopefully you guys enjoyed today i'm sorry for the the little um issues when we began
50:23 i'm glad most of you found the stream again and was able to come on and watch this
50:29 so thank you very much everyone have a great day hopefully we'll see you on friday um at the hangout um and maybe we can play around with
50:35 more of this and i'll probably have some more um cool stuff from foundation 6.7 done by then as well so take care everyone have a wonderful
50:41 week bye"}]