Transcript

00:06 hey everyone Joe Workman and this is going to
00:09 be video 2 of our foundation getting
00:11 started series right so if you haven't
00:14 checked out video 1 what we did is we
00:16 built out an entire web page we went
00:18 over a lot of content so if you are new
00:20 make sure that you check that video out
00:22 so in this video we're gonna take the
00:25 content page that we built out in video
00:27 1 and basically build that into building
00:31 blocks that we can be applied to other
00:32 pages this is really big it's
00:36 essentially using this stack called this
00:38 feature of stacks 3 called partials and
00:40 well it's huge right I mean it's really
00:45 gonna revolutionize and you'll see here
00:47 how partials is gonna revolutionize the
00:49 way that we build websites now because
00:52 with foundation you can build your theme
00:54 save that theme in partials and apply it
00:57 across all your pages right so without
01:00 further ado let's jump in and get it
01:01 done okay so here's the web page that
01:06 we've built out in video 1 and what
01:09 you'll notice is that essentially the
01:11 the page is broken down into three
01:13 sections at the top we kind of have our
01:16 header area okay
01:18 then below that we have our main content
01:22 and then below that we have our footer
01:26 okay that's essentially the main
01:28 structure that I want to have on my site
01:30 I like to have every single page to have
01:33 this same exact banner okay except maybe
01:35 what we're gonna do is we're gonna
01:37 change this text so this checks this
01:39 text box inside here can be changed but
01:42 I want everything to be the same I want
01:43 the same icon I want the same banner
01:46 background I want the same top our
01:48 Styles now my content that's gonna be
01:51 completely different right but the
01:53 general shell for my content I want to
01:55 make sure that we have the same padding
01:56 and whatnot and then my footer I want to
02:00 be exactly the same the same text the
02:03 same color the same everything across
02:05 every page so now what we're gonna do is
02:08 we're actually going to define those
02:10 structures that I talked about on our
02:12 page
02:13 we do this using the new structure stack
02:15 that came with foundation 1.5 wonders
02:18 I'm going to add a structure stack to
02:20 the page and if we look at the settings
02:23 for the structure stack you'll see that
02:25 we have a structure type setting and
02:27 what I can do is I can set this to be a
02:29 header so this tells search engines and
02:33 device readers that the content within
02:35 this structure is our header our page
02:38 header so I'm going to add our entire
02:41 page header in that now for simplicity
02:45 sake I'm actually gonna add top bar and
02:49 site Styles into this as well and the
02:53 reason for this is that on this
02:55 particular site I want to make sure that
02:57 my header my top bar and site Styles are
03:01 going to be the same across my entire
03:03 site depending on the way you're styling
03:07 your site you may want to keep them
03:09 separate because what we're gonna do now
03:11 is we're gonna save this header
03:14 structure has a partial so that we can
03:18 add it to any web page in our project
03:20 and to do that you select the stack that
03:23 you want to become a partial and you
03:26 click on the green partial button and
03:31 what that will do is that will save this
03:33 we are now in partial edit mode and I'm
03:36 gonna create this and call this a header
03:39 partial or just let's call it a header
03:45 so now I have this particular stack set
03:49 saved as a partial and if we go back
03:54 we'll see that all of the stacks that
03:56 are contained within that partial are
03:58 now labeled as a header now if we were
04:03 to go to another page on our project and
04:05 we open up the stacks library you'll
04:08 notice that the second group inside the
04:11 stacks library is for partials and the
04:14 header partial that we just saved is
04:16 there and what we'll notice is I can
04:19 just add this to the page and I
04:22 immediately have my entire stacks
04:25 partial
04:26 that I created now it's awesome is to
04:30 edit this partial again you just simply
04:31 double click it and you'll go into
04:34 stacks partial edit mode and I can
04:39 change any setting throughout all of
04:41 these stacks and they will change across
04:44 all of the pages that use this partial
04:46 that's powerful now I told you earlier
04:51 that I didn't want to have the header
04:53 and the text actually be the same across
04:56 any pages and what I can do is inside my
05:00 partial editor you'll notice that I have
05:02 some pins and what I can do is I can
05:05 unpin this content so if I were to unpin
05:11 this content you'll notice that that
05:13 that content is actually now removed
05:16 from the partial and what I can do is I
05:21 can now edit that content across all of
05:25 my pages so on this particular page I
05:29 want to call this about so as you see I
05:34 can actually customize the text content
05:35 and only the text content on a per page
05:38 basis but all the rest of the content
05:41 remains the same if I go back to the
05:44 home page we'll see that the header
05:46 content still remained what it was
05:48 before now let's repeat this process for
05:53 our main content area so what I want to
05:57 do is I'm going to add a structure stack
06:02 and then actually what I want to do is
06:04 I'm gonna mimic this one column stack so
06:07 I'm gonna go ahead and add a one column
06:08 stack and if we remember this one column
06:11 stack had a three red padding on the top
06:14 and the bottom and what I'm gonna do is
06:21 I'm actually going to create a partial
06:23 out of this okay now actually I forgot
06:27 in our structure stack we actually want
06:29 to set the structure to be main because
06:32 this is going to be defined our main
06:34 content area so here we have a structure
06:37 that is main with a one column stack
06:39 that
06:40 three REM padding on the top and the
06:43 bottom so I select my structure stack
06:47 and I create a partial from that let's
06:50 go ahead and give it a title of main
06:52 content and let's go back now actually I
06:57 forgot
06:58 inside the main content which you want
06:59 to unpin this drop area because what
07:03 that means is the content area for this
07:06 entire thing is going to be different
07:08 across all pages so go ahead and go back
07:11 and now I have a Stax drop zone which I
07:14 can then drop all of my content in so
07:20 now that I've moved all of my main
07:21 content into that main content partial
07:23 that we created I can go ahead and
07:25 delete the old one column stack and last
07:28 but not least let's go ahead and create
07:30 our partial for our footer so I'm going
07:32 to go ahead and quickly just add a
07:35 structure stack to the bottom of the
07:37 page hide my library we're gonna go
07:42 ahead and set our data our structure to
07:45 be a footer I'm gonna go ahead and save
07:48 my panel inside the structure click my
07:52 structure add the partial we're gonna
07:55 name this a partial of footer whoops
08:01 and actually in this case I want the
08:05 text to be the same across all my pages
08:07 so I am NOT gonna unpin this text area
08:10 because I want to make sure that it's
08:12 the same across all my pages I'm gonna
08:15 go ahead and go back and now we have all
08:19 of our entire site saved nicely within
08:23 partials except for the content that's
08:25 specific to the page so now I can go to
08:31 my about page and start heading all the
08:33 partials that we did so below our header
08:35 we want our main content area and then
08:38 below the main content area is going to
08:40 be our footer very easy and then in our
08:44 contact page we want to have a header
08:48 and then we're going to add our main
08:50 content and then below that we're gonna
08:52 add a footer
08:55 now obviously this is our contact page
08:57 so we're gonna change the text and there
09:04 we go
09:04 we now have a site that contains
09:08 basically our theme right our header our
09:11 main content area in our footer and it's
09:15 all kept in sync across every page
09:17 through stacks partials okay so now that
09:22 all of our pages have partials that sync
09:25 basically our theme across all the pages
09:28 right our header our main content
09:30 container as well as our footer let's go
09:33 and add some content to the about page
09:36 so on the about page I'm just gonna go
09:39 ahead and add a two column stack in here
09:41 and then I want a header and a paragraph
09:46 on this side with an image on this side
09:50 and let's go ahead and add a divider
09:52 between the header and the paragraph
09:54 okay it's pretty good and let's go ahead
09:57 and look at some of the settings here
09:59 for the image I'm gonna go ahead and
10:01 just add in a default real Mac image
10:04 okay I'm actually going to change the
10:07 column split here a little bit so on
10:09 tablet and desktop we're gonna make it a
10:11 a nine by three and then on this header
10:17 we're just gonna say about real Mac okay
10:22 on this divider I only want the bottom
10:24 margin because I want the line to be
10:25 directly under my header and then on
10:28 this paragraph actually want to remove
10:30 the bottom margin and we don't need
10:32 quite so much text okay this looks
10:38 really nice I'm going to go ahead and
10:39 replicate this out a couple more times
10:42 now I duplicated this content out just
10:45 to have a little bit more content about
10:46 the other people that developed these
10:48 amazing tools and if we preview this
10:51 we'll see that we now have our header
10:55 and banner content and sync across all
10:57 pages our content area is unique per
11:00 page our footer is in sync and the text
11:04 here is
11:06 separate on each page and of course we
11:08 still have all of that responsive
11:10 behavior right so on tablet we have are
11:13 a different look for our banner and then
11:16 when we get down to mobile it looks even
11:18 better right because you know everything
11:21 is shrunk down we have enough space for
11:23 our content um this is just a really
11:26 great way to build websites and if we
11:30 look again just to preview our homepage
11:31 again we have the same content okay or
11:36 I'm sorry the same content is before it
11:38 is unique to this page but our header is
11:41 the same and it's all kept in sync this
11:43 is really big ok everyone so I wanted to
11:46 keep this video pretty short because we
11:48 didn't do a lot compared to video 1
11:51 right but what we did is huge right it's
11:55 revolutionary because these partials
11:57 allow us to take what we made before
12:00 save them within our project file and
12:04 use them anywhere we want now we did do
12:08 it pretty simple right we have you know
12:10 all of our header content in one partial
12:12 right it's possible that maybe you have
12:14 a partial that contains just site Styles
12:16 and a partial that contains top bar and
12:20 remember that you can actually have
12:21 partials that can contain other partials
12:24 right so we we did have it rather simple
12:28 we have our partial for our header our
12:30 main content area and our footer we also
12:34 use the structure stack to get a give us
12:36 a little bit of benefit for screen
12:38 readers and for you know search engines
12:40 to know what sections of our web pages
12:43 are as well so we defined the structure
12:47 of our website define the templates
12:49 using partials and then applied those
12:52 templates across all the pages and then
12:55 remember that we unpinned certain
12:57 content so that that content was unique
13:02 to each page inside of a partial this
13:06 way we can create an enclosure like our
13:08 banner that the outside or parts of it
13:12 are global but the actual text was
13:15 different on every page this is very
13:19 powerful this'll
13:20 a lot of flexibility and it's really
13:23 gonna save us a ton of time while
13:25 building our websites and remember with
13:28 partials when you change a setting
13:30 inside one partial it's gonna change it
13:33 across all of the pages that use that
13:35 partial so I hope you practice using
13:39 these and you know watch this video
13:41 again if you didn't fully grasp some of
13:43 that concept and in video 3 the last
13:46 video of our getting started series
13:48 we're gonna jump into some of the last
13:50 you know remaining things that we need
13:52 to think about for our websites so I'll
13:55 see you there
13:55 thanks everybody bye
14:04 you"}]