0:00 sorry for being a little bit tardy um i was having some uh computer issues
0:06 but uh yeah we're all up and running uh
0:11 oh shoot the chat uh hold on let me log into the chat um
0:19 what am i doing here oh shoot my display
0:24 hold on one second
0:32 and
0:38 i had to reboot my computer and man things were not working sorry about that and now my
0:47 logging into the chat i hate recaptcha bicycles okay pick all
0:55 the bicycles
1:01 oh i missed one cars
1:13 okay let's see
1:21 okay someone in the chat let's see is it still connected can you guys hear me
1:27 all right
1:32 is it working no one in the chat all right sorry i'm late again
1:37 um and i just realized i didn't change my screen resolution so let me go ahead and do that really
1:44 quick and now my mac is like super sluggish
1:58 there we go mr francis rion dr bob's in the house excellent
2:07 okay um
2:16 display
2:25 okay
2:37 let me just get my screen up guys sorry i just adjusted my resolution
2:43 and when you do that on the fly it doesn't like it so much
2:49 so
2:55 okay hopefully that's gonna be okay um
3:00 excellent i think we're good um so today we're going to be talking about
3:07 one page websites right and um most of you probably know what
3:12 that is right it's basically your entire website is on one page right
3:19 so what are the pros and cons of that
3:25 first off let me say that i i think one page websites do have a place i think they're they're nice and
3:31 convenient um but a lot of times i feel
3:37 some people try to cram too much information right a lot of one-page websites are
3:46 like a mile long right i mean they're just you know you just scroll and scroll and scroll
3:51 and i don't know i i i think that's anti-beneficial right that's that's hurting you i i feel um that is a
3:58 personal preference i guess because there are i guess a lot of
4:05 you know statistics or you know proponents of that kind of web page
4:10 right um i personally again i don't think it's great i think making the user scroll and
4:18 scroll and scroll forever to find out the information that they want or
4:24 um yeah just doesn't work out for me um in a lot of times but if if you just have you just want to have a simple web
4:31 page that has like hey this is who we are here's some information about us uh
4:37 here's a contact form and you know and you're done right um it could work out
4:42 great um today we're going to be looking at two different solutions for one page websites
4:48 and um i'm not going to dive in and really go into building
4:53 because i want to show us two different kind of ways um we're gonna give you a cursory look
4:59 on on how on how those things can work and what products you could use okay um and
5:05 let me get my project open while we're chit chatting here
5:11 so the first product that that i'm going to be looking into today um and kind of showing off
5:17 um is uh it's been around for a while um it's a it's a set of stacks that i have
5:23 called screens okay and
5:28 okay and let's open up
5:34 let's go there we go bring it over here open up safari
5:42 and where's rapidly we're opening okay screens everything's on everything's
5:48 open on the wrong place today things are just not going well
5:53 all right here we go
6:00 so let's just check out screens okay um so what is screens
6:08 it um it's a pretty cool product actually um
6:14 and it builds one page websites and it does a very interesting solution where um it's kind of like
6:23 kind of like a keynote presentation right where um basically you know everything like you basically break your
6:30 website up into screens hence the name screens okay and you can nicely just kind of
6:38 scroll through individual sections okay you can you can actually click
6:44 um you know and go to individual sections with the navigation
6:49 okay um works really really well it's a cool animation
6:54 right um and you can also do slide um so that's vertical animation you could also do a
7:01 horizontal right so kind of like a slide so we can go to the side here
7:08 oh there it goes so we have them you know going to the side
7:14 and then here we can continue to go down um you can do all kinds of stuff you also have the navigation dots over here
7:20 on the side okay so that um and then we have this cool
7:25 little navigator that you can then put anywhere on the page and have it always be there or whatnot it's a really really
7:31 really really cool stack okay and so check out screens
7:38 um now we'll dive into wrap weaver a little bit and there it is
7:43 okay um so we'll give you a quick tour of screens here
7:50 and one thing that i should note with with
7:55 screens is i think the number one thing that people do wrong with screens
8:02 is that they try to put too much information because uh with screens you know
8:08 basically you know this goes down to let's say mobile view right and you know the screen can be a lot smaller right
8:15 and some people tend to put try to put in too much information inside of a single screens slide
8:21 um so try to you know keep the information um you know down to a minimum in your individual sections
8:28 um and then uh yeah now screens also does have the ability to
8:33 i think we're going to go over in a couple of these demos here okay we kind of already saw this this demo right um
8:40 so you know here's an example of you know navigation oh dolls as the dots
8:46 like i said right uh so you see over here on this on the side we can navigate to individual pages
8:53 within here as well which is kind of cool it's a very very interesting very cool
8:59 um setup for a one page website now
9:04 screens does not require won't work with like your traditional
9:09 themes okay it will work with um foundation one it'll work with foundation six it'll probably work with
9:17 other blank themes as well if you don't have any of those uh you can all it also comes with like a
9:24 blank theme um so then you can just use that okay um
9:31 and in this particular this is the demo project that ships with screens
9:36 it uses foundation one okay the demo project does
9:42 and if you don't have foundation one you can always on the foundation product page
9:47 quick little side note on the foundation product page you can download a um
9:55 a preview version of foundation one it only works inside rapidweaver
10:00 but it allows you to work with various demo files um a lot of my demo files use foundation one because
10:06 it was you know i did a lot of product development in the six years foundation one was around right
10:12 um so yeah so foundation one is in a lot of demos if you don't have foundation one
10:18 um just go ahead and head to the foundation product page and download the free preview stacks so that you can actually
10:25 you know preview and use a lot of the demos you won't be able to build websites with them or you won't be
10:30 able to publish um but yeah the least the demo files will work
10:36 better for you okay um so this is the page
10:42 there's not really too too much to it to be honest with you um so inside the screen main screen stack here okay
10:48 um we just kind of create these screens pages and then inside each individual
10:53 screens page okay like for example this is the home page right this is this is page number
11:00 two okay and um as you saw that you know there's a screens animation stack um so there
11:06 are many stacks that comes with screens right there's an animation stack um so
11:13 that uh if we noticed when we look at uh let's just go to a page you see
11:18 these particular animation stacks work great with with screens so that when a
11:24 particular screen comes up those animate on on basically
11:29 on the page load or when that page comes into screens okay there's the main screen stack which is like the
11:36 the major uh like the whole overall container okay for for all of your site
11:42 so basically inside screens you'll have a screens page which we have here okay in each individual screens page is
11:48 obviously a page okay um i'm not going to dive into all the settings here but you have a lot of
11:54 background settings and color settings and a bunch of other settings for for all individual pages
12:01 okay there's a screens slide okay which um is
12:07 this ability to go sideways okay so that's what the screen slide is
12:13 um there's the screens navigator which is
12:19 oh navigator it's right here this is these little buttons now in this demo i only have it on this one page but you
12:26 can also have it like fixed to the entire site so you can have like a little you know d-pad um and what's pretty cool about that is
12:32 um it's pretty smart where it knows um shoot i don't have it in this demo but
12:38 it's pretty smart whereas let's say uh there were no more pages down this button here would be like be disabled so
12:45 um it's a pretty smart little navigation navigator stack um it's pretty slick
12:51 um let's see and then screen styles so if you're not using foundation okay um because foundation users you
12:58 know we're used to site styles and screens has a slightly slimmed downed version of that
13:05 called screens styles so um use the screen style stack if you're not
13:11 using foundation um and but if you are using foundation one or foundation six you don't need
13:17 screen styles and just go ahead and use site styles okay uh screen support is baked into both
13:23 foundation one and foundation six so you should be golden there okay
13:29 um and lastly is the menu so uh here we have the screens menu that obviously automatically links to all the pages
13:36 okay it's kind of dynamically built it also does mobile view so we have the nice mobile um you know
13:42 menu there we go okay um screens also does
13:48 something called auto scaling which um to some extent it tries to make sure to
13:55 fit all of your content within a single screen okay it tries to i mean if you have just a a
14:01 huge amount of content there's only so much it can do but it does try to help you out a little bit there as well it's pretty smart
14:08 okay um so yeah screens is a great thing let's look at a couple other
14:14 demos here so in this particular uh
14:20 demo oh i think this demo might be
14:25 okay uh something happened with this demo i'll probably have to play around with it it uses off canvas
14:31 so in here you'll notice that i'm using foundation's off canvas menu uh which
14:37 the little the little hamburger up here is currently not working but it's there just pretend it's
14:42 invisible okay so it's there and if you click on it it brings it over
14:48 and here we have the external menu so we can navigate to different screens pages
14:54 via any menu stack that we want right so if you're using foundation six you can easily use any of the foundation six
15:00 menus if you don't like the screens menu you'll see here's another version of the dots where they're little squares and
15:06 they're also on the left hand side okay you see here the the each individual
15:12 screen is actually a nice background gradient as well so very attractive and nice
15:18 okay um full image
15:24 this allows this shows us how we can use not just colored backgrounds but we're also using um oh here's an example of
15:31 the navigator where the navigator is fixed to all pages um and uh and yeah
15:37 it's always there and it kind of smartly enables and disables buttons based on it
15:42 what's available to the user okay we have uh here's an i
15:48 uh not sure what happened in the menu you'll notice that the dots on this slideshow navigation are hearts so you
15:54 can kind of customize those same thing over here on the side right so we can click on those and get
15:59 um and get to there you also notice on the bottom we you know we have multiple navigation things here probably too much
16:05 on this one right we have the nav here on the bottom um i think this one
16:11 hmm i didn't i didn't play around with this demo first um
16:17 something something happened to that mobile menu but um we'll look into that later maybe i'll
16:23 try to fix up this project file and update it um okay so yeah the navigator but just
16:30 again i wanted to show you here how we can use background images um for our
16:35 pages which is pretty cool okay um
16:41 another thing is now we're talking about one page websites here okay um
16:49 but you could also use screens as like a part of your web page so here i have
16:57 screens at the top and if i scroll down oh man all the images on this demo are broken um
17:03 um the second part of this this demo page uh is just a normal website
17:08 okay um and if you didn't like the snap scrolling inside screens
17:14 um and by that i mean if you notice when i scrolled like through this demo
17:20 it scrolls no matter how it kind of hijacks your mouse scrolling
17:26 some people love that some people hate that um and yeah i mean it is very cool but
17:33 uh you can also make it so that it can build a normal scrolling website so if you see this particular section here is
17:39 actually a larger section so it's actually bigger than the screen so this shows you how you can how you
17:45 can use screens to create a normal scrolling website as
17:51 well but it still kind of gives us the nice you know we can still snap to scroll to
17:56 various sections of the page and whatnot so um it's kind of a best of both worlds if you really are are mixed on what you
18:03 want and you can also like adjust it so that you know that that particular feature maybe is only on mobile um
18:10 because you're gonna have you know less screen real estate so your content is going to be bigger and stuff like that
18:15 okay um next i show you uh and this just shows you some other integrations that we've
18:22 made with uh oh and look the video the video file's broken darn it
18:29 um shoot let's see if we can fix this eclipse video
18:35 oh man that url is old
18:43 all right hold on one second let's let's let's fix this for us really quick
18:50 um let me go to the eclipse demo and helps if i learn how to spell
18:58 there we go let's go to the demo here
19:08 actually you know if we just go to the screens demo i could probably show you there it's because i'm pretty sure this the demo on the screens
19:15 works let's go to demos
19:20 background video with eclipse
19:25 here we go so here i'm loading a background video um and so we kind of have a background
19:32 video across the whole site right and then the pages are kind of overlying on
19:37 top of it you know pretty cool um different kind of a different type of thing but um you
19:43 know obviously you wouldn't have a lot of like content you would read um on something like this but you know it's
19:48 interesting um so there's that uh and then the basics let's see i don't
19:54 remember what this demo is i think this is the web page i do this in the screens um in the screens how-to
20:00 video i think this is the page we actually build um it's just a the raw basics okay so
20:08 yeah not very exciting demo but uh one other actually cool feature uh
20:14 with screens if you guys don't know um let's go to
20:21 impact because i remember i built some specific
20:27 integrations between scroll and impact and here we go it's actually on the
20:33 impact demo so this demo uses screens and impact
20:39 together and basically what it does is that it gives us you can use impact as the
20:45 background of your individual screens so as you see here i'm kind of uh the background of this particular page is
20:51 like a slideshow of images and that is achieved with impact and then we can kind of scroll through
20:58 and here we see a background we're scrolling through multiple videos it's kind of like a video slideshow in the
21:04 background using impact and screens so um very cool very interesting um so that
21:12 has to do with screens you know um bill burden um who's if
21:18 you've ever joined the hangouts um i've talked about him a few times he's been mentioned in the in the newsletters
21:25 he recently um he's been using stacks and rapid for a few years now
21:31 and he recently got screens and it kind of part of the reason what spurred this conversation was a little
21:37 bit we he was just blown away on how how well it worked for him and he's like you need to promote this
21:44 more you need to you know this is great for you know simple websites people that are just getting started just works
21:50 really really well so yeah uh that's a that's a case study from bill burden himself and
21:58 yeah hopefully you know check out screens it's pretty slick it's a great way to build a one-page website okay
22:07 so what's next any any questions let me see uh remind me of type forms
22:13 uh oh yeah rico yeah it does uh it does kind of look like type form because you know in type form you fill out a form
22:20 field and you click click submit and then it goes to the next field that's uh that's an interesting idea i
22:26 wonder i wonder how that would work like like putting in having like you know one or two fields
22:32 in each screen and just clicking next having it go to the next page but the screens is like one big form
22:41 that'd be pretty cool actually um maybe if we have a little bit of time afterwards maybe we can do a proof of concept on that or you know if not maybe
22:48 on friday if you want to see that kind of proof of concept out um that would be pretty interesting building a
22:55 building a form inside screens i don't see why it wouldn't be doable
23:00 um pretty cool idea thanks rico good one uh james asked does this integrate with
23:07 total cms so yeah i mean if you want to integrate your
23:12 um you know integrate your pages into so into or integrate total cms content into here
23:18 you can totally do that um you know here's another interesting perfect
23:24 concept idea is using for the more advanced users that have used something like total loop you
23:31 can like dynamically create possibly create a screens page
23:37 i don't know if i don't know about that that might not work out but what if you were like be able to
23:44 dynamically create a screens page for you know your top five blog posts or
23:49 something like that that could be interesting i i'm 50 50 on whether that would work with total loop um total loop
23:57 and basically creating these screens pages automatically that could be fun to try um
24:03 probably won't get to that one today but yeah that could be interesting um that could be fun to play with
24:09 uh but all your content and images and blogs you can integrate all that into screens uh okay you can use any other stack in
24:17 the screens like you would any other web page but if you wanted to you know edit your content and your you know headers and
24:23 images and all that jazz with total cms you could totally do that um you could have a blog list in here as
24:30 well um you know maybe again you don't want you want to limit the amount of space um in that but you know maybe two
24:37 or three blog posts and then you know like while screens also i should say while screens is
24:44 kind of made for this one page thing there's no no reason saying you couldn't have this be a page in your overall
24:51 website as well right so it could be maybe an interesting landing page or like ricoh
24:56 suggests maybe a form page or something like that right then um
25:02 that you then integrate into an overall web page right so um
25:07 you know then you can just with your own custom menu linked link out or linked to other pages just like you would with any
25:12 other foundation 6 or foundation 1 menu stack okay
25:18 so yeah interesting idea cool one because the screens menu
25:24 doesn't look like you can add external links to the screens menu no it only builds out the links
25:30 for all of the pages dynamically which would be
25:36 here we have the page title and the anchor link so if we were to do
25:41 total loop man i'm going i can't let myself go down that rabbit hole you're making me go down that rabbit hole james
25:47 you ragged muffin okay um cool idea though those are some very
25:52 interesting ideas with screens guys i like that maybe we could do a follow-up live stream i could play around with those maybe do a follow-up on some of
25:59 those cool ideas okay thank you very much so
26:05 now now we're just gonna dive into you know i know a lot of you probably have foundation six okay so uh next up is
26:12 we're just gonna dive in and build a one-page website with foundation six
26:18 okay i'm not gonna save that project uh let's just go ahead and you know i'm just going to create a brand spanking
26:24 new project file brand spanking new project
26:29 um make sure my theme is set um
26:34 yeah okay so brand spanking new project go ahead and obviously we need site
26:39 styles okay for fun i always uncheck these bad boys i like minimalistic
26:46 and streamline edit mode too okay so
26:54 foundation is just a set of legos that let you build
26:59 whatever you want right and there's a lot of pre-built in tools
27:04 that allow us to build out a one-page site super easy
27:11 okay and there is actually a template in here
27:18 that uh makes that at least uh you know gives you an idea of how to set something up
27:23 like that really really easy and
27:31 that was a navigation
27:37 i think it's called scroll to nav yeah there we go so yeah there's a template if you don't have the the
27:43 foundation six templates that are free go ahead and download those on the product page
27:48 uh let's go ahead and extract this template okay and let's preview this bad boy
27:57 so here we see i have uh one two three four five sections
28:03 okay um i can click on this right um click on four blah blah blah
28:09 click on five blah blah blah right now obviously i think it'd probably be better if this navigation was fixed
28:15 i should probably do that actually in the template but we can fix that right so now in this particular demo i made
28:21 each of the sections half the width of the browser height right because let's say um you know
28:27 obviously at the top of your web page maybe you want some sort of you know big banner thing right um and maybe section
28:33 two is you know if you're a restaurant maybe it's your menu and then you have a you know you top reviews and then you
28:40 have a contact us section right let's kind of build that out could be fun right
28:46 so first off let's make this uh this menu um sticky how about that okay
28:53 [Music] i thought i made this menu sticky before
28:59 maybe i changed things class sticky menu
29:06 position oh yeah we changed the position sticky stuff
29:12 let's do fix to the browser okay um
29:21 yeah fixed to the browser top 0 preview
29:27 there we go all right that makes that makes better sense okay so now the menu is always there
29:35 and uh it dynamically changes by default to this section that we're on so we're currently in section two currently in
29:41 section three currently in section four so on and so forth obviously we can't we
29:46 can't go all the way to section five if we were to click on it because it doesn't go all the way to the top right there we go
29:53 so please go ahead and feel free to type i'm just kind of kind of free form play around with this a little bit right
29:59 show us what we can do uh we'll go into the menu options and how a lot of this was built okay
30:05 um so the first off actually before we dive in the menu okay let's just go ahead into each
30:12 of these sections okay and what we'll notice is uh i have
30:17 pretty simple i have five containers here okay so each section is in in its own
30:24 container okay um i guess we'll dive a little bit into some interesting stuff that i i tend not
30:30 to mention sometimes is each of these containers okay that that wraps this section of my web page
30:38 has i set the by default this html tag is set to div
30:43 okay um but for symantec for seo purposes for ex more for
30:49 accessibility excuse me accessibility purposes as well um we can
30:54 choose something other than div div is just um it stands for divider
31:00 it's just like the most generic html container possible
31:06 okay now html has a lot of other containers that we can use
31:11 that don't necessarily give us any style it doesn't change the way that the website looks doesn't change the website
31:19 how the website functions it's purely for when computers aka either that's whether
31:26 that's google or whether that's an accessibility reader reading your website
31:32 changing that to be something that's more informative can help these devices
31:39 better parse your websites okay so in this container
31:44 we can change it from div to section so we're saying okay everything that's in this container is one section of this
31:51 web page okay and section is a very granular term within this container i could have
31:57 potentially multiple different sections okay but um and if we wanted to we can also do an
32:03 rd roll um you know that's more accessibility we're not not gonna dive too far into
32:08 accessibility but you can do all kinds of stuff okay but um at least defining out if whether
32:15 something is a section other common ones in here is header is
32:20 um footer okay um and then main main is like your
32:26 main content area right so if i really really wanted to do
32:33 something you know for fun actually let's do this let's say this is my um you know the top of your webpage you tend to have like a um a hero banner or
32:40 you know um this is my header slash banner okay let's make this a little bit
32:45 more useful so here i have header banner okay and so
32:51 what this is is this is my header on the page so i'm going to change this to be header
32:57 okay instead of section and if we preview that you know it's exactly it does again it doesn't change the look
33:03 and feel of my web page at all um but that just makes
33:09 our web pages more user-friendly to be read by computers
33:15 okay and let's go to the very bottom let's say five is going to be our footer and
33:20 that's gonna have like you know various links and where to find us and all that jazz right so let's go and do
33:27 footer down here and then i'm going to go ahead here and
33:32 do footer okay now um
33:39 now let's say sections two three and four okay are our actual our main body that's
33:46 like where our main content is okay so let's go ahead and do like um you know i
33:52 don't know
33:58 oops we'll do like an about us section
34:05 a uh products section
34:10 and contact us how about that okay
34:16 and all these all these containers are set to be a section right but we could do something else to help our
34:23 help us out with the computer bots reading our websites so what i'm going to do is i'm going to
34:29 add another container here okay and this container is going to be
34:34 called main okay so this main container contains all the
34:41 main content of our web of our web page so i'm going to move all those three containers inside there
34:49 so i have inside this container this is my main let's go ahead and say main right so i have main and then here
34:57 we have the about us section because it's a section tag and then inside this one is the product section
35:03 okay and here's the contact section okay and then outside of that main
35:08 is our footer and again if we look at that
35:15 oops so a that little block section here let's go ahead and i'm going to go into this main container let's do sizing auto
35:22 no wrapper and there that fixes our um now why why was that so by default
35:29 containers have a um have a sizing set to site with which is
35:34 the width set inside site styles and which is 1200 pixels but i wanted these black sections to go full width right so
35:42 that's why in that main container uh where it is here it is okay
35:47 i just set the size navy auto no wrapper um so it's just a generic just a
35:54 most generic basic container we can have and uh yeah that gives us this section
36:02 okay and we can go two three or and then our footer okay and maybe
36:09 you know footer you probably don't want that in the in the navigation right but you know hey we have it
36:15 okay um we can also have a back to top button as you see here it takes us directly back to the top super fast
36:23 okay bill burton is here and he approves of
36:30 that message thanks bill um about screens earlier okay so
36:36 there we go that kind of gives us now another thing if you notice that uh if you're wondering how some of these
36:42 things are done done um a lot of these containers take up 50 height right but let's say we want we
36:49 want each section to be 100 height kind of like how screens was right um so if we go into here
37:00 oh and she so i created two swatches here one's called half height and one's called fill height
37:06 okay and inside there i think is on these one columns yeah so inside here
37:11 inside the one column i put in a class of half height okay
37:17 um and then i have another one called fill height so let's say like maybe some of these sections i only want half the
37:23 height right so maybe um the hero banner let's do that one fill height so again i
37:29 created the height swatch set to be um
37:34 uh well you know what yeah here let's do this is fill height which is actually a
37:41 little bit different um which is i'm not sure i'm actually using that
37:46 anywhere yeah okay so i'm actually going to change this fill height to be instead of
37:53 100 full container height we want it full browser height okay so i'm going to copy that class
38:01 and then inside here we're going to change that so the container has the one column has
38:07 the fill height and let's say how about everything but the footer the
38:13 footer will still be half height how about that or the contact us and footer will be
38:18 half we'll do let's see full uh on about us
38:24 full on the products okay so now we have full height on the banner
38:31 and if we scroll down we get full height on about us and we have full height on products and
38:37 then we have a contact us form and a footer kind of all in in half right
38:43 kind of a nice way to uh break things up right
38:50 so that's how that height is done
38:56 next up is so what are we gonna do let's fix this menu okay so right now this menu
39:02 says one two three four five let's just um let's just fix that let's just do home
39:08 is gonna be for the top okay and then we had about
39:15 then we had products and we had contact
39:26 and uh you know what footer i'm just going to re erase that we don't even need it on there
39:32 okay here but it seems like we need any more than four sections i don't know whatever
39:38 um oh how about how about where we'll add another section here and we will call it
39:46 uh reviews how about that
39:52 that should probably be above contact okay and reviews let's see oh we wanted
39:57 this to be full height so um that is fill height
40:03 and here we wanna we want to keep our black and white thing going on so we're gonna
40:09 delete the alt from that and we're going to add the alt to that there we go
40:14 so now we we keep our black and white alternating sections going and that's
40:19 just done with the alt class which is you know done with some swatches and and stuff like that alt class is kind of a specialty class
40:26 that allows you to do light and dark themes pretty easily because it also by default changes the
40:31 text color to be a light color
40:39 let's see what we're looking at here about us products uh oh reviews uh we've got to add a
40:45 review section um
40:53 reviews all right there we go now one thing um you'll notice is how how do we create
40:59 the links to the let's start looking at this menu now okay um
41:05 so in this menu okay uh because we are creating an on-page navigation and we
41:11 want this behavior of um the sections being tracked in the menu
41:16 and it's linking to you know portions of the web page
41:22 okay how do we do that so in the main menu in the menu stack and this works on any of the menu stacks
41:28 not just this this default you know normal menu okay it'll
41:33 work on all menus click on um on page navigation now we
41:38 wanted to style the active menu because we want the active section to be styled okay
41:44 so that is important and then here is the um animation settings for the on-page
41:50 navigation that scrolling option right so you can set all kinds of different ones linear is sometimes a little bit
41:58 you know boring so if we wanted we could do like you know in how about like an ease in
42:03 out quad something like that and what that is what that means is the animation
42:08 time it takes to go to um a particular section okay so um a lot
42:14 of times any of the easing options are going to look better than linear okay i'll be honest okay linear just means um
42:22 it doesn't have any sort of going slow going fast going slow right or something like that so it's just kind of a you
42:27 know easing gives that sort of effect where linear is just a constant you know if you take two seconds it just goes uh
42:34 two seconds right but but with an easing depending on on what these are it could
42:40 be you know it goes fast slows down and then goes fast again right um so it just
42:46 gives it a much more natural animation um that someone might like
42:51 okay so uh then we can have the the speed uh the offset that is
42:58 um how so if we scroll like the offset in which
43:03 um let's say you wanted these to be offset by like 100 pixels you wanted them
43:09 always to be like below the menu for top from the top of the screen right by
43:14 default it's gonna be zero okay and then um threshold is 50 pixels which
43:20 means um the number of pixels to use as the marker for the location changes oh so
43:27 that's just you know how many pixels away is it going to change right so when it's 50 pixels away it's
43:33 going to change away from the top right basically
43:40 okay um and then on once you once you've configured that
43:48 inside now we've made this very easy since earlier versions of foundation six because you can now do
43:54 a menu anchor hopefully in these i've actually used a menu anchor ah see i'm doing it this this does it the old way um let's
44:01 go ahead and here i'm going to redo this how i would do all of this today actually because we didn't have this feature uh
44:08 when i created this template we're gonna do menu anchor okay and um in the anchor we're gonna do um
44:18 so here actually um what we wanna do is the anchor id so this one is one right so inside my my
44:24 container that contains this section the anchor id is one but obviously let's
44:30 change it to something better right um let's just call it um call it home
44:36 okay call it home um and then in this main container we
44:42 don't want any anchor ids okay but we do want to anchor to this section which is about us and this anchor id is going to
44:48 be about okay and in this particular one it's going to be products
44:56 and then in this anchor it's going to be reviews and then in this one it's going to be
45:02 contact and then in this one and we'll put footer but you probably
45:08 don't ever i can't imagine you ever wanting to link to a particular footer but that's okay
45:15 and i'll get to what this anchor one does in a little bit as well okay um
45:21 so now let's go ahead and inside here i'm gonna do uh this was home
45:27 okay and the anchor id was home okay
45:33 and then we're going to copy and paste that and we're going to do about
45:40 and the anchor id for that was about
45:45 and then we're going to do products
45:54 and the ink id for that was obviously products
46:04 reviews reviews
46:11 and we hit contact
46:18 and i'm not going to link to the footer okay
46:23 there we go so now again all these all you have to do is put the menu anchor and then link to uh the anchor id
46:31 okay and that should work as you see voila
46:38 go to contact go to about go to home go to products reviews
46:44 so on and so forth you see it's a pretty nice one-page website
46:50 and it kind of it does give you that screens kind of esque right it doesn't snap scroll okay i mean that's a a very
46:57 screens thing okay doesn't have little navigation dots and all that fancy jazz okay but um yeah pretty cool right
47:07 um a couple other things here if you notice the content in all of
47:13 these is centered how did we do that and if we put in or let's just show you
47:20 um here in products or we'll put inside this text here uh let's just put in a
47:27 little bit of content okay so do about us and i'm just gonna do some
47:34 um worm text okay um
47:39 and then for products let's just do like a simple like a three column
47:45 okay with
47:57 all right let's use um if you have a i have a cool placeholder
48:03 image stack let's just go ahead and use that
48:11 about us oops placeholder it's been lost since i use placeholder
48:17 oh just place hold it not work anymore interesting i'll have to look into that
48:29 there we go so we got up we need some we need to gotta make that look a little nicer
48:35 i'm gonna do something here i gotta make it look nice all right there we go
48:40 okay um this paragraph is ginormous but here let's uh
48:49 never want a paragraph that big
48:59 uh and then horizontal center
49:05 there we go if i did anything a little quick here
49:11 just let me know okay sorry about that um so yeah now now we just have a little bit of content in here okay if you
49:18 notice all this content is uh is centered right here for fun
49:23 let's let's do i won't do reviews we'll leave reviews there let's do a quick form about that
49:34 super quick form so we're going to form and then we're going to do um
49:44 text input all right and we're going to do uh
49:50 name oops
49:58 i'm just gonna we'll just do just the text form field and then here we're gonna do
50:04 um email i won't worry about doing all the input
50:09 names and all that jazz for right now our new text area okay
50:19 there we go and then we need a submit button so let's go ahead and get a submit button
50:25 okay and that is going to be let's do left aligned and i'm pretty sure this form is
50:31 going to be ginormous uh contact yeah that forms huge so let's go ahead
50:37 and shrink that down as well um so we're gonna go there
50:44 let's do six inherit
50:49 boom and that one column we want it centered horizontal alignment centered
50:56 there we go that looks pretty snazzy
51:03 okay normally here you'd have like some ginormous you know banner image okay
51:09 i'm sure you guys know how to do that so we won't do that okay um but
51:14 i wanted to show you the whole point of that was to show you that all this content is centered inside of each
51:21 section okay how is that done all right so the trick to that
51:28 is in the one column here so um inside each container i have a one
51:35 column and this is the one column if you remember we set it to be fill height
51:41 so this one column is set to be the entire height what section is this what am i about us so let's look at about us
51:48 okay so about us it's set to be the entire height of the browser because this fill height class if you remember
51:55 we said height 100 percent or is full browser height okay
52:02 but on top of that so this one column is set to be the full height
52:07 and what we're doing is if you notice inside of content column alignment here
52:13 we have vertical line middle so what this one column is going to do
52:18 is it we we told it to go stretch the full height of the browser and then inside this setting we said
52:25 tell your vertical alignment align all of your content to the middle
52:31 so that's how all of that magic works now this does not work if if i were to put this fill height class on the
52:39 container okay this would not work
52:46 so if he knows now about this the about dusk content is not in the middle
52:52 why is that well this is because while i told the
52:58 container while i told this container to go full height
53:03 this column is not full height it doesn't this column doesn't go the
53:09 entire height of the container okay this column if we look at it here let's dive into the inspector
53:14 because i know you all love the inspector okay
53:20 if you don't know about the inspector i did a a video on it uh it was a month ago i
53:25 think last month all right so if we look here is our container
53:31 okay um this particular bad boy right there and it is set to be the full height
53:36 right and if we go into here is our one column
53:42 and if you notice this one column stack this grid x okay look at it
53:48 it's the size of its content that's it so um we told it to align its content in
53:54 the middle of the one column and it did do that but the size of that one column is just
54:01 the size of the content because we didn't tell it to go any bigger so by default it's just gonna grow to the
54:07 height of its content hopefully that makes some sense
54:13 okay uh jody wants me to go over that again so um
54:19 i showed off why because i know a lot of people do this they'll make the container a particular height
54:24 and then they want um you know the content within it to be filled or centered
54:31 but what we want to do is we have a one column okay jody so i have a one column
54:38 and i set this to be the full height of the browser window with this class fill height
54:43 so again this class fill height is a is a height swatch
54:50 that i said go full browser height so the class here
54:55 is fill height in the height setup i said height is full browser height so nowhere
55:01 wherever i put this fill height class it will be the height of the browser
55:08 window right that's why i can then reuse that in on all kinds of things and i did that
55:14 in this one column here in this one column all of those have fill height class and
55:21 that makes the height the full height of the browser then
55:26 the trick is inside of the vertical alignment settings inside the
55:32 column okay so right here jody okay you notice there's a vertical
55:39 alignment option
55:45 uh there it goes um and that vertical alignment option is set to middle
55:52 okay so again this vertical alignment right here that setting right there is set to
55:57 middle and that's what we'll set and that is on the one column stack
56:04 okay and that is what sets the content of this one column to align
56:10 to the middle of the one column okay i'm getting warm i'm gonna take this
56:16 sweater off so now that i did that right you'll see
56:22 that um the fill height again made this section to be 100 the browser height
56:29 and the vertical line setting inside the one column
56:35 align that content to the middle okay now let's go ahead if i were to go
56:41 fill height and let's change this to be 75 percent the browser height
56:46 okay look now everything that has that class
56:51 is now 75 browser height not full browser height right that's actually you know i'll be
56:58 honest i kind of like that a little bit better i'll be perfectly honest because a lot of times when it's the full
57:04 browser height sometimes people don't realize there's another section below right so sometimes seeing you know at
57:10 least you know maybe you want to do 90 the browser height or something right but having a little bit of content from
57:15 the from the next section on the page already i think is actually a nice thing okay and there that way it's it reduces
57:22 confusion uh for some people but as you see i i changed that to be 75 the
57:27 browser height and all this content is still vertically lined in the middle in every single one of these
57:34 and the reason is because the one column in each of these sections this one and
57:39 this one and this one they all have their vertical line set to middle and they all
57:44 have that same fill height class
57:50 so hopefully that helped you out jody okay hopefully that clarified that for you
57:58 um one thing i get a question for every now and then is like how do i create a link to the top of the page right now
58:04 this one doesn't necessarily look all that beautiful okay but right here i can click on back to top and it takes me
58:10 directly to the top of the page okay how can we do that
58:15 so um basically what i did here um is i just added an anchor button to the
58:22 page okay um you can also just use a link or you can use you know maybe instead of back to top you can have like
58:27 a cool little i you know found maybe a font awesome icon in there or something like that um
58:32 so and all it does is link to an anchor now we we had already we already have an
58:39 anchor at the top of our page for home um but there's also just because i wanted to show you how you do different
58:45 ways there's this anchor stack as well that's inside of the i think it's a navigation
58:54 anchor so this allows you to define particular anchor points on your page
59:00 okay and uh at that point you just give it the anchor id um but if you already have a container
59:07 for example in this particular example we have right now i wouldn't necessarily do this i would delete that anchor and i
59:13 would just use this because this right here this banner container that we have is set to home
59:19 okay that's already at the top of my page so um i let's just already use that so
59:24 what i can do is i'm gonna use the anchor id home and let's go to my anchor button and i'm gonna anchor id that to
59:30 home okay and that'll give us the same exact you know kind of setup we had before so we can just say back to top
59:37 and boop it'll take us to the top okay
59:44 sweet um
59:49 that was pretty much all that i had on my agenda to go over with you guys today i'm sorry for starting a little bit late
59:56 technical difficulties are always a pain in the rear sometimes right um but i'm glad glad i was able to get it all fixed
1:00:03 and i see a lot of you were still online so thank you very much for that i appreciate it um
1:00:09 so pretty simple today um i didn't go over a ton of stuff maybe some of your advanced users learned a little bit
1:00:15 about the html tag in the container um and yeah other people learned how to do the menus and the on-page navigation
1:00:23 i j again i just used the this default menu stack that comes in foundation six
1:00:28 but you can do the same thing with off canvas or with any of the other menu stacks there's the on page button the
1:00:35 the setup is exactly the same you can add the menu anchors to any menu
1:00:40 um so the setup was the same with all of the various menus um in foundation six
1:00:45 okay excellent glad i was able to help you out jody and the same thing happens with
1:00:52 a two column stack or a three column stack you can make the height of the two-column stack big and then you can
1:00:57 center all the content um you know uh with the vertical align option it's not that feature isn't just in the one
1:01:03 column it's in all the column stacks okay so excellent thank you very much guys i
1:01:10 hope you enjoyed today um and hopefully we'll see you on friday maybe on friday we'll i'll try to play around with some
1:01:15 of those screens ideas that i had um earlier on in this live stream and uh we'll play around with those and if it
1:01:21 need be maybe i'll do a follow-up if you guys want so cool take care everyone we will talk to you later"}]