No 4 Source demo - Building a Cool Grid Plus Pro Hero layout

Here is a really cool and simple way to use the new Grid Plus Pro to create a full page layout that you can adjust and it will behave perfectly at all sizes.

To create this in Source, Add a Grid Plus Pro stack and add 5 Grid Items. Leave the 1st and 5th empty. In the 2nd Item add a logo and limit the height to 350Px, in the 3rd add a Header and in the 4th add text or navigation.

In the parent Grid Plus Pro add 3fr minmax(200px, 350px) auto auto 1fr as the row template and 1fr as the column template. Set the Height to 100vh.

Settings should look like this:

In summary this is a Grid Plus Pro with just 3 non default settings.

That’s it.

Notes

  1. The row template has 5 entries, i.e. 1 for each grid item.
  2. The minmax(200px, 350px) setting allows the Grid Item to grow to a maximum of 350px high and then shrink no lower than 200px. These can of course be adjusted.
  3. auto allows the content to take up as much heigh as is required which in these cases are, the height of the Header text and the height of the Nav or whatever text is used.
  4. The 3fr and 1fr position the Image+Header+nav/text on the page with a ratio of 3x at the top to 1x at the bottom. X being whatever the available space is.
  5. If you wanted to centre the layout you would use 1fr minmax(200px, 350px) auto auto 1fr. Many ways to do this of course.

P.S. I screen captured the top layout image and layout idea from this video - https://d.pr/i/leM2OS

10 Likes

@Webdeersign Hi Gary, thanks for the example. I wanna let you know i really appreciate these little design ideas that you throw up, as they help me build an understand of how this grid approach works, how to utilise these awesome stacks that are coming in Source, and are inspiring! Thank you.

1 Like

Thanks. We are only starting to scratch the surface with how we can build CSS Grid layouts in RapidWeaver/Stacks and also learn how to implement the different ways that Stuart has implemented.

IMHO there are some exceptional things about the use of CSS Grid to build these layouts using Grid Plus Pro. No breakpoints need to be used to adjust widths or hide stacks. The image can be controlled completely by the minmax(200px, 350px) values. Only 3 stacks settings need to be set. The code is minuscule and all part of the Source micro footprint.

This layout has formed the basis of all of my new layouts when I need width control which is nearly always.

One other thing about using CSS Grid is that although there is a small learning curve to get to grips with the template idea, the knowledge that you learn can be applied for many years in any other system that uses CSS Grid. In other words you learn something useful and not just a specific way to achieve a layout specific to one framework (not than any other RW framework can do this AFAIK).

https://shakingthehabitual.com/stacks/source/blank-page-comparisons/

1 Like

Hej

Webdeersign, Thank you. Your post make me realize something important. I have run into problems lately, I am sure some does not wonder why that is :-) But actually I am not stupid, but I am really confused about what I can do with the different “frameworks”. I have done the mistake and bought all the available “frameworks” for Rapidweaver, except Foundry. Due to all the different ways to do things, and my inability to get time to really properly learn all those “frameworks”, I have found my self being really, really stupid sometimes, because I am confused at what I actually can do and not do. Another mental limitation I have, is that I am an “old” Rapidweaver user, so I am used to the ease of use of stacks and even premade themes, so on my backbone I am still in the habit of things should be easy to use. This has changed with so-called frameworks like Source and now Foundation 6. These are also my favorite theme based frameworks and stacks. With Foundation 6 I can style primarily everything, and that is absolutely amazing, but I feel I am limited in the lay-out options that is possible with only Foundation stacks. I am suspecting this is caused of my inability to understand it properly. Whereas Source really have fantastic lay-out possibilities as you so nicely describe in your post. So I feel I should stick to one or two frameworks and then take the time to learn them properly, as you also state here is a very good investment in the future, even if one should go to other systems. And Source and Foundation 6 would be my first recommendation.
I will take your advice into account, and instead of continue three very important projects I am working on, I will properly learn Source and Foundation 6. After that I will continue, because as it is now, I am really wasting too much time finding out how to do the difficult thins I need to do. One of my projects require a very complex menu, and I am really only able to make it in Foundation 6 and with the help of Andrew Tavenors BWD stacks I can make it in Source also. Any other menu stack will not allow me to make it. But it is very time consuming for me. For this reason I am also eagerly awaiting Andrew Tavenors BWD upcoming Menu Lab.

Kind Regards
Kent

You can build really nice sites in any framework - you just need to find which one suits your needs / abilities / workflow best. That might even change from project to project.

I built Source to largely suit what I wanted / needed from a framework. I don’t need / want 200 stacks and a ton of code that I’ll never use. In saying that though, F6 would definitely be my number 2 framework pick - I do like what it is trying to do (but I do think it is very difficult for beginners to create a decent looking site with it).

As for Grid Plus as a layout mechanism…I don’t think there is anything else like it in RW. CSS Grid really is unbelievably powerful with a tiny css footprint. And the beauty is, even if Source is not your framework of choice, you can use Grid Plus anywhere with the additional Grid Enabler stack!

2 Likes

Yes those stacks are incredible, and I have both of them :-) I am going back to the Habitual Shaker school and refresh my Source “Power” to finish of my projects :-)

1 Like

I assume you have a very good reason for wanting to use F6 and Source, because you will complicate your life and have to learn 2 systems of which F6 is far more complex with about 20 times more stacks than Source.

F6 doesn’t even use CSS Grid AFAIK, so the advantages of CSS Grid are not accessible unless of course you use the Source Grid Enabler inside F6 - but kind of that negates the whole point of using a big framework like F6. Not saying there is anything wrong with F6, and if it had appeared 2 years ago it would have led the way - until Source came along of course.

CSS Grid simplifies layouts and even very simple layouts that are impossible or challenging to build without Source, are now possible.

The other advantage is that with Stacks4, you can build a CSS Grid layout once, convert to a Template and now you have a custom designed “stack” to use in all your projects.

1 Like

My good reason is only that I feel with these two, F& and Source, I will be able to do most of what I want to do. By using these two I will not need the colossal amount of stacks I have hoarded during the years :-) And yes you are correct F6 is really hard to get the grips of. But it is slowly penetrating my idle brain now, so I will continue learning it. But off course, first I will finish learning Source right now, so I can finish my projects. Then I will devote time to learn F6.

I totally agree. I have created 2 stacks folders. 1 has my 1500+ all stacks and the second has everything I need in about 35 stacks:
Source
FAQ2
FormSnap
Splider
Gallery3
Poster2
Plus a few BWD stacks

I swap the names as I need them and restart RW. So my perfect working one is called Stacks and the other is Stacks2. The second folder is just to support existing builds. Only the Stacks folder is loaded up by RW.

This has made RW7 more stable in my experience and also quicker to load and interestingly any stack updates, update almost instantly with no hanging.

1 Like

Im also curious what Tav will drop on us for Xmas? Im curious about his Core stacks and how they will play out in Source

No. My stacks screen shot in the first post is definitely Grid Plus Pro and this layout is created in Grid Plus Pro. Grid Plus Pro has this really cool Breakpoint Child stack facility and you can add as many as you want.

It could however, also be created in Grid Plus or in a Coder with the right classes attached to it.

Me too, I am beyond curious… :-)

I need to get my house move done before anything happens.

Core works in any theme or framework, it is a modular light weight design system and will start with the replacement for Sections and its associated stacks and be followed by many other things that use the shared core components.

Core has been extensively tested in Source and also in Foundation, Foundry and UIKit over the past year. If it were not for my wife moving jobs and the resultant house move it would have been released already.

The other product line will be the menu stacks colloquially known as menu lab. I’ve rewritten them all again, we are now at total rewrite #3 - I don’t like releasing things until I’m more than happy.

8 Likes

I blame my wife for things too :)

2 Likes

Do you have anything for us to peek at like a demo site?