Transcript

00:06 hey everybody Joe workman here and today
00:09 we're going to be doing a new video
00:11 series on getting started with
00:12 foundation now a lot of things in the
00:15 Rapp Weaver community of change since I
00:17 originally did the getting started
00:19 videos for foundation we have rapidly
00:22 over six stacks three and foundation 1.
50:25 and a lot of things have changed and you
00:29 know we have a lot of improvements on
00:31 how we can actually build websites now
00:33 with foundation so I thought I would
00:35 update the entire thing and do a video
00:37 series on getting started so what we're
00:40 going to is we're going to build a small
00:41 website using all the latest stuff and
00:44 um see kind of how we can make something
00:48 great so let's get started so here's the
00:53 project file that we're going to build
00:55 from scratch uh and basically show you
00:59 how to do it step by step this entire
01:02 site so it's just a simple site that has
01:05 three pages we'll notice that all three
01:08 pages have the same header and the same
01:11 with the exception of the little caption
01:13 right we have the same footer we have
01:15 some page content in the middle okay and
01:17 then we have a contact page so we're
01:20 going to use a wrap Weaver six stacks
01:23 three and foundation 1.5 to build out
01:26 this exact project file so let's get
01:29 started so here we have a completely new
01:33 and blank wrap weaver project file so
01:35 let's go ahead and add a new Stax page
01:37 and let's call it home now the next
01:42 thing that we want to do is we want to
01:43 make sure that we actually have the
01:44 themes set to be foundation so if we go
01:47 to themes and make sure that foundation
01:49 is selected that way we can apply this
01:51 theme to all of our pages now let's add
01:56 some content to our page so let's go to
01:59 our Stax library and what we're going to
02:02 do is we're going to add site styles now
02:05 what site styles is is it is a stack
02:08 that contains all of the settings for
02:12 throughout your found
02:13 in theme this is all the color settings
02:15 your site backgrounds your text there's
02:19 a lot of other advanced options that
02:22 we're not going to go in in this video
02:23 but there are videos that review all of
02:25 the settings and site styles and I
02:27 recommend that you look over those but
02:30 for most of this video we're going to
02:31 accept kind of the default settings for
02:34 site Styles because the default settings
02:36 will settings will give you a very nice
02:38 website so the first bit of content that
02:41 I want to add to my page is that site
02:44 banner that contained kind of the header
02:46 for our website so I already know the
02:48 structure for that and because I've kind
02:51 of planned it out beforehand and I'm
02:53 just going to quickly add the stacks
02:54 that we need first I want a one column
02:56 stack that contains the main background
02:58 and then inside of that I have a inner
03:02 box that contains more content and
03:05 inside there I have a two column stack
03:07 and then I have an image and then on the
03:13 right-hand side I have a header and a
03:16 paragraph now I should add that what
03:20 I've done in the stacks libraries I've
03:22 created a folder just for the foundation
03:24 stacks and I recommend you do this if
03:27 you're going to be using foundation
03:28 because it's a quick way to access all
03:30 of your foundation base stacks really
03:33 quickly so I know I can go to this group
03:35 and I can quickly access all of the
03:38 foundation stacks with a click of a
03:40 button okay so let's start building out
03:42 this site header and on the outer one
03:46 column stack I'm going to add a
03:47 background and it's going to be a
03:49 background image and I'm going to click
03:52 on the styled background for the stacks
03:55 and I'm going to drag in my image if you
03:57 notice it's actually added a little bit
03:59 of tile and we want to change some of
04:01 these tile options so I actually don't
04:03 want the image to be tiled and I want
04:05 the image size to be filled so it's
04:06 going to cover the entire background and
04:09 that's pretty much what I want now on
04:12 the inner column I'm going to have it I
04:15 want it to be a transparent overlay so
04:17 I'm going to add here as I'm gonna add a
04:19 color and I want it to be white but I
04:23 want the background to bleed through a
04:25 little bit so I'm going to make that
04:26 about
04:27 um let's make it 75% so that kind of
04:32 gives me a frosted glass look where the
04:34 background behind it is actually
04:36 bleeding through now let's go ahead and
04:40 look at the image so I'm going to add an
04:43 image here and basically in the image
04:46 settings I'm just going to drag and drop
04:47 the image that I want and let's go ahead
04:51 and add some content to our title in our
04:55 paragraph so as you see we're getting
04:57 there right we're starting to get
04:59 something that looks a little bit nicer
05:01 let's tweak this I think the icon is a
05:03 little bit large and I want maybe the
05:06 instead of having an equal column split
05:08 I want to go at it and make this a
05:10 little bit smaller for the image of the
05:12 image column so inside the two column
05:15 stack we're going to go ahead and make
05:17 the column one okay we're going to make
05:19 that a size of four and then column two
05:24 is we're going to make that a size of
05:25 eight and what you'll notice with the
05:27 foundation column stacks is that the sum
05:32 of all the columns needs to equal twelve
05:34 so imagine that this page was divided up
05:38 into twelve equal units and column one
05:43 is taking up four of those and column
05:45 two is taking up eight of those units so
05:48 that's how we can break things up and
05:50 what you'll notice is that on this two
05:53 column stack we're actually using tablet
05:55 sizing so this means on tablet and
05:58 desktop it's going to use the four by
06:01 eight but then if we look at the mobile
06:03 sizing setup for this two column it's
06:06 going to use all twelve so if I
06:08 temporarily turn off tablet sizing we
06:12 will see on mobile that the image will
06:15 take up the entire width and then the
06:17 text will also take up the entire width
06:19 now a quick thing since we're not really
06:21 using you know need to see site Styles
06:23 all the time right now I'm going to go
06:25 ahead and click on the hide button in
06:27 the stacks toolbar so I can hide it now
06:29 we can kind of focus a little bit better
06:31 on our banner so I I have my two column
06:33 stack uh you know set up nicely in terms
06:36 of the division between the columns
06:38 there's a couple of things I don't like
06:40 text this header text to be black and I
06:45 also full notice it is currently set to
06:47 being h3 and this is going to be my main
06:49 page title so I want to make sure I
06:51 change that to be a page 1 so it is now
06:55 h1 and if you notice it looks different
06:57 because site Styles actually styles h
16:59 tags differently than h3 tags now also I
07:05 want to go ahead and make this instead
07:08 of a the default style I want to make it
07:10 the alternate style so it's going to be
07:13 white and I want my paragraph text to
07:16 also be white so I'm going to click this
07:19 paragraph and I'm going to go ahead and
07:21 make that the alternate now the contrast
07:23 with the white background is a little
07:25 bit not enough so what I'm going to go
07:27 ahead and do is on this white background
07:29 I didn't go ahead and change that to be
07:31 50% opacity there we go that that makes
07:36 this this white text you know pop a
07:39 little bit better now let's preview this
07:42 now we'll see that you know we're
07:44 getting there but the spacing with my
07:46 content is a little bit off it's not
07:48 it's not perfect and I think we can do a
07:51 little bit better here now another quick
07:53 note if you don't want to keep
07:54 flip-flopping back and forth between
07:56 edit mode and preview mode you can go
07:58 ahead and use these stacks view modes
08:01 and in foundation it uses these as a
08:04 quick preview so that you can quickly
08:06 preview your stacks and it's not going
08:10 to be an exact representation in all
08:12 instances but in 95 percent of the case
08:15 you know you're going to see a very
08:17 close representation of what your site's
08:20 going to look like in preview mode now
08:22 you can also quickly toggle between
08:23 these view modes using 1 2 & 3 so if you
08:28 quickly see me preview things you'll see
08:30 that I'm actually toggling with a number
08:31 keys on my keyboard using the 1 & 3 keys
08:34 so for this main banner image I'd like
08:38 the background to kind of have a a bunch
08:41 of padding so that this white box sits
08:44 inside of it so if we go to this
08:47 settings for this stack let's go ahead
08:49 and let's go ahead and turn the gutter
08:51 and the gutter on a one column stack is
08:54 some patio
08:54 that it adds to the content on the left
08:57 and the right and I'm going to
08:58 completely turn that off and then we're
09:00 actually going to go into detailed
09:02 padding here and I'm going to go ahead
09:04 and say padding on the top and bottom I
09:07 want it to be five REM and on the on the
09:12 left and the right I'm actually doing a
09:14 little bit less I'm going to do three
09:15 REM on the left and the right and if we
09:17 quickly preview this we'll see that I
09:19 have a nice generous amount of padding
09:22 around the outside of my box and that's
09:24 exactly what I want now on this inner
09:28 box though the content is kind of
09:30 hugging that box a little bit more so
09:32 let's go ahead and add some padding to
09:33 that so on this inner one column stack I
09:36 just want some padding on the top and
09:37 the bottom so I'm going to go ahead and
09:39 set that to be two REM so this is really
09:42 starting to look nice it's getting
09:43 really close to what I've kind of
09:45 originally envisioned I have my outer
09:48 box with a nice background and then my
09:50 inner box that lets the background bleed
09:52 through and then I have some nice
09:54 padding all the way around it so now
09:57 let's examine this banner image to see
09: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"}]