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.
If you don’t yet have Source then I sent out a code to my mailing list yesterday that also gives 30% off the Addon stack (which includes Grid Plus): sth-try-source
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).
This looks great. While I feel that I should be able to figure out what is needed from your post I’m failing to do so. If I wanted to try/use the grid stack with Foundation 1 what would I need to purchase? So the Grid stack comes in the base/free Source set of stacks? And I would only need to grab the Enabler stack? Do I have this right?
There is a Grid stack that comes with the free Source stacks but the powerful CSS grid stack (Grid Plus) is part of the addon pack. Hope that clears things up?
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)!
@habitualshaker, is it possible to add a banner slideshow into a Source project if the slider stack is not a Source stack? Can the Source enabler stack allow this?
