Stacks World - Highlights of 2022 - Name your Best stack

Name 1 stack that you would name as the Stack of 2022. It must be demonstratably the best, ideally be unique and allow us to build better web sites and you should give your reasons.

PALETTE stack

My choise is the Palette stack, for all the following reasons:

  1. Palette is totally unique and provides functionality that was not previously available within Stacks and AFAIK is not available in any other web builder, similar to Stacks.
  2. You can genuinely build better web sites using Palette, because it adds an easy to use way to visualise colour themes during the design phase and see how combinations of colours work together, in real time. It is the best colour tuning tool for Stacks.
  3. Allows web page visitors to customise a site to use their colours and remember “their colour theme choice” when they visit again. Customers like that stuff.
  4. Increases the accessibility of any web site by allowing those with impaired vision to select what is best for their specific vision impairment, including a highest contrast black and white version. This goes beyond what Google Lighthouse considers a 100% Accesibilty rating.
  5. Auto detect if a page visitors browser is set to high contrast and automatically trigger a suitable colour theme. Yes, wow!
  6. Palette is part of the Source Addons bundle, but is additionaly available for use in F6. Stacks could really benefit if more developers produced versions of their stacks that extended their functionality to other Frameworks. Stuart at STH now has quite a few stacks that integrate Source and STH functionality with other Frameworks. Palette integrates with the F6 CSS colour Vars
  7. It’s a fun stack to use.
5 Likes

Feeds for me. I got it from Joe to look at possibilities for hooking in Charter to the data sources but although that doesn’t look possible i got to playing with it anyway and it really is great. Allows you to pull dynamic data into templates that you build in RW/Stacks. The data can be held in numerous sources (csv, json, databases etc).

I even added support for Feeds in the 3 Source grid stacks (Grid, Grid Plus and Grid Plus Pro) and in Splider 2. This means that you can add Feeds stack directly inside any of these, create a template for a single grid item / slide and then Feeds will auto-generate these things for every entry in the attached data source. The possibilities of this are endless.

I am actually putting the finishing touches to a Source/Feeds demo project to demo all of this so stay tuned for that!


p.s. I now use Feeds to power the stacks and bundles section on my main stacks page. From the single csv file that this page is attached to i can add new stacks, new bundles, apply coupon codes and add in notices about special deals etc. Amazing!

14 Likes

Thanks Stuart! I didn’t know that you works on getting support for Feeds into your Source stacks. That is great to hear. Keep up the good work!

https://onelittledesigner.com/rapidweaver-stacks/

I’m nominating 1LD’s Layouts 2 stack.

For me, Source Grid is hands-down the best page layout tool for RW/Stacks. But layouts aren’t just at a macro level. Often we need to create page elements, such as cards, which have their own layouts. I’ve tried various ways of doing this. I‘ve nested Source Grids, but this can lead to complex pages. I‘ve used Sections Box, which is a really great tool, but this isn’t its forte. Layouts 2 solves this problem.

It’s easy to use, lets you create easily editable, reusable components, and brings the unused power of Flexbox to the job (in addition to positioning and stacking, it provides the ‘flex’ part of Flexbox — the ability to specify whether an element is a fixed size, fills a space, or stretches or shrinks responsively. It works brilliantly in Source Grid, and supports third party stacks (so you can use it with text stacks that allow responsive sizing).

It’s a great example of a stack as a productivity tool, and it‘s no wonder that it’s 1LD’s bestselling stack.

8 Likes

I’m curious what exactly you mean by this? There doesn’t appear to be any details on the Layouts 2 site about this.

E.g. What is it that you can do with the Layouts 2 stack that can’t do with the standard Source Flexbox controls ?

I think it’s fair to respect @jamessouttar’s choice, isn’t it?

5 Likes

Sorry if it came across like that, but I don’t know what James was referring to exactly.

I fully respect his choice as he knows a lot about layouts and I have lost track of how many discussions we have had about layouts.

1 Like

I like when the advance users/developers have discussions on stacks. It brings a different perspective and knowledge of certain stacks abilities that typical users is not aware of.

1 Like

| I’m curious what exactly you mean by this?

Sure. There are various aspects of Flexbox. Most Source stacks now allow you to choose the position of an element in the Flexbox (using justify-content for left to right position and align-items for top to bottom position) and set Flex direction and Flex wrap, and that’s very useful. However, if you apply Flex controls in a grid item, they will apply to all the elements you put in the grid item. So if you want to have your items in a specific layout within the grid item, where each element has different settings, as in a card, you need to have another grid in it. That’s fine, but it makes it much more complex to manage. Layouts 2 lets you create a self-contained Flexbox layout in a single stack, in which each element can be positioned, and which each element can also be set to be static, grow or shrink responsively. And it does so using a simple, easy-to-use interface. It’s a really good example of where a stack can solve a particular problem well and be an excellent productivity tool.

As an example, all of the Splider demos I’ve posted here have used Source grids, often one in which the Spliders sit, and another inside the Splider slides. That provides a lot of control, but it’s overkill for this situation. Layouts 2 does the same job much more easily.

Configure stack by One Little Designer. It’s a marvel. You can do simple things with it or go absolutely nuts with loads of complex options and values, you can chuck images, stacks and graphics in it so as you move value sliders and select options the viewer gets a different result as the output value. You can show examples visually with different media of the final outcome instead of just a boring old number.

I created a pretty complex quote estimator with it where people can pick and choose different services, pick and mix elements, estimate a level of complexity and it generates a quote for work with video and graphics demonstrating typical examples for their quote (to give an esitamted idea of complxity for a project). E.g, A simple typographic advert compared to a fully rendered 3D illustration that is animated with audio etc. It’s great, it stresses me out just thinking how on earth did he manage to make it.

4 Likes

That was my #2 😊

2 Likes

Tiptop!

I see where you are going with this example, but there are multiple ways to achieve what you are trying to do. If you ask 10 experienced Grid/Flex builders to build a complex layout, they will come up with 10 perfectly functioning designs but each with a different approach. In your example, you don’t have to have another grid and can use a Coder or Coders to apply their own Flex alignment inside the grid item alignment. Using Source, I would add Coders into a Grid Item or delete all the Grid Items and add Coders or maybe set a Coder to be a Grid Container and add Coders inside it. Most of that can be controlled with the Utillity classes. The options go on and on really.

What I do see when look at the Layouts 2 code is the use of flex-basis, flex-grow, gap and single flex definitions, but you could also add this directly into a Coder side panel, e.g.

I can see however see the the Layouts 2 stack can bring new capabilities to older Frameworks and for that reason it certainly brings somethng new to Stacks.

Sure, there are many ways of achieving this. Where Stacks shines is when you come across a stack that makes it really easy to do something you find yourself doing a lot of. For years, Sections (and later Sections Pro) was my go-to stack — the Swiss Army knife that was useful in so many situations. Now we have CSS grid, Sections isn’t so necessary (but it’s still a very useful stack). Of course there were other container solutions back then: Sections was just easier and more powerful. The same is true of Layouts 2: if I want to make a card, it’s where I will go.

We can always use Coder, but that’s a different kind of solution. I created LockUp to do what I was doing in Grid and Coder, because it felt like there could be a Stacks solution rather than going through and adjusting the code in each Coder. Rather than creating a grid and then setting each grid item to be on top of each other, I thought ‘actually I can make a stack do that for me’. And that’s what is amazing about Stacks.

1 Like