00:08 hey everybody how we doing
00:15 today I'm drowning in my sorrows yeah you got me actually a little warm let me take this sweater off here oh shoot car
00:23 key one second my I think my son's going to need this car key to go to work one second let me uh I'm going to go uh put this downstairs next to the front door
00:32 one second give me just give me one
00:57 second okay sorry about that
01:09 all right Matias how's it going Mr Cole Ryan is here Mr oil field gas
01:16 gifts oil field sorry oiled field oil and gas gas man I am Tongue Tied today
01:24 gas gifts man that's like a tongue twister oil field oil and gas gifts man that's a a mouthful
01:33 Ryan Franco how's it going bud
01:42 excellent scooty the gezer suy the gezer okay so
01:51 guys as I said my uh did I say in an email I don't know I work three three days on this I am I'm actually quite pooped
01:59 I uh I worked hard to get this site done um by today and uh yeah I literally 20 minutes
02:09 ago I had to run to the corner store to get a little energy boost cuz uh man I I wasn't sure how I was going to do a live
02:17 stream so hopefully we'll we'll be good to go normally when I get when I get going get the juices flowing on the
02:23 stream just starts going hard right so wolf how's it going excellent good to see you Budd
02:31 Mr Len Canterbury I've been to Canterbury excellent that was actually
02:40 one of my one of my favorite little towns in uh when I was in England man that was 18 years
02:47 ago damn that makes me feel old 18 years ago
02:54 okay so so long ago okay let's um so today we are going to
03:01 be building a website from scratch now I already built it okay um
03:08 it did take me a pretty solid two and a half days um and two of those days
03:16 yesterday or Monday and Tuesday were like long days too okay so I'm going to try to condense this down as much as
03:25 possible um I do want to make sure that I kind of go over the whole process I think it it's a simple
03:33 website but yeah I thought it would be fun to uh a build a a website from scratch with Foundation 6 I know that a
03:42 lot of uh new users are coming from Foundry and kind of want to learn the ropes and this a pretty simple it's a
03:48 simple website um and so yeah I thought that would be kind of kind of an interesting idea to just rebuild this
03:55 entire um site from scratch and then um integrate it with total CS 3 now I use
04:01 total CS3 on this because well uh it's I I I needed to build a website
04:10 that was live right it needed there there's nothing to test a product than to actually build something with it now locally I build these little test demo
04:19 websites right but like building an actual web page or an actual website using a tool
04:27 nothing can compare to that right so um yeah last Friday now this website is for a mastermind group that I run uh I've
04:36 ran this group for maybe 10 years now I don't even remember it's been a long long long time
04:43 um and it's just a little website to help manage our weekly meetups okay and um yeah so uh I thought it was it was a
04:52 simple website something that was useful and I got to test out total cms3 okay so it was kind of a win-win win all around
05:01 and without further Ado let's go ahead you don't want to hear me jabber on about this um you want me to share my
05:12 screen all right Kyle he needed a Celsius today too yeah D these things these things are good I I I I've
05:22 resisted watching the videos that tell you how bad they are for you um because man they work uh never have two of them
05:31 though like early on I I banged two of them a couple times and wow that's a lot of caffeine okay so keep it to one
05:39 you're good to go um but because my wife says they're
05:47 super horrible for you and I resist watching the videos telling me why they're horrible for you I try not to drink them unless I I really feel the
05:54 need to so um today is the day um where are we going okay let's go ahead and
06:01 and let's load up this website okay let me log in here oops one second got to go into this and we go
06:09 into there oops what happened there oh that's the wrong one uh that that login
06:16 for the the live site this is my local one actually no yeah no actually hold on
06:25 all right okay all right uh that's the admin portal we want to go to the live
06:34 website all right now obviously um what you're seeing here um this is the site we're going to be building today okay um
06:43 simple little web page right there's not a lot to it um you know it's just simple menu bar up at the top have a little
06:51 mission statement um we'll have like a little grid of meeting notes right so notes from every meeting um who attended
06:59 who missed um and then further down we have like a directory okay so directory of
07:07 people and uh oh I I guess here let me let me let me go over the feature list from from
07:15 top down I guess okay so up here we have the ability to add a new meeting so you can click on that it'll add a meeting
07:22 okay um we have our list of meetings here you can click on this and it'll open up that particular meetings note
07:29 notes okay obviously this is all dummy data okay but uh yeah so we'll have notes
07:36 here um and then you can also search right so you can be like uh you know search for Joe okay and voila right so
07:45 it has a search page you can do a full content search here and it'll search all the meetings and give you the results and then when here you can go ahead and
07:53 see you know the meetings Okay um so yeah there we go okay so that's pretty simple
08:08 with FaceTime or whatever right uh you click on the email it'll send the email um it'll open it in mail.app right or
08:15 whatever your default Emil client is um we click on their person's website if you click on here let's go to
08:23 me right if you click on this this is my goals right um so you have a little bit information about me my my goals for the year my goals for this particular
08:31 quarter okay um and then below we have uh links to all the various social media
08:39 profiles right so if I want to find now in this case I only have it on my card okay it doesn't have any of the others
08:46 but kind of get it so depending on if the person adds that information to their profile um the icons will show up here you notice that everybody does have
08:54 a contact card and if you click on that um it actually opens up a QR code which you if you were to scan that with your phone it'll add the contact card to your
09:02 phone which is pretty cool okay um would be nice to eventually figure out a way to if if you're on a Mac download it or
09:11 something like that right um but yeah uh I just wanted kind of an excuse to use the QR code features in total CMS so um
09:20 yeah there we go total CMS has QR code features if you didn't know okay um and that's basically it uh
09:27 also um with the a the entire site is authenticated so you have to be logged in to access it none of it is accessible
09:34 on the web um and if you click on this edit profile and goals um it takes you to your profile right I know you are
09:43 logged in so I allow you to edit your profile so here you can go ahead and edit all your information and uh we have all of that
09:52 uh kind of in a custom a custom custom form right so this is a custom total cms3 form um and then I've customized
10:09 nice okay I'm pretty happy with how things turned out um okay let's go back to the homepage um there is one there is
10:17 actually one page um so there's a charter page um so again I just built the site this week so uh one thing we're
10:25 we're g to be doing in my meeting on Friday um is we're kind of drafting up a charter for the group it's kind of like
10:32 the the rules of the group right and and you know various standard operating procedures and whatnot right and um so
10:40 this this actual page is will be publicly accessible um because let's say in the future we want to invite someone uh we
10:49 want to send them our Charter so they can actually see it and know whether or not you know this kind of group will fit
10:56 with their schedule and whatnot okay um so just show you here I'm going to log out okay and if I go to if I go to the
11:05 Charter page hey you'll notice that the charter page is accessible um minus the menu
11:13 right it doesn't show any of the menus it's just like the blank Charter page okay um but if you go to any other page if I click on this I'm not logged in so
11:22 it's going to prompt me to log in oops did I did I type that wrong what
11:33 the heck oh I need to be hold on there's there's two level all we'll talk about
11:40 that in a little bit right um and I will go into the when we start doing total CMS um we'll dive
11:48 into the admin area a little bit but at first actually we're going to go over the just the raw design of the website
11:57 okay so we're going to we're going to review the raw design um because before I I integrate total CMS I had to design
12:04 this I I didn't know what I wanted the site to look like um and so yeah I mocked it up using purely Foundation 6
12:11 Stacks okay and uh so without further Ado uh let's close this browser window we're going to open up uh rapid
12:20 Weaver he we're going to open up um so this is the project file now I wanted to uh kind of build this from scratch
12:29 instead of me just going through this project file and showing you um I thought it'd be fun to um build components from scratch and then maybe
12:37 bring in some some stuff from this project file okay um so I'm going to go ahead and uh create a new
12:45 project and uh let's go ahead and add a Stacks page okay and so again this is just a completely blank uh blank project
12:55 file and that's what we're going to be working on okay now um here let's just do
13:04 uh we'll just call this live I'll save it to my desktop all
13:14 right now before I can start designing um something I felt that I
13:22 needed is like something that's important I think to any website okay okay and
13:29 that's uh here let's just bring uh bring here okay something that kind of is is the rock that kind of determines
13:36 everything about a website not everything but a lot right is is a logo right like so um my group as you see is
13:45 called the growth Guild okay and um I was we we needed a name so actually the name is new too before we
13:53 were just a group of people that met and I was like well if I need if I'm going to build a website for us we need a name right so I found the growth Guild okay
14:02 uh.org and registered that this week and uh and so we have a name cool and then I
14:09 I needed a logo okay and um so let me show you the logo
14:15 now I didn't design this logo okay um and it looks it looks a little rough large okay but at a small size it
14:23 actually looks quite nice I think right um I use chat GPT to Design This okay
14:31 and um yeah I figured I'll uh here let me show you exactly what I did let me go ahead I'll open up chat GPT on my Mac right hold on let me put it over here I
14:40 only want to let me find the chat I don't I don't need all my chats uh posted on the internet so there let me
14:47 find the oh okay here right so here is my chat that
14:57 um that I Ed to create this logo pretty much just said I need concepts for a logo for a mastermind group called the
15:04 growth Guild that's all I that's that's what I typed and chat gbt came out and B popped all these things um and uh so it
15:12 gave me a bunch of ideas and I liked this tree uh this tree emblem with roots and branches right I like the concept of
15:20 that idea right because it's kind of like um it's kind of like growth right so I said I love the tree emblem can you mock up some logos for me and its first
15:29 mockup was this and I loved it I was like I really like that okay um and I at first and then I went
15:39 to I said hey can you give me the file and it created this and I was like that's not what I wanted um I I wanted
15:46 this logo and I couldn't actually I could never actually get this particular logo it to just give me that raw thing
15:55 right um so what I ended up doing was um I I loaded this particular image and I load it into pixel Mater and I just
16:03 cropped it and straightened it out and that's all I did for the logo okay um it's just it was purely just me
16:11 downloading this particular image um throwing it into pixel Mater and you know just getting rid of the
16:18 background and as you see in the screenshot the image was a little cockeyed so all I did is straighten it out um so yeah not rocket science as you
16:27 see here here is the the actual image right again pretty simple and this website again it's it's nothing for a
16:34 huge company if if I were to use this as a business or something that was like you know more than just a group that I
16:41 run um I'd probably take this concept and then redesign it using Affinity designer or pay someone to do it okay um
16:50 I do like the concept of it but as you see when we get larger okay um it just it's it's losing
16:58 some stuff right um but like I said earlier I think it looks great small and that's pretty much the only place it's going to be used up at the at the top of
17:05 the site okay now um next up is so now that I have my I my logo
17:14 situated I needed to um figure out the site colors okay um now what I did was I
17:23 opened up the logo here let me just go ahead and open up this logo okay and I wanted in order for my site to if
17:32 this is the the logo for my site I want the colors of the website to be used from this logo right um so what I did is
17:40 I took my uh my favorite color tool it's called color slurp okay and all I did is I just used this Color Picker and I
17:48 picked various colors um from the image and I created a color palette a few shades of green um kind of this gold
17:56 that's around the outside um and a couple different different shades of white okay um I kind of have a very
18:03 light green which is actually here and then actually what what I did was so this is uh this I thought this was going to be my white color but it turns out it
18:12 as it wasn't white enough um so what I par what I did is there were no other versions of white in this logo and I
18:20 didn't want to use white white I I try in my designs to not use Pure White okay
18:26 I always try to tone the color down a little bit whether or not it's um it's just toning it
18:33 down um from here let me for example let's just go ahead and do uh let's go to my grayscale color palette okay um
18:41 and if you see like here is pure white a lot of times what I will do is I'll I'll adjust it now if I want it to be just
18:48 pure white but toned down a trick is to um take your colors and reduce them all by the same amount okay so let's say I
18:57 do 250 250 250 okay um that's fa a lot of times that's actually maybe too much I think 250
19:06 oops uh hold on ah if I can type okay FC is I I use
19:14 that I use FC a lot which is 252 that is very very close to White okay um but it
19:20 just kind of tones down the really harsh brightness of white sometimes okay um so uh but what I did on
19:29 um the growth Guild okay is I I started with this color okay and then um in this tool it has a let's see what did I do
19:38 here here tints um and I just kind of kind of went through this and was like I just want a slightly whiter tint like
19:47 that's pure white this is just slightly off white and that was this color that I used here uh well uh it's not the same
19:54 color I I used these to kind of find a slightly off-white version okay now if you see these these colors are 248 249
20:03 246 um what this does is it actually adds a very I'll bit very minor a very minor
20:10 green tint to this white okay um so yeah so that's how I found my color palette so now I I have my color
20:19 palette that I want to use for my website now let's go ahead and start using that color palette
20:27 okay and and um so over here what we need to do is we need to start with a sight Styles right so let's go ahead and start with a sight
20:36 Styles okay and uh what I do here is uh all let's keep it big uh normally I mean
20:43 I've used site Styles a lot so uh I tend to uh remove those uh distractions um I
20:49 loved them when I started but uh I tend to not need them anymore okay um they
20:56 just kind of are distractions but I do like that they're there uh and some people love them and I do think they're
21:02 great okay um so let's go ah here uh also I I know I'm not going to use any of these extra utility classes I
21:10 recommend you turn that off if you don't think you're going to need them they're on by default for backwards compatibility sake um but yeah uh I I
21:19 turn off the load extra utility classes I love the normal utility classes though okay uh we might dive into those I don't know if we'll dive into that today I
21:27 have a video on them check it out he now our site Background by default site backgrounds for um all Foundation 6
21:34 sites are going to be white and like I said I don't like it to be white so I'm going to go ahead in here and I want it
21:41 to be this color okay so what I'm going to do is I'm just going to take that color and drag it into there okay as you see it saved that color right that's
21:50 actually kind of a cool little trick that I like about these color palettes is you can just drag and drop your color onto the palette and voila you get the
21:58 color okay um max width um I think in originally my tests i h i reduced this to be a th000 pixels and then I
22:06 increased it back to 12200 I I just like 1,00 pixels for a standard site width
22:14 okay okay um now we have our our primary color our color palettes okay and what I want to do
22:22 is um I'm going to set my uh primary color to be this green okay and and then I'm going to use this white as the
22:30 primary text color okay my secondary color I'm going to use that brown and I'm going to use that same white color
22:39 right um let's see for white um I'm going to use this color so if anywhere I'm referencing white um in various
22:47 things I'm just going to use that okay um and then for black I'm going to reference this darker um gray green and
22:58 then my overlays I also want to use the darker green okay and actually we're going to give that like a 70%
23:07 opacity I'm kind of whizzing through some of this stuff I mean a lot of this stuff I took time to kind of do back and
23:14 forths of of my content right um okay so now on my header I'm going to use this color green for my
23:23 headers and then um I forget I think am my text I think I left it black let me just check no I did make the text uh the darker
23:31 green okay and so uh instead of the text being black it's going to be this very dark green voila my links are going to
23:39 be that color okay and then my link hover uh I forget what I did what did I do on link hover I just kept it the same
23:48 color right so link hover I just kept it the same and then what I did do is um I did um when you un when you hover over a
23:57 link it'll underline it okay so uh by default links are not underlined when you hover over them they will be
24:04 underlined okay um uh let me I think I kept 48 and then
24:11 I think I did 36 on my h3s this is something that I mean you'll tweak probably over time right and then here I think I did
24:20 uh 36 there yeah I think that's right uh my buttons I think my button text I did slightly larger let me
24:29 see uh buttons 18 and 20 yeah so here we're just going to do um um 16 oh no uh
24:39 10 12 18 and 20 okay these are uh you can customize the size of your text in in the various
24:48 size buttons which is nice okay um and then my my border radius I increased that to five I believe so uh yeah I did
24:57 that five and my gutters uh 20 pixels 32 I think I yeah those were default okay
25:03 so that's site Styles all done okay um and if we preview uh you'll notice that the there's nothing except the site
25:12 background which is no longer white okay but there we and if we turn on the color palette so you can kind of see
25:19 there's our our colors okay so there we go um actually the text oh it's a darker green oh yeah cuz
25:27 I used the the dark green uh for the text and then the slightly lighter for the headers that's right
25:34 okay um so now my base colors for my theme or my site um are pretty set and
25:41 they're all based on that logo okay now something I am going to do is just to save some time um here we're just going
25:48 to did I do anything there's nothing here it's just a container okay sorry I'm going to refer that other site just to kind of remind myself of what the
25:57 heck I did um um just to kind of make and I added some padding to that so we're just going to add I'm going to add a p24 here just to add a little bit of
26:04 padding around the entire site content okay um and then at the very top we're just going to have this um I'm just
26:13 going to copy this in there and we're going to paste that in oops paste right and that is inside the three column um
26:21 so if we look at this um pretty simple right it's just the um I have a three column stack okay uh and if we preview
26:30 that this is what we're looking like okay so we have um our picture okay uh with our logo we have our
26:38 header uh and then we have a menu okay and um essentially the column one
26:45 shrinks to content um and then the third column also shrinks to content and then the the center column that has this
26:53 header it's just Auto it's going to fill up the rest of the space okay um by doing that essentially um it gives us
27:09 content okay there we go um and I think that's all I did there now another thing that preview
27:16 this I set this preview said I don't look at the stacks so maybe I I redevelop something so um down here I have a uh accent line right just to add
27:25 a little bit of divider so I'm just going to go ahead and check in pop we're going to do that okay
27:33 now if you notice that this divider is not necessarily exactly what we what what I think would look nice so what I want to do
27:41 is uh we're going to go ahead and um let's style that a little bit and so uh here let's just do that uh I'm going to
27:50 go ahead and add in a uh a border Swatch okay and uh what I want to do is I want to style uh the divider
27:59 okay um so I think if I go to elements actually and just do divider is divider in here oh interesting divider is not in
28:06 my list here that's interesting I need to that should be in the list right what I'm going to do is I'm just going to go to CSS I'm going to type HR because I know that's what a
28:15 divider is that's my bad I you know I should have that as a page element since it's a def definitely a foundation element but so I want to style um this
28:24 is going to style all dividers on the page okay and uh what we're going to do is I'm going to um for the color of the divider I'm actually going to use a
28:32 Swatch right so we're we're going to see me do this a lot during this project where instead of going simple and defining a color okay what I'm going to
28:41 do is I'm going to defi I'm going to use a color that's defined inside site Styles okay so um this instead of uh defining the color I'm going to set to
28:48 be my secondary color okay and remember the secondary color is here let's let's enable the colors back so we can kind of see those my secondary color is this
28:57 this golden brown right all right um and then on top of that I think I want I think I you made it a little bit fatter right so we're
29:04 just going to do um and I only want it on the bottom right so we're going to do uh let's see border size was going to be
29:12 two pixels okay and we're only going to do the bottom border and uh we're going to only do the bottom border and make it
29:18 solid right so let's uh let's preview that there we go there's my nice little
29:25 um line okay my little border all right now the next thing that I did
29:33 actually before I even developed all the page content was I I felt I needed to find a really good font okay now I spent
29:43 a long time testing fonts and playing around with fonts and and all kinds of stuff right oh there's an update
29:52 uh I'll remind me later right I won't install that update now while I'm on a live stream don't break things when you're on a live stream um okay
30:01 and uh I use this app called uh right font uh you don't need it though it is not cheap okay um but one thing I like
30:09 about it is um you can actually search and look through all the Google fonts okay um now you can also just go here and go to
30:17 fonts. goole.com okay um and you can PES through all the fonts here another really great resource
30:26 um is and actually use this um for this project okay if you go to type
30:35 wolf there we go okay if you go to typ Wolf um there's a lot of this interesting site where he
30:43 kind of just shows you tons of fonts and font pairings okay and I think on here he
30:51 has let's see top free fonts that aren't oh that aren't Google so here's uh top 10 uh font combinations on Google gole
30:58 fonts okay so here is a oh this was his his paid product which I own I do own
31:04 that and it's good um oh here top 40 Google fonts okay um and so here we go I
31:13 I think I actually used this and I found the the font that I use
31:23 is where is it there it is it's algra sand
31:31 oh here it is uh oh it's very it's at the very top okay so I I chose this I
31:38 wanted um for the heading at the top of the page okay um essentially what what I did
31:45 here is uh let's go ahead and type in the uh growth and actually I wanted it
31:53 in all caps right so it's the growth Guild okay and
32:01 um in here you can kind of you know I wanted a a Sans serif okay I knew I I wanted that and by property I kind of
32:10 wanted I knew I wanted like a fatter font okay um and so you can kind of just kind of peruse through these and and see
32:18 the all the various uh types and how things look right um and if we look here
32:25 this is the one that I chose okay uh Sands bold it's the one that I
32:31 chose and um then what I did is uh so if you go to if you visit this on Google
32:39 fonts uh let's go ahead and oh on my on my on my laptop I got
32:47 used to the new version that has a different layout one second give me a give me a second here
32:55 uh where can I get little panel they changed the layout in this in the tool there's a nice sidebar in the other one in the new version that
33:05 I can like copy the name oh well let's uh let me just here copy this name there
33:14 we go that way I don't remember need to remember how to type it we're going to go into browse Google fonts okay and I think Google fonts if
33:23 we go into this uh Google fonts itself
33:29 has pairings choosing type oh they used to do they not have that
33:39 anymore I guess they don't have that anymore um and uh was it in here nope
33:47 essentially that now what I so I I knew what I wanted this this particular font okay and then what I think what I did
33:54 was I did um pairings okay so if you just search for your font and recommended
34:01 pairings oh here on typ Wolf they have it download oh font pairings uh let's
34:10 see what did this they use that pleas he tell you what font no he
34:19 doesn't uh best font pairing oh I think it was I I remember this site I think yes it was this site so yes I did Google
34:27 algra s's font pairings and I found this page and um I I went through a bunch of these I ended up all just spoiler alert
34:35 I ended up with with Merryweather okay so uh what I decided was I was going to use algra Sands for my headers and then
34:43 I was going to use Merryweather for everything else on the page okay so um let's go ahead and set that bad boy
34:52 up um okay and just to save us a little bit of time I am just going to I'm going to cheat and I'm going to go ahead and
35:07 right in here okay uh we'll look at them but just save me a little bit of time here because I know we're uh we got a lot of stuff to cover
35:15 today so here we have uh I loaded my two Google these are the Google font Stacks that are here okay that come with
35:22 Foundation 6 now I know not everyone can use Google fonts right if you esecially if you're in Germany right um You can
35:29 always download those and use them as Local web fonts or whatever okay for Speed and convenience I just went with
35:36 Google fonts okay um so I chose uh the default font here is Merryweather so if
35:43 you look what I did is I set the Page by default to be um Merryweather okay um normally what I do is I assign a class of
35:51 Merryweather um of the the name of the type face right so that way if there's anything else that I know I specific speically want to be to be a particular
35:59 font um all I have to do is put the Merryweather class and it will kind of be forced to you know get that font
36:06 family um so again pagewide default because I want this to be the pagewide default throughout my page um I assign it a class of Merryweather so if I can
36:16 ever want to use that I can um and then further down you put in uh this edit label is just to kind of give you a uh
36:23 some notes okay this is important though family name Merryweather that has to be the exact name from Google fonts
36:33 okay um and then uh you define what weight you wanted I want this to be
36:40 400 okay so I'm loading the 400 weight of Merryweather for all text on my page then you you can supply a fallback which
36:49 is uh here I I supplied a serif font if you're curious what a serif versus a non-s serif is I don't want to
36:56 go town too far this pathway okay um but so you you'll see things like siif
37:04 and Sans serif I'm not going to go into the other ones script is obviously uh you know script ones right so they're kind of the the more fancy crazy fonts
37:12 okay but a lot times people don't know what a serif and a Sans serif is okay Sans or a serif font okay if you
37:22 look at these fonts that we're looking at here you'll notice that each letter kind of has these tails okay um those are called
37:32 serifs okay so all these fonts like the T instead of it just being a a straight at the top it has these little these little doys right these serifs um these
37:41 accents on every character okay that is a serif font now if we look at a Sans serif you'll notice
37:50 that there are none of that right the T it's mostly I mean there's some accents to some of these fonts right there's kind of some curvature they're not all
37:57 straight lines okay but there's nothing there's no hanging serifs or Chads coming off of the letters so that's why
38:05 these are called a Sans serif Sans meaning does not
38:12 have Okay so yeah Sans siif doesn't have little fancy dooh coming off the letters
38:19 that's a very technical term doohickey okay so yeah these serfs are a sand serpant are pretty much are more they're
38:27 considered to be a more modern um type face now um I personally think that it's
38:34 nice that if you mix up Sans serif and sarif fonts on a web page okay let's go
38:41 ahead and search for um let me just turn off that filter and let's search for Merryweather
38:49 okay um if you see Merryweather is a serif font but the algra Sands is a sand siif
38:58 font I think it's nice to mix up your headers and your your text to be the
39:05 opposite of each other so here um again Sans serf is going to be my headers and then Maryweather which is a sarif font
39:14 is for my default text so there we go okay um yeah little uh text or font
39:22 education there so here I'm Lo loading Merryweather and then in this Google
39:30 font what I'm doing here is um I'm loading in again here let's start at the bottom here my family name is algra
39:38 Sands the font weight that I want is 700 um and then further up I gave it a class of algra Sands so I don't know
39:47 maybe I wanted a button or a paragraph for some reason to be algra Sands I can plop that class on there and voila okay
39:56 then up here at the top I don't want this to be Page by default because I only want this to be default on all of my headers so I checked all of my
40:03 headers now sometimes you don't want your H6 to be the header maybe you want that to look more like the default text on the page so there we go right but as
40:11 you see here you can select all the elements that will be assigned by default you can give it a class um and then you know obviously your font family
40:19 definitions now here I gave this a uh oops this should be a Sans serif fallback font okay because algra Sans is
40:27 a Sans serif font you want your fallback font to be a Sans serif not a serif that
40:33 way um while the font is loading it will display your headers as a Sans serif
40:40 font um that's installed in the system and then it'll convert it to the font once once we're done okay so um now that we've loaded those let's go and
40:49 preview oh and in preview I hate this the Google fonts sometimes they don't load inside so if we preview in the
40:57 browser you'll see now we get this nice uh well I I think it's nice right this nice bold um up here at the header um
41:06 you'll see that now this is uh Merryweather okay uh with my menu now if you notice this isn't this
41:13 isn't really um lining up properly with the logo it would be nice if if the logo and the text were were proper right if
41:20 they were all the same size okay so um one thing I I didn't mention here is my
41:27 picture I set it to be 48 pixels okay it's a circle right so I know it's going to be 48 by 48 so I know that this image
41:34 is going to be 48 pixels tall now um in sight Styles what I did is since I want them to all be the same
41:42 size if you notice here I made my H1 48 pixels tall okay so that means in theory this
41:51 text is the same size as this image okay but why aren't they they they lining up and that has to do with font uh or I'm
42:06 the size of your line needs to be taller than the size of the font itself hopefully that makes sense and so and you see this when I highlight this
42:15 you'll see that there's a bunch of space below and above this and that's because by default um I think this is 1.5 so basically it it kind of centers
42:24 the text in a line height that's 1.5 * bigger than the font itself so how can we fix that so uh what
42:33 we're going to do is I'm going to go ahead and add in a um a font style stack
42:41 okay and um what I'm going to do is I'm going to Target H1 okay uh because I want to Target that particular header another thing if you
42:49 wanted to do what you could do is I'm sorry uh did I add a class oh uh no oh you could add a particular class cl to
42:57 this header if you only wanted to Target this one okay totally possible okay um and uh yeah I'm just going to give this
43:06 um a utility class so let's just call it line height one okay um just that we don't
43:15 you have a default class of my class on everything right so I I tend to uh for the font stuff like to put in something in there uh and then I'm going to turn
43:23 off the text size because all we want now is this line height and I'm going to set this to be one across the board so
43:32 what this is is by setting the line height to one it's saying the line height is going to be the exact size of the font
43:40 itself okay so now if I go and refresh this voila so now my text has a line height
43:48 of one which is the size of the text which equals the size of the
43:54 icon that is starting to look nice
44:04 okay okay so there we go uh we did we did quite a bit already right um so but
44:12 we have a lot of work to do right but this is a good a great start we have a nice start to our page we have good colors we have some nice fonts picked
44:20 out um now I have to agree when I have to say when I built this I actually didn't even have a menu up here I decided to add that later but it's okay
44:29 okay um so next up is uh let's build out our sections of of the pages right so I
44:39 know I want to have my kind of my mission statement up at top and then a meetings area that has all these
44:45 meetings um and then a a members area okay so um let's go ahead and just build
44:54 out that kind of basic structure of my page
45:03 okay all right so we're going to do in we're going to add in a header okay and actually you know there's a there's a new stack uh or
45:12 relatively new stack that I I kind of like uh called Bento Box I I think I've done a pretty decent job with it I like
45:18 it and um what we can do is I'm going to uh create I'm going to add a container in here okay and this container I'm just
45:27 going to make it a uh a section okay and we're going to make it a simple container and uh yeah I think that's it
45:37 right what i is I'm going to add in that we're going to add make that an H3 okay and I know uh this is going to be a um
45:47 let's see mission statement okay um and let me get I'll get back to
45:55 Bento Box really quick but now I have this container now this container I set it to HTML tag of section kind of for uh
46:02 you know this is called something called semantic HTML where um I know that this container is a section of my web page
46:10 right um technically like uh let's see like this Bento Box actually also has HTML tag and I'm going to set this to be
46:18 main um which is this is the main part the main content of my page okay now th
46:26 this really does doesn't make a huge amount of difference um but if you're techy and geeky and really want to go
46:33 all out um we have a lot of fine gr controls like that okay doesn't style anything differently um and you can
46:41 argue whether or not it helps Google index your page or not okay but um yeah it's people that
46:49 are like to be very OCD about certain things so now we have a container each one is set to be a section
46:57 okay and I'm just going to copy and paste that now if you notice um before Bento Box I would I would used the same
47:05 thing I would have done container container container and then I would have added like a margin on on each container okay but now with Bento Box
47:13 what I can do is um I can add a gap in between sections of my page so and I can make them all uniform so what I'm going to do here is I'm actually going to set
47:21 it to be 32 okay so now I have 32 pixels in between each
47:28 section and I can I can quickly adjust that actually earlier I know on the site I'm using 32 but earlier I had it set to
47:35 24 right and now all of that is set on one page right or I'm sorry in one
47:43 location and there's also a Bento Box Swatch and whatnot watch the video on that okay um which you can then assign
47:49 it to a container or something like that okay and then up here um this was
47:57 uh meetings okay and over here this was um
48:06 members okay uh let's go ahead and preview
48:12 that voila okay um so let's start building out what do
48:22 we want to build out next let's build out um I guess I I can quickly add just a a paragraph in there right so let's just quickly add in u cuz I know the
48:31 mission statement is just a paragraph of text right so let's just let's just get her done again right now we're just mocking things up we're trying to create
48:38 stuff right so I'm just going to add in some laurum ipsum
48:45 okay now now we're going to get to uh something that's interesting here so we added this mission statement right and
48:53 and that looks okay but right now it's just this big B ginormous bit of text
49:01 okay and here's a nice trick that I like to do um on my websites
49:09 okay and what I do is I'm going to uh there is a common nomenclature out there
49:16 that says um it is very difficult to read long bits of text like this okay um
49:24 pretty much the the best kind of range where a human can actually read is
49:31 around 65 characters per line I think there's a range it's like 60 to 75 or something like that I personally
49:39 normally use 65 characters okay so how can I how can I make sure that this paragraph is never bigger than 65
49:48 characters okay so pretty simple actually let me close some windows here let's see we don't need that I tend to you know over time get a accumulate
49:57 Windows being open remind me later and I don't need that okay um so what I'm going to do is I'm
50:05 going to add in a um with Swatch and um what I'm going to do here is I'm going to go to CSS okay and I'm
50:15 going to type in P comma UL or I'm sorry UL comma O Okay um and basically what
50:24 what this does is it's going to Target all paragraphs and and unordered lists and ordered lists okay um so yeah it's
50:32 going to Target all of that and what I'm going to do is um I'm going to go into minmax and I'm going to go to
50:40 detailed and under Max unit I'm going to use characters and under Max size I'm going to put
50:49 65 so now I have a minimum size of zero which is fine and then a maximum size of 65 characters
50:57 let's have a look voila so now I have this uh this paragraph of
51:04 text that uh will never go above 65 characters pretty awesome now you might be thinking well what about this big
51:12 huge blob of empty area over here that's okay it's okay to have white
51:20 space embrace it okay I'm get getting a little nervous there's not many people in the chat so if you are um yeah have
51:29 any questions let me know okay
51:44 um looks like I lost some users
51:52 here okay um so now yeah now that I have the
51:59 mission statement kind of done let's let's move down to uh members okay and uh what we're going to
52:06 do is we're going to build out a uh we're going to build out a block grid okay because I just want to kind of a block grid
52:14 of of data so uh so now I'm going to go into
52:22 again I'm going to skip meetings actually this is the order that this is the exact order I did when I built this um I didn't know what I needed what I wanted my meetings layout to be so I I
52:31 went to what was the easiest section of the page which was members because I knew I kind of wanted a member card right so we can see everything so let's
52:40 just go ahead I'm going to go into block grid okay and add that below members and then um inside block grid uh
52:50 I I'm going to do uh on small I want one um and then maybe on medium and large I wanted to I don't remember exactly what
52:58 I did before we can look at that later but um let's start with that and um in my block grid cell
53:05 essentially I want a card okay so let's go ahead and interesting you guys are commenting but my my viewer count went
53:13 down to zero so that's why it uh yeah it's wasn't updating so I was just nervous that people like either the stream stopped or something like that
53:21 okay um okay so now anyway we want a card so I'm going to use this Foundation 6 card and I'm going to draw drag that
53:27 in okay um now I spent a long time I kind of know what I've do doing now uh
53:34 but I spent hours kind of messing around and dragging things here and there and to kind of get the layout that I wanted okay so you're you guys are going to
53:42 benefit from I already know what I did okay for the most part I don't have every setting memorized but there we
53:49 go um and then inside of this card okay I had a I have a two column
53:58 okay uh oh wait uh I thought it was
54:05 a wait what what happened there oh there we go I have a two column inside the card okay um and then on this side here
54:14 I'm just going to for ease of it I'm just going to copy this picture stack so I don't have to
54:20 um we're go over there just going to paste all right put that picture stack over there okay and then over here um I
54:30 I just have a bunch of text here I'm just going to copy this this is just a bunch of text okay uh just to save a little bit of time just a card section
54:38 stack okay which is from here card section um and I have a header with
54:44 which is Jo Workman um and then uh one thing you'll notice that some of this
54:52 content is getting truncated and this can make it hard inside edit mode okay um so a lot of times in Block grid what I'll do is there's this cool setting
54:59 here called Full width in edit mode what that does is it makes just an edit mode it makes it so that card no matter what your size is for your block grid just
55:08 makes it 100% width okay which is nice okay so now we can start playing around with this a little bit
55:15 more now I I played around a lot with how to um display um the phone number email and
55:25 website okay okay and what I what I settled on was the list stack now this list stack actually isn't in Foundation
55:33 it's actually from my starter pack okay and what it allows you to do is it allows you to create a bulleted list okay now by default it'll actually
55:42 create bullets um but I set it to be a style of none okay and another thing that I did is I used the utility class
55:50 um because by default it adds a little margin because normally bullet lists are kind of indented a little bit so I wanted to get rid of that by doing using
55:58 mlon Z which is a utility class for margin left zero okay voila okay I now
56:07 have a link uh a list now uh I did have to in order to get these to be links um
56:14 I needed to type out HTML into here okay um so there is that um but link HTML
56:23 isn't too difficult okay um so yeah there were other ways I could have done this I could have used a menu stack um
56:32 the the foundation 6 menu would have worked um that tends to have some padding around all the menu items and then I could reduced the padding or set
56:39 the padding to zero that totally would have worked and then at that point I wouldn't need to use the HTML in here as
56:46 well um but this works okay uh I was just I'll be honest I was just kind of lazy to have to muck with
56:55 the menu styles get it exactly how I wanted um this was pretty much exactly what I wanted style-wise I just needed
57:02 to use some HTML for for the links and I'm not scared of HTML it doesn't scare me right so um I'm good with
57:10 that okay and if you notice here something that's really oh well before I get into that okay then we have uh I just have a button that is going to open
57:19 my goals um and as as you saw on the web page that opens up a light box so I just used an open goal a button stack um and
57:29 set it to various settings right so uh I set the color to be primary so it used the actual primary color which is that
57:36 dark green okay um I set it to be a hollow button and I wanted to be round
57:43 okay so uh I try to use uh all the same style buttons throughout the site um I do mix Hollow and unhollow buttons um
57:52 but all of them are pill-shaped okay so I they all have the round setting chat uh set okay and then below I have Social
58:01 Links okay um now in here what I did is I just uh have a container and then I have
58:08 svgs okay um and these svgs I got from uh there's all kinds of places where you can use it I could have I could have
58:16 used font awesome 5 it is integrated into Foundation um however what I did is I used an app called nucleo again uh it
58:25 is not cheap I think it was like hundred and some odd dollars um but it just has a oops what did I do there I clicked
58:33 something okay um but it has just a ton of icons so I can search for like you know LinkedIn okay and it just gives me you
58:42 know here's the LinkedIn right right and then I can just right click and say copy SVG code and voila okay so I did that I did an SVG
58:50 stack okay um some cool things that this app does okay uh
59:08 secondary or my link color okay it's this color from here okay if you notice I didn't set that anywhere okay um so
59:16 what I did is if you notice if I add so here inside the SVG I said add link okay if you remember inside site Styles my
59:25 link color are set to be this secondary color okay
59:31 so how did I get um this SVG to follow the colors defined on the page so if I
59:38 if I don't have a link okay this icon is actually going to be it's actually that very dark green okay because it's
59:45 inheriting from the default text color okay but once I added a link to this it
59:52 follows the link color how do I do that okay okay
59:59 um essentially uh there is a cool feature in an SVG where if you set the fill okay if you set the fill to be
60:07 current color it has to be set to this exact thing current color okay it will follow the current
60:16 color of the um text in that particular area and it will assign the SVG fill color to be that okay now a cool feature
60:25 of nucleo um whenever I right click and say copy SVG it automatically sets The Fill
60:34 color to be the text color that current color um and that's a that's a feature
60:40 in the uh in the settings and it's in the advanced options here so if you have nucleo okay
60:49 if you set the advanced options to remove inline colors okay what that will do is by default it'll use whatever
60:57 color I Define here okay um but with that setting now when I whenever I say copy SVG code instead of choosing the
61:06 colors that I have here or the color that you actually see it'll it'll put in current color for you okay so little
61:14 small little tangent I know not everyone is going to have this nucleo app um but if you don't have that uh again it's not too terribly hard
61:23 just set the current color again to be or set the fill to be current color in your SVG and then it we'll use that um
61:31 that cool little trick okay right so yeah so in here uh this is just a um Social Links uh and then I just added
61:39 SVG Stacks one for each social network um and yeah again this is just a mockup so I just added a link and then the
61:48 default link is fine because I again I'm not trying to add content here I'm just trying to get my design the way I want
61:54 it okay and let's uh let's go ahead and see how this
62:06 here okay um so couple things um a these
62:12 svgs are ginormous okay um so a couple things that you could do oops I'm going
62:18 to go back here okay um well hey let's look at everything else here I have my card okay and my header is good all
62:26 these links if you if remember we set uh underscore on Hover to be set right underline on Hover so that's working our
62:34 link colors are the correct color um our header is the correct color our uh button is good okay so yeah everything
62:42 else is looking good except for these social icons okay so what can we do
62:49 now oh you guys can hear my dogs yeah the gardener is here um so they they don't like the gardener very
63:01 much is markdown easier for links um yes markdown is easier for
63:07 links however um this uh list item stack doesn't support markdown um this this
63:15 particular list item only supports HTML so markdown wouldn't help us here okay
63:24 um Okay so what can we do here um what I'm going to do is I'm going to cheat a little bit uh just to save a little bit
63:32 of time I'm going to go over here and I already have some um some Styles in here right so I'm
63:39 going to go into here and uh let's just add in a Swatch a stack above okay I'm going to paste this pen move it up into
63:47 here and let's look at this all right so I'm doing quite a bit here okay um
63:56 so let's look at this let's look at everything that I've done here so here I have a container okay that I have a class called Social
64:06 Links okay and um so what I'm doing is on all
64:13 these swatches um I'm either targeting that Social Links container or I'm going to Target um child elements okay so
64:23 um essentially what we're going to do now is let's preview this okay so now what we'll see is um
64:32 they're a they're all in the line the svgs have been made small um they've also been made by
64:39 default their I think 50% opacity when I hover over each one um it changes the
64:45 opacity to one and it makes it grow right a nice little
64:54 effect okay let's let's analyze how we did that um so the way uh first let's start
65:03 off with the size okay um so in here um I'm defining I'm basically targeting all the svgs inside Social Links and I'm
65:13 setting the width to be 20 pixels okay easy we've talked about that one let's shrink it
65:22 okay um next is uh the padding okay I wanted um I wanted actually you know
65:30 what what would be kind of cool is I'm thinking I'm thinking I'm
65:40 thinking here um here let's do
65:47 this watch this all right I I I want to kind of show you guys the progression because obviously I I built this out
65:54 progressively okay so I'm going to say Do not uh post um in here what I'm going
66:01 to do is I'm going to remove all of these pop them over here all right so
66:09 right now um I'm going to set the width of my svgs to be uh 20 pixels okay and
66:17 uh let's go and preview that you know another thing we're going to do is I'm going to go uh no wait that's not what I wanted
66:26 there and then we're going to go here okay let's make this uh efficient so now
66:33 that I have now I have my preview over here and my stack over
66:41 here okay um so now all my icons are good right they're all 20 pixels just by
66:48 this one this one uh Swatch okay now how do I make them in line okay so now I'm going to use a display Swatch now this
66:57 is definitely kind of a there's different ways we could do this okay um I could have used something like a block
67:04 grid okay and then displayed them all out okay I went for a slightly simpler approach and this probably something um
67:13 that definitely is an advanced thing and it's only Advanced because I I understand the underlying technology
67:21 okay now I understand this isn't true of everybody okay um so that's why we have these live streams okay so let's look at
67:28 the structure here I have Social Links which is a container okay and then inside of that I have
67:36 svgs okay so when I use a display Swatch and I'm targeting the Social Links class so
67:44 I'm targeting that container okay I'm going to set it to be excuse me display
67:52 Flex Now by doing that what that does is um it changes the the stacking context
67:59 of that container by default as you see things stack on top of each other but you'll notice when I refresh this page
68:08 now instead of them being on top of each other they're now directly next to each
68:14 other okay now Flex does a lot more but that little tid bit of information can
68:21 be very powerful if you have again if you have a container and you set it to be a display flexx all
68:28 the contents of that container will default to be directly next to each other instead of on top of each
68:35 other so we're getting there right so uh again I set my width first to be 20 pixels so I made all the svgs smaller
68:45 then I set the container to be a display Flex so everything is now next to each other okay now obviously we uh we need a
68:53 little bit of of pading right cuz I think that that doesn't really look nice we need some stuff in between okay so
69:07 bottom and eight pixels on the left and right okay let's refresh and there we go so now each one has four pixel or eight
69:16 pixels there's actually a 16 pixel uh Gap in between each one because each one has eight pixels on both sides so that kind of evenly spaces those out rather
69:25 nicely L okay um okay so now uh you know I
69:31 thought in at this point I thought that these icons were just a little too in yourr face right I mean they're they're
69:40 very they're very eye-catching okay so what I wanted to do was at this point I wanted to adjust the opacity of them so I'm going to go ahead
69:48 and I I added an opacity Swatch and let's talk about the selector here actually I should have talked about
69:54 this in the in the padding Swatch okay um so what I did here is you'll notice that I have the class of Social Links
70:02 and then what I'm targeting is the child elements uh Kyle says fluxbox is one of
70:13 the hardest modules in CSS to understand yes fluxbox is hard um it is definitely tricky okay um
70:21 I'm I'm not going to try to teach all of fluxbox but that one little trick was a nice one okay um so here is a nice little um so I'm I'm targeting uh Social
70:31 Links to that container and then I'm going to Target all the child elements again let's visually look at that so I'm
70:38 I'm uh I have Social Links and then I'm targeting the SVG stack now if I wanted I could have gone ahead and selected all
70:47 of these svgs put the same class on all of them and then I could have targeted that class that's not very efficient right because then in the fure future if
70:55 I added a new SVG I'd have to remember to add that class to that as well so um instead what I do is I Target this one container that has a class of Social
71:04 Links and then I want to Target all of its children so again here I'm targeting Social Links and all of the children
71:13 elements again this is just a strategy of just being a little bit smarter with your swatches because again now I can
71:20 add as many svgs inside of this container and they'll automatically get those particular stock FES does that
71:27 make sense whereas if I were to add a a class to this SVG I'd have to if I were to add a new SVG stack I'd have to
71:34 remember to also add a class now chances are you would copy and paste this and that would do it for you okay but again
71:42 why why require a class when we don't need one okay so that's a little Advanced Swatch selector tip there
71:50 okay um so here uh in the opacity I set the opacity to 50% so let's refresh
71:57 let's look at that and there we go so now um they're at 50% now obviously I think it would be nicer if when I
72:05 hovered over it actually made them full uh you know the opaque basically okay so let's go ahead I'm going to add in
72:13 another um Swatch and what this does is it's going to use um all the Social Links and I'm
72:21 going to use the selector add-on of hover okay okay and then I'm going to set the opacity to one so
72:29 now when I refresh and now when I hover over you'll notice that the colors now become fully
72:37 opaque and that's nice but I think a um if you notice the transition is a little uh it's a little abrupt right so to fix
72:46 that what we're going to do is we're going to use a transition Swatch okay and what this uh what a transition
72:54 Swatch is it ows you to transition from one style to another okay so here on
73:02 Social Links child elements um I I set the transition speed to 300
73:10 milliseconds so now when I when I hover over instead of it being in an Abrupt color change it takes 300 milliseconds
73:18 to go from 0.5 to one right so it's transitioning
73:25 now I think this it's close but I'd like to add a little bit more Pizzazz that let someone know that you know they can
73:33 kind of click and just makes it a little bit nicer and so one thing you can do is you can add a transform okay now that was the last Swatch let's delete that
73:41 all right so this transform what this does is it scales okay so what this does I I I'm targeting only the Social Links
73:50 on Hover okay and um I'm going to scale to one 1.2 so I'm going to make it 20% bigger
73:59 when I hover over so let's refresh and voila now not only do we do
74:07 we go from um 50% opacity to fully opaque it also grows to
74:14 20% and it all does it in a nice animation pretty cool right I'm really liking how this is is
74:23 working so far okay now I think my card I'm pretty happy with it okay um something if you noticed
74:31 has very Square edges and depending on your design um you either going to probably go with square or you're going
74:38 to go with round corners okay and um so if you go to the card what I want to do is I want to round the corners on this
74:47 card okay so I'm going to go ahead and there's something really nice that we can do there is a utility class called
74:54 radius you can add it on anything and anything you add it to gets a
75:01 radius okay let's refresh oops refresh okay so now if we notice
75:11 here I have rounded Corners voila pretty cool right
75:25 all right so now what we can do is um you know if we want to fully test this layout a lot of times what I'll do now is I'll just kind of uh you know because
75:33 I want to see what this is going to look like when I have lots of things on on there right so let's go ahead and copy this and paste paste a few times refresh
75:42 and there's there's kind of like my grid uh and now we start seeing some problems right a these cards are budding up right
75:49 next to each other that's obviously not good that's an easy fix though we can go to our block grid stack okay and let's just add some gutters okay gutters on
75:58 the top and the bottom and let's refresh right there we go okay so now we have uh
76:04 some nice gutters now this gutter here I'm pretty sure actually this uh uh these cards
76:13 okay let's go ahead and go back into the the one card okay um I'm going to go ahead and Shrink this Social Links so it
76:21 doesn't take up lots of space in edit mode I'm going go to this card and I'm it has a bottom a bottom
76:28 um margin okay um and so what I'm going to use I'm going to use a uh MB colon zero on that
76:37 okay and um now I'm just going to take that block grid cell and I'm going to paste it
76:45 again there we go all right so now you'll you'll see that now it's nice now all the gutters are equal right it's the
76:53 little things you got to pay attention to right that I didn't like that and how did I know that there was a bottom margin okay let's let's go into that
77:07 all of those right that's right so I'm going to let's go to this card again and I'm going to delete this utility
77:16 class right and let's just refresh that so if you notice here the Gap is bigger now okay um so
77:25 I'm going to open up the dev inspector um so yeah if you just go ahead and click on this card we can kind of just
77:32 kind of go up and voila margins are always going to be orange in this Dev ins Spector okay and you'll notice that um when I hit this the card component
77:41 and we know it's a card because it you can kind of tell from the code right this is div class equals card radius remember we did add the radius class
77:48 ourselves um and when I do that you'll notice that it has a bottom margin okay and you can actually go if I click on this card you can actually see all these
77:56 are all the styles that are applied to it okay and if we scroll down we probably should see oh here margin bottom one REM and we actually if I go
78:05 ahead and turn that off we can see I can turn that style on and off in the dev inspector okay um so I know if I if I go
78:12 ahead and set this to be zero voila it sets margin bottom to be zero everywhere okay and so in order to
78:20 make that that um that change permanent there's two things I can do I can use use a utility class like I did here MB
78:27 colon zero uh that's probably probably my most used utility class is MB colon zero margin bottom zero um and or
78:37 another thing is I could added a um a margin Swatch set it to be zero and then applied that swatch to the card you know
78:45 but yeah mix and match whether or not you want to use a Swatch or some utility classes the utility classes can be
78:52 definitely useful okay so um there we go I just noticed we're at like an hour
79:01 and a half almost and I still have a long ways to
79:10 go oh Steve asked me about the greater than sign okay you know I I was gonna I was going to glance over that Steve but
79:17 you caught me okay um okay
79:25 um he caught me good one good eye Steve man keep me on my toes okay um I'm just going to go back
79:32 to one card just to reduce the Edom mode okay um for those that that maybe didn't
79:39 know okay or that didn't see um right so it was in this particular
79:46 one uh on this hover Swatch okay um a uh so let's let's stop and let's look at
79:55 opacity okay um so in this opacity Swatch um I used Social Links and if you notice I used um the child selector
80:04 elements um selector add-on okay um and one thing that is nice about
80:14 swatches okay is that um I inadvertently or I sneakily let's say I sneakily
80:21 attempt to teach you a little bit of CSS okay because while over here you can put in a class name and then you can you
80:30 can choose this thing called uh child elements what you'll notice is over in the Swatch over here it actually shows
80:38 you the exact CSS selector that is used what does that mean what that means
80:46 is um it's the same as if I were to go um over to here and go to the CSS mode and if I were to type in that same exact
80:53 selector so was do sociall links um greater than star okay oh uh i' have to
81:03 set that to be none okay essentially now this Swatch is the same exact thing that that that I did
81:11 before okay it's just a lot of these little settings that I build for us they're it's kind of like a CSS selector
81:17 Builder right okay so when I choose uh child elements well first off let's go to none okay
81:26 oops so um by default if you just add a class you'll notice that um what the Builder does is adds a little dot in
81:34 front of there so it it knows dot in CSS is to the way to define a class that we're targeting something with a class
81:42 so dos Social Links targets anything with a class of Social Links okay now
81:48 when I added on the child Elements by the way a small caveat uh I don't this
81:55 month or last month I released a update that changed this from pseudo state to be selector add-on I really like that
82:03 change um I don't know if you guys do but yeah selector add-on just makes sense so for this selector add-on I chose child
82:11 elements and if you let's look at what that did okay um so it did CH uh Social Links uh greater than
82:20 star what this does is it f is it says um star obviously if you don't know means anything okay so star means
82:30 anything now what the greater than sign says is it's anything that is a direct
82:38 child of Social Links um so if I were to change this
82:45 selector add-on to be all descendants okay you'll notice that that changes to just be space
82:53 star okay what's the difference between those let's have a look over in the dev
83:01 inspector okay um all right so let's let's look at the exact exactly what we're looking at
83:08 here okay um so let's find uh here it is here is Social Links
83:16 okay I actually don't need I close that no it's not that is it this no I'll just
83:22 do that okay so here here we have Social Links okay and if you notice inside of
83:29 Social Links I have all of my little icons okay now inside of there um I there's a lot of other stuff there's a
83:37 link and then inside the link is an SVG and inside the SVG there's even more stuff okay now uh let's go over here
83:45 when I say OPAC uh Social Links space star that means all descendants okay so
83:53 what that means is is it not only Targets this div but it also Targets this link this SVG this uh group SVG
84:03 group this SVG path it targets everything okay now for something like um opacity that probably doesn't matter
84:12 but if you're using something like margin or padding or border or background color or something like that right um You don't want to Target every
84:21 single child every single descendant okay so in this case what I I only want to Target this div I only want to Target
84:29 this and this and this and this and this so in this case I only want to Target the direct children of Social
84:40 Links so uh and that's what that carrot does okay or I'm sorry that's what that greater than sign does so when we choose
84:47 child elements and we do instead of space star we do greater than star okay what that does is it finds anything that
84:57 is a direct child of Social Links okay hopefully that is hopefully that makes
85:04 sense okay now let's go to this um opacity on
85:11 Hover okay um so normally when when I do a hover style um here let's I'm going to delete this and we're going to recreate
85:19 it normally when I create a hover style I copy that swatch the original original state and I paste it
85:27 okay then I make adjustments to what I want on Hover so in this case I want my opacity to be one okay and then normally
85:36 what you would do is you you would change a selector add-on to be um hover
85:44 however let's look at what this does right I'm going to refresh this page if you notice that doesn't actually
85:53 work right it's not working okay because I'm I'm targeting Social Links itself the container I'm not targeting the
86:01 children at this point because I Chang my selector add-on from child to
86:06 hover okay so um what that means is I I need to I need to muck with this this
86:14 selector and and find a different way to Target the um the svgs when I hover now
86:22 one thing I could have done is I could have done uh oops darn it I closed that didn't I let's let's refine those things all
86:31 right um if you notice in here I could Target there's SVG has a class so I could have done something like this
86:38 Social Links space um SVG okay and then done um
86:47 hover right that could that could have worked okay and that does work okay there's a
86:54 lot of different ways to do this okay um but what I did was I already knew um again let's go back to I started with
87:03 this Social Links um oops uh save that Social Links greater than um star and
87:10 that gets me all my child elements but how can I get hover how can I mix child elements and hover at the same time
87:18 because I I I need to use both selector add-ons okay um so what I is I just did something tricky and I just took the um
87:28 greater than sign oops I just took the greater than sign and I could have done greater than star okay um and then set
87:35 this to be hover and at that point this would this would work as well okay so let's go ahead and refresh and that does
87:43 work okay um but I I I just because I know CSS uh I I knew I didn't need the star um and I just needed to have a
87:52 greater than sign um and so what this says is um Social Links uh uh greater
88:07 style okay so and that's what I ended up with on the on the site um and what I
88:14 had earlier and uh and yeah Stephen you called me out okay so that was a nice
88:20 five or 10 minute tangent there okay if you ever need to if if you just
88:30 do um okay um you've probably seen me use
88:38 this app um if you've attended my live streams at all or hangouts um this is an app called Dash
88:47 um you can also just find all of this online Okay um it's all on MDM web docs
88:54 okay um but Dash just integrates it and it's all local on my Mac um and I can search it fully okay and it has I use
89:02 Alfred and integrates with Alfred as well um but yeah you can just search here and do selector I think it's selector list
89:11 and um is this one that has all no this isn't this isn't what I wanted
89:26 uh types uh Universal selectors ah here right
89:36 um well that just tells you about ah there is a I know there is
89:49 a oh there is a CSS Doc Page I mean I it's all in my brain now but I know um for a while I used to reference it every
89:57 now and then before you know uh that kind of showed you all those little things the greater than signs and there's other ones okay some of them are
90:04 there's like a little TIY one that is like a a brother um or next two basically um which is useful sometimes
90:14 um oh there's a plus sign um as well which is good uh I guess this one has some of it but anyway uh also hold on
90:22 one second let me uh me share something I I've preached this book a
90:34 lot okay it's um HTML and CSS by John Ducket okay um I think there's one
90:41 chapter in this book that is now kind of obsolete um but for the most part um this book is gold okay um it is like no
90:50 other technical book you've ever seen okay it's like a it's like a coffee table book okay it
90:59 literally is like the most approachable technical book I've ever seen um and it
91:05 is it is a brilliant way to learn CSS okay brilliant now I I I've boughten
91:14 like four versions of this book or four the same version but for books spend a little bit extra get the
91:21 hard cover okay um the bindings on the soft cover book are not fantastic okay
91:29 um so yeah on am this book is cheap on Amazon spend a couple extra bucks to get the hard cover okay um if you didn't buy
91:37 the hard cover already sorry uh eventually your bindings on your soft cover I've gone through two or three of them okay um I I I'll be honest I don't
91:46 really use this book any longer um but it is gold right check out this book
91:52 HTML and CSS John Ducket it's awesome okay all right uh let's get back to
92:03 sharing okay um
92:13 okay what was I doing now oh um okay I think I think I'm pretty happy with the cards right um
92:25 let's see what else did I uh let's just preview this page
92:34 um yeah all right so now let's move up uh you know I I can create these little edit profile buttons those are
92:42 pretty simple um again we're we're going to all we we can start mocking this up
92:50 this page up now actually um let let's move to actually We'll add these little uh these little buttons here I've actually changed this a little bit on the final site I'll have this new
92:58 meeting it's I have it a little SVG over here so we'll tweak this up a little bit to kind of get uh the final you know uh
93:05 this final page done oh one thing I okay um I I wanted to add some um some some hover styles to the card itself
93:14 okay um so I'm going to do is here what I do on that oh okay
93:21 yeah um what I do here oh interesting uh sorry just
93:29 reminding myself of some of the other things that I I did okay
93:38 um I'm going to copy these Styles okay and um I'm just going to paste them into
93:46 here right uh I'm not going to dive into every single one of these Styles okay but let's go ahead and review what I've
93:53 done a little bit right um oops so this uh targets member card and inside here
94:08 notice it instead of that remember earlier I added this um this utility class mb0 okay um here I just had member
94:17 card I actually have a margin Swatch that sets margin to zero there we go okay
94:24 um so let's refresh that so now voila okay you'll notice now that when I hover okay let's close that when I hover we
94:33 get a nice effect but if you notice something here you'll notice that that shadow gets cut off okay um so let's go
94:41 ahead and if we look let's go ahead and on this container okay uh I'm actually going to do it on all of these uh
94:50 actually let's just do this one container I'm going to set overflow to be visible okay on that refresh
94:58 that oh it could be on uh where is where is
95:12 that oh actually it's the bottom of the web page I think interesting yeah if I were to add
95:21 in uh did I what did I did I add some I thought I had some pading here
95:29 hold on one second yeah it should be
95:39 interesting oh there's overflow hidden it's on this bad boy here all right so
95:47 on this container overflow visible
95:58 come on man all right let's see let's keep going down uh let's see we have this container here overflow
96:12 visible oh wait oh oh I'm looking at the wrong wrong project file oh Jesus I was looking at the old one uh
96:21 okay uh visible all sorry my bad go on this one uh overflow
96:30 visible there we go okay helps if you open if you change make the setting changes on the right
96:38 project file okay um so there we go um so here we will see that when I hover over the card um we get a shadow and
96:47 also the the card kind of lifts up a few pixels right it gives it a quite nice effect okay
96:55 um so let's let's just look at that really quick so um here I I provided a maximum height to
97:04 the um to the cards okay um and why did I do that I don't
97:12 remember now um here we do the Shadow on Hover I'm not sure that actually is doing anything useful
97:24 yeah interesting 1 th000 pixels minimum
97:32 100% oh okay um yes uh this this Swatch actually isn't even useful anymore I was that was
97:41 from I was playing around with some other ideas okay um Shadow so here we have a um a default Shadow actually here
97:48 let's do uh actually there is no Shadow by default okay and then on member card on Hover right basically I'm adding uh
97:57 and the shadow if you look the shadow um is using a actually you know I should do a use a Swatch color and then you can actually use uh
98:06 let's say I want the primary color okay and that way uh the Swatch uh the shadow
98:12 always follows the colors from sight Styles right one thing I don't like
98:19 about that you we could probably tweak that a little bit is that um it makes it very harsh right so what I had done is I
98:27 used that the same color from uh primary but then I made it opacity 40% right so
98:34 that um it makes the shadow much less harsh um you could probably tweak these settings a little bit though maybe increase the blur and decrease the
98:42 spread a little bit to kind of make it so um that color isn't quite as as
98:49 harsh um so anyway so yeah there is a shadow on Hover and just as before if you notice the shadow kind of animates
98:57 it's not like an Abrupt change okay um I used a transition Swatch we already learned what a transition is and then I
99:06 use a transform Swatch um to make it rise up by two pixels okay so in
99:12 transform I use move and I move on the Y AIS negative pixel negative -2 pixels up
99:20 okay so yeah so I'm moving -2 pixels up um and I I left all the other uh settings uh
99:27 default and one thing I also did is uh by default board uh cards have a border okay uh if I just go ahead and here just
99:35 show you I we'll disable that okay cards have a border okay and um W they they look actually it makes it
99:44 look nice uh it doesn't look nice when you have the shadow um so yeah I what I did is I just added a border Swatch and
99:51 I set the Border uh it border size to zero pixels so you're setting I'm setting effectively removing the border
99:59 from the card okay and uh there we go it gives it more of a flat look um when
100:07 without the shadow um and then it I think it looks nice so there we
100:14 go okay um so there is the some nice effects that we did for the card um let's look
100:23 at some some other things that I did okay um let's look at the uh open goals okay so this button um I like
100:31 Hollow buttons but I thought it I thought would have been nice when I hover over the button it kind of um flips the colors okay um so let's have a
100:41 look I I'm going to copy that and this is a really really really simple one okay um so on this button I
100:50 have a class set to open goals okay okay and something that I I like to do um
100:56 when I remember okay is uh when when something has a class I put that same class in the title so that I can see
101:05 that this uh button has a class of open goals right so like on this card uh when I added member card okay I should have
101:13 added it to the title okay and that kind of when I when I'm looking at my um stuff I can see um all the various
101:20 classes that I can Target things with okay so if you see down here I have Social Links okay uh on the button I
101:27 have open goals um and then in this in the card I have member card right so now I have all various things that I can start
101:36 targeting so if we look at the open goals I have a background and a font color swatch so um basically uh what I
101:44 did is I did open goals on Hover and then I I set the background color to be the primary color and then on for font
101:53 color I did on Hover set the uh color to be the white color and again I I'm using the Swatch colors here so that um if I
102:02 were to ever modify the colors and sight Styles um it's going to just reference those colors super useful uh you can
102:09 define a custom color but then at that point it's no longer linked to your kind of your site colors right so um I like using these Swatch colors as most as
102:18 much as possible okay um so now let's refresh this page now when I hover over this button uh we
102:25 get a nice U kind of uh effect where uh again the background color changes to be that uh that primary darker green and
102:34 then the goals are uh the text color is white pretty nice
102:43 okay um now the last bit here
102:50 is comes into effect um I'm going to show you the problem that I had now right now this card looks
102:58 I think looks amazing okay I think it looks pretty awesome uh and uh at this point what I
103:05 did was I then um oops uh I'm I'm going to take this right and
103:13 we're going to duplicate this multiple times just so I can start testing um this page out uh with multiple cards I
103:21 think it looks I think it looks great right right but then you start playing around with okay now we need to make sure it looks good everywhere it looks
103:29 great on desktop right but how is it going to look when I start once I start
103:36 shrinking oh no what happened now uh I can refresh and oh man what the heck's going on this starts it starts looking
103:45 horrible right uh so what are we going to do here you know it it looked really good when
103:53 was on a big screen uh when the image was bigger than the text okay it looked great but once we
104:01 started going down starts to not look great
104:07 okay so what are we going to do
104:14 here this next bit um took me a long time okay um and I'll I'll show you a
104:23 there's a cool tool um it is not cheap okay um it is even subscription
104:30 software okay um and uh it is pretty nice though I have to
104:37 admit I I sometimes I forget that it's there um and I forget to use it myself um but it is a it is a special browser
104:46 called polyan okay and um what it's really good as it kind of shows you
104:53 your pages um across a lot of devices all at once okay now you could use um
105:01 the simulator windows in Rapid Weaver okay uh definitely possible um poly pane I think is nice
105:09 but again it it is not cheap okay so you might uh you might just be fine using the dev inspector and um using like this
105:17 responsive view okay in the dev inspector okay where you can be like okay I want how's it going to look on an
105:25 iPad Pro now right and you can start seeing this okay so um I admit polyan is
105:32 a luxury right and it is a subscription a yearly subscription I bought it Black Friday last year um and I said I'm going
105:42 to use this for a year see if I like it and I have to admit I kind of forgot about it for a long time and it just
105:49 kind of fell by the wayside um however when building this site over
105:58 the past few days it was actually a it was really nice okay I I really did like it um it was a huge benefit what I do is
106:06 and what I did is I actually added a fourth view here um and I added a small iPad Mini
106:16 okay so I kind of had this this view was kind of like my view right where you have small iPhone um actually instead of small tablet what it is I set this to be
106:25 um iPhone 16 uh here let's do this one is like a iPad or iPhone what's the oh here the mini right
106:33 so yeah here we have the iPhone 12 mini iPhone 16 Pro an iPad and then desktop what's kind of cool is it kind of syncs
106:42 the scrolling uh it it it's a nice app okay again I'm not going to sell you on this app um because it is expensive but
106:51 it's nice right allowed me to quickly debug this stuff and really I think it looks okay on on small devices um but
107:08 okay um and let's go over what I did to fix
107:15 this uh let's uh how do I exit this mode there we
107:20 go all right so let this mode here right just looks
107:27 garbage so let's analyze this layout a little
107:33 bit okay um so here I have a block grid oops let's just open up the top one okay
107:42 I have a block grid and um and a two column right so there's two things I can kind of break here um and if you notice
107:50 in this two column um I had it set to 12 and then um so column one um on small
107:57 devices it goes full width and then on medium devices it uh basically it splits
108:03 50/50 okay now let me remind myself what I did here okay oh
108:12 yes okay um this very interesting okay
108:24 and then that was I remember photo yep yep yep yep yep yep right um so a couple things you'll
108:33 notice that in here I have a link container um and the reason I did that is that um essentially uh what I wanted to do is if I clicked on the person's
108:42 picture or on the goals button it would open up their that person's light box okay so um that's an easy fix right so
108:49 let's let's let's add that really quick um let's just go ahead and add a link
108:57 container and I I did put a a class of member Das photo on this okay and I'm
109:05 going to add that there
109:12 okay and let's just copy that paste it in there okay
109:19 um so now uh eventually when when I go to to create this I can I can configure this link to open up that light box
109:34 okay trying to think of the best way to do this without taking an hour to to to go through my entire
109:41 thought process of of this um because again this this bit took me a
109:49 lot of playing around and ideas and uh I first I I chucked this whole thing and I tried to do it with Bento um which kind
109:57 of worked but I kind of like the Simplicity of this this layout and I wanted to make it work okay um so I
110:05 think what I'm going to do is let's let's analyze um what I did here and I'll tell you why I did it okay
110:14 um all right so let me just review let's see this
110:23 block grid okay so in the block grid um this is probably the simplest thing um I went from small in medium is one column
110:32 and then large is two column okay so uh let's make that change first okay so in this uh in this block grid I'm going to
110:40 change my medium to be one so I'm going to one column for small and medium and then large uh I'm going to break up to
110:49 two now let's have a look at what that looks like all right so uh here on large we go two
110:56 column and then once we hit medium it goes to one column okay uh and then small it goes to
111:04 one column as well okay so that that's actually I think a pretty decent workflow right I think that I think that
111:11 that looks a lot nicer so that fix actually I didn't I didn't do that fix first I tried a lot of other complicated stuff
111:19 first that that actually is really nice really simple small change and if you notice it it actually
111:27 completely changes the layout a little bit just by that one simple change because we kind of have two styles of cards right now right if you look uh on
111:36 here we have the image and then our content okay and then on small the image is on top with our
111:44 content okay and then on medium um it goes from it goes to one but it's side by side
111:52 side so it's not as tall right so we kind of have three different cards here just with that one simple little
112:02 change okay now one thing we need to fix is um this image like right here it's
112:10 not it's not working too great okay so and that is a little complex
112:18 okay um so let's go ahead and I'm going to copy I'm going to do what we did before and I'm going to I'm going to take all these swatches that are here
112:27 that are assigned to member photo okay we're going to paste them in here and actually you know what I did uh
112:34 what I liked before is I'm going to um I'm going to say Do not publish any of these okay uh and now actually I'm going
112:41 to go into here all right um and let's just go ahead and all right so now uh what I'm
112:50 going to do is I'm going to move everything up uh one at a time okay um so we can kind of see the
112:58 difference um of what we're doing okay let me talk about conceptually what what I plan on doing first okay right
113:08 now um this First Column okay is uh controlled by the size of the
113:17 image right and if I shrink this uh if I shrink the browser okay that means the size of of in this two column the size
113:26 of the columns remains kind of static right it's 50% but this image because how images scale is when
113:35 you when you make it more um narrow it shrinks right because the image
113:42 scales right and it it's set to display the entire image all the
113:49 time so what I plan on doing is I'm actually going to make this First Column here
113:57 static okay um so uh it's just going to be a static size it's always going to be the same
114:08 size of the card hopefully you see that right if we go down again look the image is the same
114:16 size it's just the content okay and then when I flop down a you'll notice that the cards oh that one kind of oh this
114:25 one got a little funky for some reason with that image but in this image here okay you'll notice that um it doesn't display the
114:33 whole image um and it only displays kind of a portion of the image okay now something happened in this particular mockup not sure I I must have fixed it
114:42 in a different location okay um but yeah there we go I'm thinking this uh this mockup
114:51 actually I fixed some of those issues on the non-m mockup page okay I might be jumping ahead of myself a little bit
114:59 okay um so let's review this okay um and actually to do this let's look at my two
115:07 column settings okay so in in this two column settings
115:13 um column one on small is going to be 12 okay and on medium it's going to be shrink to
115:20 content okay because let's say on medium and large it's just going to shrink down to the size of this one column and I'm
115:27 going to statically set that size of the column okay um and then in column two it's just
115:36 always going to be Auto so column two which is the content it's always going to be it's always going to grow as much
115:42 as it can to fill all the space right so let's make those changes I'm going go into column this two column
115:51 I'm going to set it to be uh instead of uh 12 on small and then medium it's going to be shrink to content and then
115:58 uh the second column is always going to be Auto okay essentially having it uh uh
116:05 how it was uh 12 on small and then Auto effectively the same thing okay but um
116:13 yeah we're just going to set to Auto on everything just to keep things simple right so now we've done that
116:22 now um what I need to do is as I told you before I'm going to set the width of the of this member photo okay I'm
116:31 setting it to be 192 pixels okay let's see what that
116:44 does okay actually in this case um it's only this card remember I can't I have a lot of other cards just focus on this on
116:52 this one right here okay so as you see that is uh oops this
117:08 object fit okay because what we want to do now is we want to take this image and have it fill the
117:16 container okay um and we need to do a couple things um
117:32 first is member photo okay I want the member photo which is this photo I want it to grow to be 100% height okay so
117:41 here I set the height of member photo to be full container height so height
117:48 100% then what I'm doing is I'm targeting the image inside of member photo and I'm setting it to be cover
117:57 essentially I'm taking the image and turning it into like behave like a background image okay and then you set the position to be Center Middle
118:06 actually these settings are the default settings okay for object fit so um and let's have a look at
118:12 that right so now again I set in member photo I set it
118:19 to be 192 pixels I set it to be 100%
118:26 height and then I set the image to fill the container and Center itself even if that means cropping some
118:34 of the image and as you see it looks different than this over here but now as I shrink it looks good
118:43 okay well it doesn't look good on small yet we're getting there okay okay because on small we have it set to be height 100% that's not what we
118:53 want right so um I have another um another thing here called height third
119:08 height so now when I when I refresh okay and I go back to small you'll notice
119:17 now okay the small container is uh it it takes 33% % height and but the image is
119:24 still kind of filling the container and centering itself pretty
119:35 cool okay um now have to admit I'm not sure I I recall what happened I'm not sure what happened down there uh it doesn't happen
119:43 on the on the prod site we'll look at that in a second whoops didn't mean to do whatever I just did that was an
119:50 accident okay okay here let's quickly look at that what did I do
119:59 there something that's useful some sometimes when you're debugging stuff sometimes you can put the inspector on the side um especially when you want to
120:07 debug um small view um
120:16 so wonder if it was in that card remember I think I I deleted a uh I
120:23 think I deleted something that member card I think it was this height Swatch let's see does that fix
120:37 things nope that didn't fix it remember card
120:45 okay what did I do here
120:53 oh it's still way over there that's weird
121:03 oh okay instead of that two column being Auto if I set it to be 12
121:15 Auto okay that worked and then
121:28 this small 12 medium shrink that's
121:36 correct uh let's look at this two column what did I do here
122:10 right uh what vertical alignment what if we did top that actually would probably do it oh but then that that's not what
122:19 we want
122:40 I remember running into this yesterday let me let's set that back cuz
122:48 that obviously oh I did refresh
122:57 I recall fixing this yesterday but I think I did it after I was in out after I was out of the mockup phase I think I
123:03 fixed it but um here I'm going to I'm going to cheat
123:13 a little bit here uh let's go back up to here which is the final page it m card
123:29 open walls you know for fun I'm just going to I'm going to copy
123:37 this let's go to my mockup
123:52 still not
124:07 fixed oh it's meetings down
124:17 here oh it's meeting notes on 111
124:23 gutters vertical line stretch looping up
124:32 cell 12 12 12 Auto oh yeah I did do 12 Auto there
124:53 oh man here I am doing the wrong project file again it's all
125:01 good idiot all right let's go back to this one sorry paste in
125:11 there oh same exact Behavior right
125:25 all right uh let's all right
126:01 H it's stuff like this that can take me a half hour to figure it out or something like that um I don't want to waste your time I obviously did figure
126:09 it out in the final project I do remember this what was it though that is bugging
126:18 me uh let's go ahead and let me just preview this page because this page doesn't have the
126:27 problem right oh oh it does oh let's go to the homepage oh oh let's let's go to the
126:36 actual live
126:47 page oh I remember now um
126:54 uh I remember now uh let's go to oh here
127:02 yes I have this sneaky little Swatch at the bottom of the page I used equalizer
127:09 okay that was stressing me out here all right um so I used an equal here just copy that that's why you keep your stuff
127:18 together um actually here all so what I did is I used the equalizer
127:26 Swatch and I targeted um the class member grid okay which is um this here
127:33 let's um I added a class to the block grid itself okay called member grid so I'm going to do member Das
127:42 grid let's add it to the title because that's always good okay and then
127:49 um I targeted the uh equalize class uh
127:53 card column okay and that
128:01 was where did I put the card column class okay I put it on um on the member
128:11 photo I have a card column class and then in this card section I have a card column class okay and essentially what
128:21 it's going to do is it's going to uh set the height of the member photo to be the same height as the card
128:29 section okay and actually you know what now that I'm thinking about this solves a different problem that I didn't run
128:36 into I think right but it's fine this was a something that I
128:50 did see how that that works was it this
129:02 one oh also I think part of the problem is that okay let's go ahead I'm going to
129:10 delete
129:27 what that equalizer Swatch did uh okay um what you would notice is without that
129:35 equalize um if we were in this view here if you notice uh well if if let's say
129:43 someone didn't have a phone number okay the size of this content would be different than the size of this content and what would happen is um the car
129:51 cards themselves um would have like a small Gap somewhere so that equalize was needed and it was something that I
129:58 figured out as I was testing with live data okay um
130:05 okay I'm going to move on hopefully I I discover uh what I I did um
130:13 previously okay to fix that issue because at this point I'll be honest a lot of these minor tweaks that I'm
130:20 making right now okay um I didn't make until I already migrated this particular
130:28 page to be used as total CMS and we're already two and a half hours in on this
130:33 okay so um all right let's uh let's move on and hopefully again hopefully we'll
130:41 we'll figure out what's going on in that small device because I did fix it uh and I do remember it happening I don't
130:47 remember the exact fix though okay um let's go ahead
130:54 and I'm going to take this um this block grid um that I built for the meetings
131:01 okay and uh I'm just going to copy and paste that okay and we'll we'll review what
131:10 I've done here okay um so if you see this layout it's pretty simple it's pretty simple um I actually uh started
131:20 uh this lay out with hold on one second let's go ahead and just do
131:28 hide which show the top one okay um I started off with the same exact card
131:35 down here okay if you notice even says member card it uses all the same classes to be honest I I probably should change
131:42 it since this is a meeting card and not a member card uh I should probably maybe make this instead of a member card maybe like a I don't know a guild card or
131:50 something like that so that it's a generic card that could be used anywhere but I was
131:57 lazy right so it uses the member card class um that way we get the same uh hover effect okay as we got with the
132:04 other one so we get all those styles for free just by adding that uh card with a member card
132:11 class and then um in here I just added a card section um and then in there I have a a
132:18 header um I have a button uh that uses that same uh I use the same open goals class so that we get this uh this effect
132:27 again this is a meting notes so maybe I should uh rethink the open goals class since it's now more generic and it be
132:34 something that you know isn't open goals right um but I did make it smaller so I just changed the the button on this one
132:42 to be a smaller button um and then here I just I used a block grid okay and in the block grid it
132:51 just adds in um a bunch of images okay and I thought it would be fun here I have a header a block grid of images and
133:07 people okay um in it um so that's why I made the columns seven so it'll if everyone attends all seven images will
133:17 fit perfectly right here in one row um but obviously some people miss they'll be you know dispersed across two of the
133:24 things okay so this was my general mockup actually this this I played around with quite a bit with different layouts this was the a pretty simple
133:33 layout that just I I really liked okay I played around with like adding people's names but it just didn't look great
133:42 right um so yeah having just a list of images uh with uh the people down here
133:48 uh was was pretty good okay um so at this point um actually it was before the before I did the meetings uh
133:56 the meetings layout um I actually started integrating total CMS into this and let's start doing that now let's start integrating total CMS into this
134:06 layout um and so let first off let's let's go into here and let's integrate total CS with with the members grid
134:15 okay um so this is kind of uh ending the foundation
134:24 build site build portion of this um page or this live stream okay and
134:31 we're going to start diving into setting up total CMS now I'm not going to set up total CMS from scratch here and and I'm going to show you what I did um or else
134:40 we'll be here for five more hours okay
134:52 um so I'm going to go into um my total CS admin
135:02 area oops what's going on
135:11 here there we go right um I created um if you notice this is the total CMS 3 um
135:20 now I'm not going to dive into publishing essentially publishing total CS super easy all you have to do is add in your
135:28 um total CMS core to the page okay um and then you publish and you get
135:36 access to this now a workflow that I've I've grown to really like while playing
135:42 around and using total CMS 3 is um total CMS works 100% inside preview
135:50 okay okay um but um I have M running okay if you notice this um this domain
135:58 here is just local. thegrowth guild. org okay and um in
136:06 M I set up that as a domain U this this domain doesn't exist on the internet um
136:13 and so basically I set it up um and it w it looks at a folder that inside my project file okay if I go go to my
136:21 publishing settings it just uh publishes to that local folder okay and then I can just preview
136:30 it right here inside M and um I really like that workflow
136:36 um I mean for me I I never use you know I I don't know it just it I just kind of
136:43 learn to always use the browser and so now what I do is and Publishing to a local folder even though total CS 3 has
136:50 a lot of files 5,000 files um is super fast okay um so yeah that's the kind of
136:58 setup that we're going to be using today it's running a full-blown Apache web server so that you know um total CS 3
137:06 works great I have a custom domain that I can reference that works perfectly on my Mac you can't get to it it's not
137:13 online it's only on my Mac okay um and yeah it this this works with or without rapid Weaver even running
137:22 okay so pretty cool um what I've done here is um again I I'm not going to go through the ground
137:30 zero of total CS 3 um but in total CS 3 you create something called a schema so I need to
137:38 be able to manage meetings and members so I've created a meeting um schema and these are all the fields available to me
137:47 um in that schema we have an ID for the field a date uh who attended who missed um summary
137:55 and chat then we go to my member schema okay and that has a lot of fields okay um we
138:03 have a photo whether or not the user is active or not so I can actually disable a user um and basically turn them off so
138:10 they can't access it an ID a name an email phone website birthday I have some cool stuff with birthday I'll show you
138:16 in a little bit um password LinkedIn um so basically a bunch of social profiles so LinkedIn Instagram YouTube xmed on
138:25 Facebook um a little about paragraph um the person's goals for their year and goals for the current quarter um and
138:34 then some hidden fields for um you know when their account was created how many times they've logged in and their last login
138:42 okay um oh and passwords in here somewhere password okay so there's a lot of fields for a user okay um um but yeah
138:51 there we go uh you define uh the required Fields um and then all the fields that you want
138:57 to be able to access um on the main page okay and also any field that is searchable okay so like in meeting uh
139:05 when I set up the search I wanted to make sure that everything was searchable so actually all fields are part of the index because I wanted to be able to
139:12 search for any field okay okay so uh yeah really quick that
139:21 was that okay uh then I went in here you can uh I created a bunch of other things that I did um actually here let me go
139:30 into the setup I took the time to go through here and set up the factory information so like here is an image um
139:36 for name I use name um and email I it just set Factory to be email um and what
139:44 this does is it allows you to automatically generate things right so for example if I go into my uh
139:51 meetings you notice that it just automatically generated a bunch of stuff for me okay using something called the
139:58 factory and you can automatically add if I want to add 10 more meetings um it just adds fake data into your CMS right
140:06 so right now I just created 10 meetings right now so if I go back to my meetings um you'll notice that there's actually a page two here there wasn't even a page
140:14 two before okay so I've added 10 more meetings uh which is pretty cool okay it didn't populate attended and missed
140:22 because yeah it it's not that cool okay um but it does generate a lot of fake data and i' same thing for users um it
140:30 created a bunch obviously I created mine manually and then I just created a bunch of other users that had names and emails
140:37 and fake phone numbers and fake website kinds okay um I did manually upload my
140:45 photo um so that you know um there isn't the ability to uh you know maybe I should create a Joe Factory so you can automatically you know populate your CMS
140:53 with pictures of me if you ever wanted that right um there we go okay um I'm probably not going to dive too much into
141:09 did is I I just added like this the site logo um I added uh in style text I have the charter and our mission statement
141:17 okay as static text in the CMS okay with that done uh let's go back to
141:27 um our project okay so let's start off with building um
141:35 this okay and uh showing you how uh I'm going to basically migrate all this data
141:42 okay so I actually kind of liked this workflow quite a bit um you know
141:50 building the the mockup and then um taking this data and replicating it many times to create the final grid um that I
142:01 wanted okay so uh what we're going to do is uh let's make this window a little bit bigger so I can have the
142:09 uh the stacks Library open actually we don't need the pages just a library okay um so now here I have all of my my total
142:18 CMS Stacks I know they all have the same same icons right now and that makes it a little bit tough but uh eventually they'll have their own icons okay um so
142:26 what I need to do is I need to create um member cards here okay and so in this block grid I need to I need to generate
142:35 multiple block grid cells for every single member right so if you see this this particular area Okay uh right here
142:45 I need to replicate this for every single member okay so let's do that
142:52 so we're going to do this with the loop stack okay and again at the very top you add in your total CMS CMS core you can
142:59 actually even add it into the uh the features inside sight Styles okay um so what we're going to do is
143:06 we're going to drag this into the block grid stack right it has to be inside block grid okay and then what I'm going
143:14 to do is in I'm going to drag this block grid cell into the loop
143:21 that Mak sense okay so now what I'm going to do is I'm just going to start replicating or
143:29 deleting this data with the data that I need okay well let's configure the loop first so in the loop I need to uh Define
143:36 The Collection so uh the collection that I created um for this was called members so I'm going to Loop through the
143:44 members collection okay um in total CMS and the loop variable basically I'm
143:51 going to uh each one of these is a member okay so most of the time your collection and your variable are going
143:58 to be the plural and singular versions of whatever you are doing okay so we have members and when we Loop through it
144:06 each each instance of the loop is going to be assigned a variable called a
144:13 member okay so um and now what I can do is I can then access that member information
144:21 so um for example here now this is where it's very important that you know your data okay
144:29 uh let me go back to uh here so if I go into my collections we'll see that I'm in members okay and actually let's go
144:36 into our schemas and see what a member is here's all the data that we have available to us so obviously my the name
144:45 of my member is called name okay so here I would use curly brace curly brace member.
144:57 name okay so there wherever I put this this is now where um the member name is
145:05 going to be put okay um and just for Speed I'm going
145:12 to go ahead and in here I'm just going to copy these
145:27 all right so um here basically if we look in
145:38 here I have the member phone number now I updated the this again I am using HTML as I said earlier okay and uh
145:46 essentially I I'm using the telephone uh syntax so you do Teel colon and then it's going to inject the phone number
145:54 into the U into the URL and then I I put the phone number as the link text okay
146:01 um then uh I do the mail for email I put I use a mail to link and then I put in the member email and then the member
146:09 email is text again this might be a little more user friendly if I had again chosen the menu stack instead of list um
146:17 but I was kind of building this for myself and it I'm not scared I'm not scared of HTML but um yeah in retrospect uh it might be a little bit
146:26 more user friendly uh for you guys to use the menu stack uh for something like this okay um and then you wouldn't need
146:32 to know the some of this scarier syntax now this is kind of interesting
146:39 okay so um let's look at let's look at my
146:45 um my user account okay if you notice here my website is
146:52 set to https www. weaver. space okay however if
147:08 okay oh oops where where' I go down here you'll notice that it doesn't say
147:15 https weever dospace okay and
147:23 um this is because I I did some twig trickery and
147:30 um if we look at this let's inspect this really
147:42 quick okay if we look at this we see that the link inside the the link it we
147:48 have to have https col Weavers dospace okay but in the text part of my link I
147:55 don't want that I it just doesn't it looks nicer if you have if I were to put www. weaver. space inside the link it
148:03 wouldn't work okay you have to have https or HTTP uh or else it won't link
148:10 to the correct website okay um so what I did was um for the for the actual
148:18 content of the um um link the text of the link I stripped
148:24 out the https and the ending slash with twig right because twig is freaking
148:32 really cool okay and um I'll I'll show this to you um I do some a lot of twig trickery in
148:40 in this project um and yeah just because I was playing around and I thought it was fun okay um so I will I'm not going
148:48 to dive into every single little thing but I'll I'll show you what we can
149:02 do all right let's turn
149:11 on um let's oh uh hold
149:18 on uh language mode HTML all right there we go now we can kind of see see this a little
149:27 bit better okay so if we look at this um I have the beginning of my link and and
149:34 then you have href equals and then inside here I have U member. website and this is where it's going to put in the
149:42 exact data um here let me go ahead and close some of these tab that I know we don't need anymore okay so it's going to put in the
149:51 exact website all of it okay uh and then I use Target blank which opens it in a new tab uh and then inside here right
150:07 here's my closing link tag and then inside here this is the
150:13 content of um the text of the link so we're using some magic in here
150:22 okay and what it's doing is it's doing member. website so it's taking the full website that includes https okay and
150:29 then I'm splitting it what that means is it splits it based on um the
150:36 slashes okay so what that means is okay so what what it what it's doing
150:45 is it's finding every single one of these and it's kind of a splitting that data so it's going to be that's one part of the data that's another part of the
150:54 data and that's another part of data okay so first it's getting that as one part and then it's getting this then
151:01 it's getting that and then it's getting that so it's splitting the data um splitting this string based on a
151:10 slash okay then um now this is the this is probably the the most confusing part is
151:19 um of the results from the split I want you to start at um so this
151:27 is an array again this is getting quite technical okay um in Array this is uh
151:34 item number zero this is item number one this is item number two
151:42 and that's item number three okay so it split this string into an array where
151:50 this text is item number zero that's number one that's number two and that's number three so what we do is we say okay I
151:59 want you to start at number two so it's going to start here and then only give me
152:07 um one only only go one okay so basically what what it's doing is it's it's slicing this up and it's
152:16 returning a different array that only contains the text that I asked it to
152:22 okay now if I had done um 2 two what it would do is it would give me Weaver
152:29 space slash it would have returned an array of Weaver space and slash because it says I said start at number two and
152:36 give me two items okay um so slice also returns an array now in in this array again I only
152:46 wanted one okay so it only returns this but in it returns this as an
152:53 array okay so at that point I pipe it and say give me the first item and and
152:59 it is that so yes um hopefully I know that was confusing and I don't teach
153:07 programming very much so hopefully you know some of that stuck in your brain especially since we've we've been talking now for almost three
153:16 hours okay um but yeah this now returns Weaver
153:24 space and yeah uh that was that was a lot of fun I thought that was pretty cool uh because it makes it a little bit
153:31 more user friendly a little bit nicer but it it also means that I don't need to save two versions of my string in the
153:38 CMS right so anyway there we go um okay that was interesting all
153:46 right so let's go down let's keep going if you no now um in my button I have Joe's
153:54 goals well in my data I don't store first name and last name as two different fields I store Joe
154:05 Workman so if I want Joe's goals I need to be able to purse this
154:12 string and give me just what I wanted okay so let's have a look at that I do something very similar um and let's have
154:21 a look at this so inside of this um this open goals button okay um I copy that so here we have member.
154:34 name um and then I'm splitting on a space similar to up here I'm splitting
154:40 on a on a slash here I'm splitting on space and then I'm giving me the first one right so let's say if I'm doing Joe
154:49 space workmen okay it splits on a space it uh split again returns an array an array
154:59 has zero and one okay and basically I'm saying give me the first item in that array which is
155:07 Joe so now this returns Joe and I have an apostrophe s goals so this returns
155:15 Joe's goals pretty cool
155:22 okay um and then in Social Links okay um I have a Q QR code thing
155:29 here we'll review that in a little bit um it's something I added after I did the whole mockup thing okay uh it's pretty cool though right but we'll
155:38 definitely look at that all right in Social Links um you notice that I have a uh the link
155:45 containers just like I had before um now here I I have a new one for for the contact card again we'll skip that for
155:52 now I added something uh for each one of these okay so before we just had a link container and the SVG now I have a
156:01 conditional around each one and what this says is um the conditional the rule is purely member.
156:11 LinkedIn now when you have that what it says is does a user have member.
156:16 LinkedIn defined if they do do display this content and then it goes to the next one and the rule here is member.
156:30 Instagram so um so basically it says if the user has defined if a user has set member. Instagram um use add link
156:39 container with the Instagram logo this way um if a user doesn't Define something so let's say for example I'm
156:46 going I'll disable I'll delete my LinkedIn okay and let's save this let's go back to this page and if I
156:55 refresh right whever my card is there it is linkedin's gone so this makes it so that if someone
157:04 doesn't provide a particular social link it's not going to be defined and that's why all these other users that um have no data um because these were all
157:13 artificially generated ones I didn't take the time to add Social Links for any of these so they're all gone
157:22 okay so that's pretty
157:29 cool all right um now let's look at the um the
157:38 image okay um and so uh in order to replace this image uh we're GNA have to
157:45 go into here and we're going to find the image stack in the
157:53 content image okay and we're going to drag that out there right and I'm just going to delete this
158:01 picture so we're replacing that image with the total CMS stack uh version okay and so what we're going to do is um we
158:10 need to define the object ID um for this and the ID basically we need the ID of the member so that is member.
158:19 ID okay up here member. ID now this is a variable that we're referencing from the loop so what we're going to have to do
158:28 is we're going to have to say that this uses a variable for the object okay um now um because we're referencing from a
158:36 custom collection we need to check this box and we need to set the collection to be members and the property of my image
158:45 okay it's not image it is I think it's photo um yeah so if we go just to show you uh
158:54 I the name of that property is photo okay so uh here I'm going to use property
159:01 photo okay and you can set all your width and height and crops and all kinds of stuff um here
159:15 okay sweet ultimate I'm uh I'm getting a little winded now that we're at 3
159:27 hours and I think a lot of you are um probably uh brain overload as well okay
159:36 um so I am going to maybe put my foot foot on the gas a little bit and I apologize for that for those that
159:44 are um you know novices to Total CS3
159:51 okay um but I I wanted to show just kind of how some of these more advanced things are possible you know um I do
159:59 have other videos that that go even more beginner for total CS 3 and I know I'm breezing through a lot of this and not really going through all the general
160:06 concepts again we'd be here for days if if if I did okay so I apologize for
160:13 that okay um
160:22 okay what I'm going to do is I'm I'm actually going to move over to this project file that has um everything okay
160:31 and I'll show you some some other things that I did um in here to get things uh working okay um so inside the loop here
160:40 if you remember I have a checkbox for active Okay um and what I did here is um I applied a filter to this loop stack so
160:48 I have a filter and assort okay um and in the filter I just said filter if the
160:55 active property is set to true that way I can go in and I can disable any member that I want I can go in here and I can
161:04 um disable this member and that particular member is now disabled okay and they won't show up on
161:11 the homepage okay so that filters out anyone that is um that is active so we only want to
161:20 display people that are active um and for sort I just shed it to shuffle um and that way if you go here
161:27 um it's just you refresh the page it's just they're just always in a different order okay um I think for a small group
161:34 like I said my group only has seven people Shuffle is great it kind of just shuffles everything you can see everyone in one in one Fell Swoop anyway um
161:42 Shuffle probably doesn't work great if you have a a lot of things in your in your list right so you probably want to have some sort of defined um sort and
161:50 sort by a particular field like maybe by name or something like that okay I just thought it would be fun to have Shuffle
161:57 that way everybody has a chance to be on top okay
162:07 um let's talk about something that's kind of fun um and that is this
162:13 um I'm not going to go through this in great detail okay um
162:21 but uh I thought it would be fun again uh my group is a it's a small group of people um and we've grown quite close
162:30 have a nice friendship and um it's nice to be able to know when it's somebody's birthday okay um and so I added it if
162:39 you know in the uh in the admin area you can Define someone's birthday right so you can Define their birthday and um I thought it would be
162:47 fun to add this little emoji when it is somebody's birthday week not just today but like it's their birthday
162:55 within plus or minus 5 days right um so that if we meet every Friday
163:02 I know if your birthday just happened or it's about to happen right thought that would be kind of fun and I did it um so
163:10 yeah pretty cool um so basically um here I will show you the TW Wiig um
163:20 let's just paste this in here uh let's turn on wrap word wrap all right uh actually let's make it a little
163:28 bit smaller oh there we go looks much nicer now okay um I'll quickly just review the it so I I get the date of
163:36 today I create a variable called today that gets the date um then I get I take the member's birthday and then I get the month and
163:44 the day of the mer of the of the birthday because I don't want the year I just want I I need to know the month and
163:51 the day of their birthday so that then I assign that to a variable called month day then I get the current year of their
164:01 birthday so I get um basically um let's say it's November 6th so their their
164:08 birthday is on November 6th basically this then gets me a date object that is November 6
164:16 2024 even though in in the in the CMS it probably November 6th 19 you know 60 or something like that right um but now I'm
164:25 getting again their month and day of this year so that's uh some tricky stuff
164:34 there okay um then I create a start and end date so basically what I do is I get
164:40 the current year minus 5 days and the current year plus 5 days
164:49 I wonder if I do um language mode oh oh that's probably much
164:56 nicer okay um yeah so now I get the current year um modify it I'm subtract
165:04 five days and then I I return the actual date object of that pretty cool
165:11 right so now I have a start date and an end date okay so I chucked all of that inside of an HTML stack well first off
165:20 actually all of this is inside of a conditional that if somebody set their birthday because obviously this is only going to work if they actually defined a
165:28 birthday so I have a conditional that checks whether or not they set their birthday and if they do all of this
165:34 stuff runs okay so if they did set a birthday I I run all of this and I I get the start date and the end
165:42 date then I have another conditional that basically says here let me uh take
165:50 this okay if today which is is greater than the start date and today is less
165:58 than the end date so if it basically if the date is between the start and the end which is plus or minus 5
166:07 days display this container that has an emoji that's
166:14 it um and then I do have some uh uh uh uh up let's see here it is I just
166:24 have I have a couple things right so I I set the font style for the Emoji or the font size I set a position um I change
166:32 the cursor um and I transform it so I rotated a little bit okay so essentially this position Swatch is the important
166:39 one this is what basically takes that emoji and always puts it at the top right corner of my card
166:49 right pretty magical that's some that's some Next Level stuff there that that was a lot of playing around to get that
166:56 to work um and oh another thing I do if you notice um I don't display people's
167:04 birthday but if you hover over it you can actually see what their what day their birthday is right so um I added
167:11 that with just a little um I added a container around this and in the container I added a tool tip and inside
167:19 the tool tip I just display their birthday using twig inside of the content of the tool tip and I just say member. birthday and
167:29 I put in uh the date format that is November 4th or January 6th or something like that right so there we
167:37 go pretty slick this is next level stuff right there like that's pretty cool and again it's all Dynamic it'll only
167:46 display this if it's Plus or plus or minus 5 5 days of the person's birthday like that's pretty
167:56 cool right just to show just to just to play around here I'm going to go ahead I'm going to change my birthday if you see here uh it doesn't show uh this so
168:05 I'm going to change my birthday to be um 114 1980 okay which is um November 4th was two
168:14 days ago right so now if I go ahead and reload this page okay the birthday sign shows up on my
168:22 card with November 4th because it's plus or minus 5 days but didn't show that before because August 4th which is my
168:30 actual birthday isn't within the realm of possibility right definitely next level
168:39 stuff okay um pretty cool stuff there uh the same
168:48 process that I did for um the mockup of um this meetings thing you know I like
168:56 that where I dragged I I basically replaced all the mock data with total CMS data I did the same thing up here
169:03 okay and let me show you what that looks like okay um so here again I added a loop
169:10 stack inside of that block grid okay um in here I I put the collection to meetings I put the V Loop gr variable to
169:19 be meting okay um at that point I can then use meting do whatever to display my
169:26 data so here um at the top I have the date okay um it is meeting. dat and then
169:34 I pipe in uh I format my date using this logic here so capital M gives you the the
169:41 uh letters or the the word ver or the short word version of the date then I have a space and then I have the day
169:49 comma and then capital Y gives us the full year right so that displays the meeting
169:56 date I then have the meeting notes um and we'll go over uh in a little bit how I open up the light boxes right so when
170:04 you click on this it opens up a light box okay um wa then in attended now this is
170:12 pretty cool so I have another block grid and this is something that I I'd never done before total CS 3 either I
170:21 have another loop stack okay um let me show you uh what it looks like when you add a
170:28 meeting okay um so when you add a meeting now this is actually a page that
170:35 I'll man there's so much more I I haven't shown um in this project I uh I didn't want users to to log into the
170:44 total seams admin area so I created this custom page that has the um meeting form
170:52 okay um so in here you put in your date and if you if you click on the attended
171:07 members okay so I I can just click on the member names for the for the attended and the
171:16 missed that's really cool okay and uh in a little bit I can show you how I did
171:24 that actually you know what let's go ahead and let's Jump Around um so inside of the total CS admin area um if you go
171:32 to your schema for your meeting okay we have the attended and missed
171:39 um fields or properties okay let's look at attended okay um the this is a list uh
171:49 field okay and if we go into the settings we'll see that there is um some really cool uh settings that we can set
171:58 for um this works for list fields and select boxes okay and what you do is it allows you to
172:06 create relational options and what it does is you can Define you can give it uh the collection of members so it's going to go to the
172:15 members field um you Define a value and a label okay
172:23 um so the label is what you see in the dropdown but the value is the ID okay so
172:29 what I'm doing is um in that form while you see the person's name the value that
172:37 gets added is that user's ID
172:45 number okay so this allows us to do relationships between different collections
172:56 now so again it's going through the collections it's going to Loop through and it's going to create options for oops darn
173:04 it it's going to create options for each member where the value when a user is selected is their ID but the label that
173:12 you see in the form is the name so the value again the value that gets saved is their ID right so that's important to know to
173:21 know because now um I am looping through my
173:28 meetings and inside there I need to Loop through all of the people that attended this
173:37 meeting man I am getting hungry um so I have a second Loop
173:49 and in here I am looping through meeting. attended so I'm going to Loop
173:56 through everyone that attended this instance of a meeting and then I'm going to uh the
174:03 loop variable is called member
174:12 okay now it's uh this isn't the member object what it is is it's just the ID so I I probably could have called this just
174:20 ID right um but it's essentially uh it's going to Loop through the attended and the actual variable is going to be
174:28 member the ID of the member okay so now uh what it's going to do is
174:37 it's uh it's going to Loop through each member and it's going to create a block grid cell and if you notice right when we do
174:44 that uh let's go back to the homepage um it's going to Loop through each person that attended this meeting and
174:53 add an image for each person that attended okay so um when it Loops
175:08 member okay and that is probably be it should be member ID right so it should be Loop variable is
175:16 member ID okay okay and so in here that variable is called member ID and then it's going to be a part of
175:23 the collection members and the property is photo so again in order to get the image
175:32 for each member all I needed to know was the ID once I know the
175:38 ID um the collection and the photos or sorry the collection of the property are static values I know exactly what they
175:46 are because I know the memb collection is member and I know the property of the the photo that I want to bring in is photo okay another thing we need to make
175:55 sure that the object value of this we have to tell that we have to tell the stack that that is a variable okay I set my sizes to be 32 or
176:05 64 by 64 okay so it it puts in a 60 it brings down and generates a 64 pixel version of
176:14 that image I want to ensure that um because I
176:23 wanted these to be circles I need to make sure that the even if the person uploads a nonsquare photo that it
176:30 generates a square version of the image therefore I set the fit and crop to crop focal point when you do that it's going
176:38 to make sure that the image that is generated is exactly 64 pixels by 64 pixels and it will crop anything else
176:45 outside of that for more information on images I have other videos on that on
176:52 how the cropping works okay and then obviously it uses the focal point which by default is the middle of the
177:02 image all right um so yeah there we go that Loops again Loops through all of
177:08 the um the member images or all the members and displays the image for each person that is attended and then I do
177:17 the same exact thing I have a header for mist and then I have another block grid and then I Loop through all the people that are inside the mist and I display
177:25 that all the images for all of those pretty cool
177:39 right um sorry I was not paying attention to uh uh the chat James you said is this going to be more complex
177:47 than the previous version um I mean I I have I'm I'm definitely driving at 60 M hour right now okay um
177:55 so I know a lot of stuff that I did is probably very very this video this live stream wasn't meant to be a here's the
178:03 basics of total CS3 I personally think that total CMS 3 will be easier than total cms1 um but
178:11 it's also has some really cool more it's easier to do more advanced things okay that you can never do in total
178:19 cms1 um so yes please don't take what I'm showing you right now as
178:26 a uh as a beginner tutorial to Total CS 3 okay um I tried to do somewhat of a
178:34 beginner thing with the when I built the website with Foundation um but yeah uh again I we'd be here for days if I
178:43 tried to start from the beginning with total CMS 3 okay um and thank you Sean for the for
178:52 the comment you said I make it all look easy um okay so yeah
178:59 um that's how I kind of built out this grid okay as you see I I didn't a lot of these meetings were dummy data so I
179:07 didn't go ahead and try to you know add in attendees for each of this dummy data okay um so excuse
179:15 that um okay next
179:22 up um let's talk about
179:29 um oh how about these light boxes okay um I will go through uh essentially the implementation for this this light box
179:39 and this light box are identical okay it's just um so let's pick let's pick
179:46 the the profile one okay we'll go over that implementation okay um if we look at the
179:54 project file okay um while this website does appear to be a single webpage project for the most part there are
180:03 multiple pages okay um so like if I were to click on this this looks like it basically what this is this is actually
180:11 an iframe and the iframe is injected inside of a light box same thing here if I click on this this is an iframe that is
180:20 injected into an uh into the light box okay what's kind of cool about this approach is um if I hold down the
180:29 command uh tab if you're if you're familiar with browsers if you command click uh it opens a link in a new tab so
180:37 if I'm going to command click this button okay it does open the light box but you'll notice is actually opened up another tab that is this person's page
180:47 right it's basically the page that is inside of that light box okay
180:53 um so yeah that's pretty cool uh I need to I need to run I'm
181:04 going to take a quick potty break or not a potty break I need water okay um so just give me a minute I'm going to run
181:11 downstairs and get a glass of water um my mouth is getting famished here um so I'm sorry I just need to take a quick Break um literally 30 seconds I'm going
181:21 to go get a cup fill it up with some water I'll be right back maybe you can do the same thing
181:46 okay
182:16 e
182:46 e
183:16 e e
183:57 okay I even found some leftover breakfast here I'm going to take a couple bites of uh bites of food here
184:30 okay Sean you asked a good question why use why why have one light
184:37 box instead of a why have an ey frame in a light box so um we'll answer we'll answer that
184:46 it's a good question talking for three hours straights No
184:56 Joke Man okay
185:09 okay why why not do multiple light boxes okay I'm still sharing my screen
185:17 right thank God okay let's take this um this into account uh if we look down here um I
185:25 have two light boxes I have a member light box and a meeting light box
185:32 okay um so if I wanted to have
185:38 uh all of this data show up in a lightbox okay and um not use the iframe
185:47 approach um it is possible um there's some caveats okay um
185:57 if you could basically uh drag this into um let's say this light box into this container right I'm just going to shrink
186:04 that okay um and then uh basically uh in right now you remember this is the loop
186:13 okay and so it would create a light box for every member in this Loop okay and inside of this light box you could
186:21 actually put in content like you could put in all of this content into this light box okay I have an offsite I'm not going
186:29 to I'm not going to do that I'm not going to delete the offsite and do everything like you know I would okay but you can you can display you
186:37 know all this you can put the member name all this list inside of the light box you can definitely do that okay
186:44 however um in this case um I want to also in this light box I want to display the about the goals uh and the goals
186:54 right so both goals and the about and uh now remember in order for
187:02 something to display in the loop okay it needs to be a part of the index and I'm pretty certain if I go to
187:11 here if I go to look at member okay inside member the about and the two goal
187:18 content areas are not a part of the index so I now I could add those to the
187:26 index but um as as we know it is it is better from a perform from a performance
187:34 perspective to um have the least amount of data in your index as
187:43 possible so in this case um I don't want I I don't want access to the about or the quarters or or the the goals inside
187:52 of the index okay but had I I could display them in here okay um now another caveat
188:02 is once I uh if I create a light box for every member so every member has their own unique light box I need to do some
188:10 trickery with um the light box ID now this isn't too difficult you could probably just do um I mean every member
188:18 has a an ID so I probably could just do like uh member. ID right inside the
188:26 lightbox ID and that would work right oops member. ID right so I could probably add member. ID into the light
188:33 boox ID and that would ensure that every single light box had a unique ID right definitely possible okay um but
188:42 it's just it adds a layer of complexity okay
188:48 um so those are two two reasons why I don't do it that way
188:56 okay again I don't want to have all data inside of my index by using an iframe I
189:02 can um I can point that iframe to the member page and the member page has access to
189:10 all of the data about a member okay let's let's explain um how I
189:19 did it here oops and let's open up this this member
189:28 light box okay so let's look at this member light box a the the light box ID is called member okay um and then inside
189:36 the offsite um uh it's important you give it a name I called the name here member
189:43 page okay so the light boox setup is actually very minimal and you just set you can set the URL to be blank it's
189:54 fine yes so Sean you're correct uh by by uh this by putting the light box in here
190:01 you potentially have I mean here I only have seven members but if you had a 100 or a thousand things it would create a
190:09 thousand different light boxes right and potentially if that light box had an image or something special it would then load in all of those resources
190:18 right this way it's only loading things when you when you click on it okay so well I'm getting ahead of myself okay so this light box is pretty simple um again
190:27 the me the the important thing is here in the light box you set up a member uh a lightbox ID which is member um and
190:34 then the offsite um I set you have to give it a unique name so I call it member page okay so let's look at this
190:42 um this goals button because remember if we go into uh this when I click on it it does two
190:50 things okay it it um opens the light box and it loads a specific URL into the
191:01 iframe okay so let's look at that con that settings so if we look at the edit
191:09 link okay um what I'm doing is I'm linking to the page and passing it the member ID
191:17 right so what that is is that's this page if we look at the URL oops okay it is just um uh Slash member and then
191:27 question mark ID equals and then the ID of the user now here because I I was using fake data the IDS are like these
191:35 random things but you know in real life like if here if we go to my uh my nicely created user account if we click on this
191:43 one oops not in the light box okay we'll see here it says ID equals
191:51 Joe Workman okay so um here again I'm just loading the member page I'm going tell it to go to the member page and
191:59 then ID equals and then I'm injecting the member ID which in my case here is Joe Workman is my ID okay I'm injecting
192:08 that with twig okay then um
192:17 in Target by default it's set to current window what we want to do is we want to set the target to be iframe
192:26 name so if I were to set this to be current window this would essentially make this button open this web page just by
192:35 clicking on it but that's not we don't want it to load this web page we want it to load the web page into an
192:42 ifame and this iframe name is the same name that we configured inside
192:53 offsite okay so that um this setup here loads the URL inside of the
193:01 iframe now further down we have an add custom attribute okay and this we do data- open
193:08 equals member what this does is this tells the link to open the light box
193:18 data open uh can be used across a lot of foundation components um light boxes dropdowns off canvas okay um so you can
193:28 open up any foundation component or most Foundation components with data- open and then you have to give it the ID of that component and that ID obviously has
193:37 to match the ID that you defined inside of the component so in the light box I gave it an ID of member so we said data-
193:46 open member see attribute data open member so the combination of these
193:55 things to these two things that we've done opens the light box and loads the member page inside of the iframe all
194:04 with one click that's I discovered this trick I don't know a couple years ago and it was
194:10 like it was man it was oh man opened up so many cool possibilities okay I love it
194:17 okay again the benefits are um the resources for you know right I
194:25 mean these are pretty simple right um you know it just loads an image and and some other extra text right um but this could have a lot of extra like if this
194:34 this could be a G have a gallery in it or something like that right and um at this point with the way we've built it
194:41 now this the data inside this light box is only ever loaded when you click
194:49 so it makes the page super performant this is a great workflow okay and an added benefit that
194:57 I kind of like is if you hold down the command key and click you still get the option of it opening in a new browser
195:05 window I like that too so you get both right I mean I still have this page right and we can look at this page
195:13 right let's go ahead and look at that now right so we go to this this this is the member page this is this page here okay
195:22 um and so what what do we do here um here we have
195:29 uh the I'm using the uh total CMS uh object data loader okay so I'm using
195:36 where data loaders I'm using the object data loader stack okay and it's right here and what I'm doing is I say the
195:44 collection is members and load the um get the ID from the URL so what it's doing is it's parsing the URL and it's
195:53 getting the ID from the URL dynamically and then um it assigns that member to a variable called member right
196:01 so again this is kind of like similar where you know your collection is kind of going to be the plural and then your variable is going to be the singular
196:09 because we're loading that particular member and then a lot of this data is actually the same exact uh I just copied and pasted from from the other page you
196:17 you'll even notice on this page when I hover over you still get the hover effect okay um I kind of like that I was like I left it in there cuz it was kind
196:25 of like just like a nice little Easter egg or something right um so yeah I just L um the QR code which I don't think i'
196:34 I've shown if you click on that it gives you the QR code okay um remind me I can go over that in a little bit okay it's still has the me as you see it has the
196:42 member stuff like now may maybe on this page maybe I don't want to load in the the birthday I could just delete delete that and now that that member stuff is
196:50 gone okay um and then further down uh basically I'm just I'm doing um what am
196:58 I doing here uh I'm doing oh about Joe and again I'm doing that little uh that little split thing where I only get the first
197:06 name okay and then I'm adding the about contents and then um so here here's some
197:13 interesting uh stuff so um the goals for 2024 and goals for Q4 2024 are Dynamic
197:21 so a this is always going to display the current year and this is always going to display the current quarter that we're
197:28 in of the current year so right now it it's uh Q we are in Q4 2024 so this is
197:36 all Dynamic and I I did that with this little twig statement here
197:43 okay um I'll admit I I even Ed I think for this I Ed chat GPT to create this particular twig for me um and I didn't
197:53 need to I don't think I did anything actually to be honest with you um yeah so then uh it it this creates a variable
198:09 right um and then um if someone doesn't have a so here I do uh display the member goals if they don't have any
198:17 goals set it displays no goals set so there's a way of defining default data right so like if I were to go
198:25 to uh was it this one before oh let's just go to another let's go to this one uh oh uh oh looks like maybe maybe that
198:34 is broken cuz it should display no goals for okay there might be there might be a
198:41 problem with that oh well um interesting I I swear I thought I saw that working
198:48 anyway um so now I I did have some small customizations um for some of the member
198:57 photo stuff just for this page um so for example uh if we look at
199:04 oops over here if you notice uh it doesn't have uh it actually oh the the background color of this um I've changed
199:12 it to be uh the same as the background color of the web page so so that it kind of bleeds into the web page so it doesn't look like a card until you hover
199:21 over it so again again because um the other member photo stuff is actually inside of my partial my with site Styles
199:28 um on this particular page I want to override some existing settings and just change things up a little bit um so yeah there we
199:40 go um oh another thing uh that's quite cool is uh you notice that when we go to the this page you see the the menu bar
199:48 up at the top okay but when we click on it in here you don't see the menu bar okay um that's a feature of
199:56 offsite and uh he um something I haven't shown you is how I created this whole site layout
200:05 partial um maybe we could do that that's kind of going backwards back into Foundation 6 the site design World okay
200:14 um so inside this um this is my menu bar okay uh which which you see now has been I added a couple other things added a
200:21 log out button um and links to the homepage as well as the charter page okay um but the thing is here I added
200:28 this inside of an offsite hide stack okay and what that does is um
200:39 oops um what that does is um if you visit this web page uh inde dependently
200:48 um it shows everything okay but when you open up that web page inside of a light box or inside of an iframe IT hides that
200:57 particular thing right so that's how we I can kind of make this experience a little bit nicer um because when you go
201:05 directly to the page you want to see this right because you want to be able to get back to the homepage right and maybe see some other stuff again this is a very simple site but maybe you could
201:13 have a whole bunch of other stuff that you can do okay or hide um but yeah when you're in a light box you don't want to see the menu and
201:20 the title bar again like that that's not useful so um that off-site hide stack will hide that menu when is inside of
201:29 the iframe but when it's not inside it'll display it so pretty cool little um hack
201:37 there okay um so that was a very long- winded explanation of how the light boxes are
201:44 done um again the same exact thing was done for uh the meeting notes button um it goes to a meeting page um which the
201:54 same exact thing happens if I were to go up here and uh command click on one of these um here is the meeting page right
202:03 uh again the same thing this this top bar um is hidden within the iframe um but else if it's not it opens it up in
202:11 the light box right pretty cool
202:28 um next up hey guys I have a I have a half hour
202:38 left okay um before I have a hard break I didn't I never thought I'd be going for four hours but I half hour and we
202:45 got to call it um let's talk about some of the other pages that we have so um let's talk
202:54 about uh the the ability to add a new meeting okay um so if you see I have a page here
203:01 called new meeting okay and um since this has a form on the page you need to have the admin core stack on the
203:10 page okay um and then uh here actually let's let's let's back up
203:18 a little bit before I get into that let's talk about why uh I have this this thing called this site layout
203:25 okay and um let's go ahead and let's duplicate this
203:34 page okay so there are uh some things on a web page so when you're building out a site okay
203:43 um I'm going to extract let's see let's take this site layout and unpack it okay um so obviously as we build our web
203:52 pages out uh there are going to be a lot of things that we want on multiple web
203:58 pages or every web page okay and um let's um so up here obviously I have
204:08 a lot of swatches okay so remember I I unpacked this particular uh partial and it contained site Styles uh which has a
204:16 lot of these has a lot of these other uh the the Social Links a lot of these other swatches that I created um that I
204:23 use across multiple Pages uh initially I didn't have them inside sight Styles because they were um I only used them in one page and then I decided like you
204:32 know I used them across multiple pages so I just chucked them in here into the into the partial um and it's nice kind of separating them out um so I have my
204:40 meeting grid stuff I have some the search input that potentially shows up on multiple pages so um I added that into there as well okay
204:49 but um the important bit here actually I should
204:58 have I don't know if I can keep do undoing my changes oh
205:07 well in this site layout let's look at it here okay obviously I have a lot of partials or I have a lot of styles okay
205:15 but um in this area I had um again at the very top of every web page is this menu okay so um
205:24 again I showed you why I have it in inside the offsite hide because if I load a page inside of an iframe I don't want it to be there okay um and then I
205:32 have a three column that has um here it's loading the logo from the CMS okay um and
205:40 then here I have a section lock which which I'll I'll get into hopefully we have time to get into into some of the authentication stuff that I did okay
205:48 basically if the remember I showed you before how the charter page if you're logged in if you're not logged in it doesn't show the menu okay that's what
205:56 this section lock does so if you're not logged in it's not going to display this menu okay um so that's how that's done
206:05 um and then this menu item with the log out um there's a special macro called cms. logout and that will always create
206:13 a logout URL for you okay um so that's how that's done okay now before I talked
206:21 about remember in when we were doing the mockup I had a Bento Box right um so in
206:27 here on this page um I had this container uh that has uh again uh the
206:35 three column and the divider and then I had this bento box and all of my page content is inside that bento box right so what I did is I created a
206:45 partial out of that and here's the container here's the the menu here's the Bento
206:52 Box those were components that I wanted on every single web page so I created a partial out of that
207:08 partial and then all the content in here gets inside of that same exact layout so that every single web page has the same
207:16 exact layout okay pretty cool now um on some pages like this new meeting I I don't
207:25 want this inside the of the site layout partial because not every web page I want to have the admin core same thing with the page lock I don't want every
207:32 single page to be locked because this Charter page isn't uh locked right it's actually publicly accessible okay um so
207:42 yeah um and then uh I had a couple custom swatches uh for this particular page okay and let's talk now let's talk
207:50 about this uh this new meetings page okay now I talked about the kind of the site layout partial that I
207:56 created this is actually really super simple okay so all I did is I had a a heading so I have a header say new
208:04 meeting and then I have a custom form stack okay and that is if we go to forms custom
208:13 form now this is the super the easi implementation of it because inside here
208:19 there is a checkbox for auto bu form okay and uh when you set that so A
208:27 you you in your form you set it we're creating a form for my the collections of meetings my meetings collection and I
208:35 just set it to be autobuild form and what it does is it goes out into the collection it looks at the schema and it
208:42 will automatically build out the form for me pretty cool
208:50 zzy um and then uh what I wanted to do is in here I uh I automated the ID field um
208:58 and it just uh the ID is automatically created every time with a with an ID The UU ID um because yeah I just want to be
209:06 able to create a meeting and this the ID is just some arbitrary random numbers and digits right and letters so uh I
209:13 don't want to display the meeting the ID field here um so what I do is I have a Swatch here that just hides
209:21 it okay so I just uh display Swatch ID field display none
209:30 done okay another thing I could have done is I could have gone into
209:36 the um into the schema for a meeting um oh I guess I did do that I I
209:43 think I did that afterwards um I set the form to be hidden okay so whenever you create a new
209:50 um a new ID um it just hides the field automatically so actually this Swatch isn't even needed anymore okay um and if
209:59 you didn't know um for ID Fields you can set up an autogen setting and if you set the autogen to be exactly this
210:07 essentially it just makes the the ID always automatic and it will always be unique okay um so that way that's why in
210:16 this particular instance it's okay to always hide or set your ID field to be hidden because the object ID is always
210:23 going to be some random string of letters and numbers okay it's not pretty to look at
210:30 um as you you saw them earlier uh if we go into our meetings I mean it's these here right so again they're not nice to
210:38 look at but they're guaranteed to be unique okay so there we go
210:47 um so that's it for the for the form this was I I have to say uh I forgot that I built this Auto build form thing
210:54 and uh yeah it worked it worked like magic here absolutely Gang Busters pretty cool okay and I already showed
211:01 you how to do the uh the attendees stuff so that you can you know have a defined preset list and Associate and do some
211:09 linking and relationships between um you know again different collections objects in different collections
211:18 okay um now let's go into the let's go back up to the
211:28 homepage and let's show um this edit profiles thing actually well right before we do that um because that that
211:37 requires I I show you some authentication stuff first um let's look at the search okay so here I I can search anything so I can search up Joe
211:44 hit enter and it takes me to the search page okay and so uh if we go to the search page
211:52 here um relatively simple page um I did do some fancy styling this is just a
211:58 foundation 6 form um I did some fancy styling on there um I'm not going to dive into the styling if you want to join me on Friday I'm happy to um kind
212:07 of show you how I did that essentially I just uh I did a bunch of form uh swatches here actually wasn't even that much was it oh no I think I added that
212:15 too the um here so there was a few different swatches here set the background to transparent unset the Box
212:24 Shadow unset uh borders um added a bottom border um change the font and set
212:31 the height okay that's the the 5-second tour of what I done okay um so yeah I I kind of like
212:41 that um and so it's just this this search field obviously I didn't an inline I did an inline form here so that
212:48 the button and the field are inline um you don't really need to click the search button because you just hit enter right so you just um I just type lauram
212:56 there's none laurum there's some right so you can search and you know and whatnot I just probably make this page not do that scroll thing um I just
213:04 copied and pasted the this this grid layout from the homepage but I'd probably turn off this maximum height so it just displays and it Scrolls the page
213:13 instead of this container um this uses a search field um so in the uh in the input here um it uses a keyboard type of
213:23 search um this is just a foundation 6 form okay so yeah you kind of get that for free uh with the little uh with the
213:31 little X you can clear the search and whatnot um done by the browser which is nice um so yeah
213:40 um here this is a pretty rudimentary uh you know loop again I'm looping through meetings um in this particular one um
213:49 I've set it to be a search form okay so I enabled search within this Loop um and yeah uh if you notice when when I do a
213:58 search that returns nothing I have um nothing found content uh that you then display down
214:05 here um and then essentially I just duplicated that the same exact layout that we have on the homepage um but here
214:13 uh the loop instead of preloading data um or instead of loading all of it it only loads data from the search
214:21 request okay so yeah because I uh you just do that by enabling this um right there okay and if you're curious how on
214:30 the homepage how I have a search box here okay um on the
214:36 homepage that is also where is it oh here that is also a form okay that
214:44 is set these the search URL uh to the search page okay so we just do a get URL action and we point it to the URL of the
214:53 search page which is SL search right so the URL on this page
215:08 web page and it's just the same exact form um in this form in the homepage form I just made the text smaller right
215:16 so I just made the text smaller and the the box and everything a little bit tinier um and but yeah it's just it's just a foundation 6 form that points to
215:24 this page so is this form this form right here it's the same thing I just styled it I added some additional styles
215:31 that just made things bigger so that's
215:41 it okay right the last bit um authentication
215:52 okay so um here we have a button that um shows you how you can edit your profile okay
216:01 now it is impossible um for this particular form if you look at the you know as the meeting ID it loads the
216:09 meeting from the URL this doesn't do that and that's a security because we I don't want people
216:17 to be able to edit other people's profiles right so like if I put in uh you know uh
216:24 profile any other profile via the URL this form isn't going to do its job right um that's because um I've set it
216:33 to only load in the data for the user that's currently logged in okay now before I can go on how I
216:42 accomplish that let's back up and look at how we lock down this entire
216:51 website um from the stack standpoint it's super easy okay at the top of the pages that I want locked you just add
216:58 the page lock stack which is right here in the authentication group of total cms3 add that at the very top of the
217:06 page now one important thing here is place this before the CMS core stack okay so this needs to be the very first
217:13 thing on the page if you want to lock it okay if you if you put this below CMS core uh some it's you're not going to
217:20 get the your expected Behavior okay because it it this has to happen before okay that's why I have this little
217:28 warning in there it has to be before the CMS core stack it actually threw me for like an hour or so I thought I had a bug because I I basically what I did is I I
217:36 put this inside of sight Styles behind or after CMS core um and things weren't working I was like I knew I had this
217:45 working before what happened and so yeah it was just cuz it has to be before now uh if you remember
217:53 um in total CS uh there is an authentication group okay there is an
218:01 authentication collection if you notice that only has me right in it okay and then um members so
218:10 um this this was a this website was actually really great use case for this and a test for this because um I want my
218:18 members to be able to log into this website okay but I don't want them to be able to access this admin
218:28 dashboard so uh one way to do that is to create two different authentication
218:35 collections um in order to log into this dashboard you have to be added to the O collection this o collection is special
218:45 okay it again you have to be in the off collection to be able to access this dashboard if any if a user that was
218:54 logged into um this website any of the users and if they tried to access that dashboard because they knew the URL or
219:02 actually on the bottom of this page I actually added a nice little thing a little lock down here when you click on that it takes you to the dashboard um but if you were again if
219:10 you were logged in uh as a member and you clicked on this you would get an access denied okay because they they
219:16 they are not a part of the off collection now if you look at the O
219:26 collection there are a certain number of fields required for um an off collection
219:34 a you need to have a field called active you need to have an email field you need to have a password
219:42 field um you need to have a creation date a log uh a last login and a login
219:50 count okay there's some other things that you could optionally add that but they're not required such as um maximum
219:57 login count expiration date and groups I didn't need these particular
220:03 three features for um my use case okay but if we look at the members
220:10 collection okay um let's just go into the into the definitions here uh you'll notice that I added the active
220:17 field right that requirement um so in order for a collection to be used as authentication again it needs to have
220:26 these fields um uh active uh password uh and all those other ones I said uh last
220:34 login account created last login and they have to be named this exact thing if you're ever curious you could just go
220:41 look at the off schema you can see all the EX all the available Fields here here okay and uh I haven't do I don't
220:49 think I've documented that yet but I'll I'll make sure I document uh custom authentication
220:55 collections okay so um with that said that's how that is set up um you just need to make sure when you create and
221:03 again you can add as many other extra Fields as you want so I added like you know all these social media Fields all these goals and about me stuff okay um
221:12 you can add additional as many additional Fields as you want but uh you have to have uh those other fields in order for authentication to
221:22 work okay um so uh back to the rapid Weaver um so imp page lock um since I'm
221:30 using a custom authentication collection um you have to Define uh the collection that you're using so if you turn this off it's going to assume that you're
221:39 you're using the oth collection um I don't want it to use the O collection I want it to authenticate against the
221:45 members collection okay and uh then basically on every single web page that I want locked I I put in that same stack
221:54 now I probably could partial this out but I I was I just copied and pasted the stack okay but yeah to be to be fair you
222:02 probably would want to um now remember this Charter uh page I don't want this page to be authenticated so I don't have
222:09 a page lock stack on this page because this the only page in the entire project that doesn't require a login
222:16 but all the others do so the search edit profile they all have the page lock stack and they all have the collection set to
222:26 members okay so now with that set up um once you um if you ever to go to any of those web
222:34 pages it's going to uh here I'll log out right um again if I go to um if I go to
222:40 the Charter page again I can access this page again I'm
222:48 not logged in and I know that cuz I don't I'm not seeing the menu up here because I'm not logged in um and if I go back to the
222:56 homepage okay it's going to require that I log in oops what happened did
223:07 I oh yeah I changed my I or I changed the the the the email address on my account uh support
223:26 oh there it goes okay okay so I logged into the account that doesn't have access to the dashboard right now I did that on
223:33 purpose um so I can log in and I can see all the data okay um I can go and I can edit my profile okay um
223:43 and uh but if I click on this I'm going to get an access denied cuz the account that I just logged into um doesn't have
223:52 access to the dashboard pretty cool
224:01 okay uh page lock stack locks down a whole page can you set a message to inform them that they have no access
224:08 well yeah you just saw that right so um yeah when I logged in it said access denied um and then you can either click
224:16 this page or click that link or after I think 10 seconds it'll it'll redirect you back to where you were
224:25 okay um okay um now let's talk about this edit
224:31 profile page okay in this edit profile um
224:37 form he so if we look here um this um it's the same thing it uses a custom form
224:45 okay um however if you'll notice that it's it's quite a bit nicer right I the
224:52 member field the member uh data or the schema has a lot of fields and I didn't want to have it just like this one huge
225:08 tabs um and it gets you access to all the various parts of a profile okay and um yeah I just I thought this was an
225:16 interesting um UI okay so um to do that again I'm loading
225:24 in the data oh well um so there in the off uh form there is a user data stack
225:34 okay and um when you add this to the page it loads in the user data for the
225:40 currently logged in user okay so in that case I'm logged into
225:47 this account it loads my account information onto the page okay and it gets you access uh actually in the settings of this stack
225:56 it shows you all the various things that you have access to you have access to the user ID the username the user email blah blah blah blah blah blah blah okay
226:05 so um let's skip this tab layout that I built all right we can review that in a little bit if we have time but I want to
226:12 go into this collection okay or this custom form so in this particular custom form I I am not using the autobuild form
226:21 feature remember in the other one it was simple I just clicked that and I I just magically got the form okay but it was the form it was just a simple
226:30 form okay and I was okay with that but this one I don't want one big huge ginoris
226:37 form so and I also want to um now this actually feature I isn't in your version
226:44 okay the this uh checkbox to say load object that doesn't exist that's something I just added uh cuz I realized
226:50 I needed it okay to do this so um I'm loading in an object and I'm loading it from the member's collection and I'm
226:59 giving it the user ID again I'm you I'm I I can use user ID because I added this stack to the page
227:08 and it loads all the user data into a variable called user therefore in here I can give it the
227:16 object ID of user ID and because that is a variable I need to check this little button right
227:24 there now if I wanted to load in if I turn off that I can put in you know Joe dworman but then at that point that's
227:32 always going to load the Joe Workman user and that's not
227:40 help um user. ID because we want to dynamically load in the currently logged
227:47 in users I from their ID okay so at this point um what you need
227:56 to do is um you need to add in oops um you need to add into this form I this is a big form it actually has a lot of
228:04 fields okay I just have them hidden okay um here let me let me shrink some of
228:13 these actually okay so this uh this is the first tab so
228:21 um if you notice here inside the form I have a tabs content stack and then um inside the tab
228:29 contents stack I have the contents for an about tab a social tab a goals Tab and a password
228:36 tab okay and then again that's the contents so this is the contents of the social tab this the contents of the goals Tab and this the content of the
228:45 password tab okay so if we here if we look at the password tab you'll notice that it only has the contents of the password field okay and you add that
228:53 through this little plus button and you can add in the type of field so for each of these fields you put in the property of the
229:02 field and you can put in a few other options within the field
229:09 okay now if you wanted you can also do custom attributes with that point you can do a custom label place holder and help text but if you if you don't do
229:17 custom field attributes it pulls it from whatever you stored inside the CMS which is what I'd recommend okay so it says label here but
229:25 on the on the page it actually pulls in password because that's how I've labeled that when I set up the schema
229:32 okay so again the password uh tab has the password the goals has the goals the
229:38 two goals things right um the social has all the various you know soci on or LinkedIn Instagram YouTube blah blah
229:47 blah and then the about tab has the uh the image field which is set to a property of photo the name field which
229:55 is set to a property of name so on and so forth now there are some fields that I want I don't want the user to be able
230:01 to access okay so like the ID field um I so I add all the ones that I don't want
230:07 to be seen um I I add them as hidden Fields right so basically what it is is down here I went in Hidden field and
230:16 then I added in the property CU I just want to I don't want to remove the values another thing I could have done is I could have just
230:24 Chuck them into a a you know a visibility stack or something like that as well okay
230:32 um so yeah so that that breaks again that breaks down uh all my tab content and it pretty much turns my form into a
230:40 tab content right and then um now now I I based this layout um off of actually
230:49 there's a template called um tabs or vertical tabs okay it's part
230:58 of my free template pack for foundation 6 um and that's what I use to build this out um what's kind of cool is um by uh
231:06 when there's enough space we have vertical tabs on the left and on mobile we have tabs on the top
231:15 right so um that's a nice little setup as you see it just uses Vis I I create my tabs twice and I just use visibility
231:23 to um show and hide them based on the break points right so this one shows for uh hide for small only and this one is
231:32 show for small only right pretty cool I like it um now I did do a bunch of
231:39 customizations for tabs um and you see down here I have all these swatches that customize the look and feel to get me
231:48 the basically the background the colors um to match my site um I have round corners on the tabs uh actually that was
231:57 just the um I think that that was just the radius Swatch uh or not oh no there yeah it was
232:04 just a radius uh radius class okay but essentially like on the border I remove the Border because tabs have borders I
232:11 remove the Border um I uh by default the the tab contents have backgrounds um I just wanted it to look
232:19 like it was on the web page right so um I just nuked the background on the tab content so it's transparent it's
232:26 none um in the panels uh by default there's some padding around this um I I
232:32 nuked the padding um background on the tabs so the background here um I wanted it to be one of my colors um that I
232:40 defined in sight Styles so I just used the Swatch Color Oops Swatch color of white which is as you see it's that offwhite it's not quite white
232:49 right um and then I styled let's see the borders uh the fonts I made them larger um for some reason the the tabs have
232:58 very small text by default so I made them bigger okay um I and all of these if you're curious
233:08 um I didn't know the classes of these off the top of my head um and for tabs if you notice there there's all these
233:14 under C Swatch selectors element there's all kinds of stuff for tabs so there's tab container there's an individual tab
233:22 there's an individual active tab there's the tab content wrappers and the tab content panel okay so based on all of these you
233:30 can uh you know I used uh this page element to Target all of these okay even like here like see to Target the active
233:39 tab is actually quite a complex CSS selector you don't need to know what that is you just click t tab active and that's if you see here the active tab is
233:48 that dark green okay and as you see it pulls in the color the primary color from site Styles I don't actually set
233:55 the color it just uses the primary color from site Styles okay um so yeah there's just a lot of various little um little
234:04 doohickeys um what was this one oh this one was by default tabs have a uh they're underscored the active uh the
234:12 active tabs underscored I didn't like that so um yeah I this one was used font Pro I should make that easier in the
234:21 future just normal Foundation okay okay um so yeah that's pretty much how this
234:28 form was built again uh the magic is uh I load in the the currently logged in user a the page is locked so you can't
234:35 even access this page if you're not logged in so um if you are logged in then it's going to continue and you will
234:42 uh we're going to load in your data um and then in the form I'm loading in your user ID so it always loads in the
234:50 data for just the loged in user um and it generates this cool tab layout for the
234:59 form I think it looks actually I'm I'm really happy with this with this little site um I say like I think uh this
235:07 feature of the custom form was the only thing I added to Total CMS to accomplish everything I've showed showed you
235:15 today um everything else is uh is done uh which is pretty
235:29 cool okay um with that guys I I think I've gone over the entire site um that
235:36 was 4 hours for those of you that are still with me man you are a hero um I know I didn't I kind of sped up and I I
235:45 I glossed over some things um but yeah uh hopefully you enjoyed hopefully you
235:51 got some out of some stuff out of today um and I know it was it was I'm sure you're going to watch the the the
236:09 any other questions um please go ahead and post on the community on the for this event I'm happy to answer any
236:15 questions um I know someone's going to ask me for the project file
236:23 um I don't know what to do about that uh this is a site that I I did build it for
236:30 an actual project it wasn't a paid project but um I'll consider it um so yeah uh I hope
236:40 you enjoyed this are the lasting questions I think I I know there was a lot of stuff in the chat that I didn't mention but I think I answered all of
236:49 the questions um so if you yeah if you have any other questions um if you want answer now speak now or forever hold
236:57 your peace um if not thank you very much everybody um I'll stay on for a couple minutes and and watch the chat to see if
237:04 there's any um anything else here let's let's PR through the page um see if I I
237:11 missed anything um in particular one thing I I'll say things some things I don't like okay
237:21 um I'm not sure I love this scrolling container here on the homepage okay um actually I I didn't um
237:30 when I was building this prior to like an hour meetings here these two anything in the past you just go to the search page or something like that you know um
237:39 yeah and maybe by default in the search page I'll I'll just display everything by default instead of having a blank page
237:48 um yeah uh I'm not yeah I don't think I love the the scrolling container it kind of makes it funky as you're scrolling down the page because once you once you
237:55 hit this block and you start scrolling it Scrolls that instead of the web page so H I don't know I I don't love that
238:02 okay um when will you release the missing feature um oh for the custom forms um there I'll admit there are a
238:11 couple other minor little things I've tweaked um I was thinking of releasing it this week just as a very minor update
238:19 since I'm doing the I did this live stream um so yeah probably uh this week again it's just a some minor things I
238:28 know everyone wants all the the depot and the other stuff that I haven't done yet um but I I could probably ship an update this week uh with these minor
238:35 changes that I that I've done okay um that way it's just out there okay so yeah I I'll commit to doing that before
238:43 the hangout on Friday I I'll ship an update um beta whatever we are at 13 right now um with what I've done here
238:51 okay good question thanks Steve um so yeah I didn't I didn't like this what else didn't I
238:59 like um oh I didn't go over the QR code stuff all right really quick
239:11 um okay where is the QR code good stuff all right here um so funny enough you know how I talked
239:19 about how we have these light boxes okay that are outside um for the QR code stuff I actually have a light
239:28 box um in the in the loop okay and
239:37 um there is a uh here let's copy and paste this into
239:44 okay um so essentially what I'm doing here is um there is I built a twig extension for QR codes um and actually a
239:53 lot of this is documented uh if you go to uh oops uh shoot hold on one
240:03 second let me log into my other account
240:11 here all right um we go to the docs and then go to
240:19 um uh filters no uh shoot oh QR codes
240:26 boom um so uh here's uh docs act okay another uh the documentation for for VCF
240:34 and event um they weren't detailed docs like this they were just uh Stupid examples like these ones were so another
240:42 update for this is some of the QR the doc for the the QR codes I detailed out all the various Fields okay um so yeah
240:50 so basically this QR code. VCF VCF is a virtual contact whatever F stands
240:58 for um so this is an a contact card right um so yeah so uh we did that so
241:07 basically I have qr. VCF and I do first and then what I do is I the first name is the member name I split by the space
241:14 and I put first the last name is member split last right um and then I do uh
241:21 member phone member email member website okay
241:29 um uh and yeah I for this particular use case that's all I needed I didn't need any of the other member Fields okay um
241:38 then so where was I uh oh I was in the I was here right so basically inside
241:44 because this uh this generates an SVG file okay this macro generates an SVG
241:52 that is a QR code so I put that inside of an SVG stack okay and I I in fact actually I I
242:07 does this funky thing where it like yeah does something weird um yeah I actually didn't need to use an SVG stack I could
242:15 just put an HTML stack um okay but anyway I'm getting beside myself um so here I have a light box that I set if
242:24 you look here remember I said earlier if you have a light box inside of the loop um you have to actually make sure that
242:30 the ID is unique so I did qr- member ID okay um so now that that now that
242:39 light box is unique for this member okay and then in the Social Links when I uh
242:47 do the link container around the address card um I do data- open and then the
242:54 value where the light boox ID needs to go needs to needs to also contain the
242:59 member ID so I have qr- member ID see so I do data open oops how did that
243:10 happen data open and then QR member ID okay and then I don't actually need to link to anything so I just leave the
243:18 default link to be um JavaScript void zero so yeah that's how the QR code
243:25 stuff was done um and if you're curious I actually have some uh here now that we're talking I think it
243:33 was did I have some QR code swatches oh here i' had an SVG Swatch
243:41 that just um makes the SVG use the primary
243:47 color okay so um so yeah the SVG just uses the primary color so when you when you click on it even the color of the
243:56 SVG goes with my website's colors pretty
244:04 cool oh another thing I didn't even talk about is if you notice on each of these I also added a little tool tip so it it it shows you the the network right so
244:12 mastedon X Twitter Youtube so on so forth that's super easy to do as well um inside the
244:21 svgs where is it here in the Social Links um in the link container for each one I just put add tool tip and then
244:30 LinkedIn and then this one is ADD tool tip Instagram so so on and so forth pretty
244:37 simple a lot of that stuff was I just added like one bit at a time it was like okay you know I just created like task
244:44 list oh actually you know another cool man I I really got to get going but something cool that I something I do
244:52 when I code is um I do stuff like this like let's say this is some code right and I'll I'll do a little um you know to do
245:02 um you know blah blah blah okay um right let's say it's
245:09 uh well if if I'm in like an actual code file it actually uh when I when I when I add the word Todo to a comment um it
245:17 actually turns this line orange okay and what I found myself to do is like when I had an idea let let's say um I wanted to
245:26 add QR codes um here okay and I didn't want to forget that and I could have like a separate to-do app and I do but a lot of times for just simple stuff like
245:35 hey don't forget to do this here's here's a little trick okay I chucked a pen on the page okay
245:43 and then I did this um so I would do like I don't know
245:49 too um QR codes something like that okay um and then what I do is I just set that to be orange and let's say orange I
245:58 determine orange to be my to-do color okay and then content is I'm not going to add any content to this I always hide
246:05 so now I have this this bright orange um pen and I know whenever I see a bright orange pen it's a to-do
246:14 you know and you can even do something like you know you can make it big something like that so you just do you know oh that's too big but
246:24 whatever you know so yeah you know uh I don't even think you need to header I you can like that or not but I would
246:31 just probably just do that right so whenever I see an orange pen somewhere on the page I know it's a reminder to me like hey I there's something I need to
246:39 do like I should add this QR codes right here you know and uh I did that a few times throughout this project I had an idea and I didn't want to add it to my
246:47 to-do app so I just kind of chucked cuz I do that in code all the time like I said I just Chuck in a little to-do comment and just to remind myself later
246:54 hey eventually I need to to do I need to do this and I was like why don't I do that with pens and uh I don't know I kind of liked it it was an interesting
247:02 workflow so take or leave it okay guys you got me for an extra 15 minutes when I said I was going to leave
247:10 so um I'm out of here I promise I'm gone now
247:17 um all right okay guys I am I'm going to call it there I think I reviewed everything
247:26 um about this site if you have any other questions or things you want to ask me um join me on Friday at the hangouts or
247:33 post on the community I'm happy to help and answer things out so take care everybody um that was I think the longest live stream I've ever done so uh
247:42 hope you enjoyed it and learned a lot and learn a lot in the future because I'm sure you're going to rewatch this and play it and pause it and do all kinds of cool stuff so take care hope
247:50 you enjoyed this hope you got some benefit see you on Friday bye