0:00 [Music]
0:07 blueprint is simply a one column stack
0:10 but with more options for responsive
0:12 layouts backgrounds another features if
0:15 you know how to use the stacks one
0:17 column stack like this then you already
0:19 know how to use blueprint the one column
0:23 has backgrounds borders and layouts
0:28 blueprint has the same but it has more
0:32 options
0:32 it has responsive layouts just like the
0:36 stacks column but for medium and large
0:39 devices as well and two break points so
0:42 we get three sizes that we can use the
0:47 controls are also very similar
0:48 we have fill and flexible in addition to
0:54 the standard width setting we can also
0:56 define which limits so we can use
0:59 blueprint as a container for a maximum
1:02 width we can also set the alignment and
1:06 we can actually also use it as a fixed
1:08 width if we want just by setting these
1:11 two limits the same there isn't a
1:13 specific fixed width setting because
1:15 it's so easy to do it like this it makes
1:17 sense not to complicate it we can also
1:22 use all the child stacks from the pro
1:24 style stack like backgrounds overlays
1:28 borders and visibility's this means that
1:32 we have a great variety of backgrounds
1:34 that we can simply add by adding a child
1:38 we can add gradients we can add one
1:42 color to color three color radial and
1:44 these are all contained in the child
1:45 stack and the great thing is if you set
1:48 up a stack that you like you can simply
1:51 hold down the option key and drag that
1:53 background to another stack you can of
1:56 course also use the master styles for
2:00 your backgrounds so there only ever deal
2:02 defined once on the page in post-oil and
2:05 each of these stacks will just get the
2:07 appropriate class changing one in pro
2:10 styles will change all the backgrounds
2:12 of that type on your page
2:14 so it's also very quick and easy as well
2:16 as being efficient
2:19 blooping can also do overlaps and space
2:25 corners and links the overlaps are all
2:28 discussed in a separate video so I
2:30 suggest you watch that one and I've just
2:34 collapsed the overlap related groups now
2:37 so that we can see what we've got more
2:41 clearly for the layout blueprints
2:43 nominally mobile first but don't let
2:47 that term scare you off all it means is
2:50 that we can set controls for margins and
2:54 padding so if we add some padding to
2:56 this blueprint and we'll be adding it to
3:00 all screen sizes so if we drop in a
3:07 paragraph for instance so that we can
3:11 see then when we preview this we've got
3:16 the same padding at all screen sizes so
3:18 that's just like the standard one column
3:21 stack now if we want a different padding
3:24 for medium sized devices so say for
3:29 tablets then we can add a different
3:33 padding for tablets so we've got our
3:37 padding set to 100 pixels here if we now
3:40 look at our medium settings the padding
3:43 is going to inherit so all that means is
3:45 that the padding is going to use the
3:49 settings that we've set here which are
3:51 the general ones which start at the very
3:53 bottom of zero screen width or very
3:56 small screens if we want to override
3:59 that we could override it with basic
4:01 cutting so change the padding with a
4:04 slider and the same with the margins we
4:06 can if we want to add some detailed
4:09 margins for medium size screens then we
4:12 can do so here and all these medium
4:14 settings are only going to be used above
4:16 what we have set in the drive points
4:19 which is 640 pixels here if we don't
4:23 define any large size if the large
4:25 anything above a thousand pixels is just
4:29 going to inherit these medium settings
4:32 so he's not going to
4:33 essentially if we move this padding down
4:39 so it's a lot smaller so that's three
4:41 pixels on medium and then for large we
4:45 could say we wanted to go back up to
4:47 somewhere 85 just for sake of argument
4:51 so now when we preview this we're going
4:54 to get large padding medium padding
4:56 which was just three pixels then we go
4:58 down to small and it's back to 100 pixel
5:01 padding so it's very flexible and you
5:04 can set the padding that you need for
5:08 the situation that requires it and of
5:11 course exactly the same principles apply
5:13 for the film are good so let's say you
5:16 have a bit of content it may be over an
5:18 image or contain an image an image
5:22 itself and we want to make it 50% wide
5:26 of whatever we've got it in it maybe in
5:29 inside another stack over something else
5:31 and we want it right aligned but on
5:34 mobile we don't want it to be 50% wide
5:36 because that will be very tiny and end
5:39 up getting very tall so for our basic
5:43 layouts we're going to say well we could
5:46 say 100 percent but let's let's make it
5:48 96 percent white because that will give
5:50 us a bit of a space at either side and
5:52 we're going to have that centered so
5:55 below our medium breakpoint of 650 we
5:59 now get a 96% wide blueprint
6:08 I think you can Sivir Weavin with this
6:10 extremely simple example that he's
6:13 extremely flexible and very easy to use
6:17 one word of warning if you're using
6:20 foundation or foundry or anything that's
6:22 got a site with building to it you don't
6:26 need to start changing maximum widths
6:30 and and using blueprints all over the
6:32 place you can use them where you need to
6:35 use them if you just drop the normal
6:36 foundation column in that's going to
6:38 have a site width of a thousand pixels
6:40 anyway if you've got some content that
6:42 you need to control more carefully then
6:44 you use blueprint if you just need to
6:47 add a bit of padding here and there then
6:49 use blueprint it's it's not going to
6:52 write any code for any of these things
6:54 that are just left to inherit but it
6:57 does allow you to have more options even
7:01 if you're just starting padding then
7:03 you've got all these options for for
7:05 padding you can do percentage using the
7:07 REMS so you can make you can make
7:09 blueprint into a responsive space or if
7:13 you want just by adding some bottom
7:15 padding say eight and make it a
7:18 percentage then we've now got a
7:21 responsive space at the bottom of our
7:23 stack and really it's very simple and
7:30 there's not a lot else to it it's all
7:35 this flexibility comes together to make
7:38 something that can be very useful and a
7:43 bit a bit unique in terms of making
7:45 layouts but there's nothing at all
7:47 that's different in terms of setup from
7:51 as we started with the default one
7:53 column stack so it's very easy to get
7:55 going very powerful if you need it
7:58 please watch the other video on overlaps
8:02 and I hope you enjoyed the blueprint
8:04 stack and there'll be some more
8:06 blueprint stacks coming soon thanks for
8:09 watching see you soon"}]