What Source uses are the flex justify-content and align-items properties to position items within a container. That’s fine: it lets you align top, centre, bottom, left, right, and spaced around, between etc. But what it doesn’t do is flex the box. That’s the really clever thing in flexbox, but it adds a layer of complexity that isn’t needed in a typical container. Where it comes into its own is if you have a graphic component, like a card, made up of various elements, and you want those elements to change at different breakpoints (for instance, something to shrink to fit while something else remains the same size). That’s what flexbox was created to do: it’s a poor way of making a grid (which is why CSS grid came into being) but it’s very useful inside layouts. You can do much of this with a grid-inside-a-grid, but that’s difficult to manage. The benefit of Layouts 2 is that it does this within a single stack.
“How would a 3rd party stack gain access to the CSS Grid Item dimensions which are essential to using flex in a grid-item.”
I’m not sure I understand what you mean here. A stack placed in a grid item doesn’t need to have access to the grid dimensions — it just needs to fill the space. With LockUp I made the container a grid and all the children are grid items sitting exactly on top of each other. The container is also a CSS container (so it’s possible to specify everything in cq units), and the children are flexboxes too (so that elements can be anchored top, left, bottom, centre etc.). It does its own thing without worrying about what it is placed it — for instance if it is placed in a Grid Plus Pro item, or in an F6 container, or on a simple page with a blank theme.
As far as performance goes, there is no reason why a third-party stack should cause a hit. If you look at the ‘Morocco’ demo I posted the other day in Lighthouse (https://shakennotstirred.net/morocco) it scores 99 on performance. That’s a LockUp stack with text and SVG children inside a Source Grid, with Palette.
I checked out the Layout2 stack and it is a lot more than Flex box control. It is a CSS Grid layout tool, with normal Flex box. So it you are already using Source it duplicates what you already have. If you’re not using Source it would make sense.
What are you talking about? Webflow let you have multiple projects open and basically is the same structure as your product. Literally.
Yes, it has a ‘section’ element for page layout. But it’s what it does with the flex-grow, flex-shrink and flex-basis properties that makes it a valuable adjunct to Grid. Source can’t do this — the only other stack I know of that uses these is Weavium’s Fluid. This is all demo-ed on the 1LD Layouts page. From my point of view the only drawback with it is that it is still in the pixel/percentage world — it doesn’t support container or viewport units (or calcs and clamps) which would give it a great deal more power. Nonetheless when I get a chance I intend to hack most of the stacks I regularly use — at least, those whose controls aren’t encrypted (and Jon doesn’t encrypt his stacks, unlike Joe or Stuart) — so they have a text box for amounts, with no specified units.
Can you copy and paste between browser tabs in webflow, I’ve never tried. Also I didn’t say it was impossible, just complex to manage.
I should probably also add, my assumption is that the entire point in opening 2 projects would be to move portions of the design between projects, that’s the complex part.
You can just add flex-grow, etc., into any container, Coder, Item, etc., as the existing Utillity classes available for breakoints or if using Coders, write the code in directly into the Coder as flex-grow:2. For any Source users with the knowledge of these features, they will surely know how to add them in.
The 1LD Layout stack sounds like a game changes for all other frameworks.
Sure, you can write anything in a Coder stack. For that matter, you can just write HTML and CSS. What makes stacks convenient is the combination of a template with a user interface. Someone has gone to the trouble of creating and testing both, and all we need to do is to input our content and twiddle the knobs. I find Layouts 2 (I had Layouts 1 as well, but hardly used it) a good stack. Jon’s stuff is well thought out and well executed, and over the years I’ve collected much of it. I’m not here to evangelise for 1LD but I can heartily recommend this stack (and their products in general). Flexbox is not easy to get right, as I discovered in making LockUp. If they’ve done this work for us, and made its power available, for just a few dollars — good on them!
I am also very happy with the stacks 1LD makes, as you say, they are very nicely and thoroughly done. First-class developer. Support is also top-notch.
Do you have any experience using 1LD’s Deluxe Stacks? I just bought some 1LD stacks and they came with the set of Deluxe Stacks so I’ve been playing around with it. Would love to hear your thoughts.
I bought a project (or a theme) that came with Deluxe Stacks and they work great! I don’t know if you can use them outside the project, but inside the project works amazingly good!
Cyber sale
50% off all Stacks and Stacks bundles.
Today only.