For those that have Poster 2 from @Jannis and Grid Plus Pro from @me, I have put together a project file to demonstrate how these 2 stacks can be integrated to create the grids/layouts for your blog items.
There are 7 demo pages - all of the grids are quite similar in structure but each is used to introduce a new technique (e.g. spanning columns/rows or setting background images).
I’ve also added a support page on the Knowledge Base (which is also where you can download the demo project from!).
I’m sure you’ll be able to create some great looking blogs with this combination of stacks!
Very interesting trick to use CSS to be able to treat poster items differently in the list view. However, one remark for all those who might have been as puzzled as I was when digesting the demo …
The knowledge base article reveals that Stuart seems to be using a pre-release version ‘2.3.1’ of Poster2, which must allow to assign CSS classes to individual items. When I searched my V2.2 high and low for where to put in the CSS class for an item … there is no such place ;) Consequently, when you run the demo with your current Poster2 installation, you will not see the featured item spanning e.g. two columns.
Stuart’s link to the demo pages on his server, however, shows us what we can expect to have before long, when @Jannis releases the next upgrade ;)
Hi @GKs - apologies for the confusion. That version is available though - just check RW for updates and it should come through. Was released a couple of days ago.
Good to see someone digging into these demos. With the last couple of releases of Poster2, when used with Source, this has taken creative grid layouts to a new level.
I’ve bought Poster 2 and downloaded the Source Grid Plus demo project file.
I can’t seem to work out how to get the Tags and Categories info to show?
A demo file of the STH blog page https://source.shakingthehabitual.com/source-blog/source file would be extremely helpful to see how the implementation with Source works.
You can use Grid Plus / Grid Plus Pro to create a sidebar. An example is below. Over 900px there is a sidebar at the right that is 30% of the available width. You could adjust this to be whatever value you liked. Below 900px everything stacks and the ‘sidebar’ grid item is set to go on above the main grid item.
In this page I am using a fixed width of 220pxfor the tags/categories/search and then the main content will fill all available extra space i.e. 1fr. So the Row template is 220px 1fr
The height of the fixed sidebar is set to a height of 100vhand the tags/cats will always be verticaly centered.
Using the Source Grid makes this easy to achieve. With any fixed sidebar layout, the other challenge is to convert the fixed sidebar into a conventional single column below a certain width threshold. Again, simple with the Source Grid by chosing a breakpoint of your choice, set the row template to 1fr.