hopefully everyone is doing well we got some cool stuff and i worked for a few hours actually prepping for this
live stream so normally i'm all off the hook or off the cuff i mean and uh but today we're going to uh do
something cool excellent um just as always if you could
let me know in the chat um you know if everything is good excellent chris is
here started getting the chat in sweet cool audio and video is good just quick sound
check mr cole thanks for coming on usual suspects sounds good thanks scott
okay so a long long long time ago um
probably like when i shipped foundation six so it was probably like a year ago um because it's been just over a year
since i i launched the first um beta of i guess pre-release version of
foundation six to uh summit attendees last year and um so yeah that was last november i
released it so um yeah we're we're one year into foundation six we're already on version
6.6 man it's been a it's been a wild ride right but um obviously you know when i release
foundation people are all can i do this can i do that and i bookmarked a few sites that i was like hey you know it'd be cool to
rebuild this site in foundation six i think it would be fun so um so yeah it uh
you know obviously time goes by and i've done you know quite quite a few but there was this one site that i thought would just was just
interesting um i hopefully you saw it i linked to it in the email and let's go ahead and look at it really
quick let me go ahead and share my screen okay bring up safari
and uh oops
there it is all right here it is um i also realized that my i zoomed my
desktop in a little bit i know previous uh previously um some things were getting a little cut off
so um so i zoomed my desktop in a little bit so we could see a little bit more screen so stuff doesn't get cut off okay and
actually you know what i'm going to do really quick one second here i also got a note about
um maybe it's i shouldn't
let me see if i can adjust something really quick one second guys
all right boom i made myself a little bit smaller so that i got some feedback that a little
thumbnail of myself was cutting off the corners a little bit so there we go hopefully hopefully that
will cut off a little bit less so if i have anything important down here um you'll still get to see my
beautiful face okay okay so this is the site we're going to be
recreating okay um i i'm not going to recreate all the typography and everything
i'm most i'm mostly focusing on just the layouts okay and some of these like these hover effects and whatnot and also you'll
notice that um if you click on any of these um it actually opens up the content um in kind of like this little light box
that's off on the side right so we're going to do that we're going to do these cool little sliders right so we're going to build a
slider like that um the only thing i probably won't i probably won't get into is all the i
mean the typography is pretty simple it's just big text big bold text um and some other you know odds and ends
but for the most part we're going to be building um all the components that you would need to build something like this now
what's interesting is this site um here i'll put the i'll put the link to it in the chat actually
um if you guys want to have a look at it okay
um and uh this site doesn't scroll okay so this site doesn't scroll um and
you know as you kind of resize the browser another thing i this obviously the layout does change when you're on mobile
um i i didn't have the time to really really go through all that um i did spend a few hours you know
tweaking things i even added a few minor features to foundation that you guys don't have yet but i'll probably ship
um this week um and i'll show you what those are as we as we go along
and uh so yeah we're gonna build this okay um and uh here why not always open up that
project file i'll show you what we're going to be building now i i already built this project file
but i'm going to uh attempt to build it from scratch again
okay
by the way stacks 4.1.1 shipped um so if you uh if you were one of the few
lucky people that had some issues with dragging and dropping um and partials crashing or crashing
when partials were unpacked um 4.1.1 fixes a lot of that so
um yeah make sure you uh go get that okay so this is the uh the project that
we're going to be uh building as you see it is very similar um i i
didn't replicate all the text and all the i didn't download all the images right um but we have a slider
we have this little cool little light box uh doohickey right we see we have a lot of these hover
effects okay so um it's a pretty good replica of this site minus again just some of the the fonts
the typography and whatnot i didn't download their logo i just kind of used my own
right but you see this is uh this is pretty darn close representation of what
this site is okay and um this entire thing is built
with just foundation six stacks nothing else okay i had to use like
one line of css um for these for these buttons um for the slider buttons um
so yeah there there's one line of css that um i i just couldn't do with a swatch um you
will be able to do it when i'm really i'm working on a swatches pack um and that will that particular line with css will be possible once
that swatches pack is released next year okay but anyway um so yeah exciting
we're gonna build this page right here okay so i'm gonna close that for right now
and we're gonna i'm just gonna talk a little bit about this design and um how i
plan on approaching it okay um so first off the prima
primarily that this design uses two different um types of grids inside foundation six okay um
first is a vertical grid okay um so if you look in the let's look at
the foundation six stacks really quick we have um the vertical grid and then i'm going to use columns pro
um now you you can also use you know for some of these parts of the layouts you could use the two columns or
three columns or whatever but i'm just going to use columns pro and vertical grid for pretty much
everything okay um now probably as we build this
um you know i probably should add a little bit more notes or use some pen stacks and whatnot um but you see there actually aren't too
many swatches to get all this done either which is kind of cool okay um but
those two grids that we created right or we're using what is the vertical grid when am i
going to use that and what is columns pro give me okay
well um we kind of know what columns pro is right that's just you know multi-column layout okay um
but what is vertical grid what why would i need to use a vertical grid
vertical grid think of vertical grid as a way of
splitting up your pages vertically as if they were columns
okay so think of it if you have a two-column layout or a three-column layout just flip that vertically and basically
you're slicing up a portion of the page vertically okay let me go ahead and show you
um let's see let's get my little screen annotation tool here okay let me move it out of the way
come on over here there we go okay so um first we'll notice that
this entire website is contained within the browser
okay so that entire thing right there right is contained within the browser
can i make it stick
cool all right so we have this container right and that container
as you saw this site doesn't scroll correct so that entire container is the height
of the browser window okay now if you notice this particular
container is kind of divvied up into two particular elements
okay first we have this top container and then we have
the bottom container all right so vertically we're splitting this page up
into two sections we have this section that contains the um the menu which he actually has a bug
look his menu gets cut off here so he has the menu and then the rest of the page is below
that well guess what that is a vertical grid right there
okay so actually you know um as we go along i'm actually going to hmm let's
let's build that out right now okay so i'm gonna go ahead and let's go into rapidweaver i'm gonna i'm gonna hide we're gonna
build this right now this this this menu up at the top as well as this page right here
or or the just the main empty content area that'll be empty okay let's go ahead and hide all of that
okay and i'm gonna keep this is for notes but we're going to start a brand spanking new project here
add a new stacks page
okay um so obviously we're going to want to start off with a new site styles okay and just for right now i'm
just going to hide that because we don't need to see it all okay so there's the site styles
um and then as i said we're going to start off with a vertical grid so we're going to go off into a vertical grid
and our vertical grid had two rows right so we're gonna we have two rows in our vertical grid
okay the first row had a menu right so let's go ahead and let's find a menu
um and i'm just going to add in a few menu items okay it's just
dummy content okay so now we have a row and this row here
okay now how do we uh adjust the sizing well let's let's preview what we got right now
okay um so we have a menu and then obviously this content area is kind of empty but if we were to just to
have some fun and inspect this that okay um you'll see that
um right here this is the vertical grid if you notice it takes up the entire height of the
browser cool and if you look at this the two rows that we added
okay you'll see the first row well we don't want that it takes up by default it takes up 50 because it's
set to auto it's exactly the same as the um columns right so if you set it to auto it'll
take up as much space as possible so we're going to want to change that we want to make sure that these aren't set
to auto we're going to want it to something else okay so just like columns um you can set
a vertical grid row to be shrink to content right so that was in in this setting right here that
small shrink to content okay so now if i preview this
okay we'll see that we now have two we've split up our vertical area
which is the entire um web page or the entire browser height um here is our menu which it shrunk to
the to its content okay and then our body where we're gonna put all of our
main content is actually um right it's filling up the rest of the
space cool so that first part is done that's nice
okay um one thing i'm also going to do actually really quick is i'm just going to set the
um site background color to be i have this on my clipboard one second
there it goes okay it's i set the site background uh to be that
cream color okay so if we preview now we got that cream color okay cool
um and uh just for kicks since we're kind of doing the menu um here i'm gonna do a i already have a
couple swatches here i'm just going to copy paste those just to save us a little bit of time here
okay so uh oh i'm gonna go in here and call this so here i just did a a um a menu styles
that uh styles the colors for my menu a little bit basically sets them to black and if you notice the the website had
really big fat menu um so i kind of just set a font style that sets the uh
sets the font to be uh bold and 24 pixels okay we're going to take this class my
menu and chuck it on our menu here there we go boom now we have a nice
chunky menu okay and if you notice a chunky menu up but this chunk menu is
white so let's go ahead and um that's easy enough to do i'm i'm
actually going to use a utility class here and i'm going to set it on the row and i'm going to say bg colon
white and there we go all right so now we have our big chunky
menu with the white background um i know this site has borders we're going to attack the borders
um in a little bit okay right now i'm just kind of getting the the structure of the grids laid out okay
and we'll do some of the background colors cool so now we have this distinct areas we have the the menu
um with the back white background and the rest of the body which matches this okay
cool so now what um let's focus on this uh left side here
okay uh let me bring up my little annotation tool oh it uh how do i
no how do i clear it interesting oops
oh all right not sure what i did there but i cleared it okay cool um
scissors tool okay whatever um okay so now we're going to be focusing on this area here
okay what what does this area have okay um so this area has two boxes up on
the top okay and a box down here
um and if you notice uh inside here it also is split up into two things right
so um we could potentially um add a two column and then basically have
a one column here that maybe has the slider stack i'm gonna oh by the way we're gonna ignore the slider right for
right now i just wanna build this layout without without a slider okay so i just wanna get a static layout here
so there's a couple ways we can do this um so i
after i built this i'm thinking that i there might be a simpler way now that i'm i'm redoing it again right um so we we
have a two column up here that's easy enough to do and then below that
is um basically a one a one column right and what we could
potentially do is set the height of this using like a height swatch
you know and then set a height swatch with this that could be easier but i actually know what i'm gonna i'm gonna
do the way i did it so here i used a um when i built this i
used a another vertical grid so what i did is here i set this vertical grid to contain
um this area up here and then an a another blanket area down here for the
slider okay and then inside this top row um i use the columns pro to map out
the horizontal columns here okay um cool
all right let's go ahead and do that all right let's do that okay
so now we're inside the row and um
what we're going to do is we're going to add another vertical grid into here because we want to split it up okay and again that was
uh we said that was two rows right right so we have one row and the second row is the big slider okay so we have we
have two more rows okay and that is i don't know what uh let me just look at what i said it to
before i'm gonna cheat a little bit 25 yeah
that looks about right okay um okay so this this top row we're going to set this to
be um 25 and we're going to set this second row just to be auto because it'll just
fill up the rest of the space okay i i could explicitly go here and say nine because then you know three plus
nine equals twelve um but i'm just going to set it to auto because it will just fill up the rest of the space
okay cool um so that builds that vertical grid that we had in there but now we need to
uh let's populate this content with the uh two columns so now we have two columns of content
let's do a columns pro okay and that had two columns in it right so
we had column one and column two okay and um just for fun i'm just going to go
ahead and copy the content that we had in here
and we'll just copy this header i don't really remember what i said in it i don't think that really is anything special
um so this is just an svg of the weaver space logo okay um and then this this is a uh just
a header set to h2 that's it there's nothing special in there okay let's preview this
oh wait hold up huh i see what i did wrong first okay so what i did is i built i
i forgot to build the horizontal divider right um so i was i was curious
on building oh good it's still there i was building this section but i forgot that in order to build this vertical layout i
need to split this main body content into two physical columns
first okay so that's easy enough to do um let's go back in here
um so inside this row um i actually need a columns pro okay
um that has two columns um and then that this vertical grid that
i built is going to be in the first column okay there we go hopefully that made
sense right so what i did was i uh how can i
there it goes okay um so this main body area that we had
okay what we need to do is we need to split that up into two columns using columns pro first
okay so that's what that that columns pro that i added does right it splits that into two
distinct columns um at that point then um you know i
added this vertical grid um that breaks it up into two areas
and then i added another columns pro into there into the first one that split that area
up into two and that's what we have in the other tab that's what we have here we i have my
two columns it's split down the middle we have nothing over here yet and this area down here will be that
slider that we don't have yet either okay
cool so now let's go ahead and build out this
um area okay and that is in this uh row right here
okay now one thing we might want to do is start some of these can be a little confusing
um right so we could just let's call this menu area
okay then this we'll call this um main content
okay um we'll call this one um
let's see this is main content uh
actually no i don't think we need a title on that one let's do this column here is main content
left and down here this is going to be main content
right okay so if you notice what i'm doing here is a lot of the foundation stacks allow
you to add a title and what that does is that allows you to um actually
add in little notes so that when you have tons of different vertical grids and columns pros and cons all on top of
each other you can actually get a little bit of a clue on um as to what that the purpose of that
area is okay um so this is the um
no let's just call this uh i don't know uh
i don't know two column left top i guess right okay and then we can we can kind of see that this is this the two column
area there and then this one is going to be um
slider container okay there we go so now i've kind of clearly
labeled a lot of these so that as we're going and going down the page we kind of know what's what
a little bit okay so we can kind of see where we are in the page okay so now we're in this slider
container let's look at let's go back to safari so let's look at this uh this container
okay so we're building out this right here again don't worry about the the controls
for the slider we'll do that last that'll be probably the very last thing we do today
but what is this um this is kind of another vertical grid
okay so this is a vertical grid and we have this main content area and then
down at the bottom we have a header or some sort of label okay um
so yeah i'm gonna use a vertical grid for this
okay so let's go back into here and i'm going to choose a vertical grid
and we had two rows and uh here i'm just going to go ahead
and i just do the eight augers of h3 that's fine
let me take actually no i'm just gonna no we're not
okay we're gonna go ahead and paste that in there
um so we have a wrote we put our header pals fine arts um and now i need um i need a container
or um something that has an image okay and um what i want to do is okay so instead of
this being an image it kind of needs to be dynamic okay because as you see as this resizes um
the image changes we see different parts of the image right so what does that tell me
that we need to use here we need to use a background image so essentially this is just going to be a container or a div
that contains a background image okay um so i've already set up a few swatches
that i'm just going to copy over i have this that has a background image of a wharf
the palace of fine arts in san francisco golden gate bridge all these are san francisco landmarks
i'm just going to copy these and we're going to paste them there okay
and then um what i'm gonna do is i'm just gonna set this row to uh this is i have the header here for
pallets of fine arts so i'm just gonna do bg dash palace
and there we go let's preview this okay so now i have my image um palace of
fine arts is down here but if you notice it's uh i want palace of fine arts just to
it's taking up too much space okay um and but we know how to fix that we go to this row and we set this one to be
shrink to content um on the header and what that will do
is um [Music] oh ha ha okay um next thing
currently um so this this vertical grid by default it's set to full browser height
all right um hold on your horses this is going to be a little um interesting to explain
um okay so this outer let's go back to uh the page here let's
talk about all the various vertical grids that we have okay i just want to note out that the
default height for a vertical grid is going to be full browser height okay but that's not what
necessarily what we want right now okay um we want them on this on this particular one
okay um let's go ahead and click here okay so let's let's talk about all the
vertical grids i i have added to the page right now so right now i have this vertical grid and the height of that
we want that to be 100 the height of the browser okay perfect um we then have
this vertical grid which we don't want that to be set to the height of the browser
because it's not right it needs to be the browser minus this okay um and then we have the third one
here um and what we want for this one and this one is we want it to be we want
it to fill the height of the container
okay so
this particular one the very top vertical grid we want this to be full browser height perfect okay
and then we notice we had this vertical grid which is the wrapper around
that entire area instead of full browser height what i want this to be is i want it to be full container height
okay so i want it to fill its container basically it's parent
okay then on this vertical grid i want the same thing i want it to fill its
parent okay so we're going to set those to be full container height now um this isn't going to work perfect
because we're going to have to actually add a couple other things but let's see what that looks like right now whoa that looks really jacked up joe
you told me to do that what's going on okay um
so let's back up a little bit um
okay let's uh here let's actually let's look at what's going on here
in the code okay so um here i have uh let's look here is the main wrapper
that is the height of the browser perfect um this one is the height of our menu perfect
this one is the height of the remaining area in the browser okay oh
that's correct so far okay well this particular one all of a sudden it's smaller
how do i get this grid here to fill this area
because i wanted i want this to fill its parent okay okay so what we're going to do is
that is this columns pro right here okay and luckily we have a really easy
utility class called h colon full okay if you look down here in
the class um we're i'm going to be using this class a lot in this layout
so get used to it h colon full it basically sets the height to be 100
percent okay
cool now um i know that this main area here i also want that one to fill its area
actually you know before i do that let's let's preview it okay cool well we're starting to look a little bit better right so i have this
area here it's now filling the space that one's that's my vertical grid that's filling
the space nice this one's filling the space still very
nice now let's actually make this a little bit actually what i'm going to do is oops just so it's easier to see
let's get rid of that like that
like this perfect okay so that's that that's this and down here we have this
and this is all starting to look really nice now right all by
i mean and and the crux of the problem was i needed to add um into that first columns pro i needed
it i need to tell it to fill the height because by default it's just going to take up the this the same height as its
content right and the content isn't much it's just a couple a small image and some headers
right so we need to tell it to expand out
okay cool um so we're getting there i now have this uh this kind of this
layout here um and yeah i have the basics of this
of this side of the site done right just the raw basics i know it doesn't look perfect there's still no none of the borders some of the
alignment is slightly off that's okay okay we're just we're just worried about getting the grid
uh the grid portion of the site done so now what we're gonna do is i'm gonna focus on this side of the site
okay um let's focus on this right column
i see someone in the chat said why didn't i use uh columns pro on the left side of the there there are
there's probably a million ways to achieve this same exact layout using different various components
um and swatches um this is just one way i thought it was a kind of a fun way of
learning vertical grids as well so um yeah there there's definitely more ways to build this
site in this layout using foundation six stacks okay um it's just one way is it the best way
i don't know you know um what is the best i don't know okay um so let's go ahead and we're
gonna focus on this area over here okay so this area
i see this um if we split this vertically okay we see that we have one section
uh two sections three sections so i see vertically i need to split this
um this space into three distinct parts okay
let's go ahead and do that
um now if you remember over here in this left main content oh i actually didn't
need to do that because i added h full there okay never mind all right so now we have this main content area
and uh we're going to add a vertical grid under the main content right and we have three rows
and let's just call this right content top
we'll call this one right content middle and down here
call this right content bottom okay uh the bottom one's super easy
right um we just set that to be or what did i use down here i just want to set it the same
just a header was h3 alright cool
just a header okay so we have a header down here and i know because we've done this twice
now that this bottom row i want it to fit to content okay so shrink to content
okay i then have these two middle ones here just preview that really quick
interesting oh uh vertical grid set full container height okay so we
want the vertical grid here to be full container height not full browser height okay
and there we go okay so now uh now i have uh over here on the right i have my thing down here at the bottom
but now we need to do this other content area up here okay um in this area here i think i just
what did i do over here i just had a header and a picture
just go ahead and add that over here enter picture boop into the top row
header picture okay now we have this this bigger content area down here
let me see what split i did before i'm just going to cheat a little bit i did 50 okay so this particular row here um
we're going to do we're going to set this to be 50 height and then this middle row is just going to be auto so it'll just
auto fill up the rest of the space there okay so let's preview that again
there we go so now we need it now we need to do this this content area over here okay which is which is kind of tricky as
well so we're going to focus on this area here and there's
definitely multiple ways to handle this um but let's go ahead and get rid of these
little boxes okay so we're going to be focusing on this area right here
okay and by default you'll notice that okay columns pro boom it's a two column okay so i have
two columns here okay uh this one's easy it's just a header right
and then the area over here um we're going to want to split that
vertically and then down here we're going to want to split that horizontally
okay so um let's go ahead and take care of all that
okay so in this middle row uh we're gonna have a columns pro boop
and i said we have two columns in there now you'll notice that in here i'm going
to keep the the medium it's just set to auto because i want it to be 50 auto is fine
um but if you if you ever wanted to change that split you know i could like set this to be you know 50 if i wanted to um but yeah
um so there we have two columns here okay um and this particular one is just going to have a header but you know i don't
want to give you a sneak peek of what what else goes in there right now let's just go ahead and uh i'm just
going to chuck this header in there okay i'm going to make it an h2 so it's a little bit bigger
okay then over here in this and this is the second column right over here and what do we have well
we have a vertical grid okay so let's go ahead and do a
vertical grid um we're gonna split it evenly okay so i'll just set
this one to be uh i can do auto auto i'll just explicitly set it to 50
and auto um and then this vertical grid we don't want full browser either we
want full container height on that one as well okay um this top one i think it just had a
header in there so we'll drag that in there and this bottom row well guess what it
it had another two column in there right right so um so up here was
just a single over here down here was two columns okay so down here we have a in the
second row here we have another columns pro had two columns this one down here
um since this we're now getting a little short on space let's just do shop because that one that
was what the shop was okay and in this column this is the column that has these four buttons
okay now how are we going to do that there's a couple different ways we could try to split this with vertical
and whatever there's much easier ways uh there's probably two different ways you could do this you could either use a block
grid or you can just use a column pro with four columns okay um i am just going to use a columns
pro in here um with four columns and actually what i can do is i'm going to set
the columns to use 50 okay and um
here i will cheat a little bit just because i don't want to find the icon things anymore um
here you'll notice that there's these one
columns we'll we'll get into why i have one columns in there in a little bit okay um
now let's just do like that i just want the icons really
quick all right add in the html now you'll
notice we don't see the icons well that's because i need to go up in here i need to add font awesome five css and
fonts we also need brand icons
okay and then voila we magically have our um and i needed four columns here so
two three four that's uh boom boom delete
actually i'm gonna save this project just in case we'll just call it live
okay cool um and then let's go ahead and move the facebook icon and move the
pinterest icon and move that icon okay
preview voila okay so we have all of our main sections
now we did a lot of the hard work okay now it's just tweaking things
um so here i've split up my uh my grid up here okay so this one takes up 50
okay um here let's actually do that little inspector so we can kind of see that since we're looking at the right side
um okay so here is my vertical grid right that
fills up the entire area inside there there's that top area that takes up 50
then we have our auto area that takes up the rest of the space that isn't filled by this shrink okay
the header down at the bottom if we dive into this area here we'll see
that we have a two column area okay and if you notice actually there's
going to be a little problem here so because i know i'm going to want these columns to fill the height
of this vertical area okay in this column's pro stack right here i'm going to want to set that to be h
full right so let's go ahead and do that really quick uh so i think it was this one right h
colon full okay now if we go here
oh that wasn't the right one
auto on i want row oh
that's not what i want i'm sorry i did it in the wrong spot okay we wanted row middle
this columns probe right here this one needs to be h full
there we go okay starting to look a little bit better here okay so now um that's filling up the area
that is our left column our right column okay this is the vertical grid that then
splits it into two okay um and then this one has the two
column which we'll notice i actually needed the h full on that one you'll notice that um it doesn't fill the height of that
vertical grid okay so we're going to go into this one and do h
full on that and
there we go and then that is our first column and our second column okay
nice now if you notice here um these these buttons actually let's look at these buttons
they don't properly um let's work on the alignment of these because if you notice they're
they're kind of not correct okay so what we're going to do here
is oops not here actually i want to make sure i rough because i'm going to give you guys this project that i already made so i
just want to make sure that it's it does what i thought ah okay okay so um what i did here um because we
don't have a vertical grid okay uh in here i just use columns what we're going to do is we're going to set
the height of each column to be 50 okay so um all i can do is i'm going to
go into uh the columns for each of these so i'm going to i'm going to select all four columns and i'm going to add h
colon 50 to the class right there h colon 50. okay kind of like h colon
full does i you know price it in each colon 100 but h colon full and then h colon 50. okay
and um let's preview that now
[Music] all right so here on this uh ultimate
column i can actually act each colon full on that as well and then there we go there we go okay
let's go to the inspector okay so here is the here is the column
here is the columns pro that contains all four of those okay and then you'll notice that voila
um they're kind of more evenly spaced out now cool
hey our grid is pretty much done okay now we just need to start doing some
styles and alignments and and stuff okay
so one thing you'll notice that on this site pretty much everything is center aligned okay now um
i didn't purposely go you know i could go to each header and say um you know text align center on all of these
or i could just go to the very top of the page go to the very the vertical grid that
contains the entire page and just say you know what i want all of my content to be center aligned
and voila it's all center aligned now with one setting okay you don't need to go to
each individual one okay again i went to the very vertical the very top vertical grid that
basically wraps everything and as long as you know you can override that like if i wanted this
one to be left i can set it to something but as long as everything in here says inherit okay it will inherit from whatever sets
the alignment on the text so this vertical grid i set it to have center alignment and voila
it magically center aligned all the text
so someone noticed he didn't know you can add the same class to something multiple times
you can however um let's say uh let's say this one is has a
let's say this first column has a class that the other ones don't i don't know hello okay
and let's say i go okay i want to add a new class to all of these
i select all of them now the first one i said had h colon50 hello the other ones just had h colon 50.
so if i add that now and let's close that out and go back to this one you'll notice
that um they all now have the same one right because uh they all get hello as well now so
um they multi-selection of things work you have to make sure whatever value you
enter in is gonna literally be the same on all of them so if i change this this this setting on
all of them it's going to change all of them right and the same thing works for delete so i'm just going to go ahead and select all of them
i'm going to delete hello and another and now all of them will have um h50 there we go so cool
yeah and that's just holding on the command button i got to turn off my space heater
okay that thing was cooking my butt man sorry um probably tmi sorry
uh okay okay so there we go this is where we are at right now okay
um let's start working with um some of the vertical alignment of items
okay so for example this svg um it's not vertically aligned right if
we uh go ahead and let's look at this over here
okay
all right so here i have some content um and if a you'll notice that this doesn't
grow to the height of the container right so we have this this particular columns pro
it needs to grow to the height okay um the reason is i want to vertically center these things
in order and in order to vertically center it it needs to be the height of something because right now it's just the height
of the content okay so let's go ahead and fix that really quick i didn't i missed that one earlier that is this
columns pro here so we're going to do h colon full on that and let's preview again
okay and there we go okay so now now that's full height we have that and that but if you notice
the content um isn't vertically aligning okay and um so now i'm going to show you
a trick that is going to be um important okay so what you might think you would do
is this you would go to this columns pro and he'd be like hey you know i know that columns pro has a vertical align
option i'm going to set that to be vertical align middle should be done right
score okay that will work okay um if you if you don't now but on
this side you'll notice that in the full design this box is white okay so i'm gonna go ahead and let's let's make
this box white and we'll see what what happens so in this column i want this column to be
white so we're just going to add bg colon white okay it's a utility class right down
there bg colon white
enter makes the white background beautiful preview what the heck dude
what happened i thought we made this um full height what's going on here
well the way that um the way that vertical middle happens
is it makes the columns the size of their content and then vertically aligns those columns
so while that's while that is great when we don't want to actually see the column like add a background to
the column it's a headache when we when we do okay so what's what's the workaround and this is going to be a common workaround
okay um so i'm going to do is i'm going to go to this columns pro i'm going to turn off vertical alignment okay
the default will make the columns go 100 height right which again we get back to this now i have a white background but all my
content's back up at the top now so how can we now get the best of both worlds how can i get vertical align the
content and um color my columns well in order to do that we just need to
add another one column okay so what you can do is you're going to add a one column in here
okay and then we're gonna set the one column to be h colon full
and then i'm gonna set the vertical alignment on this column to be middle
and that is going to be how we get it done okay so you see there
now what it's doing is it's the one column is filling the height of the column pro and then vertically
aligning the the content okay so yeah it does in order to do that
it does take one extra one column okay and what i'm going to do is i'm
just going to we're going to be using this in a few places so i'm just going to copy that we're going to put that right
i'm gonna there that right there uh we're gonna put it
right here we're gonna same exact thing
oop i'm me do that um let's preview that so now i have my
this this is vertically centered oh we want to make sure this is vertically centered and this is vertically centered and uh
oh this needs to be a white background over here let's go ahead and let's do that really quick so this we're gonna make that bg white
okay so that's white okay um
and then down this particular one here uh we do want vertically centered will work on this
one i believe no oh
not on that one hold on one second uh inherit it's on this one my bad i think we could do
vertically aligned middle on that and it will work there we go okay so i have my buttons
um and the vertically and the all the icons are vertically aligned sweet okay um
uh let's see i'm gonna need uh i'm gonna need my little my little center content
center or there you know maybe this maybe this little one column will make a good template like it's just a you know it is a very
simple thing but it works you just need h colon full and set the vertical line to be middle okay um so
there we go and do i need it here i think i might need it here too
vertically center that bad boy uh oh and this one
boom okay we're shaping up here all right so now all of our content is
vertically aligned properly okay uh we have our sidebar let's start adding all those
borders okay so if you notice there's all kinds of thick borders everywhere okay um
and i've created a bunch of swatches for this okay um so let's just go ahead i'm gonna
copy them over
here paste those there and let's look at them
okay first i have border all okay um and let's look at this essentially um
it takes the swatch color black and it sets um border size simple on all
sides 10 pixels and on all sides solid okay if you're curious i earlier on
today i said i added a couple things um it was for these borders this side setting doesn't exist in
currently in this production version um and that's important because like on this border left class that i created
um i only want to apply a 10 pixel border to the left side okay um just a little
small tidbit before i hit detailed and what i did is i set this to be 0 you know 10 pixels left and then 0 0 0
on top left and right however um i couldn't i couldn't use this
by just adding um you know let's say i wanted something to have a border on the top and a border on the right
um i couldn't do that because border left and border right would would cancel each other out okay
so long story short there's now in there's going to be a new simple uh setting with this side by default it'll
be all which is the current behavior you can actually define the side that you want to apply
um it to okay so this one sets a uh a left
border of 10 pixels obviously the class of border right sets a right uh side same thing for top and bottom
now you notice i also have a set of classes for small border um we'll get to what those are for in a
little bit essentially it's the same thing it just sets the border to five pixels instead of ten okay all right so let's start let's
start adding our borders to all kinds of stuff okay so first off we're going to add a
border all around the menu because um let's go here we have a border around
the menu okay so that's true so we have a border all around the menu
um i'm going to go ahead and say a border all order dash all
boom we have a border around the menu okay now this content area um this main content area i don't want a
border on the top i can't use border all here let's show you really quick
so we do this main content row um yeah let's let's set border all on this
border dash all just so you see what's going on okay so i have a border all the way
around but if you notice this border up at the top it's too thick now because it's doubled
over right so um what i can do is instead of border all i'm going to set border dash left
border dash right and border dash bottom okay so it's very
explicit but that gives us exactly what we want now
okay so now i have all of those borders okay so we're getting there look it start
it's starting to look like something okay now let's focus on this left side area here
okay essentially i'm going to want a border all the way down this this middle part this middle section
right so let's go ahead and find this left uh main content column okay and i'm
going to set a order dash right on that
voila so i now have a border right there okay we're getting there um then um in this vertical area here
i had a border on the um along this this top area so um actually we're gonna we're gonna need
two we're gonna need one that splits this and one that splits that so let's go ahead and find those spots right there
um that is right here we're gonna do um order dash top
and then on this we're going to do order dash top do that okay
preview that we're getting there right so now i have my border here my border there now i need a border down
this middle flank right here okay and that is just on this on this
where the icon is i'm going to set that to have a border dash
right voila right magic is happening
okay now let's focus on this side obviously i want to have um a border here and a border here let's go
ahead and do that okay so on let's see on this
i want to have a border dash top and
middle row we're gonna have a border top there boom
okay we're getting there all right now on this side i want to border down the middle here
right and then a border here let's go ahead and do that
so down this side here i want to have a border right
let's just make sure i did that correct yep boom border right and then um okay then on this one on
this row i want a border top
order top nice and then here i want a border
top as well no i want border dash left sorry left i think right
yes okay cool now now it comes this area here okay where we have these little icons
um and so just because the way we built these um it's going to be a little different
okay so you might think that um oh look twitter i'm just gonna add a a um a left border and a bottom border
and on youtube i'll add a uh or a right border and a bottom border and on the youtube i'll add a left
border and a top border that's actually what i tried first right let's do that really quick so this one we're going to have on the
twitter we're going to have border dash right and border dash
bottom okay and then on youtube we're going to have um
dash top and border dash left okay
you notice well that didn't work did it did it uh well also if actually if you notice it's actually the borders aren't aren't
um aren't doing what i would expect
what's going on there what happened what happened what happened
hold on one second hmm all right some small differences
oh by setting that vertical okay because aha remember on this um on
this column i set vertical align middle well that that gets a that stops our
our height that we set on all of these okay so we're gonna have to do that one column trick again for this particular layout so
we're going to set the vertical line back to inherit okay and then i'm going to need this
little one column trick
i'm just going gonna paste paste and paste and then move that into there
move that into there move that into there move that into there and if you guys are
wondering this these icons are just font awesome five snippets that's all they are there's nothing nothing special in there
they're just font awesome five snippets okay um okay so
now let's preview this there we go so this is the problem i was i was coming up with i was like oh
shoot because i was kind of expecting oh maybe that would all work out and i guess you could maybe put a bottom border on the facebook one
uh but yeah it just wouldn't work out okay so um that's why i then came
up with um the small borders so basically what uh what we're gonna do here is we're gonna do um
well i said small dashboard or i forget the new classes that i i called it
um small dash border dashboard so it's just small dash all of them okay so now we go down
over here and so this twitter one i still want the bottom the board right and border bottom but
i'm going to add small
all right and let's just copy that to make it a little bit easier and then on the facebook one
going to want the border on the left and the border on the bottom
okay and then on the pinterest one we want the border on the right and the
border on the top okay and on the youtube one
we want it on the um left
and the top okay and so there we go
by essentially adding a five pixel on both sides we get the same of the same sizing of
border right so we're adding the two five pixels together to make ten so that it all looks uniform
um are you applying the borders to the column stack yeah i'm applying it to the individual column stacks
right so this stack in this stack in this stack in this stack um some of these ones here like this
particular one that goes the entire side i put that one on the vertical grid
right because um that was just the it's the container that is the entire
height so instead of putting a left border on this box and a left border or right border on this box this box and
this box i just put the border on the surrounding container right
cool man i've already gone an hour um and i still have more to go um but we've we finished actually
building out the layout of this right i mean the the grid is done okay it is pretty much identical
right obviously the typography is different okay um so um if you want to stay on i'm gonna
i'm gonna keep going and finishing the rest of the stuff that i did okay and that is showing you how to do this
cool little slider as well as showing you how to build this little light box thing and also this hover
effect okay i guess first
we will do the hover effect okay
um and to save myself a little bit of time um i have um some swatches pre-made
all right so here's a few swatches um that is going to do everything we need okay so anything i
put a hoverbox class onto we'll get a few things a on hover the
background color will be black okay um and then on
um on i'm gonna change the text colors to be uh the uh kind of that cream color
okay um and then also um i'm gonna change the secondary and
actually in site styles i'm going to go ahead and set the secondary color to be that that same off-white color
okay so um for some reason i would i would have expected this text
color swatch to also affect the font awesome icons sadly uh it wasn't for some reason and
um i was i was running out of time to figure out why exactly so um i just simply created another
one more font color swatch that forces on hover the font awesome icons to
use that secondary color which is what i just set okay you could also just do color swatch and then set the color here okay but
i said it'd be secondary okay and then we have a transition so that um
if you know the background color changes it just doesn't change it actually has like a nice little fade transition
okay so that is that's all the swatches that we use for hoverbox okay and again all i need to do is add
hoverbox to the various components so let's go ahead and do that so the first one is here this particular column
here all i'm going to do is i'm going to put in hover dash box
and that's it now when i preview there we go
now i'm going to add it to all of these other ones right so i'm going to add to this one this one this one and this one and actually all of in all of these
icons okay so let's go ahead and do that um i don't
think that site had it on the one below the slider did it no it did not but it had it on all of
these not that one and that one okay let's replicate it
um so this one we need hoverbox on there
okay and in this one we need a hoverbox on there and then in
this one we need a hover box on there and this one need a hover box on there
and in this one we need a hover box on there and this one you need a hover box on
there and hover box on this on the shop
and then we had one on this bottom one as well okay
there we go look at that
slick come on guys that's cool where's the round of applause right i see a bunch of questions here
let me look at some of these questions first um is there a video on swatches tricks
that you're using uh there's lots of videos michael on various swatches um check those out
uh how do these borders behave when you collapse on mobile um so uh i i haven't taken the time to
to you know collapse things on mobile um you might need to um you know with the with the swatches
as you saw in that you probably saw that didn't work too great um in this you can target various sizes
so inside media query you can target small only medium only and stuff like that so
um so yeah you can create your own swatches that target a border on a particular um
size right so you can definitely do that
so yeah in this particular example uh here let's just shrink it down so we can see um yeah a lot of these borders don't
make sense any longer right so we'd probably make it medium only or large only or something like that
okay so um but it's possible you know in swatches just takes a little bit more work okay
um okay hoverbox i think we got all the hoverbox done right didn't i didn't i get all that done
yeah command s there we go command s boom um okay so now what let's
work on um that lightbox effect
okay so um we're actually not gonna here's a little sneaky thing we're
actually not gonna be using a light box for this um we're gonna we're gonna trigger it i'm gonna trigger it by clicking on this
right here here let's just do i think that is what cheddar is that i think it's this one
yeah um click this to open
um the my box content
click the wrong button click this to open i can type this to open the
right box content
okay there we go all right did that okay good so i'm gonna make it so we click on this
and it's gonna open something okay but we're not gonna use a light box and that's just because
we're going to use something else we're actually going to be using a drop down okay um and here actually i'm just going
to i'm going to be a little bit quick i'm just going to take this drop down
drop down okay and what's important is the placement of this drop down okay
this drop down doesn't really have much um um special to it um i i made the
background black i made it the alternate colors um i have a i have border none which is
another utility class and then i have drop content which we'll look at that in a second okay but just to save me a little bit of
time we're gonna add this uh right uh i need it above this but let's
just go ahead and add it right there i'm gonna move it
right there okay so it's it's very important um this the the
position of this drop down okay um so if we look at if we look at the site and we click on
this you'll notice that this fills in this area
okay and it can scroll okay but it fills in this area only it doesn't cover it doesn't cover the menu
um it only fills in this area and what is that area it is this right
here the main content right okay so essentially um i'm gonna set i i
added our drop down uh we're setting it to size mega okay um we're gonna set it to be it doesn't
really matter the position because we're actually going to override the position with the position swatch okay um and that is using this drop
content swatch so let's go ahead and over here i created a position swatch okay
that uh let's go ahead and add that to our code here okay um so what this does is
this position swatch i call it drop content okay because it's our drop-down content
um and we're gonna we have to set this to be relative to parent that is very important we don't want it
relative to browser okay and the reason i can't use a light box is light boxes will always be
relative to the browser window okay um but drop downs can can be
wherever we place them okay so we want it to be relative to the parent
and again the parent in this case is that that entire right column that we created
okay so we're setting it to be um top bottom left and right zero so
basically what th this position swatch will force the drop down to stretch and fill the entire area of its parent
okay now i upped the index to 10 not sure that was really necessary but um okay so that that
creates our drop down also i added a close button in here um in order to uh you know close the
drop down okay um also you want to make sure drop down close on click is enabled as well
okay there we go um so now how we gonna
launch this because right now i need to be able to click on this um this box here and launch it okay because you can't
obviously see it on page load okay so let's go down to this so how can
we launch a drop down well the easiest way is with the launcher stack so i'm going to go ahead
and add a launcher stack and i want it so you click anywhere in
that square and it'll launch it okay so let's go launcher um open drop
down is the default the drop id is drop one um if you're going to be doing multiples of these
we're going to make sure that each drop down has a unique id and you change that unique id here
okay so let's preview that um so click on that and oops oh
interesting okay so that's really cool i'm actually glad i this happened so if you notice it went
the full page well maybe that's not what you want right um because we only wanted to fill
this area here but if i go into the the this right here the uh content no not
content middle sorry i want this one right main content right okay i need to set this to be position
relative okay so that the drop down knows that it
needs to be relative to this to this main content area for you that again click on this
voila and also because that close on click if i click anywhere else on the page it'll close
so yeah i can either click on the close button or i can click anywhere outside and it'll close
that's really cool now you might notice when i added that launcher stack um this text in here was no longer
vertically centered okay and um there's an easy fix for that
in this launch in this launcher stack we just need to make that the full height of the container h
and there we go
there we go so cool now probably this alt text is white probably should be that that off-white
color right let's just fix that really really really quick so if we go here i want my alternate
text color to be that
there we go there we go now it matches
although the header is off that's uh alternate header color as well
there we go there we go right really really cool
loving it so i'm not going to do it for all you know on the main site you know all of these
launched a different area okay with their own special kind of layouts
right just just has some image and some text and whatnot okay um i mean i i did it once here uh you
can figure out how to you know do the same thing with these okay and obviously these twitter icons will just be links
and there'll be links to your twitter and facebook pages and all that jazz right okay
we're getting there the last bit i said we were gonna do it last is the slider okay
um okay so we have a slider here uh first let's get the slider working and we'll do these buttons the buttons
last um this one also has a slider up here i'm not gonna i'm not gonna build this as a slider i'm just gonna do this one
essentially it's going to be the same thing in this area just build your other whatever other slider you want okay
okay so this area here is we need to add a slider
okay so let's go ahead and add a slider stack
okay and then you know i already built these
slides out i'm just going to go ahead and copy them from this project
slide slide
slide we go just delete that delete that all right so now i have my um
my slider um and in the slider we're also going to want to make sure that it is set to be h
full because we want to be full height of this vertical container oops
right and then also in each slide i also have it set to h full okay that's important because each slide
contains its own vertical grid okay so it needs to be able to know that it needs to fill
all the available space that it has okay uh
actually you know this vertical this slider needs to be
there not inside that vertical grid all right
all right so now we have the slider that is going to be full height of the slider container
okay um let's do let's do set auto play we also want to use nav controls
um and we'll loop the slides okay there we go and so at the bottom
let's add some navigation control slider controls there we go let's use the default
controls for now let's preview that
um whoops what i do here okay so we have this h full
h full let's look at what i did over here
um what did i do different this one works all right
what did i do all right well let's uh go ahead and preview that
okay what did i do wrong so that's the height i uh sell auto so that fills the
container that's the that's the slider that's correct oh orbit okay there's one yeah i forgot
about that uh ah here it is um in order to do this
basically um there's one thing that we don't have access to to add a class to add that h full um so we need to
explicitly do that here so there's a there's something that foundation adds called orbit container that we need to make that
fill the height okay let's go ahead and uh just put that swatch in there
all right voila all right so now we have height okay now if we preview voila
magic okay um and actually you know what the default slider controls actually look really nice um i think they they work
really well um for this um okay but let's go ahead and
um get those slider controls up here that mimics pretty much that other site exactly
and this is a little complex actually to be honest um it it takes quite a bit of swatches to
move these bad boys up here okay but uh let's do it it was that was
fun thing this morning actually it was kind of good time um i'm going to go ahead and just uh let's copy this
slider buttons okay
so there's quite a few there's quite a few things here um and also um one thing i did do is
i'm just gonna where where you put the icons you can also use um
actually i'm just gonna copy this slider controls you can put in font awesome icons so we're gonna go down
here and instead of these default html um you know entities we're gonna i'm just
gonna paste in the the ones that i had so this has um the left arrow from font awesome
and the right arrow from font awesome okay and what's kind of cool here um whatever classes you add to this
will be classes added to both arrows or both buttons okay so um i wanted bg
white and i also wanted that hoverbox effect that we already created okay so i added hoverbox and bg white to
the uh to the buttons okay to these slider controls
and let's look at what else we did to these slider controls um so since i'm using font awesome icons
um i could just use the font style swatch so i use the elements
under elements you can choose slider next and previous okay and then set the size of those to
be 32 pixels so that sets the size of those arrows okay
um and then i i wanted to change the position okay because here let's just preview this really quick
by default they're they're they're centered on the left and the right well i wanted their position to be different i wanted their position to be
up at the top left corner here okay so um i i did a position swatch
for um the next button and a slightly different position swatch for
the previous button because the previous needs to be needs to move to the uh from
the right 60 x 60 pixels right so this this previous button needed to be 60 pixels over
um in order to for it to look proper okay this is the one line of css that um
i had to do in order to accomplish this um so we need to disable some auto centering
that was happening um so in order to do that we need to set transformed none on those um so that was the one line of
css we can't do with a swatch yet okay yet it's the key word there
um then i had borders right so i have order uh orbit previous has borders on those thighs
orbit next has borders on just the bottom okay if you notice the swatches for these um
i just choose element okay so if we look up here okay i choose element in the swatch selector and then
you can choose next previous previous and next you know so you can you have a lot of flexibility
there this one was set to next okay um i set the font color um by default i
wanted to be the the black color for the icons um and then on hover i wanted it to be the
secondary color which is that that uh off white okay and then um
and then oh i wanna on hover on i had to do two different ones one for orbit next and one for orbit previous on hover i
wanted to set the swatch to be secondary okay so while there's a lot of swatches
for those there's nothing like crazy it was all incremental it was like okay i want to change the
color okay now i want to move it up here and um so you know i don't want to take
the time to just you know to implement these you know logically for you guys hopefully you guys can see the logic
there and as you see there we now have the slider
um that goes next previous the entire grid elements here um this is a really really really really
cool project um yeah all doing all done 100 out of the box foundation six
hopefully uh you know this guy gave you guys a little bit of you know hopefully it didn't bust your
brains or anything like that but um i mean how did i tackle this it was
just little bits at a time it was just looking at okay i have this page right and then i broke it up okay first i need
to break this into a vertical column or vertical grid and then i need to break that further down into two columns
into three columns okay will this template be on weaver space yeah um this won't be a template although i'll just upload the project file to
weaver space and you can i'll probably call it like f6 grid site or something like that
um i might i might massage the the one a little bit with some things i actually did better on this live stream than i did in the project i
built so um i'll probably do a little bit of massaging this afternoon and i'll upload it to the foundation six product page
just go to the download sections and like i said i'll call it f6 grid site or something like that okay um
so yeah it'll be uploaded hopefully um again just going back to my thoughts
how did i build this it was very methodical it was just taking this massive page not even massive page for
this page and breaking down the layouts right what do i need what tools do i
have at my disposal to accomplish that need right and so hopefully this helped you out
um i thank you for the a lot of great comments everyone seemed to really enjoy it um so yeah hopefully we'll see you guys
on friday if you have questions about this or you want to you know tweak this anymore maybe we could play with it more
on our friday hangouts live where we can kind of do it all interactively that could be a lot of fun
hopefully uh you enjoyed this and learned a lot and we will see you guys hopefully on friday at the hangouts if
not we'll see you next week um on next week's live stream take care everyone talk to you later bye