okay here we go setting up the live stream
and we're good okay go for it david what's what's what's
cooking your brain what can we do for you on the sweet button like gary said um tell colon and then
the phone number which i i did assume it was something similar to that i didn't know what to
put in can you do a similar thing with whatsapp for a phone uh i i have no clue did you google it
not yet um so what um what david is about is he
posted on the community and he asked how can you link to a it was a telephone number
right yeah all right and he wanted to do it with sweet button um now there are um
if you're using foundation six um which i think david just wants some features of sweet button uh because i
know he does use foundation six i just i just want to show everyone that there is
sorry i'm launching rapidly over here
all right if you go to uh where all the buttons are there's there's actually a
telephone button right and yep and and so this one works right and you
can put your telephone number right in there okay and then it will you know
works great on mobile it actually works on a mac as well if you have you know configured with your iphone and actually call from your phone and all that jazz
too it's kind of cool works well um and you were also asking about the email button and so there's an email button
here as well that allows you to do all kinds of stuff with like address subject you can even provide the email body um
so anyway so easy stuff there but what david wanted
is the ability to do a whatsapp and so uh i don't know let's see um
what's app link html i don't know let's see
what's that blink in html code um
looks oh so it looks like looking like this so you do i i don't use whatsapp so i guess wa.me
is a is a whatsapp thing and then you put in your number um i don't verify if this wa dot me is
actually a whatsapp thing and not like some no
okay there you go that that looks like it's whatsapp so so yeah so uh i guess you have a number with
whatsapp i i don't use whatsapp phone number on an iphone wouldn't it
uh oh i don't know i don't know it looks like you could so then you could do the number and then you can also provide it the text as well looks like
so i'll look that up thank you yeah so i i just searched for whatsapp
link html and there you go yeah all right the only detail when you do that is that
the number doesn't have to have the zeros at the beginning so for instance i think uk is zero zero forty four like
plus forty four uh-huh yeah yeah get rid of the plus just go 44 and
the rest of the number okay there you go good tips right there
i've i've resisted the urge to get on whatsapp a lot of people say it's awesome but i i don't need another
another app messaging app to use all right thank you no problem
well the macbook pro arrived today earlier so i'm setting up sweet
davide just got his as well right he's loving it mine's delayed for another two months
delayed for two months oh no i ordered it over a month ago and it was
supposed to be here um this week actually and they just sent me an email sorry not till the beginning of
july wow yeah that's a bummer yeah
really it's not only mexico i feel better now
we ordered it once on monday in it right no tuesday and it
arrived today so wow lucky
and it didn't cost me a penny well i've got a question sure it's an
issue um positioning in uh in um
[Music] mobile on desktop and i assume tablet i haven't bothered to look uh the header
is fine but when you move it down to mobile the tagline moves down into the
graphic uh i'll show you what i mean and so i'm wondering how to
this is a challenge because i'm not really that i guess i have to share screen right
or if you want to give me the url i'll share my screen oh yeah okay livingmind.com
okay let me uh let me go ahead i'll start sharing my screen
livingmind.com yeah i decided to throw up really something simple since my old one was
from 2014 and i never bothered with it okay when you shrink when you shrink it down
the information architecture and communications design you can see how it goes down into the uh the image is there a way to
uh handle that now that's with a uh big white duck side bar
stack is there a way to handle that so that on mobile it may be
i can redesign it somehow so you're using the sidebar stack
um it's a header pro stack no oh hold on let me check yeah that's that's a header
pro looks like oh header pro with a um
segment that's what he calls it yeah easy peasy i like them easy to use
i'm not sure how to actually recreate that using the built-in foundation six
uh so i do tend to go back to what i'm familiar with sure
um but right and essentially what what you're doing is you have
you have a header living mind and then this sub segment um you wanted it to be a little bit away
from the header i i assume right yes yes and you know i'm happy with where it is
on desktop but on mobile so the positioning how to control
positioning using i don't know if it can be done with the big white duck stack or whether
um so if you wanted to keep using header pro uh probably the only way you could
do it is to hide this one on desktop and to show a different one on mobile that
has different settings okay challenge how would you accomplish this
with f6 let's do it okay because i still don't get them the
positioning all of this stuff it's just surely you know i'm not i'm not doing much stuff anymore so to tell you the
truth i don't have the opportunity to put it to work and and really dig in
so but i sure would like to know more about positioning
sure i would say that's impossible you would think this is impossible [Laughter]
okay um so in order to do header segments
okay um there's a couple things that we could do okay um
first i guess i'll start off with the least amount of technical
the least technical implementation okay so i'm just going to do this is my header and then we're going to add a
small segment which is small segment header okay and let's just quickly preview this
i have uh here let's change that small segment it's like really small and it's really
gray let's tweak it uh so we want uh we're just gonna make
the small segment red so we can really see it and then we're gonna make it a little bit bigger we're gonna do
all right so we have a header and then we have our our our second
segment of the header okay now traditionally this was used to be smaller but i made it 90 percent the
size now let's make it a little bit different so it's uh so and i did that in site styles so in
site styles you can control the small color by default and then the small size
now the small size is a percentage of whatever this is right so this is
this particular one is an h3 so the small segment is going to be 90 of whatever the size in h3 is one question
joe looking at that how in the world would you know that the the word small in sight styles actually referred to small
segment header how do you tie those in um so i mean i i have it here osmosis uh
well i mean uh this comes from h1 from foundation one i'd had the same exact thing so i know it's if anybody used it
right and i mean in in header you have small segment so i mean small yeah um so wherever you see
the word small we're supposed to dig into joe's brain and know oh by the way
well you know there we go well now you know and knowing is half the battle
yes okay so there we go so uh so here we have the
small color and so you can have the small color again it's all grouped with the headers yeah
and then here the sizing is all grouped with the headers as well so um so there we go so now we have this
small segment on our header okay um
did i make it and i made a little bit smaller there we go all right so but in your example you wanted like this to be
a little bit off and kind of on its own a little bit right right so can you can you apply um
padding and margins and stuff to just that small segment header yep
okay so let's go ahead and uh let's add in
now now i guess you could do padding and margin uh i'm going to do something a little bit different i'm going to use a
transform actually here i think padding and margin maybe is a little less scary so maybe
maybe we'll do that it'd be interesting to start off with the real simple for dummies approach and then maybe take the
next step of what you can do if it adds more i'm not even sure margin did you use margin and padding in header pro is that
how you used it i'm not sure i'm not sure that will work but let's let's test it out all right so let's add a class to
our um header so um i'm just going to call it my header okay
so in here now i don't want to target i only want to target the small segment in
the header okay um and do i have i don't know if i have small in here i
don't think i do okay so we're gonna have to be a little bit clever here so we're gonna do class
of my header and i'm gonna do space small because i wanna i wanna only
target the small segment inside of my header okay and um here let's start adding some
stuff let's just do something big 160 pixels let's see what that does just by adding the word small to the class
foundation six knows it's only going to target the small segment header part
exactly it's space small so what this does is it says find the class my header
and then and then find the small segment inside of it how would you know how would you have
known to do that um you asked now yep there we go um i mean so how would
you have known okay so um
so let's look at what this does
all right so here is my h3 we see i have h3 and the
class is my header you see that correct yoyo okay um and
and then here is the text that's a part of the header and then here i have a small segment
right so this small small as the actual tags right the html tags yeah um so here
what basically what we're doing is i want to find everything that has the class of my header and then we're
targeting the small things inside of it interesting so because it's built into the code
of the header part and tagged as small that's how you can add it to the class
exactly okay now yeah now i mean that's pretty much what header pro does to be
honest with i mean it doesn't use small it uses you know other things right but if if we were to just target that um
you know if we look at him here's he just has you know here's your main one segment here's another segment
okay um and so you have two different segments here and we can do that with foundation six
as well it's not quite it's not all done in the settings and yes i mean something like this is a little bit outside of you
know just adding it in and you might need to know a little bit um but it's definitely possible
okay but um let's get back to this one example okay um
nice now we have small i added some margin if you notice it only added it to the sides though it looked like
um so i wasn't sure that was gonna work
actually yeah it added it's all everything but okay it didn't shift it down i actually
wasn't expecting it to shift it down okay so margin does add some space between the main header and the small
segment right okay but it doesn't move it down and that's really what you wanted right
okay so um i'm gonna i'm gonna scratch that and we're gonna go back to my original idea
um which i think is uh the way i would have done it which is something called a transform okay and
all of all a transform does is it allows you just to move things around the page from where they're currently are
okay i think transforms are simpler than a position swatch which you could use this with a position swatch as well but
i think that's more confusing transforms are a little bit easier to use okay so uh we're gonna put my my header
class in there and we're going to go small all right so now we're targeting a small segment
and what do we want to do so in transform we can move things so i want to move them
and um i'm going to move it let's say 50 pixels over and 50 pixels
down if you saw that little black square it moved right that's
what that didn't work i was expecting that refresh look at that
i was expecting that to work
do we need a perspective i don't think so have you tried the any key
[Music] the hammer
use those hammers didn't that work i was totally expecting that to work
do you need more content on the page oh it could yeah you could be there look
at that [Music]
actually when i put display block it's completely gone that is craziness
check that out
jody broke foundation no this isn't foundation
sometimes yeah that's interesting i'll tell you this is this to me is one
of the most frustrating aspects of using any kind of web development platform unless you're working with a
template i'm so used to the old days of page maker and indesign you just put it
on the damn page you know when it gets where you want it to go um so using all of these sideways tricks in
the classes and the targeting and this and that at some point it's like you just want to throw up your hands
i don't know what what um isaiah's long-term
plans are for stacks but if there's any way to construct almost like a grid
system where you could then take blocks and things and drag and drop them and simply
by moving it the system calculates your margin your your positioning all of this
stuff it's all done automatically i mean so there's a problem with that actually jody so uh the problem with that is
um well yes so i let me just say that i i agree
that something like that could be nice someday to have some sort of positioning system however
um it is also by doing that by just say allowing you to drag and drop and then a you'd have
to do that drag and drop on multiple devices so you'd have to drag it on mobile define where it is and drag it on
desktop define where it is right so you'd have to design your site potentially three or more times because
you have to position everything right well why is this isn't that done now automatically if
you're designing a rapid weaver project and you drop something on there it's automatically usually for most things
going to work on desktop as well as mobile i mean that's the beauty somebody yes
and that's because you know developers like me try to make it you know um you know as easy as possible and try to do a
lot of those things for you automatically right um but another thing that we do that you
probably don't even realize is um is like standardizing so like when we
define you know spacing and margins and and things like that um a lot of times
you know we're we're using a standard set so that all your margin your spacing throughout your page looks good and if
you if some were users now you're probably an exception because you are talented at designing things but a lot
of users if they were to drag and drop and position things where they want it would just be chaos because
they would be defining you know this over here would have a spacing of 20 pixels and down here it would be 16
pixels and over here would be 24 and it would be like nothing would be spaced properly and it would not look 100
okay but anyway we're getting down uh we're getting down a a rabbit hole okay so
it's it seems like within the foundation six stacks that what i'm trying to do to make to correct that spacing for mobile
is not possible then using uh the big white duck stack the header and the segments is there a
way to i'm trying to remember if he's actually got a different set of settings for for mobile
um i'd have to go back and check so how do i correct that so that mobile
display is better um so again you would you would use the
visibility stack and you could hide the one that you have there now on mobile and then show a
different one on mobile that has a different setting so i would create a separate
header stack separate header stack yes so essentially
you would do this now i'm sure i could probably figure out how to how to do this in foundation six but it's not as simple it doesn't have baked in settings
you know uh like header pro does okay so let me show you how to do this did you try to force it joe
uh no the transforms aren't even taken it's not it's for some reason the small segment doesn't even take the transforms
period it's it's weird i was expecting it not to i'm sure i'm sure if i used a position swatch that would probably make
it all the difference and maybe after i show jody this we can play around if no one has any other questions
maybe maybe it'd even be easier to have two different headers and forget the whole i just decided to suggest yeah you could
do that too and that that could be totally the easier way to go about this
right so um let me show you this visibility thing so we're not hopping and jumping all over the place just
really quick because it's a simple concept that i think a lot of times some people try to um they try not to use visibility um and
then they go they spend hours of time trying to make it so it looks great on everywhere creating either swatches or
doing other things where just a simple visibility is okay like sometimes especially with menus
some people are like i'm trying to morph this menu to do i have this crazy menu on desktop and i'm trying to morph it to
look better on on mobile i'm like well just hide it and do a different menu on mobile like you know
you know just make your life simple it's okay um so what we're going to do let me go back to visibility so here's the
visibility stack okay it's all with the columns and the layout stacks
so you would do this right and then this one would be um let's say this one we show for medium
and large okay and you would just copy paste that and then this one is or we'll just do
a mobile menu okay
and then this one is going to be um show for small only
right so now you have two and if we preview that
so here this is the one that's on large and if we go all the way down oh
stupid safari i hate that doesn't go all the way down to modes drives me nuts
so we go to responsive mode there it goes it says mobile menu
okay okay so and then at that point your your header pro settings can be different on
the mobile one obviously right yeah okay i'll fool with that i think that's better is using two headers
and and designing one for mobile so you use two visibility stacks stuck one
and then that then stuck the mobile in the other yes exactly okay
all right i'll fool around with that yeah and someone had a great comment why does it need to be one header um
you know yeah you could do two i mean that kind of is a um you know h1 h2 sort of thing you know um you know
so you know that's definitely you know an easy solution as well so if we did h1 for this let's take out the small
segment we have this and this is um
this is my sub header okay um
and then this one was in h2 okay and uh let's just do like color alert
okay just so it's something um and this is uh let's do some
title on this one and we'll just leave that one as the main okay so now let's preview this
all right so i have two headers header one header two right yep let's get out of uh
responsive design mode right and essentially this one you wanted it over here
okay um so here let's let's try this transform thing now i did sub title i
think that is [ __ ] crazy what am i doing
wrong here
where is that getting transformed if your perspective is at 500 pixels is
it above the page no i'm not changing z
see overflow hidden oh [Laughter]
jesus christ that was probably what was going on with that with the small as well
is that checked by default uh yeah overflow hidden's on by default for containers
um and there it is
man who said that gaston good job bravo who knew bravo jesus respect for yoga stone good
job thank you okay now i gotta see if that was if that
was the problem with it with this one i bet you that was all right so now we got there let's put
in my header again jesus i'm such a rookie sometimes look at that
guys see yeah um so if we go back to
uh my small header small okay
um nope that's still oh uh but
here i'm interested to see i think it needs in order for transforms to work uh we need it to be a display block
which most people probably wouldn't even know but let's see if that works
that that's that's what it will do okay interesting
good job but um so yeah i've seen a couple of different ways of
how to approach it different ideas and how to work it but that's always a thing with me is real proper positioning
usually in all your videos you're keeping it simple it's just blocks of stuff but i like to really refine it so
knowing what tools are available to me both within f6 or big white duck or anywhere and how to refine that is
always a challenge i i do i do really like the idea whoever whoever said that of having the two
headers that would give you a lot of you know it kind of removes a lot of it um yeah
you know the the details of that small segment and trying to rip it out and move it and stuff like that um whereas
you know just having it um as two um you know and just an idea of here
let's do let me set this back up again sorry
makes maintenance and debugging easier yes
kiss keep it simple stupid right okay keep it simple and smart these days oh
there we go that's a much more polite way of saying it okay you're so polite you must be from canada
originally scotland [Laughter] okay um what was i doing oh we're doing
transforms so we have this subtitle all right and i did move it down
but let's move it like over here let's do here let's build out this little container that she wanted so let's do um
let's do uh oh i'm gonna add some classes to this so
we're gonna do h colon 50 vh to make it 50 height for the browser and
we're going to do bg black okay
so there we go now we got our our main header and we want to so this one what it did
right let's remember what this let's look at this what it is first default
okay so right now i have uh my banner okay and then i have a header and i have
my my other header and i want this one over here okay so there's many ways we can do it
we can either just move it from its existing position okay and transfer it over here
and uh we could do that easily with transforms so when i apply this transform it's going
to move it here we have move it 50 pixels to the left and 60 pixels to the right
um let's say for horizontal though i want to move it all the way over so let's do like uh
let's do a percentage let's do 100 percent and why we're going to move 50 pixels
down that's okay let's see what this looks like oh that's 100 way over there so maybe we
just do uh let's do like 250 pixels over
okay maybe that's not enough you can do 500 pixels you know
so there we go right and maybe 50 pixels down is maybe too too much so we got 20.
okay um so there we go you know it's always going to be right there
but um on mobile not going to look so great yeah
right so what can we do okay so then um what's big responsiveness is baked into
every single swatch okay so i'm going to copy this transform
okay and um on this one we're going to say oops small only
okay and i'm gonna take that x or the the move yeah the move x and make that um 300.
well let's do small and medium so that i don't have to go into responsive design mode okay
so there it goes um okay okay so so i have this and then um
and as i go as you saw it shifted over right on desktop but then it the swatch the style changed
uh when i told this this swatch this media query to apply this style to small and medium
okay okay so that's how we can um you know use swatches to customize our
styles um you know for particular devices
okay great okay thank you great question jody thank you very much
um here's another fun one actually okay uh just to kind of go off so jody you
had um oh yeah you have two different colors here
right you have this and let's say you you really wanted this to be one header you don't want it to be two headers you want it to be one i can
understand that um and you want them to be two different colors so how do we do that
so i'm gonna paste your code in your your header in here and let's do it
okay so um first off you'll notice that you have um it's on a new line right
okay um so what we can do is um you could put
in a just a br tag br is a is an html break
so in a header you could just put a b b uh a b r tag okay it's just greater than
b r you know less than or less than br greater than okay um so off the counter
that is just um how would you know that well now you know okay um
standard html yep it's just yeah this is pretty basic html okay so you know you
can see basic html so br is one of them or you can just add a new line into a header
if you google it and and add uh h3 after the uh
what you're looking for it will pop right up in the html uh design screen there we go how would you
know how to offset then that second what comes after the br and communication
let's uh let's do so first off let's deal with the colors okay so um this is
gonna require a small a bit of code okay so um so we're gonna create our own
small segment okay i guess you could do this with us all so i get but um
i'm just gonna do a span and we're gonna give this particular snippet its own class
okay and i heard let me let me do this so i know this is probably super small for you guys let me go ahead and let me
open up a text editor so we can actually see what i'm doing here a little bit a little bit bigger
and this is the easy way to do this um oh i didn't say that i can see i'm
delighting steven over there i didn't say that but the fast way it's it's the proper way
okay um and it's it's not rocket science i i
mean we'll let's do this [Music]
if i can type it's bigger all right and let's get some syntax
highlighting so we can see some stuff in here all right um
i'm just going to call a segment okay header segment
all right so here i have my um my header okay and what i did is i
surrounded this this bit here that we wanted to be a different color okay i just put it in a span
okay um you can add spans to text all you want okay this is a very powerful thing you
can do this on all in normal text and paragraphs if you want to highlight a particular word or whatever
so if you just want to put in a span and then you can give it a class
now the class just makes it a little bit easier um we we can do this without this class as well
okay um in fact if the does the class scare anybody here
moderately i guess it depends on what class okay uh well
let's do this let's do this this way and then i'll show you how if this class scares you
does does her jody does this does that make you less scared
no it's just that i i know you're going down this this rabbit hole joe of of
showing different ways to doing this but it's geeking out to the level where it's not usable for me
pretty much so that i was looking for the built-in simple ways which is why i always like you highlight it you get the
color thing you get the color dropper and you color it you know it's just it's a visual way to do something
a simple way to do something without getting into the code so to me anytime you can give that
approach to more people you're you're really doing a service
fair enough um so
let's go ahead and i will keep the class in then since it scares you with or without so we'll we'll leave it in
okay um so let's just copy this
and i'm gonna put that in my header okay doesn't look any different here yet
okay what we're going to do is i'm going to add a uh up here we're going to do a font color
okay and um the class that i added was header segment
all i'm going to do is i'm going to i'm going to target that class and we can give it color
i see we see that in edit mode you can also use your swatch colors as well right so if you want to give it a
success color which is all the colors that are defined inside site styles okay um so that way you're using standardized
colors instead of everything being its own custom different color and if you want to change it it's a little bit
easier now okay um so that's easy way to
to target that okay so now we have um this and we have that
okay now you wanted to indent this correct yeah well now that now that this
particular element has its own class we can easily target that okay um so let's
just go ahead and add some padding to it so i'm gonna go padding we're gonna
target the header segment class and um let's just add 16 pixels
and there it goes okay yes okay i see what you're doing now within the bounds of f6 okay okay yeah
so so all i did is i i added my own class to this little bit of text and now because i have a class i can easily
style them i can change the color i can add padding to it um you can do all kinds of other stuff
all right and i would still have to resort to the visibility issue for the mobile
um yes if you wanted to use the header pro um but like i said here i was using the the
transforms uh and uh in this particular example um and you know i i created two different
transform swatches but this particular one here is on mob is small and tablet only
oh so it's is it the same concept the visibility with transform
i mean similar so it's somewhat similar yeah it's a little more efficient because i
only need one header on my page now i don't need two right so this way is just a little bit
more efficient um you know which is why we were saying this was the better way
okay do you have a video on the transform on the f6 yes i do yep uh yeah on the
foundation stacks.com demo um there's um i think that's the transform swatches
are part of the swatch pack so that but there is a video on it okay and if you want i can i can save this off and i can
put this in the um i'll post the link to the download of this uh on the uh the community on this event
so where where this event where this live stream was i'll put the download link to this page right here afterwards
okay okay so it's part of this it's part of the swatch pack it's not part of the
yeah the transform anything that has this little plus button and it's probably small for you anything has this plus button it is a
um a swatch pack stack okay okay okay um but there are other ways if you if
you didn't have a swatch pack like there are so many thousands of ways to to do stuff right um you could use a position
swatch to position this as well um so so many different ways would you say
that when anybody a new person or a beginner is approaching this and they
don't have the swatch packs they just have the basics that the easiest way to begin to
understand how to position elements would be to use the positioning
um yeah so here let's go ahead and do i'll do another example with the position swatch okay
so i'll do a set well so we have both examples here uh i'll just title this one with uh what was i doing
subtitle here let's do position or we'll do subtitle two okay
um subtitle pos there we go
um so let's preview that okay so here's my subtitle to this is my
example down here this one up here we use the transform and this one down here i will use a position swatch
okay now if you notice down here i still have all the colors and the little indentation because classes are the same
right so um that's nice i don't need to restyle all of that
so let's go ahead and add a position swatch
uh position okay and we want to position
the this header this subtitle pos
okay um now one thing because we want to position this
and we're going to position it relative to a parent okay um the container is the parent yes the
container here so in order to do that if i want to position this header relative
to this container the one key part here is we need to
set this one this container here and tell it that hey container you are now
positioned relative we want you to be relative to something else inside of you
okay so we need to tell it that that's an important part of the positions watch
okay and i think if we wanted it to be the columns there's i think there's also position relative on on all columns and
containers okay so on this container i've i've told it
mr container you are now position relative you are in charge of any positioned
children inside of you okay so we're going to go in here and by default it's this is going to be
relative to the browser it's going to be fixed we don't want that in this case we want it relative to a parent
okay and the parent we defined what the parent was by making a position relative
so now that's all the hard part setting those check boxes
okay now we can set where we want it to be so um let's do it a percentage let's do
top 50 and maybe left fifty percent
all right let's do like thirty percent i didn't think we want it that far over all right let's preview that
so at this point um it's it's going to be positioned relative to here let's give this particular one a different
color background
oh that's a horrible one joe is position relative is that a
synonym for parent then um yes
well yeah so whatever that your parent is whatever above it is set to be position relative
okay um so here i have my this blue box is my
container okay and we set it to be top 50
left 30 percent and that position is the top left corner of your content
so the top left corner um is going to be at 50 um or top 50
and left 30 percent so it's at 50 the height and 30
over is this corner right here i don't think that we kind of want you kind of wanted it a little bit up so i
think top 50 was a little much and that's relative to the top left corner of the parent exactly that's relative to
the top left corner of the parent that's very helpful this explanation
okay so as you see there
um you know we might want to and again let's say on we're getting smaller maybe you really
don't want this to break lines like that you know so what can we do okay well um
let's say we love that position on everything but once we get down to this it's a little bit off right so we could
then tweak that uh create a copy set this one to be uh
for small and medium okay and then we can set the left to be
20 so there we go
so you just have to fool with it now let me ask you this joe i have found the built-in rw
simulation to be absolutely ridiculously bad um would you say that showing it in
preview in safari like this and then uh that's how i've all that's how i've done it for so many years it just command p
is yeah i mean it's so simple command p previews in your default browser i mean it's just it will be the you find it the
most accurate way to represent the data yes mobile's okay good yep uh and you know the one thing
that's i i mean i wish i wish safari would shrink down far enough so i don't need to go into you know responsive
design mode um but even that is just if you know the keyboard command it's ctrl command r right
um so um you know and this this view is very very good right i mean it's you know
um also three years on mobile shrink safari even more if you want to uh
get safari as small as possible get out of the responsive mode and uh and open your bookmarks
open your bookmark oh brilliant davide
nice good job buddy [Laughter]
dominic gets the gold star for the day yeah nice one you know if you uh shrink the
browser from the bottom too all the way up and then open your bookmark bar
and go for the make sure don't design websites for this view please i'm just going for a
cartoon man orange yeah make it more orange man yeah more
orange always more orange okay thank you very much this is like a
variety a nice overview of all the different ways you can approach it okay
okay here one more thing for fun uh i know you were potentially scared of that class that we added to this band okay
i'll i'll show you how we how we can get rid of that if you really wanted to okay so let's
last bit here okay so let's uh let's go up here i'm just going to
i'm going to paste that in the class is now gone it's no more scary class right but but now all our styles for
that little segment are gone right because we were styling them off that class okay
so um hopefully it doesn't scare you to add a class to this header right no i
add cl i'm fine with classes i use classes a lot okay cool um but just for
just for fun it's a similar thing remember how we did the the header my header space small
yeah okay well this is the same thing all i'm going to do is i'm going to put the class from the header which in this case is subtitle i'm going to do space
span okay and that's the same thing
okay because in this in this header
right um i have my header here and then i'm going to target the span inside of it
okay so that works as well if you didn't want to but i i just think if if you're okay with putting in the little clasp
inside the span just makes life a little bit easier where is that i think it's this one
okay so um but what's nice is i this this particular code subtitle span actually
does it works whether or not you have the class or not okay but let's go back and put it put it back
in so when i send this off to people i think this will be the nice the nice way to go about it
cool that was fun
actually i i had a couple support tickets this week about positioning and i was like you know what i need to do a better video on
the position swatch so i think that was a pretty decent uh decent explanation there starting starting with the
extremely simple way and approach it step by step and then you know how i
explained it right now was that good yes but without going into the code
just simply stick to what stacks you use what you need to
you know what you need swatch you need to create how to apply it simple without going into the code or
anything like that so okay that'd be great perfect i have a question joe yeah
how do you uh i assume you have some automation going on to uh make your stacks icons
are you doing that with affinity or what are you doing uh oh for like foundation
no for yeah for like all the different size icons you need for your stacks oh yeah i have a i have like a ruby script
i think that that just generates them off one um but you could easily do that with
affinity as well um um so yeah affinity because in affinity
you can export multiple sizes and you can just ex you know and then export all the sizes you need and it'll name them
the names you need as well um i did do that for a long time but i've kind of automated that into my old
stack build tool now [Music]
um oh another uh i actually created a workflow using do you have that um
that what's that uh app from flying meat um uh
batcher oh retro batch retro batch thank you retro
batch that's this would be a great way to do that
uh because you can just uh take one one image at 512 and just say
generate these six images that i need this would be the way to go and if you want it this is a great image automation
tool cool i'll look into that
veteran badger uh let's see uh there was some chat some
let's see some things in the chat is it appropriate to ask if rdb will be usable with stacks
i assume michael you're talking about rapidweaver9 and stacks 5. so i've yet
to talk about any of that on a live stream and um so
rapid reaver eight and stacks four will continue to work um indefinitely
okay so that your current setup um will work for years to come
i don't expect that to not work for at least two three or even more years
okay um now new things coming down the pipe that um
i should say everything i'm about to say is stipulation we don't have any of we don't have stacks five yet not even i do
nobody has rapie for nine yet so um all this is um
coming down the pipe however stacks five will not work in rapid beaver nine
okay um wrap your nine um uh it will it has decided it's going to create this
new competing thing called elements and um i will not be shipping my
products for rapid over nine elements either um so but stacks five is in the work
i've actually seen it functioning um i have nothing that i can show you um
but i have seen it and um it is a standalone app
and what is amazing is if you like your current stacks interface stacks five the
standalone app will feel very at home for you okay
um it will be like nothing changed you'll be able to shut down rapier eight launch
stacks five and continue your work um just like you were yesterday
okay um so that's a good thing um all of my products and every other
stack developer um is supporting stacks five there are a very small number
i think currently only one that is has decided to support rapweaver9
elements okay to my knowledge so um
that's that there's a lot of other drama going on in the background i'm that i'm not going to go into right here you'd
like to check i've posted forums there's an faq on the community as well and i'm
happy to answer any other questions that i can um but hopefully that guidance gives you guys a
a little overview any questions on that
nobody okay ice cream to come out yeah yep me too like i said
it is just a quick one joe did you send the 800 you saved on the wine
or some of it [Laughter]
yeah so what he's talking about if you guys didn't read my last news the newsletter from yesterday is i i changed my alternator my car and i say save
myself 800 bucks so um yes i did spend a little bit on that wine actually yes i did thank you very
much um uh yeah let's see it's good
yes apothec wine uh it's pretty pretty yummy they're actually pretty local to me they're in modesto california which
is like 40 minutes from me um so yeah although sadly they don't have any
sort of like winery that i can actually go visit so that would have been cool but anyway
okay so let's see she might be trying to say oh let's see google for example html breaks okay yep
bill's talking about that before we go i have a total cms question oh that james you want to go ahead and ask your
question james well my question is just what i wrote ah the question is is it the total cms id
that allows you to have multiple blogs within the same page of a website
yes so you can create as many blogs as you want and the key to that is the id so you just give your blog a different
id and you magically have a different blog so if i have five separate authors
each author will have their own total cms id
that's correct yeah you could definitely do that so yeah that you know that's i know a lot last week we were helping you
you know creating these filters by author but you know what it could just be easier to create five different blogs
that just seems like the easier way to do it yeah uh that is a that is a very valid thing um you you'll i mean i guess
some side effects of doing that uh would be there there would be no way to have a
single view a single grid of all the events because you were you're creating
events right for each of these people right so you know you wouldn't be able to have a consolidated view of
everyone's events that's intermixed you could have a blog list on top of a blog list and kind of make it somewhat look
like it's a single view but not really right does that make sense could you create a
a blog that creates an aggregate like a calendar of all of their events
so but that uh but then that would mean that you'd have to like add each each event twice
right because you'd have to add it to this aggregate one and then add it to their individual one so i'm not sure so
that doesn't fill so you wouldn't create a blog that allows you to filter upcoming events by date only
you do that with tags don't you know dates yeah but not not across different blogs
so let me back up every so he's creating a blog everyone that has events uh i
believe it's for a church correct james yes okay and um there's five potential
authors of people that are going to be creating these events and on the hangout last friday we helped
him figure out how you can um each author is going to have their own
um they can only edit and view their own events
so we show them how you can create filters so that the author can only access
the you know their stuff okay using basically each each author there's
five of them would have their own total cms login and that login is filtered by
their off by their author id okay um
and that would definitely work and that that would give you a unified grid uh so you can you know display all the events
at once or display you know the next 10 events or whatever right um and then you can also filter it by
you know author but um you know it does have a little slight complexity on the
back end uh where you have to create multiple you know pages for each author but
if you have multiple blogs for each author you still have to do the same thing
right um so i and i now that i'm speaking out about this all you know all out loud
it's about the same amount of work so you're not really saving anything other than maybe the complexity of having that
filter in your brain um you know is is simpler if it's just this person has
this blog this person has this blog this person has this blog right i can see how that concept is simpler
but the drawbacks i think could be greater
because because at this point let's say on the homepage you wanted to show the next 20 events
regardless of who the author was that you wouldn't be able to do that if each author had had their own dedicated
blog does that make sense i think you lost me on the last bit okay
so if so let's say on your homepage you want to have a uh a grid a blog list that
lists out your next 10 events correct okay um if if all of the events are inside
the same blog that is like a piece of cake right it's easy to filter it that way however if i
have five separate blogs created it's going to be much more difficult yeah what you would have to do you'd have to
have a blog list for each author and then be like here's the next 10 events for mary here's the next 10
events for george or whatever you know the other people are right so you wouldn't get a cohesive view it
would be they kind of be stacked on top of each other which wouldn't really be great
so the first way by author with the same cms
id is the best way to do it yes it is okay
because that's ideally what we want is the best way to do it yep that that is the best way to do it perfect thank you
sir no problem
uh so to run total cms you'll need stacks five so mike asked me if you need um no so total cms will run
um in stacks four and stacks five but total cms will not support rapid ur9
elements so hopefully that answers your question mike um none of my stacks uh will support rap
river nine elements um right now
joe yes is there a limit to the amount of total cms fields on the page
so gaston had a had an issue today uh where on his admin side this is mostly
on the admin side so uh and he had guess guesstimate how
many fields you had on your page just take a wild guess i don't know i think like uh
50 plus okay um so at some point
uh his server decided to sporadically not display um when he logged into the admin area
not every admin field was getting populated with the content from the server
okay um so what's going on is whenever you log
into your admin area in the background total cms in your browser is
connecting and querying total cms on the server and saying give me this header okay thanks give me this image what's
the status of this toggle give me this blog list give me you know so basically for every single
admin area you have in your admin area or every admin input or whatever you
want to call it um is is queried on page load and he had 50 to 100 of them on the page
and so that means every time you load the admin it's creating simultaneously
50 connections to your server saying give me all the data and his server was going
right basically that's the technical term for it yeah um
and in the now if you looked in the browser console he saw something like server resource
limits reached or something like that okay um so that gives us a clue his server
was getting overloaded okay and so the solution there's two solutions
here okay um you break your admin page up into multiple pages
so that when you load a page less resources are loaded okay you know a lot of times people will
you know they'll break their admin page up into like tabs or an accordion and they'll have like they think oh it's
nicely organized right but um you know because you know i have 10 tabs and each
tab has 20 things well all of a sudden you have 10 tabs each has 20
you're like that's 200 connections right so break some of that stuff up into different
admin pages another if you really didn't want to do that another thing you could do is uh
get a more expensive server because i mean the server was getting overloaded i see this mostly with shared
hosting accounts um i don't see it too often with vps's um but it doesn't say it's not going to
happen right because uh yeah some some servers just can't handle that connection especially on shared hosting
so joe a question on that thing when you speak to that is that sort of like what
you were speaking to the other day when you have one person who has one really
long web page that goes on and on and on in that if you're doing the same sort of
thing on the admin side the admin side's calling for all of that information to be pre-loaded in advance
and yes yeah and it just causes your server to crash or yep exactly stop you're asking
for too much all at once yep exactly okay
and what happens when you do a one singular one when you do a really long web page
without breaking it up into the containers like you had mentioned yes um yes uh although i mean
in in that case browsers limit uh requests of like images and things of that nature to six
at a time so that it doesn't um you know uh quite uh you know
you'll you should never get that to on an active live web page the way total cms works in the background
um it doesn't function like browsers don't limit those types of requests okay um like they do images
so um the browser just allows if you have 50 it just goes you ask for
50 here's 50 let's go get it right um and yeah that just can overwhelm the server
okay thank you no problem so yeah the structure is basically you
know um you know a lot i know a lot of people basically mirror their admin side mirrors their content side so like
they'll have you know if you have cms areas that are just for the home
page have an admin page for your home page and then if you have a uh you know stuff
that's just for the about page or the contact page have admin pages for those pages as well right so you know
basically mirroring your your admin side to your content side um
that would uh you know eliminate this you know and i think that's a logical separation as well
sorry what what what did you say that batch size thing was called retro batch i can't find it
it's um flying meat.com
it's the same developer that makes the acorn app flyingmeat.com
i remember i had it like does it does it require a license because i just downloaded it but i remember i bought it
uh yeah it requires license they have two versions a regular and a pro version um i bought the pro version but i don't
think you really need it
can i uh confirm my answer on the the data store that i was asking about in the
on the community page about total cms and dollars oh that was you
yeah that's me i gotta change that photo now but um
so i i was trying to figure out if there was a easy way to get
a survey information something from a forum into a
csv file on the on the server now and i really like your the foundation six forms are pretty good exactly what i
want but there's no easy way to get them into a csv file right so yeah so two things um so hey
you said datastore doesn't you like data datastore but datastore doesn't have like some of the form of options that
foundation six does right so um and do i have better forms planned in
total cms2 yes um of course most likely prior to that though
prior to total cms getting shipped um i may ship the next version of post
office which i think will have a csv population tool and and post office is going to morph
into uh something different than what it is now currently post office like actually has forms and then you can like submit
to stuff the next version of post office is going to be basically it's going to be form actions for foundation 6 forms
it will support any other form but um you know there'll be there'll be actions that you can add so like you know adding
to a sql database that you know people have been wanting for a long time with foundation six
um you know you know and then obviously integrating with things like mailchimp and convertkit and you know things like
that um and then also you know something like populating a csv file
yep is that is that before is that after the animations but before total cms
um uh you know what i i really want to get i don't want to make any promises yeah i
really do want to get total cms2 done um so you know and i have said multiple times that once i get drift out the door
i'm like all in deep work on total cms2 uh you know because i really want to
have a beta by the conference this year good because i i watched all of the
all of the videos from the 2017 conference on total cms and and they were really good and i'm looking forward
to you probably need to do the same thing for if you can get them you know ready for this next year that'd be great awesome
yeah um so yeah i'm hoping to get it for the conference this year i want to get hopefully a beta out by by that that's
my that's my goal yeah i spent the whole weekend watching uh all the videos cool
actually ready to getting ready to buy buy the mercury five a day oh nice oh
good that's a good one you got a lot of joe this weekend
yeah yeah if you would like if you would send to that instead of like no that's a good one if you had
said oh that's one of my most disappointing products that would have been pretty weird [Music]
oh yeah don't get that it's [ __ ]
we're just the home page all the rest is fake yeah there you go
let's see let's see oh someone asked a question let's see could i get an opinion on how
to make a better summoning you look better it's the critter link here all right someone some feedback on this page let's
have a look let's share our screen here
[Music] okay so
if you click on that critters link oh this this link here
so it's not what if not what about yeah what what menu is this now
that's an accordion yeah yeah um what about a vertical drop down so
that when you when you hovered over critters it just came out over here
oh menus can be vertical as well so um if we go to ignitionstacks.com demo
let's go to navigation anyway andrew i really like what you've done with nero there
i think it's a perfect way of using mira like those big pictures they're beautiful it's it's great
i think that's it's a it's a great design i'm david i love working with it
thank you what do you what do you think about this i mean that kind of solves all right okay yeah right
so that just uses the the drop down menu um in foundation six and there's just a check box in there
that says make it vertical and there you go yeah okay we'll play around with that
yep um one caveat is uh drop down menus they're a little funky
on mobile devices so um you might want to if you're going to go with this vertical drop down
you might you know want to morph that into an accordion on mobile instead well nero uses two different uh there's a menu for
mobile devices and i don't want for decks okay cool yeah perfect he won't have that problem
cool it's what you were saying earlier joe with the two different headers um if you just create use visibility to do the um
two different two different areas same sort exactly and some stacks actually think most of the menu stacks because i know a lot of
people are going to would want to do that i think there's even a visibility baked into the menu yeah so visib you
know you don't even need a visibility stack for menu it's baked into the menu as well okay there there's a few things that i
think are common you know things that you're going to want to do um i think containers yeah containers
columns and menus maybe a few other odds and ends um have
the visibility setting baked in and these are all they have the same exact
settings as the visibility stack so
cool does that help you out yeah yep let's see
okay do we have access to the conference link yeah so james the conference if you've uh
got a ticket before you can always access all of your um all
the videos at the website so just go to summit.weavers.space
yeah and then you can just go to replays and uh yeah you can play everything here
you can filter by the category either by year or you know the various topics um you can also go to speakers
and you know view all the talks for particular speakers you know if you guys like brett you want to definitely ignore
i can say with absolute certainty that my family also ignores me [Laughter]
like brett talks are the only ones with negative comments
that's true yeah there's not even a dislike button and
yet you get the most dislikes that's true yeah you know i sometimes i don't know how i i
live with myself but then i just like oh no shame yeah
i love this mocking community oh yeah that's right like a bunch of children
yes
lucky enough we cannot throw food at each other oh i know geez oh i don't know if that's like
good i think it would be better if we could honestly uh
still like a stack there you go all right
sweet well guys any other questions we're a little bit over but if you have any more of the questions i'd be happy to uh
dive in and do anything last call all right oh well okay today i forgot to
mention i should i should have started with this today is may the fourth so may the fourth be with you all yeah
there we go may the fourth be with you and um i i did something cool for star
wars day okay uh and so here let me show it off a little bit
you started a war in space [Laughter] so as you know i am working on drift i'm
not going to give a full-blown demo on drift uh but i did create a star wars demo
uh using drift so um
let's see oh watch now it's not gonna work oh there it goes
so there we go it's just some warm if you're texting but there we go i i should have typed something really
nice for you guys but whenever now we now but we get a cool star wars
i would have enjoyed something like really dark and unsettling it's little scrub throwing attacks
like it needs to be yellow or black with yellow letters
yeah no sorry this is done i'm just going to say that that they apple has a little um video on it on how to make
sound how they used um i don't know sound for jks or whatever it's called it's a pretty neat video oh really
oh yeah all right where where is this video
go to apple.com they changed their front page
oh really hear the force oh okay okay
oh nice sound oh cool interesting
i think they're having a um a webinar tomorrow too you know next week or something like that
on sound and using their sound software i mean what what a thing to be able to
uh like say you know like the the sound was all mastered and
engineered on max for star wars like just one of the
biggest movie franchises ever yeah it's pretty good
wow i like how it's all black and white here just a little yeah that's really nice i know i just
it's a short loop and i can't stop watching it that's cool i love how that x-wing just flies in
that's so nice cool well thanks guys i think we're going to call it quits i'm going to go
pick up my kids from school i do do you you don't have to [Laughter]
excellent well thank you very much everyone jody thanks for uh pushing the limits again i appreciate that
and uh hopefully we'll see some of you guys on friday where we do these hangouts but like a lot longer and a lot more childish
[Laughter]
bye