About Stacks Guru

Stacks Guru is born from the need to search the vast number of videos out there on stacks built for Stacks Pro and the Stacks 5 plugin for Rapidweaver.

We have scraped over 500 videos to get the transcripts for each in order to make the spoken word searchable.

Please use this free tool to help you learn and discover the awesome power that Stacks and the stacks made for Stacks have to offer.

Stacks Guru

Video Reference

Leave a Tip!

Every little bit helps to keep this going. I'll be doing my very best to keep up with the likes of Joe when it comes all the videos he posts!

BluePrint ONE   Responsive Setup thumbnail

BluePrint ONE Responsive Setup

Introduces the responsive layout features of the BluePrint ONE stack.Introduces the responsive layout features of the BluePrint ONE stack. 

Categories: Demo


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"}]