hey everybody how we doing
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 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
one second give me just give me one
second okay sorry about that
all right Matias how's it going Mr Cole Ryan is here Mr oil field gas
gifts oil field sorry oiled field oil and gas gas man I am Tongue Tied today
gas gifts man that's like a tongue twister oil field oil and gas gifts man
that's a a mouthful Ryan Franco how's it going
bud excellent scooty the gezer suy the
gezer okay so 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
I uh I worked hard to get this site done um by today and uh yeah I literally 20 minutes
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 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 stream just starts going hard right so
wolf how's it going excellent good to see you Budd Mr
Len Canterbury I've been to Canterbury excellent that was actually
one of my one of my favorite little towns in uh when I was in England man that was 18 years
ago damn that makes me feel old 18 years ago
okay so so long ago okay let's um so today we are going to
be building a website from scratch now I already built it okay um
it did take me a pretty solid two and a half days um and two of those days
yesterday or Monday and Tuesday were like long days too okay so I'm going to
try to condense this down as much as possible um I do want to make sure that
I kind of go over the whole process I think it it's a simple 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
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
simple website um and so yeah I thought that would be kind of kind of an interesting idea to just rebuild this
entire um site from scratch and then um integrate it with total CS 3 now I use
total CS3 on this because well uh it's I I I needed to build a website
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 websites right but like building an actual web
page or an actual website using a tool 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
ran this group for maybe 10 years now I don't even remember it's been a long long long time
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 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
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
screen all right Kyle he needed a Celsius today too yeah D these things
these things are good I I I I've resisted watching the videos that tell
you how bad they are for you um because man they work uh never have two of them
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 you're good to
go um but because my wife says they're 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 need to so um today is the day um where
are we going okay let's go ahead and and let's load up this
website okay let me log in here oops one second got to go into this and we go into there oops what happened there oh
that's the wrong one uh that that login for the the live site this is my local
one actually no yeah no actually hold on
all right okay
all right uh that's the admin portal we want to go to the live 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
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 mission statement um we'll have like a little grid of meeting notes right so
notes from every meeting um who attended who missed um and then further down we have
like a directory okay so directory of people and
uh oh I I guess here let me let me let me go over the feature list from from
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
okay um we have our list of meetings here you can click on this and it'll open up that particular meetings note
notes okay obviously this is all dummy data okay but uh yeah so we'll have
notes 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 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
see you know the meetings Okay um so yeah there we go okay so that's pretty
simple um and then further down we have the uh all of the members of the group okay uh
with their phone numbers if you click on the phone number it'll actually call it 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 whatever your default Emil client is um
we click on their person's website if you click on here let's go to
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 quarter okay um and then below we have
uh links to all the various social media 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 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
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 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 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
yeah there we go total CMS has QR code features if you didn't know okay um and that's basically it uh
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 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
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 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 that so that it actually you know uses
these vertical tabs okay pretty cool I like it I I think it's I think it works out fairly
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 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 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 the the rules of the group right and and you know various standard operating
procedures and whatnot right and um so this this actual page is will be
publicly accessible um because let's say in the future we want to invite someone uh we
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
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 Charter
page hey you'll notice that the charter page is accessible um minus the menu 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
it's going to prompt me to log in
oops did I did I type that wrong what the
heck oh I need to be hold on there's there's two level all we'll talk about that in a little
bit right um and I will go into the when we start doing total CMS um we'll dive
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
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
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
Stacks okay and uh so without further Ado uh let's close this browser window
we're going to open up uh rapid 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
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 bring in some some stuff from this project file okay um so I'm going to go
ahead and uh create a new 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
file and that's what we're going to be working on
okay now um here let's just do uh we'll just call this
live I'll save it to my desktop all
right now before I can start designing um
something I felt that I needed
is like something that's important I think to any website okay okay and that's uh here let's just bring uh bring
here okay something that kind of is is the rock that kind of determines everything about a website not
everything but a lot right is is a logo right like so um my group as you see is
called the growth Guild okay and um I was we we needed a name so
actually the name is new too before we 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 uh.org and registered that this week and
uh and so we have a name cool and then I I needed a logo
okay and um so let me show you the logo 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 actually looks quite nice I think right
um I use chat GPT to Design This okay
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 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 find the oh okay
here right so here is my chat that um that I Ed to create this logo pretty
much just said I need concepts for a logo for a mastermind group called the 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
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
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 mockup was this and I loved it I was
like I really like that okay um and I at first and then I went
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
this logo and I couldn't actually I could never actually get this particular
logo it to just give me that raw thing 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
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 downloading this particular image um throwing it into pixel Mater
and you know just getting rid of the 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
see here here is the the actual image right again pretty simple and this
website again it's it's nothing for a 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 run um I'd probably take this concept and then redesign it using Affinity
designer or pay someone to do it okay um I do like the concept of it but as you
see when we get larger okay um it just it's it's losing
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 the site okay now um next up is so now
that I have my I my logo situated I needed to um figure out the
site colors okay um now what I did was I
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 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
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 picked various colors um from the image
and I created a color palette a few shades of green um kind of this gold that's around the outside um and a
couple different different shades of white okay um I kind of have a very
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 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 didn't want to use white white I I try
in my designs to not use Pure White okay I always try to tone the color down a
little bit whether or not it's um it's just toning it 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 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 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
do 250 250 250 okay um that's fa a lot
of times that's actually maybe too much I think 250 oops uh hold
on ah if I can type okay FC is I I use that I use FC a lot which is 252 that is
very very close to White okay um but it just kind of tones down the really harsh
brightness of white sometimes okay um so uh but what I did on
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 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
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
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 246 um what this does is it actually
adds a very I'll bit very minor a very minor 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
palette that I want to use for my website now let's go ahead and start using that color palette
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 Styles okay and uh what I do here is uh
all let's keep it big uh normally I mean I've used site Styles a lot so uh I tend
to uh remove those uh distractions um I loved them when I started but uh I tend
to not need them anymore okay um they 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 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 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
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 have a video on them check it out he now our site Background by default site
backgrounds for um all Foundation 6 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 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
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 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 increased it back to 12200 I I just like
1,00 pixels for a standard site width
okay okay um now we have our our primary color our color palettes okay and what I
want to do 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 primary text color okay my secondary color I'm going to use that brown and
I'm going to use that same white color 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 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
then my overlays I also want to use the darker green okay and actually we're going to give that like a 70%
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
forths of of my content right um okay so now on my header I'm going to use this
color green for my 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
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
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 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
link it'll underline it okay so uh by default links are not underlined when
you hover over them they will be underlined okay
um uh let me I think I kept 48 and then 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
uh 36 there yeah I think that's right uh my buttons I think my button text I did
slightly larger let me see uh buttons 18 and 20 yeah so here
we're just going to do um um 16 oh no uh
10 12 18 and 20 okay these are uh you can customize
the size of your text in in the various 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
that five and my gutters uh 20 pixels 32 I think I yeah those were default okay
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 background which is no longer white
okay but there we and if we turn on the color palette so you can kind of see there's our our colors okay so there we
go um actually the text oh it's a darker green oh yeah cuz
I used the the dark green uh for the text and then the slightly lighter for the headers that's right
okay um so now my base colors for my theme or my site um are pretty set and
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
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 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 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 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
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
that this is what we're looking like okay so we have um our picture okay uh
with our logo we have our header uh and then we have a menu okay
and um essentially the column one shrinks to content um and then the third
column also shrinks to content and then the the center column that has this 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
that look right so if we see here uh column one is set to shrink to content uh column two is set to Auto and column
three is set to shrink to content okay there we go um and I think
that's all I did there now another thing that preview 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
a little bit of divider so I'm just going to go ahead and check in pop we're going to do that okay
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 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 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
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 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 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
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 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 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 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 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
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 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 solid right so let's uh let's preview that there we go there's my nice little
um line okay my little border all
right now the next thing that I did 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 a long time testing fonts and playing
around with fonts and and all kinds of stuff right oh there's an update
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 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 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
fonts. goole.com okay um and you can PES through all the
fonts here another really great resource um is and actually use this um for this
project okay if you go to type wolf there we
go okay if you go to typ Wolf um there's a lot of this interesting site where he
kind of just shows you tons of fonts and font pairings okay and I think on here
he 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 fonts okay so here is a oh this was his
his paid product which I own I do own that and it's good um oh here top 40
Google fonts okay um and so here we go I I think I actually used this and I found
the the font that I use
is where is it there it is it's algra sand
oh here it is uh oh it's very it's at the very top okay so I I chose this I
wanted um for the heading at the top of the page okay um essentially what what I did
here is uh let's go ahead and type in the uh growth and actually I wanted it
in all caps right so it's the growth Guild okay and
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 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 the all the various uh types and how things look right um and if we look here
this is the one that I chose okay uh Sands bold it's the one that I
chose and um then what I did is uh so if you go to if you visit this on Google
fonts uh let's go ahead
and oh on my on my on my laptop I got used to the new version that has a
different layout one second give me a give me a second here
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 I can like copy the name oh well let's
uh let me just here copy this name there 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
we go into this uh Google fonts itself
has pairings choosing type oh they used to do they not have that
anymore I guess they don't have that anymore um and uh was it in here nope
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
was I did um pairings okay so if you just search for your font and
recommended pairings oh here on typ Wolf they have it download oh font
pairings uh let's see what did this they use that pleas he
tell you what font no he 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
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 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
I was going to use Merryweather for everything else on the page okay so um
let's go ahead and set that bad boy 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 I'm going to
um copy those and I'm just going to paste them
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 today so here we have uh I loaded my two Google these are the Google font Stacks
that are here okay that come with Foundation 6 now I know not everyone can
use Google fonts right if you esecially if you're in Germany right um You can always download those and use them as
Local web fonts or whatever okay for Speed and convenience I just went with Google fonts okay um so I chose uh the
default font here is Merryweather so if 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 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
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
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 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
some notes okay this is important though family name Merryweather that has to be
the exact name from Google fonts okay um and then uh you define what
weight you wanted I want this to be 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
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 go town too far this pathway okay um
but so you you'll see things like siif 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 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
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 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
accents on every character okay that is a serif font now
if we look at a Sans serif you'll notice 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 straight lines okay but there's nothing
there's no hanging serifs or Chads coming off of the letters so that's why these are called a Sans serif Sans
meaning does not have Okay so yeah Sans siif doesn't have
little fancy dooh coming off the letters that's a very technical term doohickey
okay so yeah these serfs are a sand serpant are pretty much are more they're
considered to be a more modern um type face now um I personally think that it's
nice that if you mix up Sans serif and sarif fonts on a web page okay let's go
ahead and search for um let me just turn off that filter and let's search for Merryweather
okay um if you see Merryweather is a serif font but the algra Sands is a sand siif
font I think it's nice to mix up your headers and your your text to be the
opposite of each other so here um again Sans serf is going to be my headers and
then Maryweather which is a sarif font is for my default text so there we go
okay um yeah little uh text or font education there
so here I'm Lo loading Merryweather and then in this Google 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
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 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 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
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 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 definitions now here I gave this a uh
oops this should be a Sans serif fallback font okay because algra Sans is a Sans serif font you want your fallback
font to be a Sans serif not a serif that way um while the font is loading it will
display your headers as a Sans serif 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
preview oh and in preview I hate this the Google fonts sometimes they don't
load inside so if we preview in the 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 you'll see that now this is uh
Merryweather okay uh with my menu now if you notice this isn't this
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
they were all the same size okay so um one thing I I didn't mention here is my
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
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 size if you notice here I made my H1 48
pixels tall okay so that means in theory this
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 sorry with line Heights um by default
normally when you're typing text um the 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
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 the text in a line height that's 1.5 *
bigger than the font itself so how can we fix that so uh what
we're going to do is I'm going to go ahead and add in a um a font style stack
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 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 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 um a utility class so let's just call it
line height one okay um just that we don't
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 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 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 itself okay so now if I go and refresh this
voila so now my text has a line height of one which is the size of the text
which equals the size of the icon that is starting to look
nice
okay okay so there we go uh we did we did quite a bit already right um so but
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 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 okay um so next up is uh let's build out
our sections of of the pages right so I know I want to have my kind of my
mission statement up at top and then a meetings area that has all these meetings um and then a a members area
okay so um let's go ahead and just build out that kind of basic structure of my
page
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 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 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
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 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
let's see mission statement okay um and let me get I'll get back to
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
you know this is called something called semantic HTML where um I know that this container is a section of my web page
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 main um which is this is the main part
the main content of my page okay now th this really does doesn't make a huge
amount of difference um but if you're techy and geeky and really want to go
all out um we have a lot of fine gr controls like that okay doesn't style
anything differently um and you can argue whether or not it helps Google index your page or not okay but um yeah
it's people that are like to be very OCD about certain
things so now we have a container each one is set to be a section 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
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 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
it to be 32 okay so now I have 32 pixels in
between each 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 24 right and now all of that is set on
one page right or I'm sorry in one location and there's also a Bento Box
Swatch and whatnot watch the video on that okay um which you can then assign it to a container or something like
that okay and then up here um this was uh
meetings okay and over here this was um
members okay uh let's go ahead and preview
that voila okay
um so let's start building out what do 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 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
stuff right so I'm just going to add in some laurum ipsum
okay now now we're going to get to uh something that's interesting here so we
added this mission statement right and and that looks okay but right now it's
just this big B ginormous bit of text
okay and here's a nice trick that I like to do um on my websites
okay and what I do is I'm going to uh there is a common nomenclature out there
that says um it is very difficult to read long bits of text like this okay um
pretty much the the best kind of range where a human can actually read is
around 65 characters per line I think there's a range it's like 60 to 75 or
something like that I personally normally use 65 characters okay so how
can I how can I make sure that this paragraph is never bigger than 65 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
Windows being open remind me later and I don't need that
okay um so what I'm going to do is I'm 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
going to type in P comma UL or I'm sorry UL comma O Okay um and basically what
what this does is it's going to Target all paragraphs and and unordered lists and ordered lists okay um so yeah it's
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 detailed and under Max unit I'm going to use
characters and under Max size I'm going to put 65 so now I have a minimum size of zero
which is fine and then a maximum size of 65 characters
let's have a look voila so now I have this uh this
paragraph of text that uh will never go above 65
characters pretty awesome now you might be thinking well what about this big huge blob of empty area over here that's
okay it's okay to have white 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 any questions let me know okay
um looks like I lost some users
here okay um so now yeah now that I have the
mission statement kind of done let's let's move down to uh members okay and uh what we're going to
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 of of
data so uh so now I'm going to go into 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 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 just go ahead I'm going to go into block
grid okay and add that below members and then um inside block grid uh
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 I did before we can look at that later but um let's start with
that and um in my block grid cell essentially I want a card okay so let's
go ahead and interesting you guys are commenting but my my viewer count went 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 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 in okay um now I spent a long time I
kind of know what I've do doing now uh 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 benefit from I already know what I did
okay for the most part I don't have every setting memorized but there we go
um and then inside of this card okay I had a I have a two column
okay uh oh wait uh I thought it was
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
I'm just going to for ease of it I'm just going to copy this picture stack so I don't have to
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 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
stack okay which is from here card section um and I have a header with
which is Jo Workman um and then uh one thing you'll notice that some of this
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 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 makes it 100% width okay which is nice
okay so now we can start playing around with this a little bit more now I I played around a lot with
how to um display um the phone number email and
website okay okay and what I what I settled on was the list stack now this
list stack actually isn't in Foundation 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 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
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 mlon Z which is a utility class for
margin left zero okay voila okay I now
have a link uh a list now uh I did have to in order to get these to be links um
I needed to type out HTML into here okay um so there is that um but link HTML
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
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 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 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
the menu styles get it exactly how I wanted um this was pretty much exactly what I wanted style-wise I just needed
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 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
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 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 dark green okay um I set it to be a
hollow button and I wanted to be round 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
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 Links okay um now in here what I did is
I just uh have a container and then I have 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 used font awesome 5 it is integrated
into Foundation um however what I did is I used an app called nucleo again uh it
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 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 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
stack okay um some
cool things that this app does okay uh if you notice here okay um I have the
SVG if you notice these are all um my 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
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 link color are set to be this secondary color okay
so how did I get um this SVG to follow the colors defined on the page so if I
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
inheriting from the default text color okay but once I added a link to this it
follows the link color how do I do that okay okay
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 current color it has to be set to this
exact thing current color okay it will follow the current
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 of
nucleo um whenever I right click and say copy SVG it automatically sets The Fill
color to be the text color that current color um and that's a that's a feature
in the uh in the settings and it's in the advanced
options here so if you have nucleo okay if you set the advanced options to remove inline colors okay what that will
do is by default it'll use whatever color I Define here okay um but with
that setting now when I whenever I say copy SVG code instead of choosing the 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
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 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 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
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 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 it
okay and let's uh let's go ahead and see how this looks all right whoa what happened Joe
what's going on here okay um so couple things um a these
svgs are ginormous okay um so a couple things that you could do oops I'm going
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
these links if you if remember we set uh underscore on Hover to be set right underline on Hover so that's working our
link colors are the correct color um our header is the correct color our uh
button is good okay so yeah everything else is looking good except for these social icons okay so what can we do
now oh you guys can hear my dogs yeah the gardener is here um so they they
don't like the gardener very
much is markdown easier for links um yes markdown is easier for
links however um this uh list item stack doesn't support markdown um this this
particular list item only supports HTML so markdown wouldn't help us
here okay 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 of time I'm going to go over here and I
already have some um some Styles in here right so I'm 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
here and let's look at this all right so I'm doing quite a bit here
okay um 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
Links okay and um so what I'm doing is on all
these swatches um I'm either targeting that Social Links container or I'm going
to Target um child elements okay so um essentially what we're going to do
now is let's preview this okay so now what we'll see is um
they're a they're all in the line the svgs have been made small um they've also been made by
default their I think 50% opacity when I hover over each one um it changes the
opacity to one and it makes it grow right a nice little
effect okay let's let's analyze how we did
that um so the way uh first let's start 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
setting the width to be 20 pixels okay easy we've talked about that
one let's shrink it okay um next is uh the padding okay I
wanted um I wanted actually you know what what would be kind of cool
is I'm thinking I'm thinking I'm thinking here
um here let's do this watch this all right I I I want to
kind of show you guys the progression because obviously I I built this out progressively okay so I'm going to say
Do not uh post um in here what I'm going to do is I'm going to remove all of
these pop them over here all right so right now um I'm going to set the width
of my svgs to be uh 20 pixels okay and
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
there and then we're going to go here okay let's make this uh efficient so now
that I have now I have my preview over here and my stack over
here okay um so now all my icons are good right they're all 20 pixels just by
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 is definitely kind of a there's different ways we could do this okay um
I could have used something like a block grid okay and then displayed them all
out okay I went for a slightly simpler approach and this probably something um
that definitely is an advanced thing and it's only Advanced because I I
understand the underlying technology 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 the structure here I have Social Links
which is a container okay and then inside of that I have
svgs okay so when I use a display Swatch and
I'm targeting the Social Links class so I'm targeting that container okay I'm going to set it to be excuse me display
Flex Now by doing that what that does is um it changes the the stacking context
of that container by default as you see things stack on top of each other but
you'll notice when I refresh this page now instead of them being on top of each other they're now directly next to each
other okay now Flex does a lot more but
that little tid bit of information can be very powerful if you have again if you have a
container and you set it to be a display flexx all the contents of that container will
default to be directly next to each other instead of on top of each 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
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 little bit of of pading right cuz I
think that that doesn't really look nice we need some stuff in between okay so I'm going to add in a padding Swatch
okay and this padding Swatch just adds um four pixels of padding on the top and 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
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 nicely L
okay um okay so now uh you know I 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
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 and I I added an opacity Swatch and let's talk about the selector
here actually I should have talked about 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 and then what I'm targeting is the child
elements uh Kyle says fluxbox is one of the hardest modules in CSS to understand
yes fluxbox is hard um it is definitely tricky okay um
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 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 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
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 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 Links and then I want to Target all of
its children so again here I'm targeting Social Links and all of the children
elements again this is just a strategy of just being a little bit smarter with your swatches because again now I can
add as many svgs inside of this container and they'll automatically get those particular stock FES does that
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 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 why why require a class when we don't need one okay so that's a little
Advanced Swatch selector tip there okay um so here uh in the opacity I set
the opacity to 50% so let's refresh 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 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 another um
Swatch and what this does is it's going to use um all the Social Links and I'm going to use the selector add-on of
hover okay okay and then I'm going to set the opacity to one so
now when I refresh and now when I hover over you'll notice that the colors now
become fully 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
that what we're going to do is we're going to use a transition Swatch
okay and what this uh what a transition Swatch is it ows you to transition from
one style to another okay so here on Social Links child
elements um I I set the transition speed to 300
milliseconds so now when I when I hover over instead of it being in an Abrupt
color change it takes 300 milliseconds to go from
0.5 to one right so it's transitioning 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 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
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 on Hover okay and um I'm going to scale
to one 1.2 so I'm going to make it 20% bigger
when I hover over so let's refresh and voila now not only do we do
we go from um 50% opacity to fully opaque it also grows to
20% and it all does it in a nice animation pretty cool
right I'm really liking how this is is working so far okay
now I think my card I'm pretty happy with it okay um something if you noticed
has very Square edges and depending on your design um you either going to probably go with square or you're going
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 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 radius
you can add it on anything and anything you add it to gets a
radius okay let's refresh oops
refresh okay so now if we notice here I have rounded
Corners voila pretty cool right
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 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
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
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 the top and the bottom and let's refresh
right there we go okay so now we have uh some nice gutters now this gutter here
I'm pretty sure actually this uh uh these cards
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 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 um margin okay
um and so what I'm going to use I'm going to use a uh MB colon zero on that
okay and um now I'm just going to take that block grid cell and I'm going to paste it
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 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 that's a fair question um okay let's go
ahead and uh let's go do this let's hide 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
class right and let's just refresh that so if you notice here the Gap is
bigger now okay um so 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 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
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 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 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 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
ahead and set this to be zero voila it sets margin bottom to be zero everywhere okay and so in order to
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
colon zero uh that's probably probably my most used utility class is MB colon
zero margin bottom zero um and or 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
but yeah mix and match whether or not you want to use a Swatch or some utility classes the utility classes can be
definitely useful okay so um there we
go I just noticed we're at like an hour and a half almost and I still have a
long ways to
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
you caught me okay
um okay um he caught me good one good eye Steve
man keep me on my toes okay um I'm just going to go back to one card just to reduce the Edom mode
okay um for those that that maybe didn't know okay or that didn't see
um right so it was in this particular one uh on this hover Swatch okay um a uh
so let's let's stop and let's look at opacity okay um so in this opacity
Swatch um I used Social Links and if you notice I used um the child selector
elements um selector add-on okay um and one thing that is nice about
swatches okay is that um I inadvertently or I sneakily let's say I sneakily
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 can choose this thing called uh child elements what you'll notice is over in
the Swatch over here it actually shows you the exact CSS selector that is
used what does that mean what that means 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
selector so was do sociall links um greater than star okay oh uh i' have to
set that to be none okay essentially now this Swatch is the
same exact thing that that that I did 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 Builder right okay so when I choose uh
child elements well first off let's go to none okay 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 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 so dos Social Links targets anything
with a class of Social Links okay now when I added on the child Elements by
the way a small caveat uh I don't this month or last month I released a update
that changed this from pseudo state to be selector add-on I really like that 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
elements and if you let's look at what that did okay um so it did CH uh Social
Links uh greater than star what this does is it f is it says
um star obviously if you don't know means anything okay so star means
anything now what the greater than sign says is it's anything that is a direct
child of Social Links um so if I were to change this
selector add-on to be all descendants okay you'll notice that that
changes to just be space star okay
what's the difference between those let's have a look over in the dev
inspector okay um all right so let's let's look at
the exact exactly what we're looking at here okay um so let's
find uh here it is here is Social Links okay I actually don't need I close that
no it's not that is it this no I'll just do that okay so here here we have Social
Links okay and if you notice inside of 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 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
when I say OPAC uh Social Links space star that means all descendants okay so
what that means is is it not only Targets this div but it also Targets
this link this SVG this uh group SVG group this SVG path it targets
everything okay now for something like um opacity that probably doesn't matter
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 single child every single descendant
okay so in this case what I I only want to Target this div I only want to Target this and this and this and this and this
so in this case I only want to Target the direct children of Social
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
child elements and we do instead of space star we do greater than star okay
what that does is it finds anything that is a direct child of Social
Links okay hopefully that is hopefully that makes sense okay
now let's go to this um opacity on 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 it normally when I create a hover style
I copy that swatch the original original state and I paste it
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 what you would do is you you would change a selector add-on to be um
hover however let's look at what this does right I'm going to refresh this
page if you notice that doesn't actually work right it's not working okay because
I'm I'm targeting Social Links itself the container I'm not targeting the children at this point because I Chang
my selector add-on from child to hover okay so um what that means is I I
need to I need to muck with this this selector and and find a different way to
Target the um the svgs when I hover now 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 right um if you notice in here I could Target there's SVG has a class so I
could have done something like this Social Links space um
SVG okay and then done um hover right that could that could have
worked okay and that does work okay there's a
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 this Social Links um oops uh save that
Social Links greater than um star and 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
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 greater than sign oops I just took the
greater than sign and I could have done greater than star okay um and then set
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 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
greater than sign um and so what this says is um Social Links uh uh greater
than sign and then when I hover on anything that's a direct child of Social Links apply that
style okay so and that's what I ended up with on the on the site um and what I
had earlier and uh and yeah Stephen you called me out okay so that was a nice
five or 10 minute tangent there
okay if you ever need to if if you just do
um okay um you've probably seen me use this app um if you've attended my live
streams at all or hangouts um this is an app called Dash
um you can also just find all of this online Okay um it's all on MDM web docs
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 Alfred and integrates with Alfred as well um but yeah you can just search
here and do selector I think it's selector list and um is this one that has all no this
isn't this isn't what I wanted
uh types uh Universal selectors ah here right
um well that just tells you about ah there is a I know there is
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 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 there's like a little TIY one that is
like a a brother um or next two basically um which is useful sometimes
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 one second let me uh me share
something I I've preached this book a lot okay it's um HTML and CSS by John
Ducket okay um I think there's one 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
other technical book you've ever seen okay it's like a it's like a coffee table book okay it
literally is like the most approachable technical book I've ever seen um and it
is it is a brilliant way to learn CSS okay brilliant now I I I've boughten
like four versions of this book or four the same version but for books spend a little bit extra get the
hard cover okay um the bindings on the soft cover book are not fantastic okay
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 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
really use this book any longer um but it is gold right check out this book
HTML and CSS John Ducket it's awesome
okay all right uh let's get back to
sharing okay
um okay what was I doing now oh um okay I
think I think I'm pretty happy with the cards right um
let's see what else did I uh let's just preview this page
um yeah all right so now let's move up uh you know I I can create these
little edit profile buttons those are pretty simple um again we're we're going
to all we we can start mocking this up 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 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
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 okay um so I'm going to do is
here what I do on that oh okay yeah um what I do
here oh interesting uh sorry just reminding myself of some of the other
things that I I did okay
um I'm going to copy these Styles okay and um I'm just going to paste them into
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 done a little bit right um oops so this
uh targets member card and inside here I'm going to add a class of member
card okay and actually here if you notice it instead of that remember earlier I added this um this utility
class mb0 okay um here I just had member card I actually have a margin Swatch
that sets margin to zero there we go okay
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 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 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
actually let's just do this one container I'm going to set overflow to be visible okay on that refresh
that oh it could be on uh where
is where is
that oh actually it's the bottom of the web page I think
interesting yeah if I were to add in uh
did I what did I did I add some I thought I had some pading here hold on one
second yeah it should be interesting oh there's overflow hidden
it's on this bad boy here all right so on this container overflow visible
come on man all right let's see let's keep going down uh let's see we have this container
here overflow
visible oh wait oh oh I'm looking at the wrong wrong project file oh
Jesus I was looking at the old one uh okay uh visible all sorry my bad go on
this one uh overflow
visible there we go okay helps if you open if you change
make the setting changes on the right 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 also the the card kind of lifts up a few
pixels right it gives it a quite nice effect okay
um so let's let's just look at that really quick so um here I I provided a maximum height to
the um to the cards okay
um and why did I do that I don't remember now um here we do the Shadow on
Hover I'm not sure that actually is doing anything useful
yeah interesting 1 th000 pixels minimum
100% oh okay um yes uh this this Swatch actually
isn't even useful anymore I was that was from I was playing around with some other ideas okay um Shadow so here we
have a um a default Shadow actually here 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
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 let's say I want the primary color okay
and that way uh the Swatch uh the shadow always follows the colors from sight
Styles right one thing I don't like 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 used that the same color from uh primary
but then I made it opacity 40% right so 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
spread a little bit to kind of make it so um that color isn't quite as as
harsh um so anyway so yeah there is a shadow on Hover and just as before if
you notice the shadow kind of animates it's not like an Abrupt change okay um I
used a transition Swatch we already learned what a transition is and then I use a transform Swatch um to make it
rise up by two pixels okay so in transform I use move and I move on the Y
AIS negative pixel negative -2 pixels up okay so yeah so I'm moving -2 pixels up
um and I I left all the other uh settings uh 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 show you I we'll disable
that okay cards have a border okay and um W they they look actually it makes it
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
I set the Border uh it border size to zero pixels so you're setting I'm
setting effectively removing the border from the card okay and uh there we go it
gives it more of a flat look um when without the shadow um and then it I
think it looks nice so there we go okay
um so there is the some nice effects that we did for the card um let's look
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 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
look I I'm going to copy that and this is a really really really
simple one okay um so on this button I have a class set to open goals okay okay
and something that I I like to do um 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 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
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
classes that I can Target things with okay so if you see down here I have Social Links okay uh on the button I
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 targeting so if we look at the open
goals I have a background and a font color swatch so um basically uh what I
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 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
were to ever modify the colors and sight Styles um it's going to just reference
those colors super useful uh you can 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 much as possible
okay um so now let's refresh this page now when I hover over this button uh we
get a nice U kind of uh effect where uh again the background color changes to be
that uh that primary darker green and then the goals are uh the text color is
white pretty nice
okay um now the last bit here
is comes into effect um I'm going to show you the problem
that I had now right now this card looks I think looks amazing okay I think it looks pretty
awesome uh and uh at this point what I did was I then um oops uh
I'm I'm going to take this right and we're going to duplicate this multiple times just so I can start testing um
this page out uh with multiple cards I 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 great on desktop right but how is it
going to look when I start once I start shrinking oh no what happened now uh I
can refresh and oh man what the heck's going on this starts it starts looking
horrible right uh so what are we going to do here
you know it it looked really good when was on a big screen uh when the image was bigger than the
text okay it looked great but once we started going down starts to not look
great okay so what are we going to do
here this next bit um took me a long
time okay um and I'll I'll show you a there's a cool tool um it is not
cheap okay um it is even subscription software okay
um and uh it is pretty nice though I have to 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
called polyan okay and um what it's really good
as it kind of shows you your pages um across a lot of devices all at once okay now you could use um
the simulator windows in Rapid Weaver okay uh definitely
possible um poly pane I think is nice 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
responsive view okay in the dev inspector okay where you can be like
okay I want how's it going to look on an iPad Pro now right and you can start seeing this okay so um I admit polyan is
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 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 kind of fell by the wayside
um however when building this site over 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
and what I did is I actually added a fourth view here um and I added
a small iPad Mini 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
um iPhone 16 uh here let's do this one is like a iPad or
iPhone what's the oh here the mini right 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
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 it's nice right allowed me to quickly
debug this stuff and really I think it looks okay on on small devices um but
where it doesn't look good at all is is in medium it just breaks down it's just
garbage okay um and let's go over what I did to
fix this uh let's uh how do I exit this mode
there we go all right so let this mode here right
just looks garbage so let's analyze this layout a little
bit okay um so here I have a block grid oops let's just open up the top one okay
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 in this two column um I had it set to 12
and then um so column one um on small devices it goes full width and then on
medium devices it uh basically it splits 50/50 okay now let me remind myself what
I did here okay oh yes okay um this very interesting okay
and then that was I remember photo yep yep yep yep yep
yep right um so a couple things you'll 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 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 let's let's let's add that really quick
um let's just go ahead and add a link container and I I did put a a class of
member Das photo on this okay and I'm going to add that
there okay and let's just copy that paste it
in there okay 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
okay trying to think of the best way to do this without taking an hour to to to go through my entire
thought process of of this
um because again this this bit took me a 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 of worked but I kind of like the
Simplicity of this this layout and I wanted to make it work okay um so I
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 um all right
so let me just review let's see this 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
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 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 two now let's have a look at what that
looks like all right so uh here on large we go two column and then once we hit medium it
goes to one column okay uh and then small it goes to
one column as well okay so that that's actually I think a pretty decent
workflow right I think that I think that 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 first that that actually is really nice
really simple small change and if you notice it it actually 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
here we have the image and then our content okay and then on small the image
is on top with our content okay and then on medium um it goes from
it goes to one but it's side by side side so it's not as tall right so we
kind of have three different cards here just with that one simple little
change okay now one thing we need to fix is um this image like right here it's
not it's not working too great okay so and that is a little complex
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 that are assigned to member photo okay
we're going to paste them in here and actually you know what I did uh 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 to go into
here all right um and let's just go ahead and all right so now uh what I'm
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 difference um of what we're doing
okay let me talk about conceptually what what I plan on doing first okay right
now um this First Column okay is uh controlled by the size of the
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 of the columns remains kind of static
right it's 50% but this image because how images scale is when
you when you make it more um narrow it shrinks right because the image
scales right and it it's set to display the entire image all the
time so what I plan on doing is I'm actually going to make this First Column here
static okay um so uh it's just going to be a static size it's always going to be
the same
size of the card hopefully you see that right if we
go down again look the image is the same 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
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 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
in a different location okay um but yeah there we
go I'm thinking this uh this mockup actually I fixed some of those issues on
the non-m mockup page okay I might be jumping ahead of myself a little bit
okay um so let's review this okay um and
actually to do this let's look at my two column settings okay so in in this two
column settings um column one on small is going to be 12
okay and on medium it's going to be shrink to 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 going to statically set that size of the
column okay um and then in column two it's just
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
as it can to fill all the space right so let's make those changes
I'm going go into column this two column 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 uh the second column is always going to
be Auto okay essentially having it uh uh how it was uh 12 on small and then Auto
effectively the same thing okay but um yeah we're just going to set to Auto on
everything just to keep things simple right so now we've done that
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 setting it to be 192
pixels okay let's see what that
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 this one right here okay so as you see that is uh oops this
image here is um static okay um now there's a very cool thing here called
object fit okay because what we want to do now is we want to take this image and
have it fill the container okay um and we need to do a
couple things um
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 here I set the height of member photo to
be full container height so height 100% then what I'm doing is I'm
targeting the image inside of member photo and I'm setting it to be cover
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 actually these settings are the default settings okay for object fit so um and
let's have a look at that right so now again I set in member photo I set it
to be 192 pixels I set it to be 100%
height and then I set the image to fill the container and Center
itself even if that means cropping some of the image and as you see it looks different
than this over here but now as I shrink it looks good
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 want right so um I have another um
another thing here called height third so here on this Swatch I have a height Swatch that's set to be small only to be
33% height so now when I when I refresh okay and I go back to small
you'll notice now okay the small container is uh it it
takes 33% % height and but the image is still kind of filling the container and
centering itself pretty
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 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 accident okay
okay here let's quickly look at that what did I do
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 debug um small view um
so wonder if it was in that card remember I think I I deleted a uh I
think I deleted something that member card I think it was this height Swatch let's see does that fix
things nope that didn't fix it remember
card okay what did I do here
oh it's still way over there that's weird
oh okay instead of that two column being Auto if I set it to
be 12
Auto okay that worked and then
this small 12 medium shrink that's
correct uh let's look at this two column what did I do here
right uh what vertical alignment what if we did top that actually would probably do it oh but then that that's not what
we want
I remember running into this yesterday let me let's set that back cuz
that obviously oh I did refresh
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 fixed it
but um here I'm going to I'm going to cheat a little bit
here uh let's go back up to here which is the final page it m card
open walls you know for fun I'm just going to
I'm going to copy this let's go to my mockup
still not
fixed oh it's meetings down
here oh it's meeting notes on 111
gutters vertical line stretch looping up
cell 12 12 12 Auto oh yeah I did do 12 Auto there
oh man here I am doing the wrong project file again it's all
good idiot all right let's go back to this one sorry paste in
there oh same exact Behavior right
all right uh let's all right
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 it out in the final project I do remember this what was it
though that is bugging me uh let's go ahead and let me just
preview this page because this page doesn't have the
problem right oh oh it does oh let's go to the
homepage oh oh let's let's go to the actual live
page oh I remember now um
uh I remember now uh let's go to oh here
yes I have this sneaky little Swatch at the bottom of the page I used equalizer
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 together um actually here all so what I did is I
used the equalizer Swatch and I targeted um the class
member grid okay which is um this here let's um I added a class to the block
grid itself okay called member grid so I'm going to do member Das
grid let's add it to the title because that's always good okay and then
um I targeted the uh equalize class uh card column okay and that
was where did I put the card column class okay I put it on um on the member
photo I have a card column class and then in this card section I have a card
column class okay and essentially what 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
section okay and actually you know what now that I'm thinking about this solves a different problem that I didn't run
into I think right but it's fine this was a
something that I
did see how that that
works was it this
one oh also I think part of the problem is
that okay let's go ahead I'm going to delete
what that equalizer Swatch did uh okay um what you would notice is without that
equalize um if we were in this view here if you notice uh well if if let's say
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 cards themselves um would have like a small Gap somewhere so that equalize was
needed and it was something that I figured out as I was testing with live data okay um
okay I'm going to move on hopefully I I discover uh what I I did um
previously okay to fix that issue because at this point I'll be honest a
lot of these minor tweaks that I'm making right now okay um I didn't make
until I already migrated this particular page to be used as total CMS and we're
already two and a half hours in on this okay so um all right let's uh let's move
on and hopefully again hopefully we'll 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 remember the exact fix though okay um
let's go ahead and I'm going to take this um this block
grid um that I built for the meetings okay and uh I'm just going to copy and
paste that okay and we'll we'll review what
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 uh this lay out with hold on one second
let's go ahead and just do hide which show the top one okay um I
started off with the same exact card down here okay if you notice even says
member card it uses all the same classes to be honest I I probably should change 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
something like that so that it's a generic card that could be used anywhere but I was
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
other one so we get all those styles for free just by adding that uh card with a
member card class and then um in here I just added a card
section um and then in there I have a a 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
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 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 to be a smaller
button um and then here I just I used a block grid okay and in the block grid it
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 then a header and then a block grid of images and um the block this block grid
here um right now my group has seven 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
fit perfectly right here in one row um but obviously some people miss they'll be you know dispersed across two of the
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 layout that just I I really liked okay I
played around with like adding people's names but it just didn't look great right um so yeah having just a list of
images uh with uh the people down here uh was was pretty good okay
um so at this point um actually it was before the before I did the meetings uh 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
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
okay um so
this is kind of uh ending the foundation build site build portion of this
um page or this live stream okay and 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
we'll be here for five more hours okay
um so I'm going to go into um my total CS admin
area oops what's going on
here there we go right um I created um
if you notice this is the total CMS 3 um now I'm not going to dive into
publishing essentially publishing total CS super easy all you have to do is add in your
um total CMS core to the page okay um and then you publish and you get
access to this now a workflow that I've I've grown to really like while playing
around and using total CMS 3 is um total CMS works 100% inside preview
okay okay um but um I have M running
okay if you notice this um this domain here is just local. thegrowth guild. org okay and um
in M I set up that as a domain U this this domain doesn't exist on the internet um
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 publishing settings it just uh publishes to that
local folder okay and then I can just preview it right here inside
M and um I really like that workflow um I mean for me I I never use you know
I I don't know it just it I just kind of 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 a lot of files 5,000 files um is super
fast okay um so yeah that's the kind of 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
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 online it's only on my Mac okay um and yeah it this this works with
or without rapid Weaver even running okay so pretty cool um what I've done here is um again
I I'm not going to go through the ground zero of total CS 3 um but in total CS 3 you create
something called a schema so I need to be able to manage meetings and members
so I've created a meeting um schema and these are all the fields available to me
um in that schema we have an ID for the field a date uh who attended who missed um summary
and chat then we go to my member schema okay
and that has a lot of fields okay um we 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 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 in a little bit um password LinkedIn um
so basically a bunch of social profiles so LinkedIn Instagram YouTube xmed on Facebook um a little about paragraph um
the person's goals for their year and goals for the current quarter um and
then some hidden fields for um you know when their account was created how many times they've logged in and their last
login 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 there we go uh you define uh the required Fields
um and then all the fields that you want to be able to access um on the main page
okay and also any field that is searchable okay so like in meeting uh 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
search for any field okay okay so uh yeah really quick that
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 into the setup I took the time to go through here and set up the factory
information so like here is an image um for name I use name um and email I it
just set Factory to be email um and what this does is it allows you to automatically generate things right so
for example if I go into my uh meetings you notice that it just
automatically generated a bunch of stuff for me okay using something called the factory and you can automatically add if
I want to add 10 more meetings um it just adds fake data into your CMS right 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
two before okay so I've added 10 more meetings uh which is pretty cool okay it
didn't populate attended and missed 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 created a bunch obviously I created mine
manually and then I just created a bunch of other users that had names and emails and fake phone numbers and fake website
kinds okay um I did manually upload my 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
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 this backend area again um but now that I've showed you how I've created dummy
data um in the CMS um another thing I 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
okay as static text in the CMS
okay with that done uh let's go back to um our
project okay so let's start off with building um
this okay and uh showing you how uh I'm going to basically migrate all this data
okay so I actually kind of liked this workflow quite a bit um you know
building the the mockup and then um taking this data and replicating it many
times to create the final grid um that I 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
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 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 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
multiple block grid cells for every single member right so if you see this
this particular area Okay uh right here I need to replicate this for every
single member okay so let's do that 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 actually even add it into the uh the
features inside sight Styles okay um so what we're going to do is
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
to do is in I'm going to drag this block grid cell into the loop
that Mak sense okay so now what I'm going to do is I'm
just going to start replicating or 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 The Collection so uh the collection that
I created um for this was called members so I'm going to Loop through the
members collection okay um in total CMS and the loop variable basically I'm
going to uh each one of these is a member okay so most of the time your
collection and your variable are going to be the plural and singular versions of whatever you are doing okay so we
have members and when we Loop through it each each instance of the loop is going to be assigned a variable called a
member okay so um and now what I can do is I can then access that member
information so um for example here now this is where it's very
important that you know your data okay 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 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
of my member is called name okay so here I would use curly brace curly brace
member. name okay so there wherever I put this
this is now where um the member name is going to be put okay um and just for Speed I'm going
to go ahead and in here I'm just going to
copy these
all
right so um here basically if we look in here I have the member phone number now
I updated the this again I am using HTML as I said earlier okay and uh
essentially I I'm using the telephone uh syntax so you do Teel colon and then
it's going to inject the phone number into the U into the URL and then I I put the phone number as the link text okay
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 email is text again this might be a little more user friendly if I had again
chosen the menu stack instead of list um 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
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
to know the some of this scarier syntax now this is kind of interesting
okay so um let's look at let's look at my
um my user account okay if you notice here my website is
set to https www. weaver. space okay however if
we go to um the website where am I you're right here
okay oh oops where where' I go down here you'll notice that it doesn't
say https weever dospace okay
and um this is because I I did some twig
trickery and um if we look at this let's inspect this
really
quick okay if we look at this we see that the link inside the the link it we
have to have https col Weavers dospace okay but in the text part of my link I
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 wouldn't work okay you have to have
https or HTTP uh or else it won't link to the correct website okay um so what I
did was um for the for the actual content of the um
um link the text of the link I stripped out the https and the ending slash with
twig right because twig is freaking really cool okay and um I'll I'll show this to you
um I do some a lot of twig trickery in 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 to dive into every single little thing
but I'll I'll show you what we can
do all right let's turn
on um let's oh uh hold
on uh language mode HTML all right there we go
now we can kind of see see this a little bit better okay so if we look at this um I
have the beginning of my link and and 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 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
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 let's let's put this on a new line here
there okay so here's my opening link tag here's my closing link tag and then
inside here this is the content of um the text of the
link so we're using some magic in here okay and what it's doing is it's doing
member. website so it's taking the full website that includes https okay and
then I'm splitting it what that means is it splits it based on um the
slashes okay so what that means
is okay so what what it what it's doing 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
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 it's getting that and then it's getting that so it's splitting the data um
splitting this string based on a slash
okay then um now this is the this is probably the the most confusing part is
um of the results from the split I want you to start at um so this
is an array again this is getting quite technical okay um in Array this is uh
item number zero this is item number one this is item number
two and that's item number three okay so it
split this string into an array where 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
want you to start at number two so it's going to start here and then only give
me 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 returning a different array that only
contains the text that I asked it to okay now if I had done um 2 two what it
would do is it would give me Weaver space slash it would have returned an array of Weaver space and slash because
it says I said start at number two and give me two items okay um so slice also returns an
array now in in this array again I only wanted one okay so it only returns this
but in it returns this as an array okay so at that point I pipe it
and say give me the first item and and it is that so yes um hopefully I know
that was confusing and I don't teach 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
hours okay um but yeah this now returns
Weaver 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 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 CMS right so anyway there we
go um okay that was interesting all right so let's go down let's keep going
if you no now um in my button I have Joe's goals well in my data I don't store
first name and last name as two different fields I store Joe
Workman so if I want Joe's goals I need to be able to purse this
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 a look at this so inside of this um this
open goals button okay um I copy
that so here we have member. name um and then I'm splitting on a
space similar to up here I'm splitting 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
space workmen okay it splits on a space it uh
split again returns an array an array has zero and
one okay and basically I'm saying give me the first item in that array which is
Joe so now this returns Joe and I have
an apostrophe s goals so this returns Joe's goals
pretty cool okay um and then in Social
Links okay um I have a Q QR code thing 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
definitely look at that all right in Social Links um you
notice that I have a uh the link 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 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 conditional around each
one and what this says is um the conditional the rule is purely member.
LinkedIn now when you have that what it says is does a user have member.
LinkedIn defined if they do do display this
content and then it goes to the next one and the rule here is member.
Instagram so um so basically it says if the user has defined if a user has set
member. Instagram um use add link container with the Instagram logo this
way um if a user doesn't Define something so let's say for example I'm 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
refresh right whever my card is there it is linkedin's
gone so this makes it so that if someone 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
artificially generated ones I didn't take the time to add Social Links for any of these so they're all gone
okay so that's pretty
cool all right um now let's look at the
um the image okay um and so uh in order to
replace this image uh we're GNA have to go into here and we're going to find the
image stack in the content image okay and we're going to
drag that out there right and I'm just going to delete this 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
need to define the object ID um for this and the ID basically we need the ID of
the member so that is member. 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 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
custom collection we need to check this box and we need to set the collection to be
members and the property of my image okay it's not image it is I think it's
photo um yeah so if we go just to show you uh
I the name of that property is photo okay so uh here I'm going to use
property photo okay and you can set all your width and
height and crops and all kinds of stuff um here
okay sweet ultimate I'm uh I'm getting a little
winded now that we're at 3
hours and I think a lot of you are um probably uh brain overload as well okay
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
are um you know novices to Total CS3
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 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 concepts again we'd be here for days if
if if I did okay so I apologize for that okay um
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
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 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
I have a filter and assort okay um and in the filter I just said filter if the
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 um disable this member and that
particular member is now disabled okay and they won't show up on the
homepage okay so that filters out anyone that is um that is active so we only want to
display people that are active um and for sort I just shed it to shuffle um and that way if you go here
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
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 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 sort by a particular field like maybe by
name or something like that okay I just thought it would be fun to have Shuffle that way everybody has a chance to be on
top okay
um let's talk about something that's kind of fun um and that is this
um I'm not going to go through this in great detail okay um
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 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
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 fun to add this little emoji when it is somebody's birthday week not
just today but like it's their birthday within plus or minus 5 days
right um so that if we meet every Friday 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
yeah pretty cool um so basically
um here I will show you the TW Wiig um 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
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 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 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 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
birthday so I get um basically um let's say it's November 6th so their their
birthday is on November 6th basically this then gets me a date object that is
November 6 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
getting again their month and day of this year so that's uh some tricky stuff
there okay um then I create a start and end date so basically what I do is I get
the current year minus 5 days and the current year plus 5 days
I wonder if I do um language mode oh oh that's probably much
nicer okay um yeah so now I get the current year um modify it I'm subtract
five days and then I I return the actual date object of that pretty cool
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 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 birthday so I have a conditional that
checks whether or not they set their birthday and if they do all of this 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 date then I have another conditional
that basically says here let me uh take this okay if today which is is greater
than the start date and today is less than the end date so if it basically if
the date is between the start and the end which is plus or minus 5
days display this container that has an emoji that's
it um and then I do have some uh uh
uh uh up let's see here it is I just 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
the cursor um and I transform it so I rotated a little bit okay so essentially
this position Swatch is the important one this is what basically takes that emoji and always puts it at the top
right corner of my card
right pretty magical that's some that's some Next Level stuff there that that
was a lot of playing around to get that to work um and oh another thing I do if
you notice um I don't display people's birthday but if you hover over it you
can actually see what their what day their birthday is right so um I added that with just a little um I added a
container around this and in the container I added a tool tip and inside
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 I put in uh the date format that is
November 4th or January 6th or something like that right so there we
go pretty slick this is next level stuff right there like that's pretty cool and
again it's all Dynamic it'll only display this if it's Plus or plus or minus 5 5 days of the person's birthday
like that's pretty 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
I'm going to change my birthday to be um 114 1980
okay which is um November 4th was two days ago right so now if I go ahead and
reload this page okay the birthday sign shows up on my
card with November 4th because it's plus or minus 5 days but didn't show that
before because August 4th which is my actual birthday isn't within the realm of possibility right definitely next
level stuff
okay um pretty cool stuff there uh the same
process that I did for um the mockup of um this meetings thing you know I like
that where I dragged I I basically replaced all the mock data with total CMS data I did the same thing up here
okay and let me show you what that looks like okay um so here again I added a loop
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 be meting okay um at that point I can then
use meting do whatever to display my data so here um at the top I have the
date okay um it is meeting. dat and then I pipe in uh I format my date using this
logic here so capital M gives you the the
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 comma and then capital Y gives us the full year right so that displays the
meeting 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 you click on this it opens up a light
box okay um wa then in attended now this is
pretty cool so I have another block grid and this is something that I I'd
never done before total CS 3 either I have another loop stack
okay um let me show you uh what it looks like when you add a meeting okay um so when you add a
meeting now this is actually a page that 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 total seams admin area so I created this
custom page that has the um meeting form
okay um so in here you put in your date and if you if you click on the attended
if you notice what it does is it shows you all it pre it's pre-filled with all of the
members okay so I I can just click on the member names for the for the
attended and the missed that's really cool
okay and uh in a little bit I can show you how I did 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
to your schema for your meeting okay we have the attended and
missed um fields or properties okay let's look
at attended okay um the this is a list uh
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 for um this works for list fields and
select boxes okay and what you do is it allows you to
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 members field um you Define a value and a label
okay um so the label is what you see in the dropdown but the value is the ID okay so
what I'm doing is um in that form while you see the person's name the value that
gets added is that user's ID
number okay so this allows us to do relationships between different
collections 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
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 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
know because now um I am looping through my
meetings and inside there I need to Loop through all of the people that attended
this meeting man I am getting
hungry um so I have a second Loop
and in here I am looping through meeting. attended so I'm going to Loop
through everyone that attended this instance of a
meeting and then I'm going to uh the loop variable is called
member 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 ID right um but it's essentially uh it's
going to Loop through the attended and the actual variable is going to be member the ID of the member
okay so now uh what it's going to do is 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
that uh let's go back to the homepage
um it's going to Loop through each person that attended this meeting and add an image for each person that
attended okay so um when it Loops through we want to add an
image that image um the object ID is the member okay and that
is probably be it should be member ID right so it should be Loop variable is
member ID okay okay and so in here that variable is called member ID and then it's going to be a part of
the collection members and the property is photo so again in order to get the image
for each member all I needed to know was the ID once I know the
ID um the collection and the photos or sorry the collection of the property are
static values I know exactly what they 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 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
64 by 64 okay so it it puts in a 60 it brings
down and generates a 64 pixel version of that image
I want to ensure that um because I wanted these to be circles I need to
make sure that the even if the person uploads a nonsquare photo that it 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
to make sure that the image that is generated is exactly 64 pixels by 64 pixels and it will crop anything else
outside of that for more information on images I have other videos on that on
how the cropping works okay and then obviously it uses the focal point which
by default is the middle of the
image all right um so yeah there we go that Loops again Loops through all of
the um the member images or all the members and displays the image for each
person that is attended and then I do 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 that all the images for all of
those pretty cool
right um sorry I was not paying attention to uh uh the chat James you
said is this going to be more complex than the previous version um I mean I I have I'm I'm definitely
driving at 60 M hour right now okay um 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
basics of total CS3 I personally think that total CMS 3 will be easier than total cms1 um but
it's also has some really cool more it's easier to do more advanced things okay
that you can never do in total cms1 um so yes please don't take what
I'm showing you right now as a uh as a beginner tutorial to Total CS
3 okay um I tried to do somewhat of a 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
tried to start from the beginning with total CMS 3
okay um and thank you Sean for the for the comment you said I make it all look easy um okay so yeah
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 didn't go ahead and try to you know add in attendees for each of this dummy data
okay um so excuse that um
okay next up
um let's talk about um oh how about these light boxes okay
um I will go through uh essentially the implementation for this this light box
and this light box are identical okay it's just um so let's pick let's pick
the the profile one okay we'll go over that implementation okay um if we look at the
project file okay um while this website does appear to be a single webpage
project for the most part there are multiple pages okay um so like if I were
to click on this this looks like it basically what this is this is actually 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 injected into an uh into the light box
okay what's kind of cool about this approach is um if I hold down the
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
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 right it's basically the page that is
inside of that light box okay um so yeah that's pretty
cool uh I need to I need to run I'm 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 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 to go get a cup fill it up with some
water I'll be right back maybe you can do the same thing
okay
e
e
e e
okay I even found some leftover breakfast here I'm going to take a couple bites of uh bites of food here
okay Sean you asked a good question why use why why have one light
box instead of a why have an ey frame in a light
box so um we'll answer we'll answer that it's a good question
talking for three hours straights No Joke Man
okay okay
why why not do multiple light boxes okay I'm still sharing my screen
right thank God okay let's take this um this into
account uh if we look down here um I have two light boxes I have a member light box and a meeting light box
okay um so if I wanted to have
uh all of this data show up in a lightbox okay and um not use the iframe
approach um it is possible um there's some caveats okay um
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 that okay um and then uh basically uh in
right now you remember this is the loop okay and so it would create a light box
for every member in this Loop okay and inside of this light box you could
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 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
know all this you can put the member name all this list inside of the light box you can definitely do that okay
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 right so both goals and the
about and uh now remember in order for 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
here if I go to look at member okay inside member the about and the two goal
content areas are not a part of the
index so I now I could add those to the index but um as as we know it is it is
better from a perform from a performance perspective to um have the least amount
of data in your index as
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 of the index okay but had I I could
display them in here okay um now another caveat
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 trickery with um the light box ID now
this isn't too difficult you could probably just do um I mean every member has a an ID so I probably could just do
like uh member. ID right inside the lightbox ID and that would work right
oops member. ID right so I could probably add member. ID into the light boox ID and that would ensure that every
single light box had a unique ID right definitely possible okay um but
it's just it adds a layer of complexity okay
um so those are two two reasons why I don't do it that way
okay again I don't want to have all data inside of my index by using an iframe I
can um I can point that iframe to the member page and the member page has access to
all of the data about a
member okay let's let's explain um how I did it
here oops and let's open up this this member 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
the offsite um uh it's important you give it a name I called the name here member
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
fine yes so Sean you're correct uh by by uh this by putting the light box in here
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
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 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 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
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
um this goals button because remember if we go into uh this when I click on it it does
two things okay it it um opens the light box
and it loads a specific URL into the
iframe okay so let's look at that con that settings so if we look at the edit
link okay um what I'm doing is I'm linking to the page and passing it the
member ID 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 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 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
one oops not in the light box
okay we'll see here it says ID equals 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 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
that with twig
okay then um 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 name so if I were to set this to be
current window this would essentially make this button open this web page just by
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
ifame and this iframe name is the same name that we configured inside
offsite okay so that um this setup here loads the URL inside of the
iframe now further down we have an add custom attribute okay and this we do data- open
equals member what this does is this tells the link to open the light box
data open uh can be used across a lot of foundation components um light boxes
dropdowns off canvas okay um so you can 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
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- open member see attribute data open
member so the combination of these things to these two things that we've done opens the light box and loads the
member page inside of the iframe all with one click that's I discovered this
trick I don't know a couple years ago and it was like it was man it was oh man opened up
so many cool possibilities okay I love it okay again the benefits
are um the resources for you know right I
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 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 now this the data inside this light box is only ever loaded when you click
so it makes the page super performant this is a great
workflow okay and an added benefit that 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 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 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
um and so what what do we do here um here we have
uh the I'm using the uh total CMS uh object data loader okay so I'm using
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 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 getting the ID from the URL
dynamically and then um it assigns that member to a variable called member right
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
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 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 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'
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 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
gone okay um and then further down uh
basically I'm just I'm doing um what am 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 name okay and then I'm adding the about
contents and then um so here here's some interesting uh stuff so um the goals for
2024 and goals for Q4 2024 are Dynamic so a this is always going to display the
current year and this is always going to display the current quarter that we're in of the current year so right now it
it's uh Q we are in Q4 2024 so this is all Dynamic and I I did that with this
little twig statement here 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
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
called year that I say goals for year and then it creates also creates a variable called quarter that I do goals
for quarter year pretty cool 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 goals set it displays no goals set so
there's a way of defining default data right so like if I were to go
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 is broken cuz it should display no goals
for okay there might be there might be a problem with that oh well um interesting
I I swear I thought I saw that working anyway
um so now I I did have some small customizations um for some of the member
photo stuff just for this page um so for example uh if we look at
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 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 over it so again again because um the
other member photo stuff is actually inside of my partial my with site Styles 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
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 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
offsite and uh he um something I haven't shown you
is how I created this whole site layout partial um maybe we could do that that's kind of going backwards back into
Foundation 6 the site design World okay 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 log out button um and links to the
homepage as well as the charter page okay um but the thing is here I added this inside of an offsite hide
stack okay and what that does is um
oops um what that does is um if you visit this web page uh inde dependently
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 particular thing right so that's how we
I can kind of make this experience a little bit nicer um because when you go
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 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 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
the iframe but when it's not inside it'll display it so pretty cool little
um hack there okay
um so that was a very long- winded explanation of how the light boxes are 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
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 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
the light box right pretty cool
um next
up hey guys I have a I have a half hour 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 got to call it
um let's talk about some of the other pages that we have so um let's talk
about uh the the ability to add a new meeting okay um so if you see I have a page here
called new meeting okay and um since this has a form on the page you
need to have the admin core stack on the page okay um and then uh
here actually let's let's let's back up a little bit before I get into that let's talk about why uh I have this this
thing called this site layout okay and
um let's go ahead and let's duplicate this
page okay so there are uh some things on a web page so when you're building out a
site okay 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
pages out uh there are going to be a lot of things that we want on multiple web
pages or every web page okay and
um let's um so up here obviously I have a lot of swatches okay so remember I I
unpacked this particular uh partial and it contained site Styles uh which has a
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
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 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 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
but um the important bit here actually I should
have I don't know if I can keep do undoing my
changes oh 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 but um in this
area I had um again at the very top of every web page is this menu okay so um
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
have a three column that has um here it's loading the logo from the CMS okay
um and 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 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
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
um and then this menu item with the log out um there's a special macro called cms. logout and that will always create
a logout URL for you okay um so that's how that's done okay now before I talked
about remember in when we were doing the mockup I had a Bento Box right um so in
here on this page um I had this container uh that has uh again uh the
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 partial out of that and here's the
container here's the the menu here's the Bento Box those were components that I wanted
on every single web page so I created a partial out of that
I unpinned the bento box so now that on every web page all I
have to do is add this site layout partial and then all the content in here gets inside of that same exact layout so
that every single web page has the same exact
layout okay pretty cool now um on some pages like this new meeting I I don't
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 single page to be locked because this Charter page isn't uh locked right it's
actually publicly accessible okay um so 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
about this uh this new meetings page okay now I talked about the kind of the site layout partial that I
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 meeting and then I have a custom form
stack okay and that is if we go to forms custom form now this is the super the easi
implementation of it because inside here there is a checkbox for auto bu
form okay and uh when you set that so A you you in your form you set it we're
creating a form for my the collections of meetings my meetings collection and I
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
will automatically build out the form for me
pretty cool zzy um and then uh what I wanted to do is in
here I uh I automated the ID field um 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
able to create a meeting and this the ID is just some arbitrary random numbers and digits right and letters so uh I
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 it okay so I just uh display Swatch ID
field display none
done okay another thing I could have done is I could have gone into
the um into the schema for a meeting um oh I guess I did do that I I
think I did that afterwards um I set the form to be hidden okay so whenever you create a new
um a new ID um it just hides the field automatically so actually this Swatch isn't even needed anymore okay um and if
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 essentially it just makes the the ID always automatic and it will always be
unique okay um so that way that's why in this particular instance it's okay to
always hide or set your ID field to be hidden because the object ID is always going to be some random string of
letters and numbers okay it's not pretty to look at 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
look at but they're guaranteed to be unique okay so there we go
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
and uh yeah it worked it worked like magic here absolutely Gang Busters pretty cool okay and I already showed
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
linking and relationships between um you know again different collections objects in different collections
okay um now let's go into the let's go back
up to the homepage and let's show um this edit
profiles thing actually well right before we do that um because that that
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 hit enter and it takes me to the search page okay and so uh if we go to the
search page here um relatively simple page um I did
do some fancy styling this is just a 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 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
too the um here so there was a few different swatches here set the
background to transparent unset the Box Shadow unset uh borders um added a
bottom border um change the font and set the height okay that's the the 5-second
tour of what I done okay um so yeah I I kind of like
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
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 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
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 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
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 little X you can clear the search and whatnot um done by the browser which is
nice um so yeah um here this is a pretty rudimentary uh
you know loop again I'm looping through meetings um in this particular one um 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
search that returns nothing I have um nothing found content uh that you then
display down here um and then essentially I just duplicated that the same exact layout
that we have on the homepage um but here uh the loop instead of preloading data
um or instead of loading all of it it only loads data from the search 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
the homepage how I have a search box here okay um on the
homepage that is also where is it oh here that is also a form okay that
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 search page which is SL search right so the URL on this page
oops it is just uh you know the web uh the domain search so it just set you
just set the get URL action to to the 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 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
this page so is this form this form right here it's the same thing I just styled it I added some additional styles
that just made things bigger so that's
it okay
right the last bit um authentication okay so
um here we have a button that um shows you how you can edit your profile okay
now it is impossible um for this particular form if you look at the you
know as the meeting ID it loads the meeting from the
URL this doesn't do that and that's a security because we I don't want people to be able to edit other people's
profiles right so like if I put in uh you know uh
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 to only load in the data for the user
that's currently logged in okay now before I can go on how I
accomplish that let's back up and look at how we lock down this entire
website um from the stack standpoint it's super easy okay at the top of the pages that I want locked you just add
the page lock stack which is right here in the authentication group of total
cms3 add that at the very top of the page now one important thing here is place this before the CMS core stack
okay so this needs to be the very first 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 get the your expected Behavior okay because it it this has to happen before
okay that's why I have this little 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 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
working before what happened and so yeah it was just cuz it has to be before now uh if you remember
um in total CS uh there is an authentication group okay there is an
authentication collection if you notice that only has me right in it okay and
then um members so 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
members to be able to log into this website okay but I don't want them to be
able to access this admin dashboard so uh one way to do that is to
create two different authentication collections um in order to log into this
dashboard you have to be added to the O collection this o collection is special
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 logged into um this website any of the
users and if they tried to access that dashboard because they knew the URL or 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
you were logged in uh as a member and you clicked on this you would get an access denied okay because they they
they are not a part of the off
collection now if you look at the O collection there are a certain number of fields required for um an off collection
a you need to have a field called active you need to have an email field you need
to have a password field um you need to have a creation
date a log uh a last login and a login count okay there's some other things
that you could optionally add that but they're not required such as um maximum login count expiration date and
groups I didn't need these particular three features for um my use
case okay but if we look at the members collection okay um let's just go into
the into the definitions here uh you'll notice that I added the active field right that requirement um so in
order for a collection to be used as authentication again it needs to have
these fields um uh active uh password uh and
all those other ones I said uh last login account created last login and they have to be named this exact thing
if you're ever curious you could just go 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 think I've documented that yet but I'll I'll make sure I document uh custom
authentication 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 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
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 work okay um so uh back to the rapid
Weaver um so imp page lock um since I'm 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
you're using the oth collection um I don't want it to use the O collection I want it to authenticate against the
members collection okay and uh then basically on every single web page that
I want locked I I put in that same stack 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
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 a page lock stack on this page because this the only page in the entire project
that doesn't require a login 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
members okay so now with that set up um once you
um if you ever to go to any of those web pages it's going to uh here I'll log out
right um again if I go to um if I go to the Charter page
again I can access this page again I'm 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 homepage okay it's going to require that
I log in oops what happened did
I oh yeah I changed my I or I changed the the the the email address on my
account uh support
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 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 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
access to the dashboard pretty cool
okay uh page lock stack locks down a whole page can you set a message to inform them that they have no access
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
this page or click that link or after I think 10 seconds it'll it'll redirect you back to where you
were okay um okay um now let's talk about this edit
profile page okay in this edit profile um
form he so if we look here um this um it's the same thing it uses a custom
form okay um however if you'll notice that it's it's quite a bit nicer right I the
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 form I wanted to like break it up and give it a nice layout um so I decided on
this layout where I have these vertical 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 interesting um UI
okay so um to do that again I'm loading in the data oh well um so there in the
off uh form there is a user data stack okay and um when you add this to the
page it loads in the user data for the currently logged in user
okay so in that case I'm logged into this account it loads my account information onto the
page okay and it gets you access uh actually in the settings of this stack 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
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 go into this collection okay or this custom form so in this particular custom
form I I am not using the autobuild form 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
form okay and I was okay with that but this one I don't want one big huge
ginoris form so and I also want to um now this
actually feature I isn't in your version okay the this uh checkbox to say load object that doesn't exist that's
something I just added uh cuz I realized 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 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
and it loads all the user data into a variable called user
therefore in here I can give it the object ID of user ID and because that is a variable I need to check this little
button right 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
always going to load the Joe Workman user and that's not
help um user. ID because we want to dynamically load in the currently logged
in users I from their ID okay so at this point um what you need
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 fields okay I just have them
hidden okay um here let me let me shrink some of
these actually okay so this uh this is the first tab so
um if you notice here inside the form I have a tabs content stack and then um inside the tab
contents stack I have the contents for an about tab a social tab a goals Tab
and a password 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 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
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 field and you can put in a few other options within the
field 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 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
on the on the page it actually pulls in password because that's how I've labeled that when I set up the
schema okay so again the password uh tab has the password the goals has the goals the
two goals things right um the social has all the various you know soci on or
LinkedIn Instagram YouTube blah blah blah and then the about tab has the uh
the image field which is set to a property of photo the name field which 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 to access okay so like the ID field um I
so I add all the ones that I don't want 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 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
Chuck them into a a you know a visibility stack or something like that as well
okay 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 tab content right and then um now now I
I based this layout um off of actually there's a template called
um tabs or vertical tabs okay it's part 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
when there's enough space we have vertical tabs on the left and on mobile
we have tabs on the top 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
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 show for small only right pretty cool I
like it um now I did do a bunch of customizations for tabs um and you see
down here I have all these swatches that customize the look and feel to get me the basically the background the colors
um to match my site um I have round corners on the tabs uh actually that was
just the um I think that that was just the radius Swatch uh or not oh no there yeah it was
just a radius uh radius class okay but essentially like on the border I remove
the Border because tabs have borders I remove the Border um I uh by default the
the tab contents have backgrounds um I just wanted it to look 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 none um in the panels uh by default
there's some padding around this um I I 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 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
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 very small text by default so I made
them bigger okay um I and all of these if you're curious
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
under C Swatch selectors element there's all kinds of stuff for tabs so there's tab container there's an individual tab
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 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
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 that dark green okay and as you see it
pulls in the color the primary color from site Styles I don't actually set 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
doohickeys um what was this one oh this one was by default tabs have a uh
they're underscored the active uh the 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 future just normal Foundation okay okay
um so yeah that's pretty much how this 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 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 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
data for just the loged in user um and it generates this cool tab
layout for the 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 feature of the custom form was the only
thing I added to Total CMS to accomplish everything I've showed showed you
today um everything else is uh is done
uh which is pretty
cool okay um with that guys I I think I've gone over the entire site um that
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 I glossed over some things um but yeah
uh hopefully you enjoyed hopefully you 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 reruns of this um or the reruns the replay right uh and you can slow it down
pause do all kinds of stuff if you have any other questions um please go ahead and post on the community on the for
this event I'm happy to answer any questions um I know someone's going to
ask me for the project file um I don't know what to do about that uh
this is a site that I I did build it for an actual project it wasn't a paid
project but um I'll consider it um so yeah uh I hope
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 the questions um so if you yeah if you have
any other questions um if you want answer now speak now or forever hold
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 there's any um anything else here let's
let's PR through the page um see if I I missed anything um in
particular one thing I I'll say things some things I don't like okay
um I'm not sure I love this scrolling container here on the
homepage okay um actually I I didn't um 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
yeah and maybe by default in the search page I'll I'll just display everything by default instead of having a blank
page 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 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 okay um when will you release the
missing feature um oh for the custom forms um there I'll admit there are a
couple other minor little things I've tweaked um I was thinking of releasing
it this week just as a very minor update 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 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 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 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
okay good question thanks Steve um so yeah I didn't I didn't like
this what else didn't I like um oh I didn't go over the QR code stuff
all right really quick
um okay where is the QR code good stuff all right here um
so funny enough you know how I talked about how we have these light boxes okay that are outside um for the
QR code stuff I actually have a light box um in the in the loop
okay and um there is a uh here let's copy and
paste this into 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
lot of this is documented uh if you go to uh oops uh
shoot hold on one second let me log into my other account
here all right um we go to the docs and then go to
um uh filters no uh shoot oh QR codes
boom um so uh here's uh docs act okay another uh the documentation for for VCF
and event um they weren't detailed docs like this they were just uh Stupid
examples like these ones were so another 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 so basically this QR code. VCF VCF is a
virtual contact whatever F stands for um so this is an a contact card
right um so yeah so uh we did that so 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 and I put first the last name is member
split last right um and then I do uh member phone member email member
website okay 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
then so where was I uh oh I was in the I was here right so basically inside
because this uh this generates an SVG file okay this macro generates an SVG
that is a QR code so I put that inside of an SVG stack okay and I I in fact actually I I
probably didn't even need to do that to be honest I probably could have just done an HTML stack um because I noticed the when I put it in SVG stack it like
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 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
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
the ID is unique so I did qr- member ID okay um so now that that now that
light box is unique for this member okay and then in the Social Links when I uh
do the link container around the address card um I do data- open and then the
value where the light boox ID needs to go needs to needs to also contain the
member ID so I have qr- member ID see so I do data open oops how did that
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 default link to be um JavaScript void
zero so yeah that's how the QR code stuff was done um and if you're curious
I actually have some uh here now that we're talking I think it
was did I have some QR code swatches oh here i' had an SVG Swatch
that just um makes the SVG use the
primary 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 SVG goes with my website's
colors pretty 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 mastedon X Twitter Youtube so on so
forth that's super easy to do as well um inside the
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 LinkedIn and then this one is ADD tool
tip Instagram so so on and so forth pretty 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 list oh actually you know another cool
man I I really got to get going but something cool that I something I do
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 um you know blah blah blah okay
um right let's say it's 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 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 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
hey don't forget to do this here's here's a little trick okay I chucked a pen on the page okay
and then I did this um so I would do like I don't know
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 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 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
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 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 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
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 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 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
workflow so take or leave it okay guys you got me for an extra 15
minutes when I said I was going to leave so um I'm out of here I promise I'm gone
now um all right okay guys I am I'm going to call
it there I think I reviewed everything 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
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 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 you enjoyed this hope you got some
benefit see you on Friday bye