0:06 hey everybody Joe workman here and today
0:09 we're going to be doing a new video
0:11 series on getting started with
0:12 foundation now a lot of things in the
0:15 Rapp Weaver community of change since I
0:17 originally did the getting started
0:19 videos for foundation we have rapidly
0:22 over six stacks three and foundation 1.5
0:25 and a lot of things have changed and you
0:29 know we have a lot of improvements on
0:31 how we can actually build websites now
0:33 with foundation so I thought I would
0:35 update the entire thing and do a video
0:37 series on getting started so what we're
0:40 going to is we're going to build a small
0:41 website using all the latest stuff and
0:44 um see kind of how we can make something
0:48 great so let's get started so here's the
0:53 project file that we're going to build
0:55 from scratch uh and basically show you
0:59 how to do it step by step this entire
1:02 site so it's just a simple site that has
1:05 three pages we'll notice that all three
1:08 pages have the same header and the same
1:11 with the exception of the little caption
1:13 right we have the same footer we have
1:15 some page content in the middle okay and
1:17 then we have a contact page so we're
1:20 going to use a wrap Weaver six stacks
1:23 three and foundation 1.5 to build out
1:26 this exact project file so let's get
1:29 started so here we have a completely new
1:33 and blank wrap weaver project file so
1:35 let's go ahead and add a new Stax page
1:37 and let's call it home now the next
1:42 thing that we want to do is we want to
1:43 make sure that we actually have the
1:44 themes set to be foundation so if we go
1:47 to themes and make sure that foundation
1:49 is selected that way we can apply this
1:51 theme to all of our pages now let's add
1:56 some content to our page so let's go to
1:59 our Stax library and what we're going to
2:02 do is we're going to add site styles now
2:05 what site styles is is it is a stack
2:08 that contains all of the settings for
2:12 throughout your found
2:13 in theme this is all the color settings
2:15 your site backgrounds your text there's
2:19 a lot of other advanced options that
2:22 we're not going to go in in this video
2:23 but there are videos that review all of
2:25 the settings and site styles and I
2:27 recommend that you look over those but
2:30 for most of this video we're going to
2:31 accept kind of the default settings for
2:34 site Styles because the default settings
2:36 will settings will give you a very nice
2:38 website so the first bit of content that
2:41 I want to add to my page is that site
2:44 banner that contained kind of the header
2:46 for our website so I already know the
2:48 structure for that and because I've kind
2:51 of planned it out beforehand and I'm
2:53 just going to quickly add the stacks
2:54 that we need first I want a one column
2:56 stack that contains the main background
2:58 and then inside of that I have a inner
3:02 box that contains more content and
3:05 inside there I have a two column stack
3:07 and then I have an image and then on the
3:13 right-hand side I have a header and a
3:16 paragraph now I should add that what
3:20 I've done in the stacks libraries I've
3:22 created a folder just for the foundation
3:24 stacks and I recommend you do this if
3:27 you're going to be using foundation
3:28 because it's a quick way to access all
3:30 of your foundation base stacks really
3:33 quickly so I know I can go to this group
3:35 and I can quickly access all of the
3:38 foundation stacks with a click of a
3:40 button okay so let's start building out
3:42 this site header and on the outer one
3:46 column stack I'm going to add a
3:47 background and it's going to be a
3:49 background image and I'm going to click
3:52 on the styled background for the stacks
3:55 and I'm going to drag in my image if you
3:57 notice it's actually added a little bit
3:59 of tile and we want to change some of
4:01 these tile options so I actually don't
4:03 want the image to be tiled and I want
4:05 the image size to be filled so it's
4:06 going to cover the entire background and
4:09 that's pretty much what I want now on
4:12 the inner column I'm going to have it I
4:15 want it to be a transparent overlay so
4:17 I'm going to add here as I'm gonna add a
4:19 color and I want it to be white but I
4:23 want the background to bleed through a
4:25 little bit so I'm going to make that
4:26 about
4:27 um let's make it 75% so that kind of
4:32 gives me a frosted glass look where the
4:34 background behind it is actually
4:36 bleeding through now let's go ahead and
4:40 look at the image so I'm going to add an
4:43 image here and basically in the image
4:46 settings I'm just going to drag and drop
4:47 the image that I want and let's go ahead
4:51 and add some content to our title in our
4:55 paragraph so as you see we're getting
4:57 there right we're starting to get
4:59 something that looks a little bit nicer
5:01 let's tweak this I think the icon is a
5:03 little bit large and I want maybe the
5:06 instead of having an equal column split
5:08 I want to go at it and make this a
5:10 little bit smaller for the image of the
5:12 image column so inside the two column
5:15 stack we're going to go ahead and make
5:17 the column one okay we're going to make
5:19 that a size of four and then column two
5:24 is we're going to make that a size of
5:25 eight and what you'll notice with the
5:27 foundation column stacks is that the sum
5:32 of all the columns needs to equal twelve
5:34 so imagine that this page was divided up
5:38 into twelve equal units and column one
5:43 is taking up four of those and column
5:45 two is taking up eight of those units so
5:48 that's how we can break things up and
5:50 what you'll notice is that on this two
5:53 column stack we're actually using tablet
5:55 sizing so this means on tablet and
5:58 desktop it's going to use the four by
6:01 eight but then if we look at the mobile
6:03 sizing setup for this two column it's
6:06 going to use all twelve so if I
6:08 temporarily turn off tablet sizing we
6:12 will see on mobile that the image will
6:15 take up the entire width and then the
6:17 text will also take up the entire width
6:19 now a quick thing since we're not really
6:21 using you know need to see site Styles
6:23 all the time right now I'm going to go
6:25 ahead and click on the hide button in
6:27 the stacks toolbar so I can hide it now
6:29 we can kind of focus a little bit better
6:31 on our banner so I I have my two column
6:33 stack uh you know set up nicely in terms
6:36 of the division between the columns
6:38 there's a couple of things I don't like
6:40 text this header text to be black and I
6:45 also full notice it is currently set to
6:47 being h3 and this is going to be my main
6:49 page title so I want to make sure I
6:51 change that to be a page 1 so it is now
6:55 h1 and if you notice it looks different
6:57 because site Styles actually styles h1
6:59 tags differently than h3 tags now also I
7:05 want to go ahead and make this instead
7:08 of a the default style I want to make it
7:10 the alternate style so it's going to be
7:13 white and I want my paragraph text to
7:16 also be white so I'm going to click this
7:19 paragraph and I'm going to go ahead and
7:21 make that the alternate now the contrast
7:23 with the white background is a little
7:25 bit not enough so what I'm going to go
7:27 ahead and do is on this white background
7:29 I didn't go ahead and change that to be
7:31 50% opacity there we go that that makes
7:36 this this white text you know pop a
7:39 little bit better now let's preview this
7:42 now we'll see that you know we're
7:44 getting there but the spacing with my
7:46 content is a little bit off it's not
7:48 it's not perfect and I think we can do a
7:51 little bit better here now another quick
7:53 note if you don't want to keep
7:54 flip-flopping back and forth between
7:56 edit mode and preview mode you can go
7:58 ahead and use these stacks view modes
8:01 and in foundation it uses these as a
8:04 quick preview so that you can quickly
8:06 preview your stacks and it's not going
8:10 to be an exact representation in all
8:12 instances but in 95 percent of the case
8:15 you know you're going to see a very
8:17 close representation of what your site's
8:20 going to look like in preview mode now
8:22 you can also quickly toggle between
8:23 these view modes using 1 2 & 3 so if you
8:28 quickly see me preview things you'll see
8:30 that I'm actually toggling with a number
8:31 keys on my keyboard using the 1 & 3 keys
8:34 so for this main banner image I'd like
8:38 the background to kind of have a a bunch
8:41 of padding so that this white box sits
8:44 inside of it so if we go to this
8:47 settings for this stack let's go ahead
8:49 and let's go ahead and turn the gutter
8:51 and the gutter on a one column stack is
8:54 some patio
8:54 that it adds to the content on the left
8:57 and the right and I'm going to
8:58 completely turn that off and then we're
9:00 actually going to go into detailed
9:02 padding here and I'm going to go ahead
9:04 and say padding on the top and bottom I
9:07 want it to be five REM and on the on the
9:12 left and the right I'm actually doing a
9:14 little bit less I'm going to do three
9:15 REM on the left and the right and if we
9:17 quickly preview this we'll see that I
9:19 have a nice generous amount of padding
9:22 around the outside of my box and that's
9:24 exactly what I want now on this inner
9:28 box though the content is kind of
9:30 hugging that box a little bit more so
9:32 let's go ahead and add some padding to
9:33 that so on this inner one column stack I
9:36 just want some padding on the top and
9:37 the bottom so I'm going to go ahead and
9:39 set that to be two REM so this is really
9:42 starting to look nice it's getting
9:43 really close to what I've kind of
9:45 originally envisioned I have my outer
9:48 box with a nice background and then my
9:50 inner box that lets the background bleed
9:52 through and then I have some nice
9:54 padding all the way around it so now
9:57 let's examine this banner image to see
9:58 how it responds so in preview mode I'm
10:02 going to go ahead and let's go ahead and
10:04 shrink this down and it looks really
10:06 nice on desktop and as we shrink down
10:09 we'll see that you know this this big
10:12 gap that I've added around it's starting
10:16 to look a little large when we kind of
10:17 get to a smaller tablet size and then
10:20 when we reach no mobile size you know we
10:24 don't have a lot of room for text and
10:26 this this padding that I've added just
10:28 looks very big and out of place so let's
10:32 start tweaking some of these things so
10:33 the first thing I would like to do is
10:35 take care of this padding on this back
10:37 background image and right by default
10:41 the show padding is set to always but
10:44 what I'm going to set it to eat is show
10:46 desktop Plus and same thing with the
10:51 horizontal padding and what that means
10:53 is on desktops this padding is going to
10:57 show but then on tablet and mobile it's
10:59 not so let's go ahead and preview that
11:03 again
11:07 so as you'll see in desktop mode we have
11:11 our nice padding and it's spread out and
11:13 it looks really nice but as we contract
11:17 the page down will notice that when
11:19 we've reached tablet with all that
11:21 padding is gone now what's cool is
11:24 because we have that transparent overlay
11:26 it's still bleeding through and we're
11:28 still getting that really nice effect
11:30 and you as you see as we get on mobile
11:34 we have a lot more space for our text
11:37 our text looks a lot nicer it's a little
11:39 bit more readable and everything just
11:41 looks a lot cleaner and more sharp now
11:45 if we look on mobile we'll see that the
11:48 the text and the icon here they're
11:50 really close to each other and I may
11:53 want to add a little bit more spacing to
11:54 that and also I think the text would
11:57 look great if it were centered you know
12:00 this left the line it just doesn't look
12:02 great so let's go ahead and make some of
12:03 those tweaks so to add it some buffer in
12:07 between the columns when they break
12:08 let's look at this two column foundation
12:11 stack and what we'll look at is we have
12:15 row padding and column padding now row
12:18 padding adds padding to the entire top
12:22 or bottom of all of the columns and then
12:26 the column padding adds the padding to
12:28 the top of each column so what I want to
12:32 do is I want to add a one REM padding to
12:36 the top of each column because that way
12:40 when it breaks it's going to have one
12:41 REM at the top of the image one REM at
12:45 the top of the text which is going to be
12:49 in between the image and the text and
12:54 then to make everything equal I'm
12:57 actually going to add one REM to the
12:58 bottom four row padding okay now that
13:02 takes care of our padding and next I
13:05 actually want to Center this text so I'm
13:07 going to go ahead and in the header I'm
13:09 going to set that to Center and then do
13:11 the same thing for paragraph so as we
13:14 see now on mobile we have a lot nicer
13:16 spaced
13:17 the text is centered and if we expand
13:20 that
13:20 out we'll see that it's looking much
13:22 nicer on tablet all the way through
13:25 mobile and desktop now the next thing I
13:29 wanna do is I'm going to add a little
13:30 bit of contrast between the banner and
13:34 our content and I'm simply going to do
13:36 that by adding a one pixel border to the
13:38 bottom of this banner stack so I'm going
13:41 to go ahead and select my outer column
13:43 stack now I'm actually going to go into
13:45 quick preview mode and let's go ahead
13:48 and just add a 1 pixel border let's go
13:52 ahead and add detail border now I want
13:54 one pixel on the bottom okay now it
13:57 defaults as you'll notice it has this
13:59 kind of a darker color so I'm going to
14:02 go ahead and just select one of the
14:03 colors from here okay and let's make it
14:06 a little bit darker so that it's kind of
14:08 darker and maybe we'll tweak the opacity
14:11 down a little bit so that it kind of
14:13 blends in a little bit so as you see now
14:17 I have a definite separation between my
14:19 banner and my content and that's just
14:22 something I wanted as this style you
14:24 know depending on your taste or your
14:25 design you might want to do that or not
14:27 now let's go ahead and start adding some
14:30 page content below our banner now to do
14:32 that we actually want to make sure that
14:34 our content doesn't go full width and so
14:37 I'm going to encapsulate all of my
14:38 content inside of a one-column
14:40 foundation stack and the reason for this
14:43 is the contents of the foundation column
14:46 stacks will always respect the site with
14:49 settings that's inside site styles so
14:52 now that I've added the one column stack
14:53 there let's just go ahead and start
14:55 throwing in a bunch of content
15:05 you
15:08 and that kind of does it okay
15:11 do a quick preview so if you notice we
15:14 have my content now obviously I have
15:16 some a gap issue here and maybe we want
15:19 some gap in between the the some more
15:21 space on the bottom of the page that's
15:23 really easy to fix on this one column
15:25 stack I'm just going to go ahead and add
15:27 um three REM to the top and at the
15:30 bottom okay now if you notice there
15:33 there was a little bit more space
15:34 between the header and the divider than
15:36 I cared for right if you notice there's
15:39 a lot of space in between that so I'm
15:41 actually going to go ahead and on the
15:42 divider stack I'm going to say bottom
15:44 margin only because that's going to add
15:46 just the bottom margin and I'm going to
15:48 go ahead and do the same thing on this
15:50 divider stack now let's go ahead and add
15:52 some content to our three column stack
15:53 and just for simplicity rate sake I'm
15:56 actually going to add an image stack and
15:59 but right now what we're going to do is
16:01 we're going to actually show you how the
16:03 image stack does some special things for
16:05 us now what you'll notice with the image
16:08 stack is that you can actually define
16:11 three separate images one for mobile
16:15 tablet and desktop this way
16:19 the foundation will actually discover
16:20 what device your users are on and load
16:24 an image that is potentially optimized
16:25 for that device this way you can load
16:29 higher resolution images on desktop and
16:31 lower resolution images for mobile now
16:35 if you only define a mobile image it
16:38 will actually be used on mobile tablet
16:40 and desktop and hence if you actually if
16:43 you define a mobile and a tablet image
16:46 the mobile image will will be used on
16:48 mobile and the tablet image will be used
16:50 on tablet and desktop so it goes from
16:53 mobile on up now for this example I'm
16:57 actually going to warehouse images and
16:59 I'm going to use a very cool service
17:01 called place it so I'm going to go ahead
17:03 and set a warehouse image and if you
17:06 notice I set the text to be mobile and
17:08 then on tablet I'm actually going to go
17:10 ahead and change the text that's
17:12 available inside that to be tablet and
17:15 then on desktop I'm going to go ahead
17:18 and change that to be the text of the
17:20 image to be desktop okay
17:25 and let's go ahead and I'm just going to
17:27 replicate this image to the other
17:29 columns okay now let's see this in
17:33 actually in action in preview so here we
17:36 are in preview and you'll see that I
17:37 have um I'm in desktop view and I have
17:41 three images and it's using the desktop
17:44 image now once I start going down my
17:48 device width will notice that right now
17:51 I've reached tablet with and all the
17:54 images had changed to be the tablet
17:56 image I'm going to go ahead and shrink
18:00 that a little bit more and you'll notice
18:02 that we are now on mobile and my three
18:05 images are now mobile okay now what you
18:08 might notice now is that we kind of have
18:10 a similar issue like we did in our
18:12 banner where we don't have much we don't
18:14 have any spacing at all in between our
18:16 three columns and there's no spacing at
18:18 all at the bottom here so let's go ahead
18:21 and start fixing that so I'm going to go
18:24 ahead and adjust the three column
18:25 padding just that we did in the previous
18:27 example with the two column in the
18:28 banner I'm going to do it a little bit
18:31 different this time though I want a one
18:32 rim on the top and one room on the
18:34 bottom and then I actually want one rim
18:37 on the bottom of each column okay now
18:42 before I preview this I actually want to
18:44 add a little bit more pizzazz to these
18:46 images so what I'm going to do is I'm
18:49 going to go ahead and add an animate
18:51 stack into here and what we're gonna do
18:56 is we're going to animate these images
18:58 in um and the animate stack allows you
19:01 to you know nicely fit you know animate
19:03 stuff onto the page so I can do is I'm
19:05 going to copy this animate stack and the
19:07 default animation I'm happy with so
19:09 let's go ahead and do that I can go
19:12 ahead and boom boom okay
19:17 and let's go ahead and preview this page
19:21 now what you'll notice is if you noticed
19:24 these ant these images did quickly fade
19:27 in and down as we preview the page okay
19:31 I'm going to go ahead and actually tweak
19:33 this a little bit so that it's a little
19:36 bit more noticeable and I'm actually
19:38 going to add some
19:39 lays to these animations so I can
19:42 actually delay the first one by a
19:43 hundred milliseconds and then I'm going
19:45 to delay the second one to be 500
19:47 milliseconds later so I'm going to do
19:48 600 milliseconds and then that one I
19:51 want 500 milliseconds after that one so
19:54 I'm going to do 1,100 milliseconds let's
19:58 see what this looks like so as we see it
20:03 nicely animated our images in order so
20:06 it first animated the first one 500
20:09 milliseconds later animated the second
20:11 one and later it than it did the third
20:13 one that adds a really nice effect to
20:15 our page that our users will definitely
20:17 like now the last things we're going to
20:20 want to add to our page is a menu bar so
20:23 we're going to use the top bar menu
20:25 which is kind of like the flagship menu
20:27 with foundation and then we're also
20:30 going to want to add a footer at the
20:32 very bottom of the page and I'm actually
20:35 going to do that with a panel stack now
20:38 let's look at top bar and um top bar I
20:42 like the default style I think we're
20:44 going to keep it mostly intact one thing
20:47 I do want to I want to get rid of that
20:48 site logo I only want to show the site
20:50 title and I don't want to show the site
20:51 slogan either so I'm happy with that I
20:55 think the default top bar just removing
20:58 a couple things is exactly what I want
21:00 so if we do a quick preview on this
21:02 we'll see that the top bar looks nice
21:05 but it we definitely don't want this
21:06 color um and I think it would look nice
21:08 if it was actually in sync with the with
21:11 the footer color so maybe um we can use
21:14 like a deep purple from from one of
21:18 these icons um I think that would look
21:20 nice and also we have a little bit of
21:22 padding issue on the panel stack we can
21:24 we can resolve that pretty easily so if
21:27 we go down to the panel stack look at
21:29 some of the settings here we're going to
21:32 actually turn on remove bottom margin
21:36 and then actually on the paragraph stack
21:38 inside I want to remove the bottom
21:40 margin from that as well and then on the
21:44 panel stack I also want to remove the
21:47 border so we want no border at all on
21:49 the panel stack
21:50 and let's quick preview that that footer
21:53 is is very close to the style that I
21:56 that I want right now let's let's look
21:58 at actually styling the the top bar and
22:02 the footer to kind of keep those colors
22:06 in sync and the way that we're going to
22:08 do that is inside site Styles we're
22:11 going to use something called swatches
22:13 and I'm going to utilize swatch one so
22:18 if we go into site Styles and look down
22:20 to though our swatches we'll notice that
22:22 we can define different colors for a
22:23 swatch and I want to change the default
22:26 color of swatch one to be a color that
22:28 I've already found and liked so what I'm
22:31 going to do now is I'm going to go to
22:32 top bar and I'm going to look for the
22:34 background setting on top bar and I'm
22:36 going to set that to use swatch 1 and
22:39 what that's going to do is that's
22:40 actually going to use the cult the two
22:42 colors from swatch one and set that to
22:45 be the background and text color for
22:48 these stacks and I'm going to go ahead
22:50 and go all the way down to panel and I'm
22:53 going to set the style for the panel to
22:55 also use swatch one and what you'll
22:57 notice now is that the color of my text
23:00 in the panel now match the color of top
23:05 bar this is really awesome now that I'm
23:10 kind of using this color I'm thinking
23:12 that the actually the title here would
23:14 look really great if I also use to that
23:16 same deep purple so I'm going to go
23:20 ahead and I'm going to go to this header
23:22 that I have in the banner and I'm going
23:24 to set the style here instead of
23:25 alternate to you swatch one and what
23:30 we'll see now is that the the color of
23:33 the menu matches the color of my header
23:37 which also matches my footer now at any
23:42 time I can actually go ahead and change
23:45 the color of my swatch and it will match
23:48 everywhere so for example I may want to
23:53 subdue this color just a little bit so
23:55 I'm going to go to my swatch and I want
23:58 to change the keep the same color purple
24:00 but I actually want to add just a little
24:01 bit of
24:03 opacity to it let's go ahead and maybe
24:06 add a 85% opacity that kind of subdues
24:12 the purple a little bit and it kind of
24:14 you know blends that the purple in there
24:16 a little bit and of course applies the
24:18 same exact stylings to my footer so as
24:21 we see now our page is starting to look
24:23 really sharp right everything is all the
24:27 color settings are kept in sync with
24:29 sight styles we have nice responsive
24:32 padding on our banner so that really
24:35 looks different on tablet and mobile but
24:38 our content still shines right our
24:41 images we have different images loading
24:43 on mobile tablet and desktop so that we
24:47 are optimizing our site for the device
24:49 that our visitors are using right this
24:52 is really great now there's one last
24:55 little picky thing that I'd like to
24:57 change and has to do with this banner I
25:00 really think that this text would look
25:03 awesome if it was centered vertically
25:06 with this icon let's go ahead and give
25:10 that a shot so in order to accomplish
25:13 this essentially what's happening is the
25:16 column that contains the image is taller
25:18 than the content that has the text so
25:21 there's a feature in all foundation
25:23 column stacks that allows us to equalize
25:25 the height of those columns so inside
25:28 the foundation two columns stack here
25:30 I'm going to turn on equalize and since
25:34 I only have the columns in tablet and
25:38 desktop I'm only going to equalize these
25:41 columns on tablet and desktop now that's
25:44 not going to auto center my content now
25:47 in order to accomplish this we're
25:49 actually going to use a non foundation
25:51 stack called target target is a very
25:54 powerful Stax positioning tool so we're
25:57 going to go ahead and add target to our
25:58 page and what I'm going to do is I'm
26:03 going to add my header and my paragraph
26:06 text to that and then inside target
26:09 we're going to set target to be a
26:12 vertical position centered
26:16 now remember we only want to vertically
26:19 it Center on tablet and desktop because
26:22 that's all the only time we actually
26:24 have two columns so inside the
26:26 conditions we're going to say that we
26:28 only want to actually target the
26:30 position on tablet and desktop and
26:33 that's it we should be golden let's go
26:36 ahead and preview so as we see now my
26:39 header and text here are centered
26:41 vertically in our in my two columns so
26:44 that they align up perfectly with the
26:46 image and that continues through when we
26:50 go down to tablet but then when we break
26:53 down to mobile we'll see that everything
26:56 still works exactly as we expected it
26:59 where our image and our text take up the
27:03 entire width hey everybody so we covered
27:07 a lot of ground in this video right I
27:10 hope you you absorbed most of it we've
27:13 really touched based upon all the basic
27:16 building blocks of foundation now we
27:19 built we did a lot more than just build
27:21 a web page we actually built a theme and
27:25 what we're going to do in the next video
27:27 is we're actually going to learn how to
27:29 take what we've built and apply that
27:32 globally across multiple pages this is
27:36 really exciting so I hope you enjoyed
27:39 this video go ahead and watch it again
27:41 if you need some help okay or if you
27:43 didn't quite grasp a lot of things right
27:46 because we did cover a lot but we're
27:48 going to go ahead and keep steam rolling
27:50 into the next video so go ahead and
27:52 watch the next video and I hope you
27:54 enjoy it
27:54 thanks everybody bye"}]