Transcript

00:06 okay here we go setting up the live stream
00:14 and we're good okay go for it david what's what's what's cooking your brain
00:21 what can we do for you on the sweet button like gary said um tell colon and then the phone number
00:30 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
00:38 uh i i have no clue did you google it not yet
00:46 um so what um what david is about is he posted on the community and he asked how can you
00:54 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
01:02 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
01:11 i just i just want to show everyone that there is sorry i'm launching rapidly over here
01:26 all right if you go to uh where all the buttons are there's there's actually a telephone button right and
01:34 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
01:42 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
01:51 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
01:58 you can even provide the email body um so anyway so easy stuff there but what david wanted
02:06 is the ability to do a whatsapp and so uh i don't know let's see um what's app
02:15 link html i don't know let's see what's that blink in html code
02:24 um looks oh so it looks like looking like this so you do
02:31 i i don't use whatsapp so i guess wa.me is a is a whatsapp thing and then you put in your number
02:39 um i don't verify if this wa dot me is actually a whatsapp thing and not like some no
02:46 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
02:55 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
03:03 the text as well looks like so i'll look that up thank you yeah so i i just searched for whatsapp
03:11 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
03:20 zeros at the beginning so for instance i think uk is zero zero forty four like plus forty four uh-huh
03:28 yeah yeah get rid of the plus just go 44 and the rest of the number okay there you go good tips right there
03:37 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
03:43 another app messaging app to use all right thank you no problem
03:51 well the macbook pro arrived today earlier so i'm setting up sweet davide just got his as well right he's
04:07 i ordered it over a month ago and it was supposed to be here um this week actually and they just sent me
04:14 an email sorry not till the beginning of july wow yeah that's a bummer yeah
04:21 really it's not only mexico i feel better now we ordered it once on
04:30 monday in it right no tuesday and it arrived today so wow lucky
04:38 and it didn't cost me a penny well i've got a question sure it's an issue um
04:47 positioning in uh in um
04:50 [Music]
04:52 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
05:07 wondering how to this is a challenge because i'm not really that i guess i have to share screen right
05:16 or if you want to give me the url i'll share my screen oh yeah okay livingmind.com okay
05:24 let me uh let me go ahead i'll start sharing my screen livingmind.com
05:33 yeah i decided to throw up really something simple since my old one was from 2014 and i never bothered with it okay
05:40 when you shrink when you shrink it down the information architecture and communications design you can see how it goes down into the uh
05:47 the image is there a way to uh handle that now that's with a uh big
05:54 white duck side bar stack is there a way to handle that so that on mobile it may be
06:02 i can redesign it somehow so you're using the sidebar stack um it's a header pro stack no oh hold on
06:11 let me check yeah that's that's a header pro looks like oh header pro with a um
06:18 segment that's what he calls it yeah easy peasy i like them easy to use i'm not sure how to actually recreate
06:27 that using the built-in foundation six uh so i do tend to go back to what i'm familiar with sure
06:36 um but right and essentially what what you're doing is you have you have a header living mind
06:43 and then this sub segment um you wanted it to be a little bit away from the header i i assume right yes yes
06:51 and you know i'm happy with where it is on desktop but on mobile so the positioning how to control positioning
07:08 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
07:16 has different settings okay challenge how would you accomplish this with f6
07:24 let's do it okay because i still don't get them the positioning all of this stuff it's just
07:31 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
07:40 so but i sure would like to know more about positioning sure i would say that's impossible
07:48 you would think this is impossible
07:50 [Laughter]
07:53 okay um so in order to do header segments okay um there's a couple things that we
08:02 could do okay um first i guess i'll start off with the
08:09 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
08:17 small segment which is small segment header okay and let's just quickly preview this
08:26 i have uh here let's change that small segment it's like really small and it's really gray let's tweak it
08:34 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
08:41 little bit bigger we're gonna do all right
08:48 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
08:56 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
09:04 site styles you can control the small color by default and then the small size now the small size is a percentage
09:13 of whatever this is right so this is this particular one is an h3 so the small segment is going to be 90 of
09:20 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
09:27 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
09:36 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
09:43 right and i mean in in header you have small segment so i mean small yeah um so wherever you see
09:52 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
10:08 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
10:17 so um so there we go so now we have this small segment on our header okay um
10:25 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
10:34 a little bit right right so can you can you apply um padding and margins and stuff to just
10:40 that small segment header yep okay so let's go ahead and
10:47 uh let's add in now now i guess you could do padding and margin uh i'm going to do something a
10:54 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
11:03 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
11:10 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
11:17 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
11:27 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
11:36 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
11:45 of my header and i'm gonna do space small because i wanna i wanna only target the small segment inside of my
11:53 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
12:01 adding the word small to the class foundation six knows it's only going to target the small segment header part
12:10 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
12:17 inside of it how would you know how would you have known to do that um you asked now
12:25 yep there we go um i mean so how would you have known okay so um
12:34 so let's look at what this does all right
12:42 so here is my h3 we see i have h3 and the class is my header
12:49 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
12:57 small segment right so this small small as the actual tags right the html tags yeah um so here
13:05 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
13:13 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
13:21 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
13:30 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
13:38 segment here's another segment okay um and so you have two different segments here and we can do that with foundation six
13:46 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
13:53 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
14:01 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
14:10 um so i wasn't sure that was gonna work
14:20 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
14:27 okay so margin does add some space between the main header and the small segment right okay but it doesn't move
14:34 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
14:43 um which i think is uh the way i would have done it which is something called a transform okay and
14:50 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
14:59 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
15:06 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
15:14 segment and what do we want to do so in transform we can move things so i want to move them
15:21 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
15:30 moved right that's what that didn't work i was expecting that refresh
15:38 look at that i was expecting that to work
15:51 do we need a perspective i don't think so have you tried the any key
15:58 [Music]
16:02 the hammer use those hammers didn't that work
16:14 i was totally expecting that to work
16:23 do you need more content on the page oh it could yeah you could be there look at that
16:31 [Music]
16:44 actually when i put display block it's completely gone that is craziness
17:02 check that out
17:12 jody broke foundation no this isn't foundation sometimes
17:20 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
17:29 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
17:37 on the damn page you know when it gets where you want it to go um so using all of these sideways tricks in
17:44 the classes and the targeting and this and that at some point it's like you just want to throw up your hands
17:51 i don't know what what um isaiah's long-term plans are for stacks but if there's any
18:09 by moving it the system calculates your margin your your positioning all of this stuff it's all done automatically i mean
18:17 so there's a problem with that actually jody so uh the problem with that is um well
18:24 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
18:33 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
18:41 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
18:48 potentially three or more times because you have to position everything right well why is this isn't that done now automatically if
18:56 you're designing a rapid weaver project and you drop something on there it's automatically usually for most things
19:03 going to work on desktop as well as mobile i mean that's the beauty somebody yes and that's because you know developers
19:11 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
19:19 um but another thing that we do that you probably don't even realize is um is like standardizing so like when we
19:28 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
19:35 set so that all your margin your spacing throughout your page looks good and if you if some were users now you're
19:43 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
19:50 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
19:57 pixels and over here would be 24 and it would be like nothing would be spaced properly and it would not look 100
20:05 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
20:13 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
20:22 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
20:31 um i'd have to go back and check so how do i correct that so that mobile display is
20:38 better um so again you would you would use the visibility stack and you could hide the one that you have
20:46 there now on mobile and then show a different one on mobile that has a different setting so i would create a separate
20:55 header stack separate header stack yes so essentially you would do this now i'm sure i could
21:03 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
21:10 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
21:17 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
21:25 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
21:34 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
21:43 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
21:51 people try to um they try not to use visibility um and then they go they spend hours of time
21:59 trying to make it so it looks great on everywhere creating either swatches or doing other things where just a simple visibility is okay
22:07 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
22:15 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
22:23 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
22:31 layout stacks so you would do this right and then this one would be um let's say this one we show for medium
22:40 and large okay and you would just copy paste that and then this one is or we'll just do
22:46 a mobile menu okay and then this one is going to be um
22:54 show for small only right so now you have two and if we preview that
23:02 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
23:10 the way down to modes drives me nuts so we go to responsive mode there it goes it says mobile menu
23:18 okay okay so and then at that point your your header pro settings can be different on the mobile one obviously
23:26 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
23:34 use two visibility stacks stuck one and then that then stuck the mobile in the other yes exactly okay
23:42 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
23:50 that kind of is a um you know h1 h2 sort of thing you know um you know
23:58 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
24:07 we have this and this is um this is my sub
24:15 header okay um and then this one was in h2 okay
24:22 and uh let's just do like color alert okay just so it's something
24:30 um and this is uh let's do some title on this one and we'll just leave that one as the
24:38 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
24:46 of uh responsive design mode right and essentially this one you wanted it over here
24:53 okay um so here let's let's try this transform thing now i did sub title i think
25:04 that is crazy what am i doing wrong here
25:15 where is that getting transformed if your perspective is at 500 pixels is
25:23 it above the page no i'm not changing z see overflow hidden
25:31 oh
25:32 [Laughter]
25:35 jesus christ that was probably what was going on with that with the small as well is that checked by default
25:43 uh yeah overflow hidden's on by default for containers um and there it is
25:52 man who said that gaston good job bravo who knew bravo jesus respect for yoga stone good
25:59 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
26:08 all right so now we got there let's put in my header again jesus i'm such a rookie sometimes look at that
26:16 guys see yeah um so if we go back to uh my small header small
26:25 okay um nope that's still oh uh but
26:35 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
26:43 know but let's see if that works that that's that's what it will do okay interesting
26:52 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
27:01 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
27:10 knowing what tools are available to me both within f6 or big white duck or anywhere and how to refine that is
27:18 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
27:26 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
27:34 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
27:41 let's do let me set this back up again sorry makes maintenance and debugging easier
27:49 yes kiss keep it simple stupid right okay keep it simple and smart these days oh
27:58 there we go that's a much more polite way of saying it okay you're so polite you must be from canada
28:07 originally scotland
28:08 [Laughter]
28:11 okay um what was i doing oh we're doing transforms so we have this subtitle all right and i did move it down
28:19 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
28:27 let's do uh oh i'm gonna add some classes to this so we're gonna do h colon 50 vh
28:36 to make it 50 height for the browser and we're going to do bg black okay
28:44 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
28:53 this what it is first default okay so right now i have uh my banner
29:08 we can either just move it from its existing position okay and transfer it over here
29:16 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
29:24 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
29:33 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
29:40 looks like oh that's 100 way over there so maybe we just do uh let's do like
29:48 250 pixels over okay maybe that's not enough you can do 500 pixels
29:55 you know so there we go right and maybe 50 pixels down is maybe too too much so we got 20.
30:04 okay um so there we go you know it's always going to be right there but
30:10 um on mobile not going to look so great yeah right so what can we do
30:17 okay so then um what's big responsiveness is baked into every single swatch
30:24 okay so i'm going to copy this transform okay and um on this one we're going to say
30:31 oops small only okay and i'm gonna take that x or the the move yeah the move x and make that um 300.
30:42 well let's do small and medium so that i don't have to go into responsive design mode okay so there it goes
30:51 um okay okay so so i have this and then um and as i go as you saw it shifted over
30:58 right on desktop but then it the swatch the style changed uh when i told this this swatch this
31:06 media query to apply this style to small and medium okay okay so that's how we can um you
31:14 know use swatches to customize our styles um you know for particular devices
31:23 okay great okay thank you great question jody thank you very much um here's another fun one actually okay
31:31 uh just to kind of go off so jody you had um oh yeah you have two different colors here
31:39 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
31:47 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
31:57 your header in here and let's do it okay so um first off you'll notice that you have
32:05 um it's on a new line right okay um so what we can do is um you could put
32:13 in a just a br tag br is a is an html break
32:20 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
32:28 greater than okay um so off the counter that is just um how would you know that
32:37 well now you know okay um standard html yep it's just yeah this is pretty basic html okay so you know you
32:45 can see basic html so br is one of them or you can just add a new line into a header
32:52 if you google it and and add uh h3 after the uh what you're looking for it will pop
33:08 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
33:16 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
33:24 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
33:32 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
33:40 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
33:48 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
33:56 it's it's the proper way okay um and it's it's not rocket science i i
34:05 mean we'll let's do this
34:06 [Music]
34:13 if i can type it's bigger all right and let's get some syntax highlighting so we can see some stuff in
34:21 here all right um i'm just going to call a segment okay
34:29 header segment all right so here i have my um
34:37 my header okay and what i did is i surrounded this this bit here that we wanted to be a different color okay i
34:44 just put it in a span okay um you can add spans to text all you want
34:51 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
34:58 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
35:06 easier um we we can do this without this class as well okay um in fact if the does the class
35:12 scare anybody here moderately i guess it depends on what class
35:21 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
35:28 does does her jody does this does that make you less scared no it's just that i i know you're going
35:36 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
35:45 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
35:54 and you color it you know it's just it's a visual way to do something a simple way to do something without
36:01 getting into the code so to me anytime you can give that approach to more people
36:09 you're you're really doing a service fair enough um so
36:18 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
36:26 um so let's just copy this and i'm gonna put that in my header
36:35 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
36:43 font color okay and um the class that i added was
36:49 header segment all i'm going to do is i'm going to i'm going to target that class
36:56 and we can give it color i see we see that in edit mode you can also use your swatch colors as well
37:04 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
37:14 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
37:23 so that's easy way to to target that okay so now we have um this and we have that
37:30 okay now you wanted to indent this correct yeah well now that now that this particular element has its own class we
37:38 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
37:47 target the header segment class and um let's just add 16 pixels
37:55 and there it goes okay yes okay i see what you're doing now within the bounds of f6 okay okay yeah
38:03 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
38:11 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
38:19 mobile um yes if you wanted to use the header pro um but like i said here i was using the the
38:27 transforms uh and uh in this particular example um and you know i i created two different
38:35 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
38:43 visibility with transform i mean similar so it's somewhat similar yeah it's a little more efficient because i
38:51 only need one header on my page now i don't need two right so this way is just a little bit more efficient
38:58 um you know which is why we were saying this was the better way okay
39:06 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
39:14 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
39:21 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
39:28 uh on the uh the community on this event so where where this event where this live stream was i'll put the download
39:35 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
39:43 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
39:50 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
39:57 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
40:05 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
40:14 have the basics that the easiest way to begin to understand how to position elements would be to use the positioning
40:22 um yeah so here let's go ahead and do i'll do another example with the position swatch okay
40:31 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
40:39 do subtitle two okay um subtitle pos there we go
40:49 um so let's preview that okay so here's my subtitle to this is my example down here this one up here we
40:56 use the transform and this one down here i will use a position swatch okay now if you notice down here i still
41:04 have all the colors and the little indentation because classes are the same right so um that's nice
41:11 i don't need to restyle all of that so let's go ahead and add a position swatch
41:20 uh position okay and we want to position
41:27 the this header this subtitle pos okay
41:35 um now one thing because we want to position this and we're going to position it relative to a parent
41:43 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
41:52 to this container the one key part here is we need to set this one this container here and
42:09 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
42:17 the columns there's i think there's also position relative on on all columns and containers okay
42:25 so on this container i've i've told it mr container you are now position relative you are in charge of any positioned
42:33 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
42:41 fixed we don't want that in this case we want it relative to a parent okay and the parent we defined what the
42:49 parent was by making a position relative so now that's all the hard part
42:58 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
43:06 top 50 and maybe left fifty percent all right let's do like thirty percent i
43:14 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
43:24 be positioned relative to here let's give this particular one a different color background
43:34 oh that's a horrible one joe is position relative is that a
43:41 synonym for parent then um yes well yeah so whatever that your parent
43:49 is whatever above it is set to be position relative okay
43:57 um so here i have my this blue box is my container okay and we set it to be
44:05 top 50 left 30 percent and that position is the top left corner of your content
44:13 so the top left corner um is going to be at 50 um or top 50 and left 30 percent
44:22 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
44:31 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
44:38 the top left corner of the parent that's very helpful this explanation
44:45 okay so as you see there um you know we might want to and again
44:54 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
45:02 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
45:10 tweak that uh create a copy set this one to be uh for small and medium okay and then we can set the
45:19 left to be 20 so there we go
45:27 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
45:34 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
45:42 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
45:49 it's just it will be the you find it the most accurate way to represent the data yes mobile's okay
45:56 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
46:04 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
46:12 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
46:21 safari even more if you want to uh get safari as small as possible get out of the responsive mode
46:30 and uh and open your bookmarks open your bookmark oh
46:38 brilliant davide nice good job buddy
46:45 [Laughter]
46:48 dominic gets the gold star for the day yeah nice one you know if you uh shrink the browser from the bottom too
46:56 all the way up and then open your bookmark bar and go for the make sure don't design websites for this view please
47:04 i'm just going for a cartoon man orange
47:11 yeah make it more orange man yeah more orange always more orange okay thank you very much this is like a
47:19 variety a nice overview of all the different ways you can approach it okay
47:30 okay here one more thing for fun uh i know you were potentially scared of that class that we added to this band okay
47:38 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
47:46 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
47:54 right but but now all our styles for that little segment are gone right because we were styling them off that class okay
48:02 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
48:10 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
48:18 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
48:27 span okay and that's the same thing okay because in this in this header
48:37 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
48:46 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
48:54 where is that i think it's this one okay so um but what's nice is i this this
49:02 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
49:10 in so when i send this off to people i think this will be the nice the nice way to go about it
49:19 cool that was fun actually i i
49:27 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
49:36 there starting starting with the extremely simple way and approach it step by step and then you know how i
49:45 explained it right now was that good yes but without going into the code just simply stick to
49:52 what stacks you use what you need to you know what you need swatch you need to create how to apply it
49:59 simple without going into the code or anything like that so okay that'd be great perfect i have a question joe yeah
50:08 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
50:15 are you doing uh oh for like foundation no for yeah for like all the different size icons you need for your stacks oh
50:24 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
50:33 affinity as well um um so yeah affinity because in affinity you can export multiple sizes and you
50:40 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
50:48 i've kind of automated that into my old stack build tool now
50:56 [Music]
50:58 um oh another uh i actually created a workflow using do you have that um that what's that uh app from flying meat
51:07 um uh batcher oh retro batch retro batch thank you retro
51:15 batch that's this would be a great way to do that uh because you can just uh
51:22 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
51:30 want it this is a great image automation tool cool i'll look into that
51:39 veteran badger uh let's see uh there was some chat some let's see some things in the chat is it
51:48 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
51:56 to talk about any of that on a live stream and um so rapid reaver eight and stacks four will
52:05 continue to work um indefinitely okay so that your current setup um will work for years to come
52:14 i don't expect that to not work for at least two three or even more years okay um
52:22 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
52:30 don't have stacks five yet not even i do nobody has rapie for nine yet so um all this is um
52:38 coming down the pipe however stacks five will not work in rapid beaver nine okay um wrap your nine um uh it will it
52:48 has decided it's going to create this new competing thing called elements and um i will not be shipping my
52:56 products for rapid over nine elements either um so but stacks five is in the work
53:03 i've actually seen it functioning um i have nothing that i can show you um but i have seen it
53:11 and um it is a standalone app and what is amazing is if you like your current stacks interface stacks five the
53:20 standalone app will feel very at home for you okay um it will be like nothing changed you'll
53:28 be able to shut down rapier eight launch stacks five and continue your work um just like you were yesterday
53:37 okay um so that's a good thing um all of my products and every other stack developer
53:45 um is supporting stacks five there are a very small number i think currently only one
53:53 that is has decided to support rapweaver9 elements okay to my knowledge so
54:01 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
54:08 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
54:16 i can um but hopefully that guidance gives you guys a a little overview any questions on that
54:26 nobody okay ice cream to come out yeah yep me too like i said
54:33 it is just a quick one joe did you send the 800 you saved on the wine or some of it
54:40 [Laughter]
54:44 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
54:53 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
55:03 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
55:12 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
55:19 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
55:27 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
55:36 the question is is it the total cms id that allows you to have multiple blogs within the same page of a website
55:45 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
55:52 id and you magically have a different blog so if i have five separate authors each author will have their own
56:09 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
56:16 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
56:24 uh would be there there would be no way to have a single view a single grid of all the
56:32 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
56:40 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
56:49 right does that make sense could you create a a blog that creates an aggregate like a
56:57 calendar of all of their events so but that uh but then that would mean that you'd have to like add each each
57:05 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
57:12 that doesn't fill so you wouldn't create a blog that allows you to filter upcoming events by date only
57:20 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
57:29 blog everyone that has events uh i believe it's for a church correct james yes okay and um there's five potential
57:36 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
57:45 um each author is going to have their own um they can only edit and view their own
57:54 events so we show them how you can create filters so that the author can only access
58:01 the you know their stuff okay using basically each each author there's five of them would have their own total
58:10 cms login and that login is filtered by their off by their author id okay um
58:19 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
58:28 events or whatever right um and then you can also filter it by you know author but um you know it does
58:37 have a little slight complexity on the back end uh where you have to create multiple you know pages for each author but
58:45 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
58:54 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
59:02 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
59:11 i can see how that concept is simpler but the drawbacks i think could be greater
59:19 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
59:27 that you wouldn't be able to do that if each author had had their own dedicated blog
59:34 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
59:42 to have a uh a grid a blog list that lists out your next 10 events correct okay
59:50 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
59:58 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
01:00:07 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
01:00:16 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
01:00:23 so the first way by author with the same cms id is the best way to do it
01:00:32 yes it is okay because that's ideally what we want is the best way to do it yep that that is
01:00:40 the best way to do it perfect thank you sir no problem
01:00:50 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
01:00:57 um in stacks four and stacks five but total cms will not support rapid ur9 elements so hopefully that answers your
01:01:04 question mike um none of my stacks uh will support rap river nine elements um right now
01:01:14 joe yes is there a limit to the amount of total cms fields on the page
01:01:22 so gaston had a had an issue today uh where on his admin side this is mostly on the admin side
01:01:30 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
01:01:38 50 plus okay um so at some point uh his server decided to
01:01:46 sporadically not display um when he logged into the admin area not every admin field was getting
01:01:53 populated with the content from the server okay um so what's going on is whenever you log
01:02:02 into your admin area in the background total cms in your browser is
01:02:09 connecting and querying total cms on the server and saying give me this header okay thanks give me this image what's
01:02:16 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
01:02:25 or every admin input or whatever you want to call it um is is queried on page load
01:02:33 and he had 50 to 100 of them on the page and so that means every time you load the admin it's creating
01:02:40 simultaneously 50 connections to your server saying give me all the data and his server was going
01:02:49 right basically that's the technical term for it yeah um and in the now if you looked in the
01:02:56 browser console he saw something like server resource limits reached or something like that okay
01:03:04 um so that gives us a clue his server was getting overloaded okay and so the solution there's two solutions
01:03:12 here okay um you break your admin page up into multiple pages so that when you load a page
01:03:20 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
01:03:29 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
01:03:37 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
01:03:46 admin pages another if you really didn't want to do that another thing you could do is uh
01:03:53 get a more expensive server because i mean the server was getting overloaded i see this mostly with shared hosting accounts
01:04:01 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
01:04:10 servers just can't handle that connection especially on shared hosting so joe a question on that thing when you
01:04:18 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
01:04:25 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
01:04:33 the admin side's calling for all of that information to be pre-loaded in advance and yes
01:04:41 yeah and it just causes your server to crash or yep exactly stop you're asking for too much all at once yep exactly
01:04:49 okay and what happens when you do a one singular one when you do a really long web page
01:04:58 without breaking it up into the containers like you had mentioned yes um yes uh although i mean in in that case
01:05:06 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
01:05:14 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
01:05:22 um it doesn't function like browsers don't limit those types of requests okay um like they do images
01:05:30 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
01:05:38 um and yeah that just can overwhelm the server okay thank you no problem so yeah the structure is basically you
01:05:47 know um you know a lot i know a lot of people basically mirror their admin side mirrors their content side so like
01:05:53 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
01:06:02 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
01:06:10 basically mirroring your your admin side to your content side um that would uh you know eliminate this
01:06:19 you know and i think that's a logical separation as well sorry what what what did you say that
01:06:27 batch size thing was called retro batch i can't find it it's um
01:06:36 flying meat.com it's the same developer that makes the acorn app
01:06:44 flyingmeat.com i remember i had it like does it does it
01:06:56 require a license because i just downloaded it but i remember i bought it uh yeah it requires license they have two versions
01:07:04 a regular and a pro version um i bought the pro version but i don't think you really need it
01:07:16 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
01:07:25 and dollars oh that was you
01:07:38 yeah that's me i gotta change that photo now but um so i i was trying to
01:07:46 figure out if there was a easy way to get a survey information something from a forum into a
01:07:55 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
01:08:04 into a csv file right so yeah so two things um so hey you said datastore doesn't you like data
01:08:11 datastore but datastore doesn't have like some of the form of options that foundation six does right so um
01:08:20 and do i have better forms planned in total cms2 yes um of course most likely prior to that though
01:08:27 prior to total cms getting shipped um i may ship the next version of post office which i think will have a csv
01:08:34 population tool and and post office is going to morph into uh something different than what it is now currently post office like actually
01:08:43 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
01:08:51 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
01:09:08 that um and then also you know something like populating a csv file yep is that is that before is that after
01:09:17 the animations but before total cms um uh you know what i i really want to get
01:09:25 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
01:09:34 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
01:09:42 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
01:09:51 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
01:10:08 uh all the videos cool actually ready to getting ready to buy buy the mercury five a day oh nice oh
01:10:18 good that's a good one you got a lot of joe this weekend yeah yeah
01:10:26 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
01:10:34 [Music]
01:10:37 oh yeah don't get that it's we're just the home page all the rest is
01:10:46 fake yeah there you go let's see
01:10:56 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
01:11:04 someone some feedback on this page let's have a look let's share our screen here
01:11:11 [Music]
01:11:13 okay so if you click on that critters link oh this this link here
01:11:24 so it's not what if not what about yeah what what menu is this now that's an accordion
01:11:32 yeah yeah um what about a vertical drop down so that when you when you hovered over critters it just came out over here
01:11:41 oh menus can be vertical as well so um if we go to ignitionstacks.com demo
01:11:48 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
01:11:57 like those big pictures they're beautiful it's it's great i think that's it's a it's a great
01:12:03 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
01:12:11 all right okay yeah right so that just uses the the drop down menu um in foundation six
01:12:20 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
01:12:28 yep um one caveat is uh drop down menus they're a little funky on mobile devices so
01:12:37 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
01:12:44 accordion on mobile instead well nero uses two different uh there's a menu for mobile devices and i don't want for
01:12:51 decks okay cool yeah perfect he won't have that problem cool it's what you were saying earlier joe
01:12:59 with the two different headers um if you just create use visibility to do the um two different two different areas same
01:13:06 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
01:13:14 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
01:13:23 think are common you know things that you're going to want to do um i think containers yeah containers columns
01:13:30 and menus maybe a few other odds and ends um have the visibility setting baked in and
01:13:38 these are all they have the same exact settings as the visibility stack so
01:13:46 cool does that help you out yeah yep let's see
01:14:03 okay do we have access to the conference link yeah so james the conference if you've uh got a ticket before
01:14:11 you can always access all of your um all the videos at the website so just go to summit.weavers.space
01:14:20 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
01:14:28 year or you know the various topics um you can also go to speakers and you know view all the talks for particular speakers
01:14:36 you know if you guys like brett you want to definitely ignore
01:14:46 i can say with absolute certainty that my family also ignores me
01:14:51 [Laughter]
01:14:55 like brett talks are the only ones with negative comments that's true yeah
01:15:03 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
01:15:12 live with myself but then i just like oh no shame yeah
01:15:21 i love this mocking community oh yeah that's right like a bunch of children yes
01:15:34 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
01:15:42 honestly uh still like a stack there you go all right
01:15:51 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
01:15:59 last call all right oh well okay today i forgot to mention i should i should have started with this
01:16:07 today is may the fourth so may the fourth be with you all yeah there we go may the fourth be with you
01:16:15 and um i i did something cool for star wars day okay uh and so here let me show it off a little bit
01:16:24 you started a war in space
01:16:26 [Laughter]
01:16:29 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
01:16:37 uh using drift so um let's see
01:16:45 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
01:16:54 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
01:17:03 scrub throwing attacks like it needs to be yellow
01:17:11 or black with yellow letters yeah no sorry this is done i'm just
01:17:21 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
01:17:30 it's a pretty neat video oh really oh yeah all right where where is this video
01:17:38 go to apple.com they changed their front page oh really hear the force
01:17:47 oh okay okay oh nice sound
01:17:54 oh cool interesting i think they're having a um a webinar tomorrow too you know next
01:18:02 week or something like that on sound and using their sound software i mean what what a thing to be able to
01:18:10 uh like say you know like the the sound was all mastered and
01:18:17 engineered on max for star wars like just one of the biggest
01:18:24 movie franchises ever yeah it's pretty good wow i like how it's all black and white
01:18:32 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
01:18:41 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
01:18:50 pick up my kids from school i do do you you don't have to
01:18:54 [Laughter]
01:18:59 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
01:19:07 guys on friday where we do these hangouts but like a lot longer and a lot more childish
01:19:13 [Laughter]
01:19:18 bye