Written by: | | Category:

While I was working on the Foundry v2 update I had a Foundry site revamp going on in the back of my mind. I didn't want to totally redo the entire site, but with the addition of new stacks and features, as well as the Mason templates, I knew I'd need to rework a good portion of the site -- and that included the documentation pages.

Foundry is a large product with numerous settings and preferences throughout each stack and child-stack. It has always been really important to me that Foundry have solid documentation and tutorial videos from day one. So when I decided to rework the documentation pages for this update I knew they could use some improvement, both in their layout and content.

For the layout I wanted a page that would have independently scrolling sections so you could scrub through the different topics in the sidebar without losing your place in the documentation you might be currently reading. I started building out a stack for myself to do this... it wasn't until I was halfway through writing the stack that is occurred to me that others might be able to make use of a layout like this as well. So I started work on creating a more flexible and useful stack that would actually be configurable and not just for my single use -- and thus Partitions was born.

Fast forward many months to the release of Foundry v2. Not long after the new site design went live I had users asking me how I designed the documentation pages. They wanted to know how I'd taken the simple looking layout of Partitions and created the unique navigation and layout of my specific pages.

So I thought I might cover the basics of the design and layout, as well as offer up a free project file for download, below, that replicates the layout.

My overall design is pretty simple. I've opted to have my sidebar on the left-hand side of the page with my main content, the documentation itself, on the right.

While the left-hand sidebar was meant to hold the list of all of the Foundry stacks I also needed the main site navigation as well. So the documentation pages use the extra Topper section to house that.

Speaking of the list of stacks -- previously in the old design I'd used the Vertical Navigation stack to create a nice looking, but easy to use list of the stacks in a compact, accordion-like layout. I did so restyling of them a little and incorporated added them into the sidebar, giving me a clean layout that would work independent of the main content.

I populated the main content area with a nice Video Zoom stack at the top of many of the entries. This addition to the pages should help people who are more visual learners. I also created a small little mini-sidebar using the Columns stack that holds some little bits of "insight" as well.

Overall the layout is pretty simple, it just looks a bit more impressive than it might be at first glance I think because it contains well formatted content, videos, columns, lists, etc in a nice organized fashion. It really comes down to that many times doesn't it? Taking all of our content and packing it into a design that will help out visitors to best digest the content we're trying to deliver.

If you're interested in taking a look at a simplified version of the layout, download the free Project File and give it a look. You'll need Foundry v2 as the Potion Pack to use it as-is, but honestly, you could replace some of the Potion Pack stacks in the design with stacks that come in the base set of Foundry stacks. You could easily substitute the List Group in place of the Vertical Navigation stacks as well as you could use the Video Embed stack instead of the Video Zoom stack.

Sign up for The Forge newsletter

Stay up to date on future versions of Foundry, as well as important news, updates and more!

This site is built using Foundry for RapidWeaver

© 2006-2020 Elixir Graphics | Contact Us