hey everybody happy Wednesday it is live day
I was literally working to the last second on some cool total CS 3 features
um hopefully new beta tomorrow uh if all goes well I was hoping to I was hoping
to ship it like yeah whatever days ago but anyway
hello You Beautiful People well at least some of us
Chris um okay here let me let me just verify that the thing I did May maybe
I'll show it off a little bit okay that works cool M
filters excellent working love it love it when things work Mr workman's in the
house Mr Cole Francis Mr Francis Dr Bob
Matias howdy from Germany howdy to Germany I'm not from Germany uh one day
I'll make it over there one day Ramstein okay excellent love that
thank you this is one of my favorite hats so I actually have two of this exact hat just different
colors um so yeah thank you this is definitely one of my
favorites all right uh here okay while while here while I'm verifying what I
did actually work let me go ahead and um share my screen and I'll just quickly show you this has nothing to do with
what we're showing off today um but you know what it's hot and new and um a lot
of people are wanting it right so um here's cms3 beta okay and uh we're going
to have uh filtering and sorting of uh blog Loops okay um you can have as many
filters and as many as you want you can also limit and add some pagination as
well which is pretty cool so um I literally just built the controls this
it doesn't actually work yet well it works on the the application side but I haven't built all the logic in into the
stacks yet um I'm just kind of building out the settings so um yeah pretty cool you'll be able to add in as many um
filters as you want again the settings I haven't even done the settings here yet so just all the raw Basics uh right now
but um super excited about this it's going to be super powerful um if you like the filtering in feeds um this is
going to be even a little bit more powerful than that so there we
go okay um wa one more one more cool little dude
ad um in in this next beta okay I know some of you probably joined last week I
did a like an epic three-hour live stream and um I showed off the new admin
dashboard right and one of the the bad things about the admin dashboard is it
doesn't work inside or it didn't work in preview but guess what it does now right
so uh we have this is in preview I now have full access to the CMS instance
that runs inside of preview all the docs are here you can go ahead and look at
your collections you can add new objects All That Jazz um all within preview um
so yeah new admin dashboard you might notice there's a few few new tools here as well little project setup tool which
is kind of cool but more on that later we're not going to dive into that now okay
um let's go ahead and uh let's close this project out don't save that all
right uh we're going to set up a going to set up a new project okay um cuz as
usual um I kind of I I don't have many plans I didn't pre-build anything here
um I think you guys kind of like it when I uh kind of wing it and just like I struggle so maybe I'll struggle through
some things as well here uh we're just going to kind of build some things and
um uh Depot and files next week um so I don't know about Depot and files
yet they're currently two betas away because mostly because I I split this current beta in half um in order to get
filters out and some of this other stuff out a little sooner um
so I don't know about next week but soon okay sorry Maas I know I know you're
really wanting those um okay what was I doing oh yeah
uh let me bring up the post that kind of inspired um today's uh live stream
uh where is it where is it where is
it okay so um kind of a run-of-the-mill post not many people helped out and
replied but um it spurred this live stream uh this was a month ago now so uh
Bill asked he wanted to if you know like rapid Weaver 9 or rap weever classic
whatever you want to call it um remember it added that little like built with rap rid Weaver badge or something I mean
honestly I don't remember exactly what it looked like like cuz I think like the first week I saw it I turned it off and
never looked at it again and um I don't use setup anymore so I no longer have
rapid re classic okay um but I kind of remember what it looked like and if we
go ahead and look at uh Weaver space right and there's a couple things
here let's see if we go to uhoh I I didn't create the announcement this week but we have like a little if you know
like there's like little announcements if you ever go to Weaver space sometimes see like mostly the deal of the week stuff right um and then also down here
at the bottom corner we have these little doohickeys right and I think the wrap reav badge is similar right so um
I'm going to kind of use this as an example um and we're just going to build out something like this probably like a
little image maybe a title and a bit of text and maybe make the the thing one
big old link um and we're going to kind of animate it in and then hopefully if we have time we'll
we'll play with call to action to control when and where we see this thing
right so uh hopefully that sounds cool if you guys have any ideas um let me know um in the chat and uh we will yeah
we will uh again I don't really have plans my plan was just kind of build this little
doy down there at the bottom all with uh we will do this with Foundation 6 okay um okay so let's go
ahead and uh let's get her done all right so I'm starting with a completely blank project file actually for fun
let's go ahead and um let's save this as so you guys can get this project
file badge and we're going to save it to my desktop all okay there we go all right
so now I got this thing um let's just call this uh home all right let's get
started we're going to add site Styles and um I like to slim down my
site Styles a little bit okay we're going to do that and
uh pretty much I'm just going to build this page it'll kind of just be a blank page we're just going to build out the
little notification thing but for first before we position it we have to build the notification right so um I'm just
going to add a little container here just to give us a little container to um work with I'm just going to do like p18
or something like that all right um so we wanted that thing to be one big link
right so um let's start off right and we have something called a link container
okay and that is a container that makes something one big old link okay um and
let's call this let's give this a class we're going to call it a Noth badge how about that okay I think that makes sense
um we are going to start creating some classes right so
um we're going to go our notification badge all right let's add uh let's make add a background
okay so we're going to um notif Dash badge okay and um just to make it stand
out a little bit I'm going to going to go ahead and do like um um
f like f8 something like that yeah it's like almost white right
okay um so we're going to do that um we want this thing to be pill shaped so I'm
just going to start chucking out some um some rounded Corners here so we're going to do oops I didn't no if- badge and
let's copy that so it's on our clipboard okay and um yeah radius 10 pixels that's
fine okay um let's add a box Shadow to it uh
Shadow right um let's do a little more subtle Shadow actually I'm just going to
reduce that down so it's something like that sure um and let's do a shadow
uh let's do one pixel down yeah I like that um a pixel
blur sure let's go with that okay um so there we
go and right I know I know that we're not we haven't previewed this yet I'm
just trying to get things done because I'm I know we got other stuff to do so um hopefully this is making
sense and let's add in in a well let's start building our layout actually let's
go ahead and um add in let's do two columns okay so
we have a two column layout First Column um I want it to be
um shrink to content right because we're going to add in a
um image okay and then um the second column is just going to be Auto okay
perfect so the second column is just going to fill up the rest of the the space
and doesn't matter that the device it's always going to be uh we're going to control on small and medium and large
it's always going to be the same okay ultimately I'll also create a width Swatch and constrain the width of this
okay um but let's see what we can do here all right
and right let's add in a
picture let's add in a picture over here right and um I don't let's add in the H
Stacks Pro why not boom right we got Stacks Pro right
and I'm going to scale the image I want to do um I how about like 64 yeah that
looks good all right so 64 pixels and then over here uh we're going to do a um
a header okay um let's do like uh sure H
H2 uh
um okay Stacks Pro is coming and then
um below that we're going to do a subheader uh that's going to be oops uh
let's do a H4
all right boom all right um obviously we'll have to tweak the header sizes because we
want those to be small right okay and uh let's see how this is looking I have no
clue how this is going to look so let's see all right so
um first off let's up one second let's do overflow
visible all right so here we go uh I need to add a little bit of gutter obviously there obviously uh we're going
to restrict the width as I as I suggested okay
um all right let's go ahead and add in let's see in this two column um let's
just go ahead and add a little bit of padding everywhere oh that's a lot I we just uh let's just add gutters
cool all right um all right let's um let's start
controlling let's let's tweak the header sizes of these right because we want those to be smaller it's going to be a little notification at the bottom right
so it can't be that large okay so um let's go into font style okay and we're
going to control the notification badge and what I'm going to do is I'm going to
control the H3 inside there so I'm going to do space H3 okay and this is going to
allow me to control the header okay another thing you can do is you can go ahead and add a custom class to the
header if you wanted um but yeah this works too um I think it's just a little bit more efficient less classes to have
to worry about okay um so let's see how
that works 16 pixels all right let's make it a little bit let's make it a little bit uh let's make weight bold and
let's make it like uh I 24 let's see how 24 looks
and weight is uh 600 that's still a little bit big
actually let's do like a
18 I think I'm good with that okay um one thing I noticed here let's
do well we'll inspect it later right um and then the H4 uh so we're going to do h H3 is H4
and let's do um 14 pixels on that and we're not going to affect the weight
actually let's do weight 400 to make sure it is just 400 sweet I like that um on these
headers I think I want to remove the margins on both of them actually just so
we have full control over everything excellent starting to look good right I think we need a little bit of padding
around the entire link container okay um instead of using utility class I'm going to go ahead and just add in a
padding Swatch just so that we have everything that we can look at okay
oops put that in there let just add like uh we try
eight that's not bad all right um so let's constrain the width now
okay and wonder if on on this what happens if I set this to also shrink to content I
don't know what's going to happen let's figure out right and what if I
do uh or we're going to try to use swatches only so we can see everything and not hide stuff inside utility
classes um I'm just playing around I I'm trying to whoops that was the wrong keyboard
shortcut um what was I doing all right okay I want to go here notification
we're going to do display inline block aha sweet okay that's exactly what
I wanted okay so uh let me explain what that is and also this this gutter I'm
not a huge fan of that so
big H yeah that gutter is too big but I'm not loving all right let's see in
here Let's do let's play with this horizontal alignment let's no vertical
alignment sorry we want vertical align middle there we go right okay I'm liking
okay this is starting to look better um I kind of like I don't know H does it look better at the top or the bottom
interesting um what do you guys think what do you think in the chat is there do we like
vertical align top maybe if I I add the top margin back
to that
header H that's going to be a personal preference right plus I think the the the issue is this image has some
transparent pixels around the edges right so um so that's why this text
doesn't look like it lines up well I think I think if this image went all the way to the edge it would look a little
bit bit nicer okay um but yeah h i I am going to cheat I'm
going to do like PT or I'm sorry like uh let's do a Mt colon
4 yeah baby okay I like that okay um I do want to increase let's see I think I
want the the the padding that we have on this to be a little bit more on on each
side um oops I open that in a browser my fingers betrayed me um I know I said
it wasn't going to use utility swatches but or utility classes but like this is a perfect example where it's like I
don't know here H okay I'm going to stick with it let's not use utility classes
sorry there's nothing wrong with the an utility classes but I just wanted to guys um I think some people get confused
when when they don't see all the Styles when I create something so um being able to see everything in a Swatch is is
convenient um I would probably have used the utility class in there if I was doing it okay because it's just quick and dirty right um let's go ahead and do
um notif badge H3 okay and we're going to
do um what was that no we want detailed top what I say it was what I four pixels
I think I did four pixels all right perfect four pixels um and then the padding around
the link container um I wanted that a little bit bigger
actually be honest what I want is I want the top and the bottom to be eight but I
want the left and right to be a little bit more let's do 12 let's see how that
looks yeah I like that for some reason it just feels off here again I think it's because this
this image has transparent pixels and um so it makes that Gap not match over here
kind of sucks um but anyway we're going to go with it um we're get we're getting
there okay to be honest like this this is quite large okay um probably in
retrospect I I think it should be even smaller but then if it's smaller then it's kind of harder to read right um oh
one thing I didn't talk about is how I made this the size it is right um I
didn't use any with swatches or anything right so how did I do that um so first off if we look at the
columns okay actually I'm curious if I do with auto here what's going to do oh it does the same thing okay um so
um in the in the columns you remember I did uh column one was shrink to content column two was Auto which means it'll
grow to the content okay if you know if you notice I did the same for shrink to content and it kind of looked the same
okay um so it effectively is the same layout okay um but the trick was when I
put this display Swatch on here and let's go ahead and just uh delete that really quick without that
display Swatch okay this link container goes the entire width because by default um a lot of
things um are set to grow the entire width of whatever they are inside there
are some exceptions like buttons and things of that nature um the link container itself is meant to always fill
up the space that you give it okay okay okay so what does this display mean
okay so this controls the a display property
within CSS and um if you notice there's a lot of options here okay um there's two
primary options that I or three actually obviously you can set to display none which will hide it okay um display block
that display property in CSS essentially means means um fill up the space you're
in so if you set something to display Block it's just going to fill up the area it's inside okay
um display inline and display inline block um both of those are essentially
the W uh ways of ensuring that the or I'm sorry the width is only the width of
its content so it's not going to be greedy with space and eat up all kinds of extra space okay okay uh we want it
to um essentially you know shrink down to
the content which is exactly what we did now the difference between inline and inline block I'm not going to go into
that right now it's kind of a complex there's a lot of little mini quirks most of the time I have to say I do use
inline block I mostly prefer that towards uh uh inline okay um yeah it
just depends on what you're doing in line is good for maybe for like um well even for like svgs I tend to use inline
block if I want them to be uh whatever but but yeah okay um so there we go all right so now uh it
shrunk okay to the size that we have now next up is um I'm happy with this
obviously in in the link container you would go ahead and and uh add a link to whatever you want to link to okay um
we'll just leave it as this for now because I don't need to link to anything um it is a link it'll link to
whatever but now we need to um go ahead and position this right so we need to position this down here okay so let's go
ahead and do that uh we're going to use a position
Swatch and we're going to go we're going to position the notive badge okay uh so what we're going to do
is we're going to uh position it relative to the browser okay so it's going to basically lift out of the
browser and we're going to make it relative to the browser and we want it at the bottom left right so let's start
with that right bottom left if you notice it is right all the way down at the corner
we don't necessarily want that we want a little we want to get a little breathing room now there's two things we can do um
we can either add then add a margin Swatch and add margin to this and then it will bump it up a little bit or we
can just add where we want it let's do like um I don't know uh 15 15 let's try
that uh maybe a little bit more how about like uh 24 oops
24 I kind of like that right a a little bit further up from the bottom um I tend
to notice when you want to put things in the corners okay
um from a design perspective for some reason if you have it like like I have this set to 1515 before and made it so
it is exactly perfectly positioned in the corner for some reason that just always feels off to me and I always have
to either add more to the uh left or to the bottom or the top of the you know
whatever it is to make it so it's not evenly in the corner like it's close and it's in the corner but yeah I I
personally find even when I'm like positioning let's say a close button if you put it exactly in a particular
corner it doesn't look great you have to either shift it up or shift it over a little bit for it to look good um so
yeah just a little bit of uh design tidbit for you um okay um yeah I think
that looks pretty good so now what we want to do is we want to animate this right because uh right now when I uh go
ahead and animate it or or load the page it's just always there and um hey maybe
that's what you want okay but um let's go ahead and try to make it a little bit better
okay so in order to animate this um there's so many ways we can do this um
if you want to go Advance you can do do like drift and do like some crazy animation in um we're going to keep it simple for right now though um and we're
just going to uh we're going to do let's look at
some animate let's do animate on S okay
um um that's not what I
wanted oh maybe it is let's see all right so um let's do uh not to fadge
okay um
and oh this is this is in the Swatch
pack and let's fade it in in from the side how about like fade in fade in
left animate once let's see um oh hold on a
second oh we want okay so we want start position to be Z
100 there we go okay so here we go so animate on scroll
start position is 100 okay and there we go now obviously we probably want some sort of delay right so we can delay this
by um let's do like uh well do like two
seconds voila okay and you can do more let's do like uh fade
in how about like fade in bottom
left right that kind of comes up like that right you can fade let's do like a how
about bounce in left what does that look like I kind of like that that's a little
fancy like it kind of grabs your attention right I I can dig that bounce in left is cool um it's been a while
since I played with some of these animations let's do like uh rotate up
left it works right basically you can play around with a lot of these things um
cool I like it so that's one way one one way we can do
it I like that actually I think my favorite so far was the bounce in what's zoom in left see what some of those
are nah slide in
left um yeah let's do let's stick with the bounce in left I like that
boom I thought that was cool oh yeah I like that one um so there we go that's cool um there's there's other ways we
can do this let's play around some other things um let's see what other swatches we got
um there's also Toggler on scroll right let's do something even
simpler um I'm going to I'm just going to turn this off okay just so that one's
off let's do some other animations um here let is I'm going to start
organizing some of these things so that we don't oops that's not what I
wanted right just going to move all those in
come on all right um base notif badge
Styles okay um and we're going to add oops U we want
these two in there that it's all the way in
there sweet and let's go ahead and add another uh pen he
all right um right let's add in another one uh let's do um transition okay
um and then we do is it
Toggler no not Toggler you probably could use Toggler as well but I think
Toggler on scroll would be
good well I'm thinking guys sorry let's see so we want to affect that uh
okay so this is um this is similar to animate on animate scroll okay but we
have a a little bit more granularity right so um let's set it up similarly um
okay so we're going to uh we want to Target the notification
badge um and we want to toggle the class um
let's do show okay and the trigger is also going to be
notification badge uh we want to trigger
once right so um so what this does uh let's just show I'm going to toggle a hide class on this um so basically we're
going to do um hide on this so it'll not show it okay uh just to kind of show you
how this works we're going to delay it by um let's do uh 1.5 seconds oops Let's
do let's do two seconds all right 2,000 all right so uh what this will do is
after two seconds this is going to toggle the hide class which means if it's there it's going to remove it if
it's not there it's going to add it okay um let's delete this transition for
now 1 1,00 2 1,000 boom okay so the hide
class if you didn't know is a utility class in in Foundation that hides something okay now it didn't have any
animation okay um I just wanted to kind of show you what what we can do okay so
um that had a class of hide it removed it okay 1 1,00 to 1,000
boom
okay um okay so now let's now let's get a little fancy here okay and
um let's I'm going to add in another pen okay and we're going to do um toggle
animation okay uh cuz we're going to need a couple different classes on this one a couple different things all right
I'm going to remove that hide class from here because that was just an example right um so now what we're want
to do is um I'm going to toggle a class um called
um show Dash
badge okay um so what I'm going to do is we're
going to add some other so basically uh by default I want to um have styles on notification badge
that hide it okay and uh so we're going to add in
there's a lot of things you can do you you can maybe uh you change his position Swatch I'm not going to do that because
I don't want to break existing demos okay but you can like have this uh left negative something so it's completely
off the screen um but what I'm going to do is I'm going to use something called a
transform okay and um I'm going to add in um uh
notif badge okay um so by default I want to
transform and and what I'm going to do is I want to move it okay and we are
going to move it uh X by
um percentages and do
um 150 okay let's try that so
now we can't see it okay I haven't turned on the animation yet but right now it's completely off the screen it's
actually over here somewhere okay uh because I transitioned it by 150% of the
size of the badge itself just to ensure that it's completely off the screen here just to show you I'm going to do 50 so
you guys can kind of see what it is so now I did -50 okay so it basically moved
it by 50% over okay now just to show you if I do 100
here okay you notice it's it still shows a little bit and that's because remember
I positioned it uh 15 pixels over so we still see 15 pixels of this right so we need to go a little bit more so um I
just did 150 just to kind of know that it's completely going to be gone out of out of the browser it exists but it's
over here okay so now um what I want to do is
remember when we add the show badge um class to this basically I want
to I want to change the transform to be move zero essentially okay so I'm do is
I'm going to copy and paste this actually we're going to move we're going to move that over there right so now we
have um this one okay and I'm going to do notif badge um I'm going to do dot
show badge okay oops if I can
type right now you can put in just show badge okay um and it can and this will
most likely work okay but um what I like to do here is I like to add two classes
this means um only do the notification bad the notif badge and the show badge
so if it has both classes okay you can do that right and essentially now I want
to uh move it to zero and for um for fun what I'm going
to do is oh well right let's just preview so 1 1,002 boom okay okay so now
that didn't animate Joe what the heck's going on okay so what it did was um after 2 seconds it it changed the
transform value okay but now we need to add the animations in okay and so what
we do that through a transition Swatch so if you ever want to transition
something from one Swatch style to a different Swatch style um that is going to be a
transition so I'm going to go ahead in here and what I'm going to do is I'm going to set the um Noth
badge okay and uh by default you can uh it'll transform all properties but if
you know you're only going to animate one particular property you can set it to be that so right in this example I
know that I'm um doing the transform property okay and so there we go so now
I can and you can do all kinds of animations let's do like e EAS in it EAS in is out okay and let's
do that so now now I I have a transition for the transform and it's going to speed is 1 second so it means it's going
to take the animation from one transform state to a different transform state is 1
second 1 1,00 2 1000 voila okay now that is a a simple use
case but you can do all kinds of stuff okay um because you you you're not
limited to um transforming or transitioning just the transition or
just the transform right I'm going to set this to all just for fun okay and let's play with some more stuff um so I
am going to uh let's add in let's say an
opacity okay and by default I want my
notification badge to have an opacity of zero
okay and then uh when it also has the show- badge class I want it to be
opacity 1 okay so now it's going to move and change its opacity 1 1,00 to 1,00
okay uh I don't know if you noticed that but it did it it was transitioning the
opacity while it was going okay here let's um let's exaggerate that a little
bit and let's do this like um 5 Seconds okay a 5sec
animation if you see that it it definitely it faded in as it was moving
right but again you can do all kinds of other stuff with transition you can do I don't know if you want to add a border
or if you want to change the colors or all kinds of stuff right so um I'm not
going to dive into more examples of what we can do here but yeah there we we go um I actually don't think this
particular example the opacity looks good so we're just going to stick with just the transition but I do think maybe
transitioning oops 1,000 oh oh I made that slow again
let's put that
Pack 1 1,00 2 1,000 boom cool now you you could also make it come up from the
bottom as well right um at that point you would turn or you would move it on the Y AIS instead of the x- axis right
so there we go um let me look at the chat so uh let's see
[Music]
uh will will that be a dynamic doohickey from a feed um so you could right so um
that's a great question you could generate these from feed if you wanted
okay here let's just do um are we uh we got we got time oh
before I do that I I want to show call to action okay um and uh after call to
action remind me and we'll I'll generate this from a feed okay actually you know what I
should do I should do um here let's do uh badge
with animation all right then what I'm going do is I'm going to uh
duplicate um with toggle okay so I'm going to go and
just really quick guys sorry I just want to we're just we're going to delete
that just delete that okay so now that we have
this I just want to have a example that has everything we
need boom right um now if you saw with the animate scroll it has definitely
some fancier animations okay so you that's a win okay um we definitely get
some fancier animations again you you can use drift to get even crazier okay we're definitely don't have time to do
that today um and let's go ahead I'm going to delete that okay and uh this
should be the toggle one yeah okay cool now now we have two demos
without you know two demos there we go um next up is we're going to do um
I'm going to duplicate this page um and we're going to use call to
action and right um so instead of toggle on scroll okay
um there is a a um there is
a Swatch for CTA Toggler this comes with my call to action
stack okay um so again this doesn't come with Foundation or the Swatch pack um
this comes from my call to action stack okay um all right so let's look at this
um so let's add our call to action to the page
okay and um trigger uh what we can do is we want to trigger something so let's
say um on page load okay so I want to trigger this on page load after 2
seconds oops not 22 seconds okay um and then what is our call to action so our
call to action is going to be um we are going to do a CTA Toggler okay and the
Toggler ID needs to match the Toggler ID here okay um so what we want to do is
here we want to do um we want to Target our notification badge and similar to
what we did in the toggle we want to toggle a class so we're going to toggle that same show badge
class okay awesome Okay now what's cool about
CTA okay um is what this stack does let's go back to
this example um with this toggle um example or with the animation one okay
these happen on every single page load no matter if the person visits this page
20 times they are always going to see this down at the bottom always
okay um but with CTA okay or with the call to action stack we get to control
that okay and so there's a lot of various occurrences so we can do once
per session okay and or we can do uh once
per a time period so we could be like you know once in 15 days so you know
that way we're not nagging our person right um I think one per once per session is good you can also do only
once only ever show a person a particular thing one time that's it
right so there's all kinds of cool stuff that we can do um for this particular one I I'd probably like once per session
I think is probably good okay um and you can set this to be always occur in preview um and uh and there we go so if
I go ahead and preview that it's going to show now we are in preview so it's it's going to always
show and preview so that we can preview this stuff actually here let's go ahead and say um let's turn that off that I'm
going to go ahead and say always show and preview that way if I preview this let's do it in the browser okay 1 1,00 2
1,000 and we get get it if I refresh 1 1,00 2 1000 we don't get
it okay because it it knows that it already displayed that to me and it's
not going to display that again now what's really cool is let's say I had this particular thing in a
partial it it also tracks it across Different Page loads right so you can have this show up on any page you want
okay and it will only show that it potentially one time time which is really
cool cool um I like that I think call to action is really cool um I think that's
a perfect use case for
this I save that now I do have to say that eventually um I do plan on having
uh here let's have that always show on preview
oh by the way um if you're curious what this is uh you probably want this is the occurrence ID so this is what this ID
tracks it across page loads right so we'd probably want to change this to like noce badge or something like that
so that if you have multiple different ctas um the occurrence ID is different
okay just so yeah just so that okay um cool I love
it now um with a cookie on the server no this does
not use cookies call to action does not use cookies um it uses um all all that
stuff is managed in the browser it is not done with cookies so you don't need to worry about gdpr and all that stuff
um call to action yeah no cookies here um there we
go good question thank you
Irwin um let's see uh feeds all right so let's
um let's see what we can do here let's duplicate this right um here let's
actually uh let's delete I'm going to duplicate the let's go for the simpler
the simpler page let's duplicate that okay and um
with feeds okay um now this uh applies to feeds and
total CMS okay I'm going to use feeds so that it all works inside of uh preview
okay um and I don't need to set up a blog or something like that okay but um
this what what what what I'm about to build with feeds here will definitely work with total cms1 and total CMS 3
okay um so let's go ahead and do that let's add a feeds all right we're going to add a
feed okay um actually be honest I don't even need this container anymore um
because yeah uh we don't need it but it's okay actually here I'm going to if
we here just so it's completely as bare as possible I'm actually just going to
update this project that way whoops here we don't need this container
that was just the initial design uh aspects of it right and uh so yeah we're going to do that let's just go ahead
and oop we don't need that just to prove to
you 1 1,000 there we go same thing okay um and feeds right so here all we're
just going to move that into there all right so essentially in feeds I want to dynamically generate this okay
um for just to keep this simple um I'm not going to change out the picture for right now um I'm going keep it as this
Stacks um but I'll change out the text okay um and let's go ahead and do a CSV
feed okay um and let's do
um heading and um text how about that or
sub uh yeah let's just call text okay heading and text and um so we're going
to go in here we're going to do option enter and we're going to do stacks
Pro is coming comma um you are going to love it
exclamation point and just for fun um let's do a second one um let's do
um hello live stream I hope you are
learning something today all right I just have those two
right so that's my CSV data uh and then uh this is my heading so I'm going to do
um heading and uh I'm not going to do a
full feeds tutorial here today guys but um and this was
text all right um now um in feeds uh we
we don't want to we only want to display one okay so I want to limit the count to
one okay um and maybe for sort let's Shuffle okay so that it it'll randomly
pick one of those two okay to display
so I think that should work no reason it shouldn't let's check it out 1 1,00 2
1,000 boom all right let's preview in the browser so I can just keep refreshing it 1 1000
to 1000 hello live stream 11000 to 1000 hello live stream
again I mean we only have two here so it's there we go so stack Pro is coming
pretty slick I uh I think this really really
awesome uh I like it it's pretty cool again this will work with with
total CS as well um either you can use the total CS integration built into feeds um if you're using total CS 3 you
can use a loop um with the new filtering stuff that I haven't that are shipping
this week um yeah that's pretty cool all I think that about rounds out
the uh this particular demo um and yeah look I got seven minutes to spare look
at that uh let me go ahead and let's check out the chat see if there's any uh any other questions here so we talked about
cookies yep cookie jar does cookie jar um call to action does not use
cookies actually cookie jar doesn't use cookies either um
okay uh be new to the Wednesday sessions are there projects available for later for reviewing and learning um yeah uh so
like this project I'm building right now I'll I'll plop it on the community um
and chances are I'll also take these pages and put it in the foundation demo project or or something like that as well um so that they're always in the
demo project that you can download from the foundation page um but yeah I will uh put a download link to this
particular project that I'm building right now um in uh on the community there's a post for this live stream on
the community you can get it from there um sometimes I'm good and I I remember
to do that other times I'm just kind of riffing and just doing stuff and I don't have a project to give so um yeah today
I maybe I was a little bit more organized I think something like this uh warrants a project file well um so you
can kind of learn from that and play around and do other things um but yeah I don't do that for every live stream okay
but I try to right um cool thank you guys I uh
hope you enjoyed today um really excited uh I think it went really well so thank
you Bill I don't know if you're on here bill um but thanks for um for the ideas
um for coming up with that and I appreciate I think it's really cool you you can then morph this by the way to all kinds of other things if you've ever
gone to my site and seen the um that deal of the week notification that I have you can do something larger like
that a card like a larger card it doesn't need to be this little thing um but I think it's a pretty cool idea I do
have to say I have plans to build a feature like this directly into call to
action okay right now call to action just in integrates with external services but um I think having um
something like this built into call to action uh will be a great thing that way I can I can maybe add a few other nice
little things to have such as maybe like a little cancel button or something like that um and yeah something that would
probably require a little bit of extra code um if you were to do it on your own like we're doing here today okay um you
probably could still do like a close button I don't know I could um
how could you do that you can have a close button that then um if when clicked on it toggle
along click click the close button and then it'll toggle that class um off that
show badge class here I got to try that okay let's let's bump in uh that's a cool idea I think I saw someone in the
comments earlier asking for like some sort of button okay let's um all right so we're going to do uh
we're going to duplicate all we'll just do that on the same page how about that uh well we'll do a new page uh
toggle close all right um all right so in order to do
this we need a close button okay um
so in Foundation um we have a close
button okay so I'm going to add close button
okay and let's just see how that looks 1 1,00 2
1,000 ah okay um um let's position that so um what
we're going to do is I think this has a class of clothes
hold on one second pretty sure it has a
inspect button close it's Clos dash button okay so um let's go ahead and do
that so we're going to I'm going to add it in a position
Swatch position maybe
transform on let's see all right so there's this close
button uh let's inspect that really quick okay and
if we look here there's the button okay and if we look at the Styles we can see
it has some top right so it's positioned absolute um right top so let's let's do
a position Swatch we're just going to override those particular values okay yeah I like that um you could also do a
transform Swatch and transform it up that would work too um and there's
always um more than one way to do things okay so uh we're going to we going to do
um notif badge space. close-button and I have a space here
because I want to Target the close button inside of notification bag uh notification badge okay um without the
space it means notific notif badge and close button and that's not the case here okay so the space matters big time
here very different all right we want position parent uh we want to be to top um I'm
going to do negative um we're going to have to test this out let's do like negative 16 not
60 um -6 pixels okay and WR actually I'm not
going to override the right I'm going to leave the right as it is um yeah let's try
that 1 1,00 2 1,00 oh okay I need the right okay um
let's do right let's do zero let's see what that looks like all uh I need to go up more to like
um 32 1 1,00 2 1,000 okay cool now uh you
can also adjust the font size on this guy right but okay so now uh we need to
add a toggle class here that when I click on this it's going to toggle the class on this okay so let's try that
actually let's go ahead and um let's also do a font style um and we're going to do um node
if- badge um do close
button okay and let's make it like
12 let's see 1 1,00 2 1,000 voila whoa
that's way too small
I kind of like the smallness there um we're going to go a 16 um I think it's now too high though all right it's too
high um actually no let's go with 18 we're going to go with
18 there and I now need to um adjust the position so that it's like uh 24 let's
try that 1 1,00 2 1,000 there we go oh perfect that's exactly what I was
actually looking for right so just a little a little close button um if you wanted you could add like a background color to it as well but um I think it's
just nice having just a little a little X right there right all so now we need to add the toggle so when we click on
that close button it'll it'll make this go away so we're going to
do um Talk Toggler okay and onclick so I
want to Target the notification badge okay um the toggle class um let's
see we want to toggle the show badge class okay and this is going to be the
trigger so the trigger is close button okay that's the class on the button
I think that's it so 1 1,00 2 1,000 boom we got a little close button click oh look at
that there we go now what this I mean with that though we have the same issue
with the CTA thing where um if if this were're using the CTA stack um even if you closed it then and then you had like
the logic um you know that says you know don't show again but it would be nice if
it was don't show again if they close it sort of thing and that sort of feature would have to be added to the call to
action stack which I think is something that it'll definitely be cool to have it's something I would like right so um
yeah that'll probably come in a it'll be a major upgrade to CTA um so but I don't
have any I haven't even started to work on that but today was kind of Al also a curse or like a proof of concept for me for that as well so hopefully hopefully
you enjoyed that um that was cool all okay let's see if there's any other questions uh before
we call it a day thank you Bill I I'm glad you enjoyed
you enjoyed this um let's see excellent thank you welcome Sean okay
cool um think we're going to call it a day guys um that was a really cool one I
think that was uh that was pretty epic I like today I think the format went well didn't really run into any hiccups um
which is fun well it's fun for me like I was I I hate struggling I'm sure all you guys hate struggling too right but um
I'm sure you guys enjoy I know you guys love it when when I struggle or I hit bugs and I'm like ah right but um cool
okay guys I'm off I'm back to working on cms3 so I can get that beta 7 ship this week um hopefully I'll see you on Friday
at the Hangouts super cool go to the community post some questions don't be scared help others um it's a great place
to be and I appreciate you being a part of the community so thank you very much have a great rest of your week go out
there and make your websites great bye