Transcript

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