Transcript

00:05 sorry for the tardiness I my machine definitely wasn't uh wasn't behaving properly and it just felt like I needed a reboot I think what happened is like you know I have an external GPU for those of you that watched some live
00:20 streams that it did about it and I when I went to disconnect it last night to work from the sofa last night it it didn't disconnect properly it's kinda like you know um a USB Drive when you try to eject the USB Drive and sometimes you're just like it doesn't work you
00:34 just unplug the damn thing so that happened with my external GPU last night and I plugged it back in this morning and I don't know I think maybe that was causing something wonky maybe it just didn't disconnect and when I reconnected it I don't the gremlins got in there or
00:47 something so things after the reboot everything seems to be running a lot smoother so that's good sweet so a lot of chatter in the chat box thank you very much again sorry for starting a
01:00 little bit dirty today and lots of people here a lot of the usuals and I see so many people as well so congratulations thanks for coming and today we're gonna be talking about um well a first off I want to say like
01:15 literally like 40 minutes ago I've been waiting for an update to fix some bugs on the community and they shipped it and so I went to go update it and it broke the community so oh so I
01:27 was doing that for I was trying to fix that for 20 you know up until like five minutes before this and so communities currently down and but we'll get it back up today I promise
01:40 funny enough this morning I was actually looking at some new software for the community so I think maybe it knew that and it was like good new software so anyway that happened today so uh guess
01:53 what I'll be doing it right after this livestream right so fun times so today we're going to be looking at foundation 6 from hopefully from the perspective of
02:08 a user and a completely new user and I say hopefully because I'm gonna try my best to explain everything from the beginning
02:21 but having you know 2012 15 years experience using rapid weaver and web development and whatnot I sometimes it's hard to shift my mind completely to what
02:34 you guys are thinking so if you have any questions please do not hesitate to put them in the chat box because sometimes um I'm gonna try to assume very beginner level knowledge but sometimes it's just
02:47 it's hard to make every every possible assumption so please keep me honest and post stuff in the chat box that you you feel like maybe I glossed over something too quickly I'm not gonna be able to go over everything right I mean we have
02:59 about an hour here I might go a little bit longer but we only have an hour I'm not gonna go into every setting and explain everything exhaustively right I'm I want to try to just get get you
03:13 started okay um I'm not gonna dive all into like all the particular settings and rapidweaver and stacks i have already of two live streams that better basically like getting back to the basics they're called so if you just
03:26 look for back to the basics I have a part one and a part two for rapid River and we go into all like the the settings of rapidweaver and look into all that um I'm not gonna dive into a lot of that
03:38 today so um if you if you're curious on like the kind of the ins and outs and the beginning of how to use rapidweaver generally um please go ahead and look at that okay and again keep me honest make
03:51 sure that you're posting any questions in the yes I got a a quarantine haircut thank you for noticing Hickman I appreciate that is that
04:04 haircut legal nice oh my wife did it we I bought some new Clippers and and yeah she faded me up not too shabby right
04:17 cool lots and lots of echo hmm not sure not sure what's going on I my audio is normally pretty crisp I spent a lot of money on my audio setup so um and because you guys are responding and chatting with me it tells me that
04:31 you are actually hearing me so that's good okay so let's get started um I guess we'll start is beginning what is rapidweaver right so rapidweaver is a
04:45 Mac app and most of you have it already okay since you're on my email list right um let's go ahead and let me start my screen share really quick get that
05:10 area okay so rapidweaver what is rapidweaver right wrap weaver is a great tool from
05:25 real mac software and it's currently in version 8 version 9 is under development cool and yeah it's it's a really great framework let me just say let me back up
05:38 a little bit I used to use iWeb back in the day and what brought me to rapidweaver was its theming engine right so what's great about rap Weaver is you can kind of build out your website content and
05:55 then you can apply a theme to that right because years ago when I was using iWeb I wanted to change the way my website looked and in order to do that I had to
06:08 rebuild every web page right and web iWeb had a lot of these great themes but in order to rebuild your website with a new theme you had to rebuild every page
06:20 with a new theme like from scratch and so I was like ah so I wanted to try rapid Ivar out because I wasn't really sure on what design I wanted so I jumped into rapid river and had themes right and with themes you could just kind of with a click of a button kind of just
06:34 change the look of your site and then you can like tweak the themes a little bit right so wrap Weaver's been really great over the years obviously I started I think I started in rap Weaver version 3 that's kind of like when it really
06:49 started gaining a lot of momentum and along came a really really popular add-on for a rapid Weaver so rap river itself has an entire kind of ecosystem
07:03 think of Rapid River as a platform okay and there are various components you have themes which is kind of like the shell Oh your website and then you have plugins and by far the most popular
07:17 plug-in out there is one called Stax and Stax is made by a coming to call your head your head calm and I'm good friends with the Isaiah over at your Scott asked what is a theme so yeah
07:34 Scott thanks for asking um a theme is basically the shell of your website if we go to rap River you can click on the themes and in you'll notice that
07:48 there's a theme drawer and I have a bunch of themes installed okay and let's choose one of the default themes from rapid e48 let's go to referee berate themes and let's choose um climate why not okay so would choose
08:03 climate and if I inside rap Weaver we can do is do a quick preview and if you notice like I I haven't added any content to my site but here is just a nice starter web page for us right um you know a lot of these settings are
08:18 based inside the project right so again I'm not gonna go through all these settings here but yeah a theme is great okay and then if I wanted to add some content Stax was a really great
08:31 revolutionary way of generating page content I would say um there are other page types that ship with rapidweaver um like you can do an HTML page or a style text page or a photo album but Stax is
08:45 really where it's at and so Stax is definitely I don't build any web pages without Stax nowadays so Stax is really great with powerful um it ships with some basic components right and these
08:59 are called stacks so Stax the plug-in has stacks inside of it okay a lot of times that can confuse some people and when you buy stacks you get a lot of
09:13 these basic ones okay dude all the way up to this one so all these top ones up here okay these first three groups all come with stacks and we can like let's say do like a two column layout in here
09:25 and it's kind of like it's really fun because it's kind of like building um your web page with with Legos right so you just kind of drag and drop these around you can drag in images right so
09:39 if I want to have an image let's go ahead and add here since we're gonna be talking about Foundation today right
09:52 whoops that didn't do what I wanted was that I think that's an SVG I think that's why that's what's a JPEG I should work what in the world I add
10:09 image sometimes drag and drop well while I'm streaming is funky I never have these these sort of issues when I'm not live-streaming so it's kind of weird I
10:22 don't know if it's system resources or what maybe maybe it's just because I'm loading it from from that little let me just go ahead and drag and drop that
10:40 image just oh it actually works now okay nevermind so we we have an image right so here I can let's move this site image and you can kind of just move things
10:58 around the page right man and then if we preview in Rapid River I just say command R we'll see that in my content now I have my content right so I can
11:11 easily add content to my webpage just by dragging and dropping these little these little stacks from the Stax library onto the page okay so we kind of talked NIT
11:24 and let's go bye-bye themes like so if I let's say I wanted a different theme let's choose this one I think is called adventure Oh mountains so here's mountains right and and voila so now my website is is in the mountains
11:39 theme and yeah it's really cool okay and so that is the five minute to or the ten minute tutorial on what is rap Weaver
11:52 and stacks okay the combination is very powerful even with just the default stacks there it is powerful now there is a plethora of third-party stacks as well
12:05 and if you've come to me you probably know that I have a couple hundred probably more now I kind of lost count on how many stacks I have and those are
12:17 more add-ons that you can add if you see you can scroll down here all these add-ons there are all these stacks that are inside my library here are ones that are from me and other third party developers and they all do everything
12:31 from um they're just think of them as building blocks or Legos that you just drag out onto the page from everything from like image galleries to cool fancy
12:45 gradient wallpaper things to UM here seems which is really powerful right so seams allows you to add like little little curved designs on your pages right because a lot of times you go to websites and you can you know find
12:57 various sections that have you know dynamically you know colored sections and all kinds of interesting stuff so there are stacks for everything okay there you know as you say there's an app for that chances are there's a stack for that
13:18 there's a lot okay so what is foundation so about I don't know seven years ago I believe I I kind of got while themes in
13:31 rap Weaver are awesome especially if you're just starting out and you not really sure what you're doing or what you want themes are a great thing to have
13:43 however themes sometimes can be difficult to customize so here let's if we go into the page inspector inside rapidweaver we
13:57 can look at this and this is where we can kind of define various colors and settings and and whatnot for a theme I see this theme it has a decent amount of settings but that's it right if if I
14:10 wanted to customize things that aren't available here I'm I'm kind of Sol right I'm out of luck I can't really do that I make this window wider so we can get
14:26 both everything in here okay so what what does that mean so I came up with a product called foundation and what it allows you to do is it allows you to
14:39 basically use these stacks okay that are that we have here access to in the library to build your own theme okay so essentially we're gonna start off with a
14:52 blank slate so let's go ahead and if I change my theme to be foundation 6 sorry for my dogs barking so foundation 6 is a
15:07 theme as well as a set of stacks okay so there's two parts to it we go here and I select a theme to be foundation 6 and I already have like we can define little little groups of our stacks and I have a
15:21 group here that has all of the stacks that come with foundation 6 okay now if I go ahead and just preview this page really quick you'll see that the my content shows up here but it's just on
15:36 like this blank white page okay and the reason for that is foundation gives us a completely blank slate and allows us to really customize our content the way that we envisioned it we can build our
15:50 design the way that we want it really is the ultimate in freedom okay so once you've kind of got used to stacks and wrap it over and maybe you've you maybe
16:03 built a site with a theme and you're like I want to remove those constraints um something like foundation will really help you remove all those constraints and he it gives you a blank
16:17 slate to start from okay so let me back up a little bit further and talk about what is foundation okay so I said it was
16:31 a theme as well as a set of stacks that we can use like building blocks to build our webpages okay but what's behind it okay um why is it called foundation and
16:47 and who's this little Yeti guy okay so um if you're in the web design world you may know that their foundation is
16:59 actually an entire web framework okay it's an open-source a web framework that is probably used it's used by thousands upon tens of thousands of developers
17:12 across the world okay actually it's over a hundred thousand I believe it's the number is around between three to five hundred thousand developers around the world use foundation and use foundation
17:27 the open-source framework okay on if we go into the docs for foundation I should have to say that as of 2019 I am the maintainer of this open-source
17:43 framework as well okay excuse me so foundation itself is really cool it has a lot of very great advanced
17:56 technology that people who hand code websites get to use right so example if I wanted grids and columns in my layouts this is the HTML code for it right and it allows us to really easily customize
18:11 our layouts there's all kinds of really great navigation controls there are some great plugins and what if these are all really really awesome but in order to use these it requires that you know how
18:26 to hand-coded website and the problem is like for most people most people don't want to hand code a website right they they they prefer something like stacks where we can drag and drop right so what
18:41 I've done is I've taken the foundation 6 framework all the code that and eliminated the need to do any of the code ok so you can go to get dot foundation and then go to some Doc's
18:54 sites and you can navigate through all these various things right you can see we have buttons and there's button groups ok and you can see what all of
19:07 these various things do okay but what's great is we have access to all of those things just by simply dragging and dropping those components onto the page so foundation 6 has like its own version
19:22 of a column stack okay it has something called site styles as well which we'll get into and what's really powerful is all of those components that we have on
19:34 the documentation from foundation are all available via these little drag-and-drop widgets you don't need to know any code and you you have all inside once you select a stack you'll notice that over on the in the inn's
19:46 page inspector you have a lot of settings for those stacks okay so it's very powerful and here let me just mimic that the thing we did before so I have
20:00 let's do some we'll do some text over here and then we'll do a picture that a
20:13 picture stack okay and let's just add drag and drop that image in there that we had earlier there we go alright so now I have a two column with some text
20:26 and an image okay we preview that we'll see that there goes so now we have that two column layout not too fancy here right but there we go and as you see as I click on each individual stack
20:42 okay the settings for that stack change right because text a text stack has different settings than a picture stack and then a two column stack what's great as you see you can layer all of these as
20:55 well right so like for example let's say I wanted to have a three column stack inside my two columns back right so it gives you a very very flexible layout
21:09 engine that is really simple and easy to understand and yes as Scott says in the chat if you can't code forget about the
21:24 free framework okay um i purely talked about the framework because i wanted you guys to know what was behind it okay and that it's a it's a very large framework that is you or it's a widely used
21:39 framework that is both efficient fast performant and it's built by some really big geniuses okay um while I managed those geniuses I'm a smart guy but some of the guys that work on the code for
21:52 foundation are wicked smart and intelligent and they're very passionate about it and I'm I'm honored to be able to lead them and and take the the foundation framework into the feature so
22:05 so Dana asked what is the free foundation 6 or the $100 product you sell so Dana the the foundation framework that you saw okay that I
22:25 brought in online okay this this framework you could download it and use it for free all you want it's used by hundreds of thousands of developers around the world it is free and you could build as many websites as you want
22:38 it want with it for free okay but in order to do that you have to hand code your websites okay you have to open up a code editor and then you'd have to go through here and learn how to use the
22:51 CSS and the HTML and the JavaScript and you're basically on your own right my product foundation six stacks okay
23:05 are these components here so instead of having to hand code all of these things instead of having the hand code what a two-column layout is or hand coding whether three column layout is or even
23:18 more elaborate is stuff like accordions right so you know if you wanted an accordion here okay let's just go ahead
23:31 and add an accordion we preview this okay I added an accordion here on the page it literally took me five seconds okay because because of what I've done okay because of the power of these
23:47 foundation six stacks okay these stacks are a part of the product that you get when you purchase my foundation six stacks okay you get the stacks as well as it's a theme right the
23:59 theme once you set the theme you're kind of done okay and there isn't much there isn't anything to do in the theme actually it's all managed inside the stacks so Dana hopefully that that settles that
24:13 for you and that what's the difference again my stacks use the free framework but it does they do all the code for you and then some I actually I have these stacks have a lot of features that
24:26 aren't inside the framework okay for example site style site Styles isn't something that's inside the framework it's something you have to kind of hand code yourself I do all of that for you okay so there is a lot of pre done stuff
24:39 that you don't have to worry about if you were hand coding a website hopefully that yes Danis says they have the same
24:54 name yes one is foundation six and the other one is foundation six stacks for rapidweaver right yes they are the same name on because the stacks use the frame
25:06 and I didn't want any sort of confusion of I wanted to show you that the stacks and the theme are powered by the framework that's what I mean on the product pages I talked about how they're
25:18 powered by the foundation framework because they are okay so hopefully that that helps you out
25:31 um and Matt Matt does said Scott says put a container on the page there no no padding is driving them nuts okay so we'll start building out a little site here so here I have a container and Scott wants me to put a container in
25:44 there to make him feel better and we'll add a little bit of padding and margin I'm not going to explain every setting that I make here that I that I change I have a lot of over 50 to 60 hours of
25:59 videos on foundation six that kind of um and I have some that are like two to five minutes long and some that are these live streams that are like an hour long right those two to five minute ones I kind of go into each you know I pick a stack and kind of go into those settings
26:12 for that particular stack um so I'm gonna change a lot of settings here um and not really explain a lot as I go um just just for time sake okay um but I'm gonna add this container this container
26:26 stack um basically allows me to contain the content so that it's not always going to the edge of the browser windows and then I added some padding to the two column layout right so it'd start as you see it's starting to look a little bit nicer okay
26:42 and another great thing is if we go to I also have a free set of templates okay that I hope to employ ship a lot more of these but these are some really great starters okay and so here for example I
26:56 have a hero header template and if we drag this template to the page and I'll show you where you can get these these free templates really quick in a little bit so here I have a hero header um now what templates what you do wanting do is
27:09 once you add it to the page you want to click this little red button up here we're gonna extract that and we preview this page you'll see that I now have added a hero
27:22 header to my website really really powerful okay and so as you see that that's just what that's just really really really great right here if we
27:38 want to add a let's say I want to add a what else we have in here there's some oh here's some uh here's let's add like a card layout okay so let's add so inside my container I want to add like a
27:55 little card layout okay so as you see here I have my I have a two column layout and have some cards and then it's really easy to kind of start customizing this stuff right again this card's layout is the template so it looks
28:07 extract it once I extract it I can then start like customizing it okay and like you know I can change out the pictures I can change modify the text simply by you know double clicking and then you can
28:21 modify the text in here okay you know we can define what's cool about the pictures it actually allows you to define different images for different resolutions of the display is a hero
28:35 header a thing see a hero header um is a thing right it's a template as you see here I I dragged that hero header out to the page and it gave us a set of stacks
28:48 think of these as I've pre-built little layouts for you um and and then you could just add drag and drop those to the page and it's kind of already done for you it's like pre done layouts okay like for example um if you're like if
29:02 you're confused on how to implement tabs or something like that you can just simply drag out this tabs template that I've built and we already have a tab layout built for us right so I can just
29:17 um extract that let's preview that and here below I have I now have a tab container that contains different content now obviously at this point now that it's on my page I can customize that I can add more tabs I can chain mod
29:31 buying change the content let's say I you know I wanted an image inside this this particular tab I can drag and drop an image in there change the text do all kinds of stuff
29:45 right and these templates are a free download but they're only useful if you already own foundation okay the foundation stacks and you can get those from the product page so if we go
30:10 so if you go to the foundation six product page okay um you'll notice that if we go to the downloads section and
30:22 it's really slow to be you know we go down into the downloads section I have a bunch of stuff right so you can download the the theme is always available for free and then here's the foundation templates so you can click on that and that will download a set of templates
30:34 that you then just simply double click or drag and drop onto rapidweaver and then wrap Weaver will install them for you okay I also have a bunch of let's see um here's a some project files a
30:47 couple different project files like for example um and I linked to the YouTube videos that I actually I built those particular projects live so like if if you want to watch how I built this particular project here's a link to the
31:01 YouTube video to that right um like for example let's go ahead and download this one for right now and we'll open it we'll kind of see what a site a pre-built site looks like with
31:25 so let's look at this particular page so now I've downloaded this this demo project and I'm opening it up and as you
31:38 see here this is a very nice and attractive web page that is completely built using foundation 6 okay I recommend if you want watch that the livestream of how I built this we can
31:50 kind of dive into this a little bit and kind of look how some of this stuff was built so you can kind of see how easy it
32:03 really is right so I guess talking about foundation we we have to start off with site Styles which is something I glossed over before okay site Styles is the
32:15 heart and soul of foundation 6 okay and it lives in your Stax library um you just add a site style to the page okay now you have to add site styles to every
32:28 page okay and inside Stax that allows you to do something called a partial okay which means that um you could basically have the same site styles instance on every page okay let me see
32:40 if I have how many pages are in this project oh this project only has one foot in one page so if I were to go ahead let's go ahead and add a new a new project to our new page to this project okay and what I
32:53 would do is let's say on this home page um once I'm finished with site Styles and I'm kind of happy with it um I would click this green button okay so when I click this green button what it does is
33:07 it it opens up a partial what's called a partial editor in stacks okay and let's call this site Styles
33:22 partial live stream just for fun okay so I give this partial a name you can also give a subtitle and some author and tags and whatnot but I give that bat this name right and if you notice when we
33:34 when we enter this partial editor only the stack that was selected was added but you can go in that head and actually add more stacks to this if you'd like um and because this is really powerful for like if you have maybe a footer you want the
33:47 footer on every page to be the same or something like that right so let's go ahead and let's click back and you'll notice that up here um the site style stack it looks a little bit different now if you'll notice my partial name is here and
34:01 there's like a little um dashed outline around it okay so now if we go to my my new page that added a few minutes ago and in stacks if we go to this little green button these are all of the
34:14 partials that are saved within my project okay so if I had this partial to this page voila I have that partial and now what's voila I have that partial and now what's really cool is if I double click on this
34:27 in the site Styles and I can go ahead and make as many changes as I want okay like let's um let's change the shade of red for this alert okay so let's say I
34:41 wanted a different shade of red and then once I click back that saves that partial and what's great is that is now updated on every web page okay there just to show you actually let's change
34:53 it to something very drastic right so if I um let's go ahead and change it to green okay so I'm gonna make the alert green actually right now and we're gonna
35:06 go back and there we go we see that inside this partial um the alert style goes to green and if we go to the untitled page you'll notice that we're
35:18 on the untitled page and that same changes there so the partials give you the ability to give the ability to modify a partial or Marta flight content
35:31 within it and then that content is automatically ported to all the pages that use that partial okay so um
35:44 cool okay so with that let's talk about site Styles a little bit more and just for speed I'm gonna give me go ahead an unparticle this really quick I'm just going to extract that so I
35:56 don't have to keep going in and out of the partial editor so what is site Styles okay and now that we know that we use site Styles to control all the
36:11 styles on our pages okay if we look at site Styles it contains um all the data about the styles of our site funny that right um we we can have a site background color so we can we can make the background color of our site
36:25 particular an image a warehouse image apply your own custom CSS if you're more advanced user okay I'm going to find your site with various colors right so here we all the various colors like
36:37 buttons and accordions and all the various components and the stacks from foundation six they all use particular colors right so for you know buttons are an obvious one buttons have a particular
36:50 color well all those colors are defined here okay um the default colors okay then we have all of our text colors down here as well as all of our text and font sizes okay and what's really great here
37:03 is we can have all of our header sizes and the text sizes and we we can actually customize that for small medium and large devices now you might be asking well what a small medium and
37:19 large roughly that means mobile tablet and desktop roughly because devices are so different nowadays some devices like if you put a iPhone 11 plus in landscape
37:33 mode it's gonna think you're on a desktop because there's so many pixels there right but if you're looking at it how the iPhone was really intended to be used it would be a small device okay so depending on the device that you're
37:47 using think of small as most likely going to be a mobile phone in portrait mode medium is going to be more like a tablet in portrait mode and then large will be obviously desktop as well as you
38:00 know an iPad or something like that in landscape things like that okay so we have small medium and large so you can kind of customize various things throughout all a foundation okay
38:14 and yeah so that is what site styles is and then there's a lot more okay to site styles I'm I'm not gonna dive into every every possible swatch and things that we can add here but swatches really are a
38:27 very powerful thing that are new to foundation version six these are something that's very new I have a lot of really great detailed videos on how to use swatches but what's really powerful about a
38:43 swatch is that you can define a style for something in one location and then apply that style to multiple places so for example on this particular page
38:56 I've actually styled out all of these components okay and all the styles are centralized here right for example um
39:11 okay the card divider let's look at here okay so for example here um this
39:27 particular style okay is styling the background for a card divider as you saw they were currently black right and if I wanted to change those um it's actually using the black color from UM site styles but if I wanted to change those
39:41 to be a custom color let's go ahead and make those background colors maybe a dark grey instead okay so instead of black we're gonna set it to be dark grey and if we scroll down we'll notice that
39:56 those though all those card headers are no longer black they are dark grey okay and again I did that all of that just by modifying this one style on the
40:08 page okay um a lot of things in the past prior to foundation six allowed you to go required you to go to each individual component and set the style at that
40:21 component what is unique about foundation six is the power of site styles and all of these swatches and if you see we have swatches for all kinds of stuff background board or height
40:34 margin opacity padding shadows so you can kind of generalize your styles and then apply those to your individual components okay and you can do that
40:47 various ways I have some really great videos on on how to handle swatch selectors make sure that you watch that okay and how to style these the basic
41:00 thing is for example here I have this background image okay let's look at this particular one um I have a class of banner and then if you notice here this is the background image where is it this
41:15 one this is the stack that actually contains that background image and all I did is I added that banner class into this custom class list and you see I could have multiple classes I have alt
41:27 as well as banner here um you can just do a space and then another class you can do as many as you want what's really powerful it's really simple I just simply define a class up here to find my styles inside the swatch
41:40 and then whatever I add this class to will get that style it's very powerful um really simple a purse really simple in turn to understand because you just apply styles kind of thing add a tag
41:54 think of classes is kind of like tags and then you can you can add those tags wherever you want and those styles will get applied okay it's very powerful let me go into the chat really quick and see if there's any other questions I've kind
42:07 of been blabbing around for a lot for a while and I want to make sure that I answered any any questions lingering um Danny talks about uh mobile first I'm
42:22 not gonna dive into that today Danny but yes um foundation six does use something called mobile first design um I have a video on on mobile first um it was I think the video was recorded for a
42:35 foundation one but still relevant for foundation six essentially um all the base styles are done for mobile and then you enhance that for to format medium
42:47 and large devices the biggest learning curve that I have issues with is from foundation of foundation six is getting the mobile to look good try to set different pictures but I can't get it to
43:01 work right so Donna funny up the um so maybe I should do another video on mobile first design with foundation six because essentially you need to design everything for mobile first then you
43:19 enhance it for other things right so now for like for example background image it's really simple because I give you the ability to do um image medium and small medium and large and here I only
43:31 defined one for um this is the default image and then um if I don't define a medium in the large um it will automatically use the default image so by default it uses this image on small
43:43 and if I wanted to override that for medium I'd will add one here and then if I wanted to add one specifically for large I could add one there but the medium and large stuff is really optional because whatever is defined by default will be used for everything
43:58 hopefully that makes sense um in terms of images for the picture stack I assume you're talking about the the picture stack inside foundation six um I have a really great video on the picture stack
44:10 okay then I really go into great detail about um how to use the picture stack and how to get different images to display for different devices okay so make sure you check out that picture
44:24 stack okay or the picture stack video hopefully that helps you out a little bit Donna can you please explain the container stacks same as the one column purpose okay so we're getting into into
44:37 some specific questions for people that have maybe used foundation for a little bit but I have some questions okay so the container stack think of it is just
44:50 a generic box okay um and there are there's a little bit of sizing options right if we if we look here on the sizing for a container on it could be auto site with site with plus gutter and gutter means it puts like little um you
45:04 know spacing on the left and right size we can make it full width okay full width means it goes the full width of the browser or full width plus gutter okay so for example the default is site with plus gutter
45:18 what is the site with well our site with is defined inside site Styles okay so if we go into site Styles our max width here the default is a thousand pixels I
45:33 believe okay so that container stack will go to a maximum of a thousand pixels let's look at an example here um this particular container here I have the sitings sizing set to auto and when
45:46 you set it to auto that essentially means just go full width don't don't put any sort of padding it's just kind of like a generic box um it's the most generic thing you can do with a container it's just some it's a it's
46:00 essentially a single div for those that are maybe a little bit familiar with HTML okay um and then this stack here that's inside of it I have it set to
46:12 site width plus gutter that's because the content that I want that's inside this container I don't want it to go above a thousand pixels okay so if we
46:25 preview this it was preview on a larger screen oh whoa what the heck happened there goes okay so you see here I'm in
46:43 this particular container I had it set to be full with okay our auto so that the image is going all the way to the edge okay um but then my content down here this
46:55 normal content I have this set to sight with because I don't want my page content to go to the edge of the browser window I want it to be constrained within a pixel okay within that site
47:08 with that's defined inside sight styles okay now what's the difference with the one column so the container is the only thing that can restrict your content to
47:21 the site with only the container that's it nothing else can do that even a one column so for example this is a two column but if I were to take this two column and put it outside of the
47:45 okay and then let's go ahead and preview that you'll notice that that two column okay goes the full width because the column stacks two column one column
48:00 included do not obey the site width they will always fill up whatever you put it
48:13 in okay so that is one difference there there are other differences between a container and a one column though and a lot of that just has to do with settings right um so basically I would say use
48:25 the container only when you mmm what's out of one column as well so one column has sizing so it does have sizing but it's always a
48:40 percentage with right so here we can say that a small is twelve if you're if you're confused with the pivot the sizing of columns everyone in your new um check out our video on this columns
48:54 it's like a four minute video and you can I kind of go into all the various sizing options here and why they're built like this okay yeah column just has different options
49:08 right so for different options for sizings for margins for aligning your content most the time you're probably gonna use containers on the outside of your site you control the width and then most other times you're just gonna use a
49:23 one column okay but you're gonna you're gonna use a one column when you want to particular one column features so maybe just play with a container and a one column and and yeah and and learn what those features are and how each one
49:38 works differently but hopefully that small quick overview helped you out a little bit Jody the main purpose of a container again is to constrict the width of your content to the site with
49:51 that's inside site styles okay or in this particular instance like I just wanted a generic container to hold my banner and throw a background in on it right so um yeah container works
50:08 good for that okay can you put all the stacks inside one container um when you do should you use a new container um that's really up to you um so if we look
50:21 at this site design here and you refresh this page since I fixed that if you look here um I I create different sections of this web page and each section is a
50:36 container okay um if you wanted you could throw everything in the container um but then you you couldn't do this like this bandying effect um so like if if I didn't want these sections to be different colors I just wanted like the
50:48 entire site background to be white then yes I could throw everything in one container and we're good to go okay there's other benefits to a container if by doing this sectioning of your content
51:02 especially if you wanted to link to a particular section on the page there's this setting called an anchor ID inside of a container that allows you to use a button or a link to basically link
51:15 directly to a section on the page kind of like here on my on my nope that wasn't it where is my foundation product oh here it is okay I like how I have on this page here
51:28 um on my main product pages I have these links that link to individual parts of the page right so if I click downloads it takes me to downloads if I click screenshots it takes me to screenshots right you could do things like that with
51:43 a container very easily okay cool joke me maximized the window a bit oh sorry please explain extracting Peter I
51:56 assume that you mean when when like I extracted this partial okay so for example let me go to this page it still has that partial that I created um if you notice this is a partial okay and
52:08 when you when something is a partial and you have it selected this green button go from being like a little cubes to this arrow button and what that means is
52:20 we're gonna unpack a partial I think unpacking is the the correct terms that Stax uses so to unpack it you simply click this button now when I do that you'll notice that it's now this site
52:34 styles is now no longer in a partial and what that means is it's no longer in the partial no any changes that I make to this won't be affected in the partial it is now just an individual instance of
52:49 the stack on this page same thing when I did when I added those templates on to the page right let's leave that on the page um you can also hide and unhide a
53:01 stack if you notice that when I when I hit site Styles you can kind of hide and show stacks site Styles can be quite large sometimes especially on a low resolution display like I have right now so you can quickly hide it if you don't want to see it any longer
53:15 but if we look at those templates right let's just add another template to the page unless ash actually had a fun one let's add one called blob and um you
53:27 know I we have this blob okay and what if you're wondering what a blob is let's preview blob is this is this is a blob and I made it with foundation six stacks okay but I I made it really easy so that
53:40 it just works for you directly inside just by adding this template to the page again this is a template this is a part of that free download um that I that I give you okay and I just add the blob to the page but
53:55 out of the box I can't modify a template so in order to to modify its contents I need to unpack it okay or extract it however you want to call it okay by clicking this button and there we go
54:07 that took all the stacks that were inside that template and pulled them out they are now individual stacks on the page okay hopefully that answers the
54:22 unpacking or the extracting question hi Joe I use the previous foundation and loved it I find going to foundation six a challenge the big difference for the user I feel like I have less control over the stack
54:34 settings so um I'm not sure when when you jumped on and asked this Frank but you actually have a lot more control and I recommend you watch a video called why
54:49 foundation six or or I think it's called why foundation six okay uh here a hold on one so I and I in the in that video let me close that yeah why found it's
55:02 the very first video on the the tutorials screen on the foundation product page why foundation six stacks changes the game okay and um this video I explained
55:16 wholeheartedly why um the swatches approach which is this is more powerful and and saves you time rather than having to go to every individual stack
55:30 and change the settings independently okay just think about it because I now have I have access to all of mice or most of my styles directly in one location I can centralize those styles so like if
55:46 I wanted for example um here I have a style for section color now if we look at let's go to this page here if you look at this gray section here I have this light gray section in this light gray section okay what if I wanted to
56:00 change that right and let's say I you know I this I used this section color across not just one web page but let's say I used it across 50 web pages on my entire site okay
56:13 previously you what you'd have to do is um in in other previous frameworks you'd have to go to the that particular section change the color and they may have to find every place where that that
56:27 style was set and changed the color on every web page across your entire site however with foundation 6 now okay we
56:39 control that color in one location this particular background setting controls that color so instead of using light gray let's say I here let's let's
56:52 choose a specific color oops color if I click on this lets go like let's do a light blue Thank You van
57:05 opacity okay so now all those section colors are gonna be light blue let's refresh and look there we go I change now if this
57:18 was uh you know in a section whoa I'm not sure what I did up there no weird browser caching thing um so you see that was really simple
57:32 prior to foundation six if I depending on how many places I had that style it could take you hours but instead we did that in like ten seconds okay that is
57:45 just one example of why swatches and foundation six is a lot more powerful for you it's gonna save you time okay so hopefully that helped you out Frank I'm
57:59 joy Jody ass extracting the template and changing it won't affect it in the library no so templates are unique in that once you add it to the page and extract it a
58:12 templates art you cannot modify a template at all so like here let me delete this blob let's go ahead and let's add another template let's add a
58:26 responsive image template here okay by the way I forget who asked a question about images I think was Donna earlier um this responsive image template kind of shows you how exactly to create
58:39 responsive images so make sure you check this out okay so anyway here I added a responsive image template and if you notice if I double click it as we would
58:52 you know maybe make it a as we would a partial we can't edit a template you can either convert it to an external or convert it to a partial I'm not going to go into what externals are today externals are very powerful features of Stax for um
59:06 similar to partials but you can kind of use them across different projects partials are specific to one project externals are partials that can be used across different projects so anyway um
59:18 so you can you say don't edit or you can convert it right but you can't edit a template it is impossible the only thing you can do is extract it so if you add a template and you want to partial it just double click it and you
59:31 can convert it to a partial um or you can extract it but templates are impossible for you as the end user to edit
59:48 can you explain partials and how to use them for header and footer for multiple pages sure let's do that okay um let's
60:02 let's say I want to can I want to have this container which is my header and then the very bottom we have a footer on
60:14 the page okay um and this footer is what oh that's actually uh let's convert that to a partial okay so
60:27 at the bottom I have a footer and let's [Music] I'm gonna hide site Styles for right now okay and then here we have a container
60:39 in this container I'm going to create a partial out of it and this is going to be our site header so there we go I'm
60:54 gonna call this site header back okay so now we go to this other page that I used okay and um here let's let's partial out this page for us okay so let's go here you'll notice I'm inside of our stacks library if we go to our partials we have
61:06 three partials now first done is gonna be site styles okay so there we go done we now have our partial site styles then I have
61:20 oops what happened there oh I went back to the other page somehow okay I'm gonna have site header and then we're gonna add our site footer and then in between
61:33 it let's just go ahead and add some some container with two columns I mean I'm
62:05 all right so there there's my page I have some content oops how'd that happen I have some content with my header and
62:18 my footer okay let's preview that cool so here we see up at the top I have my header and then
62:31 down at the bottom I have my footer in the middle I have my content okay now obviously right now we let's say we want this this particular text to be different on every page right um the
62:44 footer prati is gonna be the same on every page right because that's probably to be the same but a lot of times in the header you want this text to maybe be different on every page so that's pretty it's pretty simple to do so let's go ahead and in our site header I'm gonna
62:56 double click that so we can edit the partial okay and what's cool is inside partials you'll notice that some things have these little pin okay and what I do is I'm gonna unpin that area oh wait
63:15 hold on oh that's that's a interesting bug I just made stacks crash I'll have to file a bug you cannot undo when you I don't think I've ever done that before interesting I'll make sure I follow that
63:31 bug today I'm just gonna open this alright well while this opens hopefully
63:48 that gave you an example about how to take that concept of partials and use it for the header in the footer okay crystal hopefully that helped you out um
64:01 Jodi says there's lots of videos on partials on your heads website Thank You Jodi yes well adding containers to many
64:15 stacks calls code bloat for your site does styling stacks slow down your web page load okay
64:29 so um so Frank um I don't know how many containers are you gonna use so a foundation six it's code I put a painstakingly amount of work into making
64:44 the code behind these stacks pretty much exactly the same as if I were gonna hand code this website okay um so there's probably um three times less code on a
64:57 foundation six site then there are using themes or other frameworks okay a lot less code maybe even more than three times if you take into effect the CSS that you're gonna save as well as the
65:11 JavaScript that you're gonna save so adding a few containers isn't a big thing if it works for you if it makes your layout work then it's what you need okay a container um depending on your
65:24 settings is one or two divs um if you really care to know about that right um so it's really not a lot whereas previously um something like the container would probably be four or five
65:37 stacks or four or five dibs on the page so the code behind foundation six is very clean and very very very very very efficient some reason man a rapid leaver
65:50 it crashed and came back and now it's let's let's close that reopen it um
66:08 Eggbert may I say I'm right oh thank you Egbert Joe you have noticed that art of you always crashed when you do with commands the so yeah we're just talking about rapidly progression with commands
66:24 II happens sometimes if you do too many commands these cool I think I've caught up on all the questions and I've gone 15 minutes over but let me let's go ahead
66:37 and finish that example let me try to launch this project again Amy rebuild that really quick let's close this
67:01 let's see what's interesting rapper site styles goes where site Styles goes
67:15 at the top of the page to be honestly you can kind of put it you can put it in other locations but I recommend putting it at the bottom of our at the top of the page that's where I recommend
67:28 putting your site Styles yeah yeah I think you're I think you'd have less issues just putting it at the top of the page I think it will just work best there okay so put it at the top of the page again a lot of times when I don't when
67:41 I'm kind of done with site Styles I'll just hide it like that and then there are other thing there's other things called swatches make sure you check out the videos I have a lot of videos on site styles and swatches and and all
67:54 those features another feature of foundation six stacks comes with foundation or it comes with font awesome five pro didn't even get into today I have some videos on those as well
68:07 okay let's quickly let's see if I have
68:19 those partials back in here oh wait so let's go ahead and I I created three partials right I had let's see site Styles that's partial site styles I'm gonna go quick I'm not even gonna name my partials I'm just gonna leave them as
68:34 the default and this footer convert to a partial okay so I have three three partials for speed what I'm gonna do is
68:48 I'm gonna copy this layout right here so we'll do actually go here let's add a add add my content I just copied and
69:04 pasted some content from a previous page and then let's see I think partial to a site Styles voila
69:19 partial six with my header and down the bottom partial footer the footer hey
69:35 there we go I probably need those so if we preview this really quick well preview in rapidweaver it's time you notice this particular page um I have my content my header the header site styles
69:48 and the footer are all a part of partials okay so let's show you an example like let's say if I go let's go in down to this
70:00 footer and let's change this text to say I need to upgrade the copyright to be 2020 and we're gonna change this
70:14 foundation six stacks for Dana click OK look back so I now saved the copy of my footer to the page ok we go ahead and
70:27 preview will see that I now have foundation six stacks copyright copyright spelled wrong to 2020 okay and if we go to the other page the home page
70:39 and let's wait for that to load we'll see that those changes have been made there as well because my footer is now partial okay now one last change is I want to make sure that this this
70:55 I want to unpin this text area okay and if we save that what that is going to allow us to do is this going to allow us
71:10 to customize this text on every page so the homepage I wanted to say foundation six welcome to foundation six and then on this page though I don't want it to say
71:30 welcome to foundation six let's just say hello live stream so now on this page my
71:44 my header says hello live stream but on this other page it still says welcome to foundation six so hopefully that was help that that's partials are very
71:58 powerful I only went over the tip bit of what you can do with those and yeah very powerful stuff so cool I hope this helps everybody um hopefully I I felt like I
72:11 maybe jumped I went from zero to 60 really really fast I'm sorry even when I tried to go beginner it's just my my momentum carries me forward and I know I breezed through a lot of
72:25 topics really really quickly but hopefully I was able to answer a lot of your questions and that you enjoyed it and so yeah I hope you enjoyed today
72:38 hopefully for beginners will this project be available to download Rob it's already available to download it's on the foundation 6 product page it's where I downloaded it from so yeah take that there's also a link to the live
72:50 stream where I actually built this project live so yeah if you want to get into that how I built this project you can do that we kind of extended it a little bit today I guess with partials
73:04 and whatnot so that was fun um Frank no worries about you know about this we're all beginners I want to make sure that you understand and that I service you right so that you can enjoy foundation 6 just like everybody else right so
73:16 hopefully they helped you out today um as always check us out on Friday on Friday we have wrap over hangouts and just go to Weaver's space slash hang
73:29 out on Fridays at 1:30 p.m. Pacific that's 30 minutes from right now but on Friday and yeah you can also go to weavers dot weavers dot space slash events and you can get the links and the details to all of our events there
73:44 including the these live streams so cool thank you very much everybody I hope you have an amazing rest of your week and I'm gonna be spending the rest of the day well I wasn't planning on fixing the community today but darn it I broke it so now I got to go fix the community and
73:57 hopefully do some work on total CMS too because I've been really pull driving on that the past couple days a lot so um trying to make headway on that so we can get a beta out to you guys by the end of June that's definitely my hope my goal so cool
74:10 thank you very much everybody take care