Speeding up your workflow within Edit Mode

For Foundry 3 one of my big goals was to make the workflow within Edit Mode easier for everyone. A lot of work went into crafting solutions for problems we've seen users face over the years when building their sites.

"Well forgive me, I’ve lost my secret decoder ring!"

While it may seem trivial, one thing I've streamlined in Foundry 3 is the organization of the multitude of Foundry tools in the Stacks Library. In the past the various Foundry tools were sorted into groups in the library based on whether they Components, Content or Utilities. These groupings were signified by their icon colors. This didn't work as well as I'd hoped when I built Foundry v2, as it was not always apparent which color stood for which category of tool.

With this new update I've sorted them into much more clear groups right in the Library. These groupings will help users recognize what each set of tools is built to do. This isn't a perfect system though, as several tools have multiple use cases. An example of this would be the List Group. It resides in the Content category, but can also be used for Navigation as well. I think though this new organization of Foundry's tools will greatly aid users in finding the what they're looking for much more quickly.

"Coughlin's law: never show surprise, never lose your cool."

While we're talking about tools, and finding them more easily, I'd like to touch on the new Foundry Toolbox. This optional utility can be added to your page to provide quick access to some of Foundry's most used tools. Add a tool to the Toolbox from its fixed location in Edit Mode and you can drag it right onto your page. This saves time hunting down those frequently used tools and can even act as a waypoint when editing your page.

I've recorded a tutorial video for Toolbox, which you can view below.

Note about MacOS Ventura & Toolbox

Something to note about Toolbox — MacOS Ventura poses some compatibility issues with Stacks' Edit Mode when using fixed position elements. Toolbox is just such an element. It uses fixed positioning to stay docked in the same place as you scroll through down your page in Edit Mode.

To accommodate this limitation between masOS Ventura and Stacks I've adapted Toolbox to show a simple icon when a tool is added to the Toolbox in Ventura, whereas in other OSes like macOS Monterey you'll see the actual Foundry tools themselves when added to the Toobox. So if you're using macOS Ventura your display of tools inside of the Toolbox may vary from what you see in the tutorial video. Whether you're using Ventura or Monterey, once you drag the tool from the Toolbox to your page it will act normally.

Note-within-a-note: You'll need Stacks v5.1.0 for the macOS dectection to work as those variables were added especially for Foundry to be able to pull this off. (Thank you Isaiah).

This is what you'll see when adding a tool to the Toolbox in Ventura or using a version of Stacks before v5.1.0:

This is what you'll see when adding a tool to the Toolbox in macOS Monterey when using Stacks v5.1.0 or later:

"It’s not who I am underneath, but what I do, that defines me."

In previous versions of Foundry when creating columnized layouts each column of content would be displayed side-by-side within the Edit Mode area. This gave us a sense of how the columns might feel on the final page, but it caused a great many headaches when trying to edit the content within those columns, especially when it came to doing so on smaller screens.

In Foundry 3 I've reworked how columnized content is structured in Edit Mode by stacking each column's content on top of one another. This gives you far more room to edit your content. I've made sure that each column has a label in Edit Mode to ensure that you know which column or grid item you're editing at any given time.

If you'd like to see it in action I've created a instructional video for the Columns / Grid tool that you can watch to see exactly how this works:

"Stay gold, Ponyboy, stay gold."

With an increased focus on color palettes in Foundry 3 (you'll hear about this more in the days to come) I wanted to make sure it was easy for users to have quick access and reference to the HEX color codes they defined in their Standard Color Palette within the Control Center.

While not entirely new to Foundry 3, the improved Sticky Style Guide feature of Foundry's Standard Color Palette now allows you to right click on the HEX code in Edit Mode and select Copy from the popup menu to copy the value to your clipboard.

The Sticky Style Guide also acts as a wonderful reference tool when building and styling content for your page.

Tweaks abound

While these are some of the standout improvements and additions to Edit Mode in Foundry 3, there are also a great many other tweaks under the hood that will help improve your experience in Edit Mode when building your site.