okay looks like we should be live how's everyone doing today
looks like we got one feed in up 30 visitors excellent
how's everyone doing today get some bill excellent greetings from liverpool
greetings from antioch california how you doing bill
excellent mr powers is in the house unfortunately
gary gunter hello everybody um someone just give me a thumbs up the audio i assume
audio and visual is uh is a go that we are good to go
all is well excellent thank you mr cole so um
today's live stream um kind of came up
during last week's uh hangout okay so um hey plug for the hangouts if you don't
join our friday hangouts you're seriously missing out okay um
martin thanks for coming on dr bob dave thanks for popping in dave
okay um so during last week's hangout i uh
was helping james um james is a kind of a regular at the hangouts and uh he
he was he was trying to build a website and he was stuck on the banner and how to do
this like specific type of banner that was kind of an edge case not like a typical type of you know he wanted like
a two column banner and um and i i built it out for him
i helped him out during a couple weeks a few weeks ago and
sorry to call you out james but use neo as an example here and
so he had spent a lot of time analyzing what i had done and um a lot of it just wasn't clicking for him
and he was he wasn't making much progress on the site because he was like fixated on getting this one
thing done right um and that that did require some you know
some swatches and maybe some you know some advanced intermediate knowledge right
and uh so last friday i was like okay let me just strip everything out
to hell with swatches okay forget about them okay forget that they exist
and i and this is true for a lot of people i see that you know quite a few people um they get lost and they try to
add too many stacks not not only swatches but just they add a ton of stacks to the page that maybe aren't even needed
um and then they start adding swatches to do all kinds of stuff because they think they need them
and so i built out yes it was a very basic site
um a web page okay um with i did a lot of it first i built out
the entire web page with zero swatches absolutely none okay and yes the page was bland okay it
was a little blah but then we just started adding a swatch here and there and ultimately we ended up with i think
like four or five swatches on the entire page and it was a decently clean
functional web page okay um did i have a lot of whiz-bang super
amazing um cool layouts that were mind-blowing no it didn't right but
for someone who's just starting that's okay right it's okay to build a simple web
page okay and um you know without you know going
down a rabbit hole on how can i achieve this cool effect that i saw you know some other
user do on the community okay or you know so i think starting today
we're gonna start from scratch on a completely blank project and i'm gonna build out
most of the most of the entire page without any swatches to begin with okay
and then once we have our page kind of done instruction you'll see what it kind of looks like and then you'll be like okay cool now
let's sprinkle in a couple styles and and let's make it look nice okay so that's what we're going to do
today so without further ado let's go ahead and
[Music] i'm going to create a brand spanking new project file
what the heck all right actually before i begin
um stacks 423 uh just shipped last night
so yeah stacks four two three shipped and uh yeah you should check it out you should go download it install it um
check for updates in rapidweaver um it's got a couple really good features or fixes i should say
first off is the little updates button on the bottom of the stacks library it actually shows you a number now when you
have stacks updates so that's fixed so now we'll know when we have stacks updates so we know to click that little
button um so definitely make sure you do that i'm sure after that people install this they're going to install tons of
stacks updates that they never even knew existed so go ahead that's a good one the next one is
missing stacks so if you have a project file that was made
prior here's a caveat if you have a project file that was made prior to 4.2.2
okay um there was a bug in 4.2.2 that basically um didn't show you uh what a
missing stack was in a project okay so again the caveat is if your project
was made prior to 4.2.2 and you install this 4.23 update
it will all work okay now if you created a file while stacks 4.2.2 was out
and you added stacks to the page um those missing stacks
it's kind of a caveat it won't be in there because 4.2.2 had the bug so um so for a majority of the projects out there
at least um if you install fourth two three the missing stacks bug will be fine uh will
work um and obviously if you save a project file with four two three it'll make sure that in the future um it all
uh works copacetically as well okay
okay okay uh and james i do have that project
in video for you um okay so but we're gonna go a little further today than i did on last friday a little
bit all right so like i promised i am starting from a
brand spanking new project file so i have look i have nothing up my sleeves there's nothing up my sleeves i have no
magic okay oh okay i have a little magic i have a kind of a some notes over here on the side that
i'm going to be making sure that i kind of follow um and uh
yeah i have some pre pre-selected images that i'm going to use so that it at least looks kind of coherent
a little bit okay and you might might notice it i'm going to use some of the similar images from a project file i made a couple years ago with foundation
6. um so anyway let's go ahead and start stacks boom all right so i got a new project file
and uh as with any foundation project we're gonna chuck in site styles
okay now um as i promised i'm not gonna be doing any swatches for
a while so i'm just going to minimize site styles right now and uh let's start cracking
okay so um up at the top of our page obviously um we're gonna want uh like a
banner right so that's kind of you know typical so we're gonna go ahead and i'm gonna add a container
and oops i'm gonna add a one column into there okay uh and then um inside that we're
just gonna add a header okay and we're gonna do
foundation six all right here we do
who needs swatches
all right yeah
okay um so obviously i want my header to be centered so we're just going to go ahead and do alignment actually know
what i'm going to do on the container so you could do alignment on this but i'm actually going to make sure that the
container everything is centered so i'm just going to go up to the my container and do content alignment centered cool there we
go so now whatever content i add into this container it will uh
it'll be centered okay okay um
next up let's go ahead and uh below that let's just add in i'm going to add
another container okay now one thing i do is um i i tend
to i've shown this in other videos right but i tend to use containers to break up
sections of my web page right so we tend to make uh web pages in sections so like i have my header and i have my you know
whatever next content and so and i tend to create these sections using a
container now i'm not going to dive into any other
detailed sections i'm not going to go down any rabbit holes with a container right now okay so we have a container
let's just go ahead and add like a two column okay i have a two column
and let's say on this side i want to have a picture okay so um
actually let's get a little fancy let's go i'm gonna go ahead and add a caption
i'm gonna do some stuff you guys maybe have not seen before so i'm gonna do a caption and inside this caption i'm going to add
a picture stack okay and then inside that picture let's just
go ahead and uh let me get a photo really quick
let's do this one all right boom okay so i have a picture
and then um over here i'm just going to go ahead and add some text
so we're going to add some text all right and uh let's just we'll get rid of this
this generic let's do header
forum okay there we go all right let's do
oh ah there we go
there we go okay so now we got now i have a two column with a image and some text
okay and uh let's say that's that's my section okay um
as you see i i'm building this entire page out i know kind of the general you know layout i want to do so
we're going to add another container that's a new section we're going to add another two column in here actually you know what uh let's let's
break it up i'm actually instead of doing a two column here i'm gonna do a three column
okay um actually let's just preview there we go
it doesn't look too great right we have man we got um our header is is not very big we're gonna get there okay our two
column uh layout let's add a little bit of
gutter in there so it's a little bit spaced out oh there we go that's looking much nicer
right okay looking pretty good um
there we go pretty simple but let's keep going i know that banner's super super small right now but that's okay we'll get
there um all right now i have a three column layout we're gonna do is over here we're gonna
add i'm gonna add a card let's go ahead and add a card so we have a little bit of
style and um at the top we're gonna do a card divider
okay and then in here we're going to do like a header
and do a little header in there
okay um and then below the card divider we're gonna have a picture
so we're just gonna chuck a picture in there and then below that we're gonna have a card section
with some text
now let's just do like all right i'm gonna be lazy i'm gonna
copy this stuff that i had from over here all right so i just have a little bit of text
uh the picture let's go ahead and add a picture let me get my stock art here
all right and i'm going to chuck that in there i have a card
um decent looking card let's go ahead and replicate this card
across our three column another thing i'm going to want to do is
just like this two column i'm going to want to add a little bit of gutters just so there's a little bit of spacing in there
okay and let's swap out these pictures because we don't want this picture in every single one how fun what fun is that so let's do
we'll do this one in there and then to
this in here okay let's preview look at that
hey we're getting somewhere all right so i have kind of an interesting layout right i have a two column here three column kind of mix the
layout up a little bit okay pretty cool
um then let's see
and let's do let's do another two column layout below this one okay so um let's just do we're almost at the bottom
of the page i'm not going to make this in a crazy complicated page okay so we'll do two columns or i'm going to
swap the layout here right so here let's just take this text stack
i'm going to put that over here we're going to take this caption and picture stack i'm going to plop
oops plop that over there and then we want to swap out this
picture so it's different let's see what picture didn't i use yet
this one all right
oh and this two column want to make sure add a l add in some gutters okay
preview okay
as you see uh hey things are a little crowded right okay but things are looking good look i
have some cool captions on my images um i got a nice card layout with some nice
images key here okay beautiful imagery makes a website
okay um i won't lie i use these images because they look super cool and nice
right um so you know if you're building your website for yourself or your customer
maybe don't use the images they took with their iphone right um good images
can make or break a website okay
and as you see i've added zero styles the only thing i've ever done is i added some gutters to the columns that's it
right so far um again we'll adjust the spacing and whatnot but i just want to get the basic
page just done right just get her done all right and um so let's go ahead and
add let's add another section here
and let's say this section is going to have um let's do like a contact form or
something like that how about that um i had a one column in here and
let's do a header and we'll do like
contact us
h3 yep h3 okay and um
let's just add a form add a form below that okay and inside
the forms i want let's use like a basic contact form so i have a template but i'm just going to
do all this really quick so here we'll do this input field name is name
name um name
uh let's see in the placeholder i want like full name something like that right
and um
there we go something like that for accessibility okay and then we want let's see name
and then um let's see here we're gonna want email right so we have
email email address
email i'm not going to get creative with my captions here we'll just be a little
boring okay uh here we will do uh
how about this we will never give your
email away we respect you
sometimes un unless your
your name is james there we go okay
okay so uh that we got name email and then uh where we comments right so
we need a text area all right and let's just say this is
comments um placeholder
what can we do for you okay
comments
help except you
james there we go okay
there we go uh oh and now obviously we want to submit it so we're going to need a button right so we go ahead and
um we do a button and we do submit
all right and type of button is oh wait oh my bad can't use a button i
need a submit button oh what a rookie mistake okay submit button
submit
okay and uh you know i don't like the the sharp edges so we're just gonna add a
little radius to our button so i'm adding a little bit of style elements here right okay
um so now we've got a container with a contact form and
lastly let's go ahead and create a footer okay so um let's go ahead and
last section of our page we're gonna add a container and inside this container um what are we
gonna do we're gonna do um how about
we'll do four columns okay and do a four column
uh doodad there um and then we're going to just do add some
text in the first one how about like uh you know
uh copyright you know uh 2022
space something like that right
all right and then over here uh we're going to do a header
let's do like um oh more info
um i think i want like a h i think i will do h3 oops
ah actually not i'm gonna i'm gonna do h4 there just for fun
a little tinier all right um and this one is gonna be like i don't know
um our friends
i don't know um contact us something like that
all right and then oops created two of those and then we're gonna do
i'm gonna do a menu and uh pretty much we're gonna do is i'm just
gonna i want this menu to be a vertical menu
all right and i'm just going to copy it okay so kind of a you know just a
traditional um footer uh actually let's go ahead and uh let's
do our logo for for this because we want let's say our web page needs a logo right so i'm going to do svg
um let's see i want this is an app called nuclio
let's do this svg here we're gonna
copy svg code and then i'm gonna paste that in there
okay cool and then we're going to restrict the width uh the fill is already white so let's scale image
let's do like a max size of uh let's do like oh
48 pixels something like that they're nice and tiny
all right let's preview this
all right well our our logo it doesn't look too great like that let's go ahead and just we'll change the fill to black
so we can see it cool so here we go our svg um is uh
cool i like that looking pretty good probably don't need full width there
sweet i like it um oops so let's see there we go
that's the basic structure of our page right and as you see yeah we can we can increase the padding on some various
things but all in all it's it's a decent looking web page is getting there
right so no stacks uh let's see pc assist master i am so
confused there's no stacks first
no no site styles first no i added site styles you might have missed it i put site styles up here
i just i just hit it
okay let's see any other uh just the stacks stack uh in total referee
yes
uh and so okay yes so sorry some looks like pc assist or mac
assist you you joined a little bit late it looks good on desktop but should we
build for mobile first good question let's see let's see what this what this looks on on mobile um
so there we go i haven't done anything right right now and uh hey that looks
pretty good on mobile right
i think it looks pretty decent on mobile
again it's a little crowded but we could we'll we'll definitely fix that
okay so good question about mobile first but as you see i've i've done
very basic work here the only settings i really changed were
adding gutters to columns i think that was the only thing i actually actually ever did on the svg i added a little bit
of scaling right so it wasn't it doesn't fill but all in all um this is a very
bare-bones site right now and it doesn't look ugly
okay but let's take it up a notch and um let's add some white space i think that
white space will be very important and the theme is uh you know set to foundation so um i have my project files
default set to foundation so when i created this new project file the theme was already set to foundation six okay
um so yeah uh i you know i'm not gonna go back that far in terms
of the basics i'm just talking about basics of building a site without swatches and and whatnot i have a lot of
other sites on basics of rapidweaver so make sure your theme is set to foundation six um and site styles that needs to be on
the page okay and all that jazz
oh yeah so what are we gonna do let's go ahead and start adding some spacing between these sections okay
um so what i'm gonna do is um you know i have i had these containers that had every
section okay what i'm gonna do is i'm gonna select all of these containers that had
each section um and i'm actually not i'm not gonna
choose the footer or the header okay i'm gonna do um kind of like all the main
content the page okay and uh what i can do now is i'm going to
add a class to all of them now if you if you noticed what i did is i selected each of them right because you can modify multiple stacks at once
um so i selected all those containers and i'm gonna do um
let's just create like content dash section
okay so i'm gonna add the content section class to all of them so if you look here um i have content
section if we scroll down to this one now i have content section and all that jazz
okay cool so what i what we want let's talk about
what we want first so i want separation between um all of
these sections okay um so
i i need i need some white space essentially and there's a couple ways we can do that
okay um and what i'm going to do is we're going to add a padding swatch
okay so i'm going to go ahead and um i'm gonna add a padding swatch so this is gonna be our very first
swatch we ever add to our page okay and um content dash section so for all those
content sections okay um i'm going to go to detailed i only want i want to do padding on the top and
the bottom okay and if you notice this padding chart is kind of helpful let's do like a 128 something like that
okay so i'm going to do top of 128 bottom of 128.
okay that's it that's all i'm going to do okay let's preview
so we've kind of spaced our section out sections out pretty good i like it
okay um actually you know what i'm going to go ahead and we're going to add content
section to this too content we'll just keep everything consistent i
think i think this will work i didn't go this far in my notes so we'll see
content dash section i think that might be too big for that
oops
all right so we have kind of our our big banner up here okay oh one thing i forgot our banner needs a some sort of
menu right we need a menu up there okay so we'll we'll add that i forgot to add the menu
um okay i think this this padding is maybe a little big um so
let's go ahead and just tweak that a little bit so instead of here instead of 128 i'm going to do 96.
okay i just see we're getting there right it's not horrendous if you saw this
website online you'd be like hey you know it's a decent look it's simple but it's a decent looking website okay
um let's go ahead before i forget before i get too far let's go ahead and add a menu um a menu to here
so um go ahead and add [Music]
just do a simple menu okay
there um we're gonna do a menu
hey actually here let's do something cool i'm going to add a menu drop zone in there um and
go ahead and take this svg
plop it in there okay and then i want to move this bad boy
here oops you know what sometimes
let's just do detailed layout menu drop zone i want it there
you ever want to see like the detail like all the all the individual stacks inside of a menu click
on this detail layout button and you can swap it back and uh there we go let's just keep it even
okay so all right let's just i don't want it too big let's just keep
it keep it simple like that and then i'm gonna go menu and then um let's preview this
mini there let's go ahead and stretch that out so i'm just going to do
horizontal alignment justify i think that'll be good there we go all right
we'll work on the position of it okay but uh for right now um i think that works
cool okay so
i think i i like the spacing here i think everything looks pretty nice okay and we've we've done all of this
with one swatch so far i have one swatch on the page
okay so let's start getting a little fancier okay so obviously we need a little bit of
color okay everything is just plain blah white right now
okay so what we're gonna do is uh let's focus on
this banner so let's give the banner a little bit of color okay or some some content here
um and then we need to position this menu a little bit okay so
uh this one i'm gonna create a specific class for this so we have the content section okay there but i want to do um
let's do like um let's just call it banner how about that
we'll just call it banner i'm giving it a second class called banner okay
and so let's go ahead and let's add a background okay and we're gonna target banner
okay and uh what we're gonna do here is we're gonna do a background color
and uh let's just do like a kind of a
deep purple something like that let's go for a darker color okay
yeah i kind of like that or if we wanted to get super fancy if we didn't even want to color okay let's say we want to
image i'm going to add a background image excuse me
something was tickling my nose okay um let's add a background image we're gonna go super fancy i'm gonna add
a bit add in a background image there okay and uh let's preview that
ooh looking fancy okay looking fancy
now if you if you notice here um so i did that with just one swatch okay i had
added a background image um just to the banner
now let's say for example this banner um we wanted it maybe a little bit larger um you know we could increase the the
padding on the banner or whatnot um let's couple things the text here is
very difficult to read okay um there's a couple couple different things we could do ways we could do that
um but the easiest way is inside site styles you already have
text colors um default text colors and alternate text colors okay and the alternate text colors are
normally used for a colored or a darker background okay and if you notice this says alt and the
the way to easily access those is just by adding an alt class to anything
so i'm going to go ahead and add the alt class to my banner container if you notice that that header already
turned white let's preview that cool i like that
okay um
see one second
okay perfect
um next up is this menu okay so um
a the menu colors are kind of hard to read right this svg is black that'd be nice if it was white actually remember
the default color of that svg was white so i'm going to turn that off
so that makes it that makes it nicer okay um now how how can we change the the
color of menus okay pretty simple um
under components we're going to add a menu styles swatch okay
and what i'm going to do is i'm going to set all of these colors just to be white i'm just going
to set everything to be white
okay i set all the colors to be white background oh background i don't want a background
active items everything's going to be white cool
uh text on hover or if we want we can do um a lot of times what i'll do is unhover
the hover colors instead of specifying a particular color uh a trick is to make it the same exact
color but then just add a little bit of an opacity right so if you do like you know 70
80 opacity or something like that on the text color the the whatever the
background is will kind of bleed through 20 right so um there we go let's just do
that all right now here um let's just keep things simple
i'm just gonna do um let's just call it uh
banner menu okay oops if i spell right banner menu
okay there we go cool so now the menu items are a little
easier to see okay um and we have our menu or i'm our title
actually this needs to be an h1 something i need to do here go to here it needs to be an h1
there we go a little bit bigger so now let's go ahead and position this
menu okay i want it let's say at the very top up here okay
um let's do it i'm going to do two things first off i also want to add a
background color to it you know i want it to kind of stand out a little bit so i'm going to do is i'm going to i'm going to add a container in here
okay um and then we're going to oops i want the whole menu
and i'm going to add a background we're going to call this menu dash
wrapper oops i'm getting a little fancy here sorry
um i should do going off script a little bit but let's go like a uh a dark blue
with some opacity let's do like 50 something like that okay
so basically i'm adding a container to this menu
all right let's look at that excellent all right so if you see there
i now have a menu um we need to make go full width we'll fix that as well and maybe a little bit less opacity
excellent like that and um if you notice the menu kind of goes right to the tip top of that right
um so let's go ahead and uh one thing i'm also going to do is on
this container i'm going to change this to be from site with so if you look here this container
this container it's restricting containers by default what their job is is to constrain the size of your content
to the site with setting and site styles okay um i don't want that for this container
okay um so i can do here is i'm actually going to set this to be you can either do site with or full width or auto no
wrapper um i'm going to do uh we'll do full width plus cutter why not
oh uh but i don't want the gutter actually so we'll do full width
there we go okay so now my menu is full width um and then we want it to be a little bit larger right we want to add
padding to the top and to the bottom okay of this to add a little bit of spacing
so i already have a clasp there menu wrapper i'm going to add padding to this
and we're going to do similarly to how we did on the sections i'm just going to add a top and bottom padding of let's do
like 20 pixels see what that looks like
yes i like it okay
and um how do we move it up to the top okay how how can we do that
um there's a couple ways we could do that um
trying to think of the the most simple solution for this i'm getting crazy joe uh oh
am i getting too crazy for you james hopefully not okay
i haven't done anything nuts i've only changed i've only added backgrounds and padding it's pretty much all i've done
and i changed the menu colors okay
um
hey wanna use remember before i added this content section um
class to this banner okay i'm going to remove that right now
okay so now i have if you notice now my menu
is kind of up at the top where i where i'd want it okay it's cool
all right so um then what then what i could do is i
could add padding to this right so maybe i can add maybe i can add the uh
instead of trying to leverage this content section class because this really isn't a content section
let's let's create something new okay so i'm gonna i'm going to copy and paste that and let's just do
banner content how about that
so i have a banner content and i i'm going to replicate uh the same
content there
there we go so now we kind of have equal spacing
everywhere i even think this could go even more right so i said earlier that you know um actually
you know on this menu wrapper i'm going to reduce that padding a little bit it's a little big
all right and then in this one we're going to raise it actually 128 and 128.
there we go liking that okay
we're getting there okay so now what other what other things can we do to kind of jazz things up okay i think
having the the sight is like all white um
it's not horrible but i think i think kind of alternating the colors of these sections um could be nice
okay so um what i'm going to do is we're going to make some of these sections white and
we're going to make some of them kind of a maybe a gray color okay
so um let's pick i'm gonna choose this we're gonna alternate as well so let's say
this section here is white this one's gonna be gray and we'll scroll down and this one will be white
and this one will be gray and then our footer will will remain white okay how's
that sound okay so let's go ahead and um oops i do
select so that one's gonna be gray and this one's going to be gray okay so let's just create this
we'll do this um alt dash section okay
um now this is an alt i i i could make these black um like a you
know a darker color than use the alt class for the lighter colors but we're we're not going to do that let's just
uh let's just do that alt so i have alt section on on all of those
i'm going to do a background swatch
and we're just gonna do a background color of let's keep light gray see
i think you can go lighter than that actually let's go a little bit lighter
what color is that let's do
how about like f2 let's see
a little darker something like that
oh that's even lighter here let's do like to
240. all right
there we go i kind of like that okay so here we go there we go i mean this is looking really nice i
think right what are you guys thinking
did i i went a little crazy up here i know i'm i could have could have broken some of your brains with with maybe some
of that but if you notice this this webpage one two three four five six there's seven swatches
um and i probably could have done without a cup maybe this padding up here i probably
could have done something else right but um and uh
so pretty simple web page um i i built all this out i mean most i
think most of the time was me just creating an at this content right um there's all kinds of interesting
stuff that we could do we could even like you know just start you know adding some accents to let's say these these uh
card dividers right here let's and we'll go we'll go a little bit out
uh let's say this card divider okay um
let's call this um i don't know dark dash accent
okay and we'll we'll add an alt in there
so what i can do is here is on the on these cards okay i'm going to go ahead and do
we're going to add a background color call this dark oops
dark dash accent okay background color
um dark blue
you know something like that right um so there we go uh i don't want to keep i can keep
tweaking this all day long right oh let's do one more thing to add a lot of pizzazz to our page with zero swatches
okay um and that's who doesn't love some animations right okay so um we're gonna
go ahead and we're gonna use the animate on scroll
let's uh let's go ahead and add that to like our header okay and so
uh we'll just keep fading up let's see so when we load this whoop there we go
okay and uh let's go ahead and let's just let's just animate everything on the page so let's see this one's gonna
get um we're gonna [Music] fade in
[Music] fade in left fading left big
i think that yep okay so then we do that and then over here we're going to do
um fade in right big cool
um let's see here i want fade in left
big in the middle one we're just gonna do
fade in up big
fade in right big and then we're gonna we'll just do all of it here boop
fade in left big
hopefully i'm doing this all right fade in right big okay we'll leave the form as is
we'll get the idea here so there we go as we scroll down we get some we get some cool animations right
sweet that adds a lot of a lot of pizzazz to our pages i like it
and how does it work responsibly let's again let's let's have a look
everything kind of still scrolls in there we go
i think i think the page looks pretty decent on mobile as well so uh you know by default you know
things do work fairly well on mobile um things you could do you could tweak the the fonts you could tweak the font sizes
if you wanted but all in all i think this is just a super clean
um attractive web page that i think anyone would be happy to have
okay um there was a lot of chit chatter on the on the uh in the chat that i kind of
missed um i'm a soft 360. this is a big jump from
foundation one yes um i i didn't go over a lot i i mean this wasn't this video
wasn't meant to be like here's a introduction to someone who isn't familiar with foundation six at all um i
do have some videos for that i have a video called foundation six for beginners um and so check make sure you check that
out i i talk about the philosophies of um and you know the the new workflow and
thought process for foundation six and how it's different um it is very different um because all of our styles are
centralized okay so yeah i i skipped over a lot of stuff that um this video
was meant for someone who is sort of familiar at least with the basics of foundation six and uh hopefully um you
did get something out of it though today hopefully okay um
okay anything else
i wish i could put one together this fast yeah you know the the thing is here
um i mean uh we can spend a lot of time putting together um you know typing up text and
whatnot but just coming out just throwing in some lorem ipsum text and you know using fake text and and whatnot
just to come up with the design is is pretty you know it's pretty simple um other things is you know
come up with inspiration you know find you know i think the biggest thing the biggest help is just playing around as
well um you know and then you know you'll learn things like okay my banner is going to
be this and you know kind of you alternate sections and you don't want every section your of your p of your
site to be like a two column with image on the left image on the right you want to vary things up right so if you notice
here this is a two column i go to a different layout which is a three column i then go
back to a two column but it's opposite right um so yeah you know also if you want to kind
of learn a completely different style check out my um one where i built the foundation
stacks.com home page um that was pretty pretty different but i did kind of alternate um you know the layouts a
little bit and you kind of flip things around and you know um so yeah make sure you check that out
um i think varying the layouts but still
another thing that's that is important oh and ah shoot i'm not sharing the
screen i was just kind of talking about i'm sorry i was just talking about how you know on this layout again i went
from two column to three column and then i went back to two column but it's opposite of this two column right
um and then i have a contact form that goes full width right so you can kind of vary those types of layouts
another important thing here if you notice is when i when i used
um even when i used padding okay and and stuff and stuff like that um
i utilized the built-in numbers here okay now you can go to detailed and you
can create your own custom stuff however okay um
i explicitly used this sizing grid okay because this sizing grid if you use
it for various things um it just kind of makes things fit
right it kind of just makes things kind of work together the spacing just looks nice
right i mean it looks like it's uniform even though it's not all the same okay
and that's because um this sizing scale that i've chosen um after a lot of research um it just
kind of works so try to be consistent with your sizing and i i will
recommend you you don't go off and say i want three pixels here and i want you know exactly um stick with the sizing
grid i think it'll work pretty well for you okay all right let's see any other questions
okay um another thing uh one thing i i should note that
i kind of skipped over but it is it is kind of a good thing to do like if you wanted you can add like little uh little
titles here right so in this container like i can put um you know this is a
banner or something like that right and then here in the html section you can actually use like this is the header
of my page and then for this one particular one here i can go html tag and i can do
section right this is i mean to be honest this really gives
this is for a geek like me um if if you don't want if you don't want to if you want to ignore that and use a div um
which is the default it's no no big deal okay um but i get asked questions about
this html tag from time to time and so like what i'll do and i think i went over this inside my
foundationstacks.com uh one but then for each website section i'll change this html tag to be a section
okay um they say this helps for you know
google and what not to parse your page i don't know maybe it does also help
mildly for accessibility a little bit it it has zero function on
the v or the functionality of your site right um it's kind of a completely
optional thing maybe you know you kind of comb afterwards and do stuff like that okay
but i just kind of wanted to note that a little bit but the title section here is super useful um i i think a lot a lot of
times what i'll do is if i have a complex page i'll put in all the classes that i used so that i can
see them here right um so like this when i added you know to each of these sections this has content
section and alt section right so you can kind of see that um
again that's just kind of a workflow thing that i've i use um from time to time if i want to make sure that i call
out a particular thing i can put the class in there so that i can see that that it's kind of a useful thing
and don't forget oh james says don't forget about the pen stack thank you james um pen stack
free stack on my site allows you to add let's say um i want to
add this entire section here and i could be like you know content section
one or whatever okay and then you can you can you can add whatever notes you want in here about this section um and
this is pen is purely a and if you you can hide the entire contents in it
pen is an edit mode only tool it doesn't affect the actual look and feel of your of your website um your website's still
going to look exactly the same but allows you to add notes and it allows you to nicely hide things right
so you can kind of see build out the basic structure of your of your site right so i can be like this is
i can add this section here okay and be like this is um
cards section okay something like that and you can hide that and you can change
the note color if you wanted okay um there are various people that use pen
for all kinds of different things but it is a nice way to organize your web page and you know inside edit mode and kind
of break things down and and give yourself notes as well you can type in all kinds of notes in here so you don't
forget why you did something later on um you can use pens inside of
of site styles as well so you can you can add in a pen in here okay and maybe add all of your various
you know related swatches into a pen okay uh totally up to you there's all
kinds of ways you can you can organize this stuff and i'll stop blabbing because i don't want to cause any more confusion
what is the shelf stack used for that's a good question that's a quick one i'll answer that um
so shelf allows us to or let me let me go over the use case okay so i am i have site
styles and if you see site styles is rather large there's some things we could do like we can um we can
not display the sizing chart and we cannot display the color palettes and it can make site styles more minimalistic
okay there's also this cool streamlined edit mode if you really want to go all out
and kind of streamline and make edit mode faster okay um yeah i like the
streamline to edit mode it's not for everybody though it hides a lot of the lines and borders and whatnot um but it
kind of it gives you an interesting look so maybe you can toggle that on and off see if you like it or not
if you can kind of see the difference here uh with that toggled on or it's off right now if i toggle that on you'll see
that okay but um shelf so a lot of times let's say i'm all the way at the bottom of the page
and i want to add some styles for this header or this section down here okay um
a lot of times what we'll have to do is i've scroll all the way up um add my styles scroll all the way down
right hey that could get a little annoying because you're constantly have to move up and down okay so that's why
we built shelf so if you add shelf to the top of the page a lot of times what i'll do is i will
add site styles inside shelf you can add whatever you want okay but site styles is a good one to add in there
maybe also if you wanted to add a lot of times what i'll do is i'll add this the sizing chart there as well so i don't
have the sizing chart inside styles but it's it's here and i can quickly hide that
okay and what happens now is if you notice shelf is always there so if i if i want to look at you know
something in sight styles i can just open that up look at site styles maybe add some stuff right or change
some things okay and quickly just hide it again and i'm i'm still where i'm at so um
so shelf is just a useful tool to always have have it accessible
okay um and there's a few there's you can either have shelf um
positioned at the bottom positioned at the top and you can also by default it's floated which means um
it kind of is further down but if you unfloat it'll kind of dock it so it takes up a little less space
i particularly like the floated shelf myself but um so there's just some positioning
options um whatever you like so yeah shelf is super awesome uh super
useful hopefully that helped dave
double click the hijo not everyone will have that snippet yes so um i've been double clicking to hot show and hide
these there is an faq just go to the weaver space community search for double click and you'll find the faq on how to
enable that um it just it's the same thing as this little hide button up in the toolbar
okay um so there is a double click to show and a double click to hide um it's it's a kind of a hidden preference
inside stacks doesn't exist yet um and if you want to enable that feature um
just search the community i have an faq on exactly how to do that thanks for the reminder on that gary
yes and dr bob says so this shelf stack is here okay if i if
i delete it it looks i even have a message inside shelf do not delete this stack if there's content
inside of the shelf because if i delete this shelf stack my site styles is gone
so and that can be very bad so you definitely want to make sure that
um and let me save this project um
i'll just call it basic and i'll make sure i supply the download i'll have the download to this project
file on the foundation product page um i'll try to get it by the by the hangout
this week it'll be there okay um so yeah um i just saved this project
i'll have the download link on the fination product page um not sure what i'll call it but it'll be there okay and i'll make sure i link
it to this particular youtube video so that it's people always know that this is the video that i used i actually
built the project live
james asking the next time can i do a one on the dev inspector um sure uh we we can we can do one on the dev
inspector okay um sweet okay i think we're all done guys
just in the nick of time hopefully you guys enjoyed that it was a lot of fun um hopefully i didn't get too crazy
hopefully you guys see that how you know a decent workflow is of just creating your page
first get just get everything out there like you know create your layouts and i i know there's a lot of amazing guys
like davide and chris and massimo that that do these awesome project files and then we we try to we're like i want that
i want that but let's be honest we have to be true to ourselves okay and um
obviously davide massimo and chris they're they're they're very experienced users and sometimes um we purchase their
project files because and you should because they do some awesome stuff but um sometimes it can be overwhelming
trying to understand how everything was done okay and
just starting okay can be difficult and i think if you take the workflow that we
did today to just start just get content out there don't don't
worry about the stacks yes this webpage i built was simple it doesn't have
tons of you know super fancy hover animations and all that cool stuff that
you know those guys definitely do and they have but we got to start somewhere okay and
and once we get to a basic point and you build out something like this
and you start using swatches of okay i want i just want to add padding to this thing okay i just want to add a
background then you get more comfortable doing that and then you can move to the next level of adding some more things
right um and then ultimately you can get those project files and then copy bits out and
use them in your project right i think i think that's also something uh you know
you don't necessarily with those project files yes they are pre-made they're pre-made websites and you can use them but you
can also just use them as examples of things that you can copy and paste into your project
right you don't need to use all of davide's projects or chris's projects or massimo's projects you can just copy
that one little bit and it's related swatches find its related swatches and paste that into a
section of your existing web page right um and that you know that allows us
maybe a little you know ramp up our skills a little bit easier so just some ideas
cool so thank you very much guys friday hang out it's going to be awesome i'm sure
i'll have lots of questions hopefully new guys coming and talking about what we did here today um
and yeah it's gonna be a lot of fun we'll see you then take care everyone bye