I hope you are well. I am back with not one but two new stacks!
I had been putting together a Content Filter stack and decided to incorporate a grid display option to that. It worked so well I realised I needed to take the bare bones of that element and develop it into a full grid stack of its own. Anyway, let me introduce them properly…
Content Filter stack
Content Filter stack is a stack that allows you to categorise page content and have that conditionally shown or hidden based on selections by the user (or by pre-filtering by passing in a value via the url).
You have complete control over how the filter buttons look and operate which makes the number of potential use cases limitless. See the demo page where we use it to create:
a tab-style interaction
a pricing table that adapts it content
an image grid
and more!
All of this is achieved purely with CSS making for a super-efficient and lightweight solution that works all its magic without any JavaScript/jquery etc!
Users of Source may recognise the core filtering functionality from our Grid Plus stack but Content Filter stack provides a lot more functionality and styling options than that allowed. Including being able to use multiple filters in a single page and being able to build large (even page-wide) Filter ‘zones’ that incorporate both categorised and non-categorised content.
Content Filter is available now with an introductory discount of 30%!
Easy Grid stack
I love this new Easy Grid stack! I think this is my best ever stack. It is so simple and powerful that it will be my default grid / columns stack going forward - and if you take a chance (on yet another grid stack) then I reckon it will quickly become yours too!
It takes CSS grid and makes it super-easy to build amazing flexible and dynamic grid layouts. With a very limited and simple array of settings you can:
Select between a fixed or dynamic grid layout
Control block alignment
Control content alignment
Style to your heart is content
Break out of block grids by adding in pre-built or custom spans (of columns and/or rows)
For a limited time (because everyone needs this stack in their Stacks toolbox) I am offering it for half price!! Don’t miss out.
Hope you enjoy these new offerings. Any questions just shout.
…Initially, I was a bit skeptical, wondering if this would be just another addition to the myriad of tools out there. However, my skepticism was swiftly replaced by admiration after taking a brief moment to explore the introductory details you provided, Stuart (including the fact that it’ll work in any framework). And, at barely $16.00 during the introductory pricing…it was an instant purchase. I’m looking forward to putting it into my next project. Many thanks!
Always excited when Stuart puts out a new anything!
These 2 stacks look great. As brilliant as the Source Grid Plus Pro stack is, having a less complex ‘everyday’ version for all themes and with a large element of complexity removed is a must buy for me.
And have a new project requiring filtering so this second one is very timely for me as I’m looking to replace my trusty but dated Hunter 3 stack!
Thanks for everyone’s support with these new stacks!
Have added a couple more demos to show what is possible with the Filter Content Filter stack.
Nested filters: You can nest Filter stacks to achieve multi-layered filtering. See this wine store demo to see it in action. Here is a Feeds demo showing the same thing (I would strongly recommend using Feeds to manage this kind of thing in real life!).
Splitting a markdown document / Manual markers: Filter stack comes with a dedicated ‘Filter content’ stack that lets you easily categorise content however it is also possible to manually add the required data (to certain stacks) to tag your content directly. This example shows how a single markdown document has had these markers added so that the content is split up by Filter stack. And what is more - if you used a stack like my Markdown Link stack - you could even maintain this content remotely!
These demos are available to download on the Knowledge Base.
thanks for your great stacks, working with source a lot and enjoying it. Although owning both “other” grid stacks from Source these two are now also in my collection. Thanks for the introduction offer!
Haven’t played with them, but one question: is it possible to have several options with the Content Filter Stack (not only nested) e.g. in the wine demo page - clicking “white” and then two countries and a prize range?
Just curious …
Thanks in advance!
@Jannis updated Poster2 with Easy Grid Stack integration, I’d like to see, but more importantly, download a small example project to understand how to integrate it.
With your example projects everything is easier to understand.
Thank you.
These 2 new stacks are both clever and powerful, and one that every stacks user can build better web sites with.
Easy Grid brings the layout building powerhouse that Source is built around to non Source users. What is missing in F6 and Foundry can now be added using the STH Easy Grid stack.
Although CSS Grid is on one hand a powerful layout builder, implementing that within the confines of Stacks is challenging and where several attempts have failed. Stuarts 5 years of experience implementing and refining CSS Grids in Source with stacks, shows through here with an elegant and easy way to build layouts.
It even has it’s place within Source as yet another way to create layouts.
Yes - have certainly taken what i have learned about CSS grid (and that i had poured into the Source grid stacks) and stripped it right back to the key bits that are needed for building the vast majority of grid layouts.
It would be great to combine Content Filter stack with Easy Grid stack. but it’s not possible, is it?
(I hope Stuart tells me I’m ignorant and that it can be done)
looks like it can be done … Easy Grid items have a custom class and data attributes field, and Content Filter can be used like that (see Markdown Section of the demo). Stuart might be able to confirm and teach us the syntax.
Just add Easy Grid directly inside the Content Filter stack. Then add the details (as described by Gerd) to any grid item that you want to be filterable.
