0:00so excited man five months of which is grueling work where's the Hat uh here
here's my hat I just did my hair so you know like if I put a hat on it totally messes up the hair so for the whole day
so um maybe when it dries I could put my hat on but for now here's my hats right
here always got my hat a hat next to me and yeah so thank you very much everyone
for joining I saw a few of you said that you weren't able to join watch the whole thing live but you were gonna you know
you wanted to thank me for a foundation six and you're excited to get it so thank you very much for for those of you
that have already purchased foundation six it is really awesome um it
definitely is a new way of designing websites all the various I I've posted
this morning on the real vac forums as well as Weaver space and I detailed out
it's quite a long post about all the you know not all I mean there's so many new
things the entire thing is new essentially and but I kind of highlighted a lot of the main key new
features and what kind of we'll all do a brief overview of all of those points
today and yeah hopefully everyone is
enjoying it so thanks let me just say hey to everybody that's here we got Jack and Matthias and man a lot of the grant
how's it going from Down Under Larry and Robert Ron thanks for coming in I just love technology now in 2019
how we can you know I can start presenting and we got people from all over the world from Australia to Germany
to New Zealand to the u.s. to the UK just all over the place and it is
absolutely amazing so uh and unfortunately we do have mr. Lipan in the house that's unfortunate but you
know we all still love you Brian so Justin thank you for coming I know
you guys hopefully you guys have watched the previous two weeks live streams I'm not going to go into detail about all on
all that stuff um and what we're going what I'm gonna do today is soda pee I'm kind of gonna talk a little bit about
you know the philosophy behind foundation six why I feel you should upgrade or buy
new if you don't have it yet and over modulating a bit oh my a bit
hot I'm in booth micro a little bit okay sweet okay
um is that a little bit better Mike okay I'll move it a little bit further away
hopefully that helps out instead of me trying to muck around with all the
settings here um I guess I can set up max okay is that a little bit better
guys a little bit better on the sound cool thank you
so foundation 6 what is new about it what makes it special right so obviously
the first thing that that it does is um it uses ZURB foundation and actually
here let me I'm gonna go ahead and share my screen and we're gonna kind of um look at some of this stuff accepting it would kind of be fun to
look at some of this just kind of see um the roots of the foundation six stacks right and so let me actually let me go
ahead and get the ZURB website for the foundation website up foundation the
framework has a new website that I'm actually responsible for now it is get
dot foundation so it has kind of it's one of those funky oldies it has there
is a dot foundation domain name you know top-level domain now so it's pretty cool so let me go ahead I'm not sharing my
screen one second
okay so here we go this is get tough foundation right this is the open-source
framework that all of you know the stacks are based off of and this
framework actually there's two parts of this framework there's the sites and emails right because there's there's
Foundation for sites and foundation for emails and if any of you own my email stacks well guess what the email stacks
are based off of they're based off the foundation for emails framework so all right now we're gonna look at foundation
for sites because this is exactly what it's built off of right it is the second
largest web framework in the world it is used by over 300,000 developers across
the world like that's a lot of developers and it's used by huge
companies such as Apple Adobe Disney I think on the bottom of this page I think there's like a little graphic I think it
was on the homepage of just all the huge companies that use foundation and the
reason that using is because it's fast its modern it it's still compatible with
things like IE hopefully one day we'll be able to kill it
but right now still supporting ie right ie 11 so it's still around we still got
to support it so yet foundation set 6 totally works with that but if we dive
into the docs here I'm just gonna I'm gonna dive into one page okay and the
page here called the kitchen sink I actually link to it in the in my forum posts and this just gives you a quick
overview of all of the components that are a part of foundation 6 right so we
have obviously all the form stuff we have accordions and accordion menus and badges and breadcrumbs and buttons and
call-outs and close buttons and there's a lot of stuff here right and it's one
thing that's great is its again it's super fast super clean um it's all baked
into the theme so you can use as much of this as you want and you get it all and it's super small to which we'll dive
into it a little bit as well later on now one thing I should note is that we're not limited Foundation
doesn't just pull the stacks don't just pull from this framework there there are some like basic elements that we need
for web design that aren't necessarily in the foundation framework but foundation stacks includes them for you
such things as you know video and audio and there's things like description or
definition lists we have descriptions detailed lists a bunch of other stuff and there's a bunch of like form fields
that you know are just kind of nice to have like a date picker and stuff like that so yeah the foundation stacks
basically build on top of this and it has of course all things like site styles which are completely unique unto
itself which is a you know an amazing part of foundation so um yeah so that is
this is the roots of where all the stacks are right it is this powerful framework it's currently it's version
six five three this is the version that is ships with this version of foundation right now the foundation stacks okay
funny enough so I'm also leading the foundation open source project and next week I'm we're releasing version 6.6 of
the framework and look out for probably foundations 6.1 stacks will ship with
that version of the open source framework so pretty cool there okay so
what's next up right so okay cool it's built on this really powerful really cool framework what else is great about
foundation six well one thing is it is fast right um it is going to be super
quick in three different aspects there may be four different aspects depending on if you want to combine a couple of
them so the first part is a completely
streamlined there we go I'm trying to open up rapid let me open up rap really
quick
okay um oops this window is really big let me shrink it down a little bit okay
make sure we're all set up here make it as big as possible there we go
okay so foundation 6 is really built for speed like I worked before I wrote any
code I analyzed for a very very long time on how in the heck am I going to
make foundation 6 fast and I worked really closely with Isaiah to you know
get some best practices then get some recommendations from him on how we can make things inside rapidweaver faster
right and there are some things coming in a future updates to stacks that will make foundation 6 even faster um but I
think we've pretty much squeezed out as much performance as we can right now with this current version and it's
pretty awesome so youyou should notice that rapidweaver itself when you're
moving stacks are on the edit mode will be a lot faster preview is much faster as well so previewing your pages should
be pretty darn fast right so if we could just go ahead and like make a small
little change here I don't want to change too much because we're gonna be rebuilding this entire page um in a
little bit but let's just go ahead and here let me go ahead and change this background I'll just do that really
quick preview inside rapid eevr you see
just making it this simple change of the page which causes the entire page to be rear-end 'red it's still really fast
like it's pretty much instantaneous right so really really cool and that's
all done because of a couple different things right first off so preview and
edit mode are faster okay and that has a lot to do with how foundation 6 is completely modular now right if you'll
notice there are a lot of child Stax swatches are a huge part of that I'm
definitely going to be using swatches today as we build this particular web page out but yeah swatches are a huge
component of it because I now have access to all of these settings here um instead of you
know let's say a particular stack has a background setting and let's say uh you
know I want background and border changing on on a stack now I could add background settings to all ninety
foundation stacks I could I could do that right that way you could just add backgrounds directly
to each one but what's the drawback of that right a that means that all you
know the background settings are in foundation six in this swatch are pretty complex right we can do swatches we can
do colors we could do images we could do warehouse images we can do custom CSS right there's a lot of options you know
right here in these settings and I could I could have gone ahead and added all of
those settings directly into every single stack but what does that do right
what why is that not a great thing well that's not a great thing for two reasons
first off it adds a lot of settings to every single stack which means when
stacks needs to process every single page to preview it it needs to go to every stack process every setting
generate the codes based off that setting right so by not having all those
settings in a million stacks on the page it makes rapidweaver faster okay that's
important but swatches give us gives us a way to still have those background
settings but in a central place and then I can easily assign those to whatever
stack I want simply by using a class right and we'll see that as I build this
out I'm not going to demo that right now will see it as I start building out this web page right but that is a huge benefit of why foundation six is faster
inside rapidweaver is big part because of swatches another
bit is because it's kind of broken up into multiple smaller stacks so stacks can do better at caching and stuff like
that right so that's that's really really cool um and what we'll notice is
that we can now do there are a lot less settings if you go to every single stack
inside foundation 6 you'll notice that there is just not a lot of settings in every stack but they're the right
settings the settings that we need okay and this class is feel bets in every
single foundation stack is going to be the key to why it's powerful because this classes field allows us to assign
one or as many swatches as we want okay and what's powerful is what you'll see
is now when I change a swatch I can apply changes to like multiple
components on the page with just a single swatch okay so yeah speed is
really good next up we'll see that the code that that the web that the code
that the stacks produce is super clean as well it you will not be able to distinguish a website built with
foundation six stacks from a hand-coded website I mean it is the code is that
clean um it is extremely beautiful like I take a lot of pride in that and you'll
notice you know a lot of people had you know in Google PageSpeed their search there starts to be a lot of question in
terms of you know there there's an alert in PageSpeed now it's how many Dom nodes are on your page and foundation six
reduces the amount of HTML on the page by up to 70% or possibly more depending
on obviously how you design your site right so a huge reduction in the HTML
size which is browsers and Google PageSpeed are gonna love that next up is
accessibility accessibility is a big big thing in the world today because we need
to make sure that our websites are accessible by everybody by deaf people by blind people by you know anyone that
has a you know that needs accessible and uses accessible browsers or screen
readers I should say so foundation 6
does all the hard work for you especially in forms and we'll look at some of that detail a little bit today but just be just be aware that
accessibility I paid a lot of attention to that especially with forms forms are very critical to excessive
because people in screen readers need to know what the field is what exactly data
should they input and stuff like that so the forms are really important for that and now I've added a ton of
accessibility features baked directly into the the forms okay I'm not gonna
dive it there's a ton of other features we have great forms there's a lot of really cool column stuff we can Auto Center stuff and we're gonna see that as
I start building out this webpage so let's quickly let's look at this webpage atom that I'm about that we're about to
rebuild right now let's kind of look at what it is right it's pretty simple web page but it's pretty slick right we'll
notice that at the top here we kind of a hero header I didn't want to make it full-page because um I think that's kind
of overplayed now that's just my opinion
Brian says the new f6 page isn't up yet um it seems um it looks like it's up you
can go to um Weaver space.com slash foundation and here we go
areas here's the link this is the videos currently this live stream actually that we're watching right now um I will have
a general overview video hopefully I'll try to finish editing that today here's
a list of all the kind of the features screenshots obviously tutorials which is
the tour the tutorials right now are just the live streams I have more videos
coming soon hopefully next week we have a fake use the demo the demo site which
is going to be foundation stacks calm it's still under development I'll be honest haven't even started yet
I was just worried on getting on you know the actual code for foundation done and shipped to you guys so over holidays
I'm going to start working on redoing foundation stacks comm all with foundation 6 they'll have examples and
demos for every single stack so not sure exactly what what page you guys are
looking forward to get oh four or four but oh yeah we go to the main stacks page it should it should be showing up
right here a nation 6 it's working for me so Google is not
currently your friend not sure which which URL Google is serving but they
this page has always been the same exact URL cool okay so back to this website
design um here I have a hero header at the top we have a menu if you notice one of the very most requested features the
foundation one was the ability to have an icon within our menu items so if you
see here I know how that menu with an icon right dead smack in the middle which is what a lot of people really
like this enjoy this type of menu right we scroll down we just have a couple I mean this is just a really simple
website as you notice I added some animation so things animate as they come in onto the page we have kind of a card
layout um here's a different section page that has you know different section on the site that has a different
background color and this contact form page or contact form on then down here
at the bottom we have a footer right and
so what's well what's important is also on mobile oh wait this isn't a browser let me preview this on the browser so I
can kind of make it make it smaller so if we look on the on the mobile device
what's different focus on this so here
if you'll notice I have I removed the icon right because it was kind of making
that the menu on mobile scrunch scrunch up a little bit so I wanted to just kind of shoe it you know have what I needed
there maybe I could show the icon down here or something like that here we just have a simple layouts as you see they
still animate on the page as we scroll down here we'll see this three column layout we have the ability to Center
kind of the orphan things when they break right so before like it was all it
would always be left aligned or right aligned but now we can kind of Center things as they break into columns so we
can kind of that's a nice feature here we have if we notice this particular one in this
layout this image went from the right column to the top right so we'll see how
easy that is to do now in foundation 6 so that we can kind of get a different ordering and defining the order in which
columns are on mobile and on desktop and whatnot and then when you see down here on our
footer we've changed things around so those those lists of links are now horizontal instead of vertical because
it just works a little bit better on mobile that way right um if these were all vertical lists I mean this footer
would go extra long because it would just take up too much space and so we
didn't really need that so we kind of just made these lists vertical alright so or I'm sorry horizontal so let's go
ahead and we're gonna rebuild this page right now let's go ahead and bring up my
project back again um what I do is I'm just gonna I'm gonna create a new page
on this project um let's just create a new a new Stax page and we're gonna
start rebuilding it all reference the other pages to find you need to remember how or why I did particular things but
I'm gonna try my best to just recreate this page on the fly as we go okay
so site styles so we need to start off with a site style stack and yeah let's
just leave it at that really quick actually you know to save us a little bit of time yeah just save
us some time what I can do is I'm gonna copy this site Styles okay just to make sure that it just just makes it look a
little bit simpler okay because this site Styles um I I did tweak some of the
colors right um so I took the primary color here to be kind of a purple color I tweaked the overlay color here other
things that I did they aren't necessarily apparent is the black color
is a okay let me explain what the black color does
so inside sight styles we have white light gray medium gray dark gray and
black and those are the colors that are used by all the various foundation
components throughout the site so like um let's say we're on a in a tab and the
tabs have like a little border around them write what you know the color obviously that has a color defined
within the theme well now we have we can customize those colors right and there all these shades of white and black and
this particular site if we remember the previews kind of had like a purplish tint to it right it was kind of kind of
went for a purple blue sort of hint and if we look at this black what I do is if
we look at these RGB sliders is it's actually a very very very dark shade of
purple okay you can't if it's by itself you probably wouldn't notice that it's
not black but the small details like that just are really really important it
allows us to really make things um you know really custom to our look and the
same thing for the white right if we look at the white I it's just slightly off-white right so that it's not an
actual like super bright white so it just gives us a little bit of customizability within these colors so
you can have you know if your site was a tint of blue you could add make all of your Grey's kind of a bluish tint of
grey right and everything would really look nice and it would really pop so
yeah that's a that's a good little tip there well notice here that I have font
awesome in utility classes unloaded so these are really great because um you
know if I don't want to load actually I don't even need font awesome for in this particular project file um because I'm
not using it but I'm using this project file for um my demo videos so I kind of
needed that we're gonna look at these swatches as I build them out okay so
let's go ahead and start building out our the banner okay so we're gonna start
off with the container and the container will contain of one column and then that one column
is going to contain a header right so let's say I have a banner okay if we
look at this banner swatch um I created a background color or a background image
right that contains this galaxy image here you'll notice here so I have a background swatch and what I did is I
assign that to be the class of banner okay and you'll see a couple of things
so I also have an overlay that has a class of banner she know what I'm gonna
do something crazy or we're gonna we're gonna rebuild all this okay he might not
be exact to what we want but I'm gonna go ahead and rebuild all this okay so I want I want this this container to be my
banner I'm gonna call it banner okay and I want to have a background image so I
already have some images that I used here let me find these images this one
okay so I'm gonna drag and drop that image into the banner okay so I now have a swatch that has a class of banner and
I added a background image into it I'm gonna go ahead and add that banner class into this container here so I'm going to
say banner and voila you notice there all I did is type the
word the word banner into these settings for this container okay and it added
that background for us really cool okay now this now we have a one column here
and then what we want to do is I want to add a header stack into there and we're
gonna say welcome to foundation six okay
there we go so if you notice here the the text in welcome to foundation six is
obviously dark and that is horrible we need to make it better so what we want
to do is inside site styles I have alternate text colors so I know by default alternate is kind of like light
colors compared to darker colors for default okay so on this container stack
I'm just going to go into the class fee okay and I'm gonna do a space and alt Oh
someone asked did you did you miss selecting a theme okay good call Thank
You Blair so inside themes there is a foundation six theme okay and if you'd like what I
do is I right click on foundation six and I say make default so whenever I create a new a new wrap Weaver project
it defaults to be the foundation 16 so good question there um if you are working with right-to-left languages you
might want to select the right to left theme so if you're working with Arabic or any other right to left language
I'll you'll want that because then everything will be flipped right so but for right now obviously we want to use
foundation six and I recommend you right-click and make it your default so that any new project that you have
automatically gets assigned the foundation theme and the foundation six stacks only work in the foundation six
theme and yes the theme is version 6:05 inside foundation the stacks and the
theme will always be the same version now so just to keep things simple there's so there are zero confusion
about what version is this and what version is that the stacks and the theme will always be the same version which is
currently 6.0
okay so back to this so I set my container to have alternate text colors
which is white and now I also want to Center this text so what I'm gonna do is I'm actually gonna go to the one column
stack and I'm gonna go into the content alignment settings and set that to be
centered okay um let's just preview this really quick okay well a it's really
small so we're gonna have to make the banner bigger let's do that okay so on
this container I need to add a actually I'm gonna do it on the column we're
going to do is I'm going to add a new height contain and that's called this banner - content
why not okay so I I'm assigning this the class of banner - content I'm then gonna
go to a simple height and let's just do 66% browser okay and then I need to go
into my one column stack and I go to the custom classes and I say banner -
content boom there you go you'll see that it actually centers it right now or
makes it that height okay now right now the the content is actually aligned to
the top right um but we want this header to be in the middle so how do we do that
so to do that it's really simple inside the one column stack we go and we say vertical-align:middle okay so now that
content is vertically aligned to the middle and if I notice this header actually I wanted to be an h1 its
default h3 so now it's a little bit bigger okay cool so we're getting there
um now this is pretty decent but I'd like to make my text um larger and then
I would also it's also not great to read the text directly on top of the image it
just doesn't look right so what I'm gonna do is I'm gonna add an overlay in between I want to add something in
between the image and the text to kind of give it a little bit of separation okay
so the way we do that is we're gonna use an overlay swatch and what overlays are
four they're there in order to put something behind the content like basically to kind of separate the
background from the content it gives you an overlay right so we're gonna do is we're gonna set this to be I'm gonna use
so by default you can set the color right and you can change this color to be whatever you like okay but another
thing you could do is you can pick a swatch color which is all the colors from up here
so I'm gonna do is I'm gonna set I'm gonna select the overlay color and there
we go so I I'm setting the overlay to be the overlay color actually you know what
I uh actually I want it to be the black color and let's do like fifty percent
something like that okay and then what I need to do is I need to assign this
class to be the banner class okay there we go I said that to be banner so
now when I preview this well notice that there is now a separate separation it
made it made that entire image a little bit darker because I put a fifty percent black overlay on top of it I know that
that was maybe a little much maybe not fifty percent maybe we could change that tweak that a little bit you want to a
little bit lighter like maybe thirty percent that's pretty good okay now I'm
still not 100% happy we need we need to make this text bigger and how can we do
that so I'm actually gonna use I want to show that we can integrate third-party stacks into swatches and I'm gonna use a
stack right now called fit text and fit text version 2 was released a couple
weeks ago quietly I didn't even really announce it to a lot of fanfare hopefully I will maybe during the hall
after the holidays or something like that but if you already had fit text it it was a free update to you and it the part
of the update it contained a swatch for foundation six which is really really cool and what we could do is we could to
find a minimum and maximum size so let's see I wanted to be minimal or sixty and
a maximum of 90 okay and I'm gonna apply that I want to apply this to the header
so whiny do is I'm gonna do um banner - I'll call it banner - title okay and now
what I'm gonna do is I'm going to go into this header and I'm going to sign a sign that all of that swatch to this
stack okay let's I'm going to previous on the browser just so we can see and
if we look what fit Tex does is it tries to make the text as large as possible in
order to fit the container right pretty cool so fit text is really good you can
define a minimum and maximum value that's really slick so while that's cool
I think I think it could still use more separation like it's just not right it just looks kind of blog flat right um so
what else can we do I think we can add a shadow to it right so what I'm gonna do is I'm gonna go ahead and add a shadow
swatch and let's increase the blur a little bit it'll do 10 and I am apply
this straight to our title banner - title okay um so that wouldn't preview
that boom if you know it's like do you see the difference there like it goes
from being flat to just popping a little bit right it's not like an exuberant
drop shadow it kind of just blends in with the background but just adding that drop shadow to the text really makes it pop
and I'm really happy with that cool okay
so I'm pretty happy with a header for right now let's let's move on to other content okay so what we're gonna do is
I'm gonna add some content below this and we're gonna use a container and
inside that that was a two column stack and you know just for rapid nests sake
I'm gonna go ahead and instead of adding in all these hey you know what I should
I should do do it from scratch so you guys can see it how it's all done okay I have a two column and some text we're
gonna go ahead and add some text there and I need to add a picture into the
second column okay okay in this one we
had let me open up the images I think we had this astronaut here
well now ultimately what I do is you know I'd make sure I have a retina
version of the image and probably create mobile versions of the image as well and I'm just going to be lazy right now and
only supply one image but really what you should be doing is you should be going in here and
supplying mobile versions of the image and all that jazz so the proper version of the image is served up for the device
you need ok so now what I'm going to do
is as preview that really quick yes that's cool we need to add some
separation though between between the header and the second column and I also need to add a little bit of you know
kind of gutter to the two column stack so here's I'm going to go into this two
column here and we're just gonna add all the margins and all the padding why not okay and let's do that that adds a
little bit you know I think that I like that the spacing here but we need to add
more vertical spacing and what we'll
notice is I want to make sure that the vertical spacing between this content section and this content section will be
the same as this content section and the content section below it and so on and so forth we want to make sure that the
spacing is equal on our websites right so what we're gonna do is here just to
show this I'm gonna build out the one below it really quick so we're gonna add a three column oh I need another
container oops need a container first I had another painter and we're gonna add a three
column into that and then what I did is I had actually you know what I I'm gonna
cheat a little bit because actually I use this or use I'm gonna use a card to layout because this second section had
cards in it right so I do is I'm gonna have a card layout and I'm going to
extract that and there's my three column card layout really cool okay when I use
I'm going to take this and this and this
we're gonna copy those I'm going to paste them straight into sight styles
okay there we go so now I no longer need this swatches
stack oh okay um interesting hold on I
guess I didn't need this one I'll just keep that really quick of all we'll keep all three delete that now I have all my
cards card styles that came with the swatch inside sight styles I could keep
that that swatches stack separate if I wanted and he things just a little bit clean I'm going to take that three
column stout out of that group that was created by the template and here's my layout okay let's look at this really
quick so there's my layout I have three cards let's go ahead and swap out the
images here so there are cool spaceman stuff we're doing it let's do it right
so we have let's see let's do that on this one this cool guy right here oh
okay let's preview that okay there we go looking pretty cool okay but again we
need to make sure that we can have separate or equal spacing across all of
our items here so what I can do is I'm
going to add a a particular class to each of these sections okay or what I
can do is um actually this is what actually what I'm gonna do okay I don't want to go down to an accessibility hole
here but this container stack allows us to supply what HTML tag we want okay and
what I can do is I'm gonna make this a section okay so I'm gonna go HTML tag section okay and then I'm gonna go to
this one and do the same thing make that as section as well cool and if we wanted Wagga do is this
one up here on this container that contained our header I'm actually gonna go ahead and make this a header okay
now this this has nothing to do with like the head of the webpage that has your CSS and styles this is header it
means this is the header of my website right so this this helps from accessibility standpoint as well as it
helps Google actually as well parse your page better is it says hey this is the head of header on my website okay we can
actually if we wanted to encapsulate all of our content our main content and do a container call it main that's our quote
unquote main content and then inside there you can have sections okay I I do
plan on doing a full-blown series of videos on accessibility I think that
would be really really beneficial because there's a lot of things like that that are gonna be really powerful
okay so now that I added this as a section okay I made both of these
container sections let's go ahead and I'm gonna add a a padding swatch what
I'm gonna do is I'm actually gonna I'm gonna switch things up and over here instead of assigning now what I could do
is I could create a class and then I could I could add the class to all of my containers and then I could apply the
same padding to all those classes but I want to show you guys just something a little bit different okay so what I'm
gonna do is I'm gonna go to CSS selector this last section and well well you can
do really complex CSS in here we're just gonna do a really simple one now remember how I made those two containers
sections okay I could just type section in here and what this is gonna do is
this padding is going to be applied to every single section on the page okay so
in this case I'm only going to be using the sections to divide up my various sections on the page and so this will
work out but what i'm gonna do is i'm going to go to detailed padding and i'm gonna do top and bottom and do 48 top
and 48 bottom okay now you leave left and right at zero and if you notice actually inside
I'm here I'm it already added the padding for us and if we preview the page we'll see that we now have much
nicer spacing now something to be aware of is that if we look here this is 48
pixels and on the bottom we have 48 pixels but we also have 48 pixels from
this one so in in total there's 96 pixels different here so what can I do
to kind of make this one a little bit different now
I'm gonna I'm going to show you something really quick that um is probably gonna blow your mind a little
bit and because I'm not gonna dive it I'm not gonna go down the rabbit hole of
explaining it but there are a bunch of inside side cells you can add something
called utility classes and there there are pre baked classes that you can use
inside foundation to make your job a little bit easier and all of those classes are fully documented inside this
classes helper stack so there's a lot in there like a lot I will be doing a video
on all these classes as well but right now I'm gonna start I'm gonna use one of
these classes and I'm gonna go into here and I want to have there's a pre-baked classes for tons of padding and what I
can do is I can do PT which is padding top : 96 and what that does is it makes
the padding on the top 96 pixels it will override the 48 okay so let's preview
that and we'll see now that I now have 96 pixels here and this is 48 and 48
which is 96 right so we now have equal spacing across all of our sections which
is really cool because this one at the top is just a one-off right and you know
I could have created a swatch just for this one case but really we have these utility classes that are really useful
and they're they're really easy to learn once you do learn them and they're kind
of easy to remember so hopefully um PT : 96 gets us
padding-top 96 pixels okay and if you notice the numbers are all pre-baked in
this foundation six sizing chart okay you can't just use any number it is numbers all based on this foundation six
spacing chart okay there we go we're getting close we had a
section below this container I'm just gonna copy and paste this and but it was
different right we had we had a picture
on the right and text on the left okay
but something different because if you remember um this particular layout um
while on desktop it looked like this it didn't oops well I need to do some
mobile sizing if you look here when I went to mobile none of these columns or anything like that or respond sir right and they just
all stick to what I had it originally said so we're gonna have to work on that so actually let's go ahead and do that
okay so here inside this two column okay let's look at these sizing settings so
on small I want it to be 100% width so I'm gonna go ahead and say 100 okay and
then on small column two I want that to be 100 as well if you look you know and
when we set that you'll see that boom yeah that's what our layout is okay and then what I'm gonna do is I'm gonna set
medium to be auto and I'm gonna set medium to be auto here now I could go
ahead and I could set to be medium six it's kind of like the same thing right
um basically when you set a column to be auto um it'll auto size itself so which
means um if there's two columns it'll make them evenly spaced out okay so on
so all I want 100 and 100 on medium I want auto auto and then large will inherit from medium okay we go to the
three column let's go ahead and I wanted actually I want on small I actually want
it to be 50% I don't want to be hundred percent because I don't want three cards on top of each other on mobile I think it's just gonna I don't
need that much space so I'm gonna make them 50% on scoops column twos gonna be
50 percent as well call on three is gonna be fifty percent as well okay and then on medium we're gonna do Auto still
okay let's start let's preview this and see how that's looking Siri have our
this layout here we have on mobile it works good now this layout here if we notice we
have three cards but I this third card doesn't really look great like off on
the left there's just this empty space over here which like it's just dying for another card or something and you're like wow what am I gonna do
well what if we can Center this card right so let's go ahead and if we go to the three column stack and we go all the
way down here we have horizontal alignment which is the default is left so I'm gonna go ahead and switch that to
be centered okay and let's preview the page again and voila we now have a
centered layout so we have three it's a three column but it goes from two to one but this this kind of history this one
that goes off on the on its own is centered which makes it look a little bit nicer and more presentable okay now
let's look at this um this particular layout down here what I wanted was I
wanted let's go ahead and do we want it
small twelve and auto and auto or medium
okay so here if we notice I get this kind of the same layout that I would
have a bear where the the left column goes above I wanted the opposite though and so how do we do that
okay so in order to do that we actually don't use the column stacks the column
stacks are great for just really easy default layouts and if we need more
power we need to go into something called grid Pro and actually funny
enough there's actually a template already created to do exactly what we want so if we go to
calm swap so here there is a template called column swap and I'm gonna add
this and let's go ahead and extract that what that does is that already has the
grid Pro set up exactly what we need and let's just preview this with that with the default image and if we'll notice we
have the image over here on the right but when we go to mobile the image
actually goes above the content okay so I mean we could just not even look at
the settings and just say thanks Jo you did that template for me I don't need to worry about it let's go ahead and and fix this image though cuz we
want it to be all cool and Spacey
okay so let's look at grid Pro okay what
we'll notice it actually the spacing on this layout is different than the spacing on this layout so we're gonna have to go into this grid Pro and check
out all the same spacing alignment options so that we get the same awesome
okay so inside grid Pro what we'll notice is in grid Pro columns don't they're always
on top of each other inside edit mode okay so I know that and by default you
want it to be the layout that you want on mobile so on mobile I wanted my image
above my text so I have two grid cells and we can add a grid cell to just via
this plus button at the bottom so you can add as many columns inside grid pro as you as you want
now inside grid cell this is obviously grid pro this is Pro columns okay we
have the same sizing options as we would um inside the normal column stack so we could set you know twelve to one two
there's also shrink two content which is just a really powerful feature which will shrink the column to the size of
the content okay and then if you really want advanced sizing this is where the
power users will go ahead and to your heart's content you can make something a static width you can make it a percent
with you have different percents on different sizes and you can even provide the breakpoints and all kinds of crazy
stuff um I recommend if you unless you absolutely have to
don't use the advanced settings they're there to use if we need to but yeah I
think the the simple settings are really great even in grid Pro okay starting to
do 100% we want it full width on small Auto on mobile and we are on medium and
then we want the same thing on column two okay but how do we do the ordering
so if we look in here there is settings for ordering and what I have here is I
have the default of of column one I'm in column one that contains the image right now so on small I wanted to be default
just use the default layout but then on medium what I do is I set a number so I
said it to be one and basically if we look at column two it's set to be
default on everything so essentially I think of default as being zero okay
and so because on this first column has
a higher number on medium and large it will go below the other content right so
it'll easily swap and reposition itself and inside these numbers you can use one
through six and depend on your layouts you can really modify which columns are
in what order when they when they are used right on various devices so it's
really cool really powerful but if you really if that just completely hurt your brain just remember that this column
swap template exists and you just have to drag it to your page and it does exactly what it's supposed to do so
there we go um so grant yes if you saw inside your
grid cell you can do all Advanced Settings and you could do percentage widths or pixel widths or viewport
widths as well okay okay so really
powerful there and and obviously those settings are on each individual column so every column can be its own size cool um what was next
next was the footer right oh no I had a contact form same go ahead now I'm just
gonna copy and paste this container and I don't that grid Pro and just for
simplicity sake what I'm gonna do is I'm just gonna use a pre-baked contact form that we have um here's a contact form
template I'm gonna drag and drop that in there oh you know what I don't need that
that's why this was off there we go okay
okay there we go you have our header we
have a two column here three columns a two column that kind of morphs we have
our contact form maybe we'll add a little header to the contact form here
let's extract the contact form so above
here we'll just add a contact us you
know and then below this we had our footer so let's go ahead and add a
footer below that and I'm gonna make this container actually be a footer
stack so over here in the HTML tag for this container I'm gonna set it to be footer because I'm I want to tell screen
readers as well as browsers or Google
search engines that this is the footer of the web page so I have footer in
there and what I want to do is I'm gonna add a whole column stack and we're
really low on time I'm I am gonna cheat here I really don't want to but no I'm
not gonna cheat let's not cheat okay I do have a four column stack and in
here if we notice we had some menu items okay and so over in this column I had an
SVG stack so an SVG that had like a
little little astronaut guy I'm gonna open up its open up icon jar really
quick
I hate when icon jar does not open up my libraries
that's okay whatever um I'll just copy and paste the SVG from over from the
other page right here it is
okay here we had some SVG code that contains this little this little
astronaut dude virtually it doesn't preview too well for some reason the SVG code that I got
for this little astronaut guy doesn't have any height there with settings so that's why inside the this SVG class I
just defined a height and width of 48 okay via those these are these are more of
those utility classes that shipped with though utility classes in site styles
and then I just here let me just copy this oh actually I used grid Pro here
mmm get why I used grid Pro though cuz
the ordering oh yes this was clever okay
um I forgot about that well we'll build this out hold on let me
just go ahead and I'm gonna copy this text just go save me a little bit of time here I'm just adding some regular
stuff out here okay
okay so inside here let's go ahead and
do that so what you might not realize is those links that were in the footer were
actually a menu stack and it's pretty
cool because if we look at this menu setting what I've done here is I said on
horizontal I wanted to be a horizontal menu on mobile but then um when we go to
medium I'm gonna switch it to be a vertical menu right pretty slick okay so
so let's just go ahead and a copy DS over drag and drop oh I can't cool there
we go so let's look at that um obviously
that's a lot of menus but yeah just go
ahead and delete some of those so
they're kind of a variable length there
you go and then if we here let's preview this song on in the browser if you notice
when I go to mobile oh I gotta do the
columns right so here we do small we wanted to be twelve twelve twelve and
then we want auto auto auto auto
you know I think I'm thinking out maybe I should change the default settings the columns would be 12 and then Auto seems
like a probably a better default setting okay there we go when we go to mobile
we'll see that here I have my my SVG with the content and then we have our
links but what I wanted if we look at the other page actually let's go look at the original the original design this
was the original design if you notice what I did is I moved the icon to the bottom right and so what I did is I that
grid Pro layout where where I changed the source ordering of this guy from
being up at the top being down at the bottom okay so that's what that was a
really clever trick all right and here let's go ahead and do that really quick
actually what lose I'm just gonna copy this and then I'll show you what it does
right in again make sure this works
there we go okay so let's look at that so here if we look at the settings of
this grid Pro we have our 4 columns 1 2 3 & 4 & column 1 what I did is I change
the source ordering to go from on small it's 5 which means I want it to be on
the bottom ok medium it's 1 okay and I think the
source earning of all the other ones is well the source working here as small as 1 medium is 2 so depending on on the
size I guess it I'm more fit a little bit on medium I probably didn't need to
set actually in hindsight I probably didn't need to set the ordering on the other columns I probably only needed to
be set on this main column here in fact here let's just test that out I just set all this to be default it
will work
hmm nope
look at that again
so here on small on small we have five so it's a higher order it's gonna be higher up in the chain okay and then on
medium I want it to be one which is gonna be lower on the chain okay and
then here um I said that small to be one which is smaller than five so it's going
to come after that that's correct and then on medium it's two which is higher than calm one which is one so
it'll come after it okay that's correct hopefully that didn't just coat totally confuse you
because I know saying it out loud it doesn't make sense but hopefully that these ordering are a lot simpler because
you don't need to worry about pushing and pulling and all that stuff it's a I think I think you'll really start to get
a hang of that after you start using it which is pretty cool okay one of the
things I think we're getting really close to this page being done but there are a couple other things like right now this entire page is uh white we need to
add make me a like a section here and a section here just kind of break things up a little bit right so that's really
simple here what we can do is what did I name it let me just do the same naming
standards over here oh I did section
color okay so section color so I'm just gonna solicit I'm going to take that let's add
a new swatch in here called section color so we have a class here called
section - color okay and what you'll notice is what it does is it uses the
light gray color from the site Styles
blare menu with icon yep I haven't forgotten about that one thanks Blair
okay so now we have uh we have a swatch called section color and what I can do
is I'm going to go to this container here because I want color on this one so I'm going to say section - color and
that changes that and I'm going to go down to here and do section -
color and voila right now we have our section colors so
we're getting there again what's really
cool is if I ever wanted to change this section color okay um I I assigned it to
this light grey color right so all I have to do is go ahead and say you know what I'm gonna make this light gray kind
of like a light blue fresh blue and if you look it it changed both sections to
it for us and if you were to if this were a partial right if site styles were in a partial um that then that change
would be reflected across your entire site I'll refresh there there we go
the light gray looked better there we go
okay so we're definitely getting there I guess one thing we need as Blair pointed
it out was the menu with an icon right so how do we do that okay um so let's add a menu stack to the
page where's my name's here so we're
going to add a menu stack and what I wanted that menu above inside my container okay so I'm just gonna add in
great or or menu items and then I'm
gonna add in a menus drop zone and we wanted that mini drop zone right dead
smack in middle and we're gonna use the same exact SVG that I used down here actually
and right now he's black I'm gonna change his fill to be white there we go
let's preview that really quick here we have our menu up at the top and works
right but it's cut it's a couple couple things right and they're not it's not spaced out and yeah we need to need to
do a little bit of work on it so we actually want vertical-align:middle it
does do that by default but I'm going to set a vertical line to be middle so that um all the menu items vertically aligned
to the middle of this image okay and I think that's all we need to set on
the actual menu stack Oh alignment we need to be I think I use spaced there we
go so we have menu spaced pretty cool right now if you look here um it's this
icons touching right up at the top right so and maybe we won't want our our menu
text to be a little bit larger um Oh the reason is larger is because I already had a style in here so here I'm
gonna delete this style really quick and
okay so right now you'll see that these menu items are pretty tiny okay so what
we want to do is I'm gonna add a font style to this page now something I did skip over is I loaded two google fonts
in this project just to use supply some different fonts so we have Oswald and
lotto from Google the Oswald is assigned to all of our headers on the page and
lotto is assigned as the page wide default stop me know font so here we go
font style and let's say I want to have my menu to be 18 pixels so I'm gonna set that to be 18 will just said to be 18
across all sizes and instead of assigning the class here when I was I'm
gonna I'm gonna go to component and I'm going to choose menu
Oh menu and what that does is that then
increases the size and you'll see it right here um it increases the size of the font um inside the menu now let's
preview this really quick what you'll notice is that actually increase the menu down here as well because these are
menus so how can we restrict the size to just this main menu okay
well if we go back to this font style when we chose the tool when we chose the
menu component we can choose a parent class and this menu is inside of what
the banner right so I'm gonna choose it be the parent class of banner so right
now this menu is inside of this container that has a class of banner inside of it right remember we add that
way early on so now this font style is only going to be applied to the menu
that is inside the banner pretty cool
okay now there's some other things like um let's say I wanted to add in like
maybe some sort of overlay with this banner right or with this menu right one
thing I could do is let's just go ahead and add another container there okay and
let's add the menu inside of there and
we're gonna call this I'm gonna put a class on this called menu wrapper just
because this container is going to wrap our menu menu - wrapper okay and we're
gonna apply some styles to this let's go ahead and and add a background and what
I'm gonna do is I'm going to we have our class remember in here we were going to do menu - wrapper and then I'm gonna
choose swatch color and then we're gonna choose the overlay okay
so now that container has a background color and let's preview that really quick so it has a background color but
it's still touching the top so we're going to do is I'm going to add a little bit of padding around it so let's go ahead and do some padding and we're
gonna do again many wrap whoops menu - wrapper and we're just gonna add the
same padding around let's just do like 24 or something like that let's see how that looks
okay not too shabby um now if you notice here this doesn't go to the edge oh
shoot you're not seeing this I'm so sorry if you notice here this isn't
going to the edge the menu isn't going to the edge here why is that well it's
because it's inside of this container okay um because containers the contents
of a container will constrict itself to be the site with so there's a couple
things we can do inside this parent the banner container um we could change the sizing from site width to be full width
um so if we did that let's see what that does for us that pretty much does it for
us right you know that there are some other more probably more complex
solutions but I think that's probably the simplest thing we could do is just set the parent container that contains
this entire header to be full width right so then its contents will go the
full width of the browser cool now if
you notice here when we went to mobile though um again we hit that issue where
this this guy kind of shows up you know Ike yeah right what's going on there
so what I can do is I can go to the menu item that contains that SVG and I'm
gonna put in a class again these are one of those utility classes I'm gonna do hi
- 4 - small - only and when I do that mean we preview we go
down you'll notice that that the guy is now missing he's gone on mobile right now these menu items were a little bit
larger than the previous ones so they do they still break but I think this looks
a lot nicer now what another option that we could have done is there is a template or what's it called Center logo
so I do have a a template for Center logo and what that does is here let's
just actually do it really quick what that does is so you could have dropped that on the page to get what I just
built okay and it does it does do one extra thing okay for us and let's just
go ahead and do that really quick I'm gonna just do a visibility stack above the menu and I'm gonna copy this SVG
into there um I want it centered okay
disability we want to show for small only there we go
so I have a visibility stack that contains this s e-g that we're gonna show for small only okay oh it's not
centered for some reason maybe if we did hold on let's I did container with SVG
in there and then use the visibility in container to be show for small only
content aligned centered sorry if I did that really fast oh I did
oops
that's crazy
that's interesting how does that do that in the template then let's just look at that really quick
I had a visibility show for small only oh I'd scale image
hmm wonder what the difference is between the one about here crazy sauce
Kix I'm going to drag that up there
hmm interesting I have oh that's that
the knavish shouldn't really matter we could set this to be a nav site with
overflow:hidden merit is it something
with this particular SVG that's funky
that doesn't mean that either
not sure it must be something with funky with this this SVG Oh wonderful oh okay
interesting there goes
let's put that back inside of our container
there we go I like that I actually I really like that kind of
menu it's really nice okay I think that it does oh my animation
I won't replicate all the same animations that I did in that project but really really simple to use similar
to foundation one so if we just do let's say I want to animate in this text sorry
you're just dragging in animate in do that we say we want to fade that in
delay maybe we do a short delay speed is slow then a fun one is like if you were
to animate to call you know two columns stuff in if you put animate ends on each
individual column content okay and we do
is you animate this one from the slide in left and this one you want to slide
in right okay we'll do a short delay in
a short delay let's preview that really quick you know it here if you notice
that see how the the two columns kind of just came together really kind of cool and like with this with this layout here
the three columns what you could do is unless you show you from this this other page because it's just um choosing
different animations and whatnot okay here what we did is that this one slides
in from the right the the Far column slides in from the left and then the middle column slides in
from the bottom right so when we scroll down on the page we'll see that it kind of just Boop right really slick really
good nice looking but one thing I did in this I totally forgot about that inside
here is the original one I added captions to these images so let's let's see how to do that really easily that's
super easy to do okay so here um this
picture I want to add a caption to the bottom so we're gonna do is we're gonna scroll down and we're gonna find the
caption stack there's a caption
I add that there all I have to do is add the picture inside and you can you can
change the text view whatever you like and that's it that's all you do to add a caption a
nice little caption to your image like that's pretty slick okay Blair after you
assign a class to a swatch when choosing a custom class under HTML
could it be made as a drop-down or flyout menu rather than typing um that
would be nice it's something I'm talking to Isiah about but not right now it can't be made um a drop-down or anything like that you
have to um you know we are gonna have to come up with decent workflows for you
know organizing our swatches so one thing I didn't review yet is eventually
we're gonna come up with we're gonna have lots of different swatches here okay and so I will do a video on my
suggestions for organizing swatches and
let me show you what what you could do okay right now there's there's two different ways we can organize swatches
right now um first is actually let me show you maybe the simpler way okay um there is a
swatches stack that you can add to your page okay and let's say I want to use
this stack for all my banner I I could do banner swatches Aaron all even put it
as the title and when I do is I could take all of my banner related swatches
and I can move them into here oh whoops
I was weird I do that
there goes hmm not sure what happened the first time
there you go so now I have a banner swatch right that I can then I can hide
this on my page I could only include it on certain pages if I wanted right so um
you know we can now group our swatches with this stack let me show you another
another possibility okay and you could have as many of these swatches on the page and you can add stuff for tea here
you access to all the swatches from here as well okay let me let me undo all that
and show you another methodology okay another methodology is if you add here
you'll notice if you own my free pen stack like ever I have a stack that's free it's called pen if you add it into
site Styles what's kind of cool is you can go ahead and take as many of these
as you want let's add them inside this pen okay so now I have this one giant
pen that contains all my banner stuff right so I can go ahead and say banner
styles and in this pen what I could do is I could just say I can collapse it
there we go okay so now I have a pen and that
contains you know all of my banner styles of some reason it got a little
bit large I'll have to look into that if it's if it's just the
[Music] no that makes it a little bit better but all right I'll look into that I'd notice
that before I think it's just the size of my wrap Weaver window but if you see
here now now that I have you know all my banner styles are kind of organized within that pen right and I can show it
again obviously if I click away you know it's kind of nice where you know it
still kind of hides them all you know it's nice if you want to fully collapse
it you could do that too so pennant pen could be a nice way to organize your swatches into kind of groups and allows
you to have more swatches in less area okay one thing I should note that is
inside site styles you can show detailed site style palettes okay that's inside
the top there's this checkbox and that will make sure that that will show everything right um and right now if you
just click on a swatch it should show you the details however you notice when you're like dragging stuff around
sometimes it opens multiple them at a time that's another thing I'm kind of
working with Isiah on is to make that selected state more predictable but I
think it's a pretty clever idea but yeah let's see any other questions
can't wait for the click by click foundation for dummies tutorials yes I you know my goal for those videos are I
want to make them as short as possible not hour-long things I think that you know sessions like today are very
powerful as well but having those just really quick you know two to five minute
videos about a one particular niche thing will be really really great does
it affect the speed at all to position on the page you know it doesn't matter where this where the swatches are on the
page it doesn't matter at all you can have the swatches anywhere you want on the page and you'll be good to go
um Dana says everything about foundation is totally baffling to me um
Dana I I suggest you join us on Friday Friday at 1:30 p.m. Pacific
we're gonna have a my Friday hangouts and uh you know it's a completely open
discussion you can ask me questions directly me and other members will be able to happy to help you out so yeah
Dana I would love to chat with you about that or go ahead and post if you have any questions on Weaver space please go
ahead and do that so yeah that pretty
much wraps it up for today I I went a little bit over again but yeah I hope
you enjoy foundation 6 um it is available right now oops go ahead and head over to Weaver
space and you can purchase it the the normal upgrade price is $79.99 you
purchased it if you qualified for one of those special discounts basically if you
purchased foundation one in 2019 then you get a special discount and you
should have got an email yesterday that told you how to how to get that discount
um if you didn't check your junk mail it definitely got out to everyone that purchased um this year so yeah if and if
you still didn't get it shoot me an email I will get to as soon as I can and obviously during a big
launch like this um I am getting hounded and bombarded with email so thank you
very much I hope everyone has a great turkey day a great Thanksgiving tomorrow
for everyone in the u.s. yeah go and don't eat too much go out and splurge
and but eat a lot right it's fun I guess even a lot is fun and yeah
play around with foundation foundation 6 you don't have anything else to do while while you're sitting on the sofa full of
Turkey break out your laptop and play around the foundation 6 or watch the other live streams that I did of the
past couple weeks and I can't wait to see what you think about it I really appreciate it thanks very much for all
the love that I've gotten on foundation 6 so far and yeah users have been really
really loving it and I can't wait for all of you to start using it as well so take care have a
wonderful week and we will see you soon oh I guess I should say for those either that stayed on this long I having a
Black Friday sale and it will the Black
Friday Co sale will be for everyone that purchased this foundation 6 so if you
buy foundation 6 you then qualify for the Black Friday sale so when you
purchase foundation 6 you will get an email with a special discount code where you will be able to get a discount on my
entire site that does not include foundation 6 so you'll have to buy foundation 6 at the normal upgrade or
new price and once you do that you will get an email probably by tomorrow
hopefully I should have it set up by tomorrow with the special discount code that will let you purchase anything else
you want my store at a nice discount so be on the lookout for that email again
that is only gonna be for a foundation 6 users so you know I just want to give us an extra thank you for all for all of
you that are purchasing foundation 6 early um and um I appreciate I
appreciate you guys and we will see you on Weaver space and take care have a wonderful week make something great bye