Excellent article on a fairly complex CSS Grid layout that responds brilliantly (imo) to different view widths…
2 Likes
If you want to read it later, here’s the result:
Great post. Absolutely beautiful layout.
Using grid position labels can seem confusing but it also makes good sense.
I’ve a notion that something similar can be done in Source using the Grid Plus Pro stack.
1 Like
I love the current development of CSS enabling us to move away from layer cake site designs, only where suitable naturally. Danger of style over substance, which is usually my ambitious default mode when starting a new project 🤣
Talking of over-egging, can you image animating in/out all those grid elements? Might have to do a demo for myself.
Ah, you dropped yourself in it - now you have to show us F6 diehards 😆
1 Like
Absolutely. The Source Grid Plus Prois the obvious solution and would simply be a copy and paste of the template names and definitions. It also has the benefit of unlimited breapoints at any value so will accomodate the challenges of different heights of text as the screen width reduces.
However, I would probably use the Grid Plus and avoid the template area names, becasue I prefer to think in normal units. Good you have 2 different stacks solutions that can achieve these and have the choice of template names or units.
She use a fixed gap which seems an oversight when you could use a variable gap to keep the display proportions mor intact.
Stop looking over the wall at what you know you can’t achieve.
1 Like
Hi Geoff,
Gary @Webdeersign has made good use of Stuarts CSS Grids in some of his recent projects.
Here’s a comparison chart from Stuart at shaking the habitual:
https://knowledge.shakingthehabitual.com/article/73-source-grid-stacks-comparison
Some examples of use in Stuarts projects:
https://demo.shakingthehabitual.com/sth/source/elements1/overlaps/
1 Like
Here are a couple of replicas of these using Source’s Grid Plus Pro. They aren’t particularly complex grids but are good ones to test out/learn these kind of layouts.
I didn’t take too long with this and didn’t bother being too exact either - they are definitely not perfect replicas. Also didn’t bother with the grid template areas approach as I don’t think it would bring any benefit with these layouts - happy to demo that approach too though if anyone wants to see it.
You can download the demo file here if you want to break it apart to see what is what :)
5 Likes
Geoff, at some point Joe‘s going to give you F6 diehards CSS Grid — it’s surely only a matter of time! Animating in Source Grid is really easy, too, given the way Stuart has integrated the Source Grid stacks with his Animate stack.
1 Like
I would say there is a lot more to using CSS Grid than just enabling some level of CAA Grid access via stacks. The Source CSS Grid has had almost 2.5 years of constant refinement and enhancement and that is partly what makes it so powerful. The other part of the Source solution is that the whole framework integrates tightly with the Container Bases, Colour Vars, limitless breakpoints, integration with other devs stacks such as Poster2, inbuilt Utillity Classes and the Utillity Class stack. To be able to replace a 3 col float layout with a CSS Grid is of limited value, but when the whole framework is built around it, it becomes a system that can build anything.
Not only that, Geoff’s article is like Catnip to Source users, and stimulates Stuart to not only build those demos but release the RW files to build them. If you don’t have Source to don’t get to play in this game.
For me, Source is Grid Plus Pro, with a very nice support system built around it. And I think it’s a mistake to compare it with the frameworks, which were a response to the need to build responsive websites in a pre-Grid world. Then, there was only Flexbox and media queries. Which gave us fancier layer cakes (but still layer cakes). Now we have Grid and container queries, breaking us free from the wretched flow — free to put things where we like — and free from dependency on devices — free to make things responsive to the space they occupy. To use the cake analogy, we can make complex battenbergs now. And of course Source doesn’t carry that great burden of unused classes which slows things down so much. It’s a post-framework environment.
1 Like
CSS Grid pre-dates even Foundation1 by several years. I think RW became a Framework focused web builder because it was easier for a dev to build and document a set of stacks that duplicated the building blocks of traditional “frameworks” such as Foundation 5 & 6 Bootstrap4 & 5, etc… Also I think Weavers like to adopt set of tools that are preceived to all work together and then find themselves locked into it for all of their builds.
We really need something like what the new AI feature in Pinegrow that offers to define the solution (or best framework) depending on the requirement.
Zurb released Foundation in 2011, when CSS Grid was still a draft, and Grid didn’t get browser support until the end of 2017. But there is a definite lag between the launch of new standards and their take-up in mainstream products. Bootstrap only incorporated CSS Grid in version 5, and it’s still only an option running alongside the Flexbox layout. UIKit seems to have CSS Grid now, although finding out what and how all seems a bit opaque. Foundation is still flogging the Flexbox mule. Bulma (Platform) likewise.
I understand why people are slow to implement and adopt new stuff — it’s a very human characteristic. It’s a bit weird on the web, though, which used to move so fast. But then, right from the beginning, there has been resistance to the idea that ‘digital’ might follow print: it took years to get real fonts, let alone variable ones. But now there is a new generation of designers who are really pushing its design potential, rather than just its technical capabilities. That’s the sign of a maturing medium, and I’m pleased to see it (there were far too many years of tiny grey Arial and cheesy stock photography for my liking).
1 Like