New stack - CSS Grid unleashed

I may be more than a little biased but I do think that Source’s Grid Plus stack is the best grid stack available for RapidWeaver. It’s crazy powerful and makes full use of the amazing CSS grid specification (and flexbox!). By spanning grid items across columns and / or rows (and even overlapping them) it completely redefines what a ‘grid’ can be and enables you to achieve almost any layout that you can imagine. And if you want a completely responsive (and more traditional) block grid then of course it can do that too!

In case you are not familiar with Grid Plus then here are just a few examples of what it can do:

It’s no surprise to me then that the most common question I am asked is:

Can Grid Plus (and the regular Grid stack) be used in other frameworks?

The answer, until now, was a flat ’no’.

But I can see the appeal for Source users who still use other frameworks for certain projects (or legacy projects) and so I am now making available a Source Grid enabler stack. With this stack added to the page you can use Source’s Grid and Grid Plus stacks wherever you like. Bringing that CSS grid power to all of your projects.

Until the 31st March you can get it for 30% off with the code sth-unleash-grids (NB: You will need Source / Source Addons in addition to the enabler stack!). Download here.

7 Likes

This is pretty amazing and another game changer. Once you use Source it is really hard to go back and use the other frameworks, but the reality for some is that you have to maintain older site that would require a total rebuild to access the power of Source. Now that it is possible to use Source Grid layouts outside of Source, it is a life extender to all those legacy pre Source sites built on the old frameworks.

2 Likes

For info, my recent Gradient project template for Source uses Grid Plus to build a really cool “super-hero” header.

It’s like a regular hero header, only super ;-)

https://www.templaterepo.com/demos/gradient/superhero/

All templates half price too :-)

4 Likes

Hejsan Stuart, are there anyway we can get the “Magazine” layout demo as a project file?

3 Likes

@habitualshaker +1
Would love that one to see as a project.

2 Likes

Yes - sure. I’ll pull a few of the layouts into a shareable project file.

Also, the next RW Academy course will be focussed on building different types of advanced grids / layouts.

4 Likes

Yeah, can’t wait. Any idea when the next course will be available. Just love your courses with so much to lerarn.

1 Like

Hopefully fairly soon. Likely to be stuck at home for a while so that should give me some time to pull this together!

1 Like

Hi all,

Below is a project file demonstrating some relatively advanced layouts using the Grid Plus stack (preview here). If you are new to Source / Grid Plus then I would not recommend starting here but if you are ready to level-up your grids then this is for you.

The project file also makes use of Coder stack and the Utility Classes stack (though I haven’t added any supporting notes around these so you’ll have to figure them out yourself by playing with it!).


I find the best way to learn something is to try and recreate it and so for this file I used this presentation product as inspiration. Layouts like this are great to try and recreate using Grid Plus.

Also (obviously) the content/styling used in and around the grids has been added with Source stacks. The grids themselves though would work in any framework using the new Enabler stack - you’d just need to add them to that framework’s own Container stacks and add the relevant content stacks too.


If you haven’t got the Source Addon Pack / Grid Plus and want to try this out then you can use the code sth-try-source for 30% off (until the end of the month).

The Enabler stack is still on sale too (details in first post).


Anyway the project file is below. Enjoy!

6 Likes

ThankYou

1 Like

What plugin is used on the Knowledge Base ( Source ) Tab

Screen Shot 2020-03-19 at 4.54.16 PM

It’s one of the default Realmac ones. Have you disabled it here:

Sorry about that.
Off site page is checked again.

Thank you,
A.B. Cole

1 Like

@Fuellemann In response to your question about how to create a a layout like this below in Foundry:

The challenge with this very popular type of layout is that the right image needs to go to the edge of the screen , yet the text on the left should obey the max width of the site - 1140px in this case and not stretch to the edge of the left side of the screen.

Using the Source Enabler in Foundry, you can use a Source Grid Plus to do this. Add a Grid Plus and add 3 Grid Items. Set 2 breakpoints at 600 and 1140px. The first should be empty, add the text to the second and center it and set a height of 400px and adjust to taste, and then add a BG image to the 3rd item.

The idea is that you use a dummy Grid Item that fills the available space of an invisible empty grid item above 1140px. This will push the second item `9containing the text) to the right which is set to a fixed width of 570px and the 3rd item (with BG image) is set to be 50% of the screen width. At 1140 and below you can hide the first item and then set the columns to be 1fr 1fr which will be 50/50. Make it 1fr i.e. 1 column below 600px. This whole layout is highly configurable with paddings, BG types margins, alignments etc…

In the 3 screenshots below, the text grid item area is in blue and the page colour is white.

5 Likes

Thank you very much , this looks great!

That’s excellent. There are probably a couple of ways you could do this in Source. Another way would be to have a 2 column setup (with regular Grid stack) and then use a Container Plus in the left column with it set to have different widths / alignments at the different breakpoints. I think this Grid Plus way is better though. Does make for a really nice layout!

I needed to do a bit of testing with a Source Grid Plus in a Foundry site. This new stacks just works without any issues and its just like working within Source. Here is a demo site I created to test the layout where the image stretched to the edge of the screen but the text obeys the max site width. To show the effect I have left the white page as visible - https://www.webdeersign.com/sourcefoundry1/

As a bonus I hadn’t realise that you also get the compete BG features of Source. So for example if you want a Custom CSS SVG background then you can create a Source Grid Plus with just 1 item.

4 Likes

Thanks to everyone who has picked up the Source Grids Enabler stack. Hope you are enjoying unleashing the Source grids into your different frameworks!

Just want to share another use case for Source’s Grid Plus stack…a full page grid! This kind of layout is really easy to build using Grid Plus and (along with the other project files that have been shared) shows just how flexible / powerful this grid stack is.

The page layout above has been built using a single Grid Plus stack with 5 grid items (Header area, Nav area, Content area, an Aside and the Footer). It has been set to fill the whole screen and any areas where there is too much content to be seen is scrollable. Check out the live version here.

Here is a project file with the grid plus set up if you want to try and build this type of layout for your own pages.

Enjoy!


The Source Grids Enabler stack and/or Source Addons/Grid Plus are still available with 30% off until 31st March (you’ll need the code sth-try-source for the addon pack discount)!

8 Likes

This is really good example that shows how to create the type of layout that many Weavers try to achieve and fail. It reminds me of what many themes try to create, except this one responds perfectly at all screen sizes and can be configured in any way. For the non Source Grid users this must be a revelation, but being able to drop this into any blank theme or framework, is genuinely groundbreaking and a life extender for old generation frameworks.

For anyone not using Source then you should seriously consider getting the Source Grid Extender and Source Addons.

2 Likes

How should I modify the grid to have footer span the entire width of a window (just like header)?