I’m experimenting with Foundry for a site rebuild. My site is content-heavy with long articles and guides. I was aiming to break up long articles - mixing in large magazine-style images, videos and other layout options. The aim is to get something similar to Shorthand which is used by media companies for long newsy articles and for immersing readers into stories.
The sections stack almost looks like it will work, but seems to be missing some controls for scaling objects to screen height, or vertically centering text … or maybe I just need to experiment more.
My initial layout test using Foundry and the section stack is here.
By comparison, a Shorthand site demonstrating the type of features I’d like to replicate is here.
Any advice or ideas? I’m guessing RW + Foundry + Sections should be able to do what I’m after. Maybe I just need to try delving to CSS, add a few more stacks, or just work smarter.
This is the first clue for me that Sections is not the right choice for your design. Sections is for just the opposite – content light designs. You’re going to probably want to use the Mega Menu stack and its anchor based navigation for your layout. This is more geared toward a site that is heavy on content.
This was recently discussed in this thread as well:
The site you’re linking to and trying to replicate may be content heavy as well, in some sections, but they’ve used a different approach in adding an additional scrolling content area within a “section,” which you don’t have access to, as that is not a part of the Sections stack (and probably isn’t likely to be).
The Mega Menu stack is probably a much better fit for your design, and you can do some cool things with the Backdrop stack to make your own full-width “sections” on the page too, and tie them in with the Mega Menu’s anchors.
Yes - I saw the other message suggesting the Mega Menu stack but wasn’t sure if that was applicable to my planned usage also. Based on the name my initial impression was that it was purely for menus but I guess I just need to experiment more.
I’ll try as you suggest. Hopefully I can get the features I’m after.
Thanks again for your work building a great set of products and your stellar support.
Thanks - trying it already, but there are still a couple of things I haven’t get figured out (and maybe I need to do CSS).
How to specify a height for Backdrop?
This expands only with content. Ideally I’d like it to be the height of the screen (minus the height of the menu at the top). Is there a recommended way to do this? I’m guessing that I just drop another stack into it and set the height there. Potentially I’d need to set the menu as a percentage and backdrop + content to a percentage so they total 100% … although that might make the menu too big on portrait screens.
How to get the section-like transitions within megamenu or backdrop?
With sections, each section seems to adapt to the page height (presumably as its set to 100% height). Hence it works better when designing for both portrait and landscape mode.
Is it possible to have two mega menus so they both pair?
Version 2 is here
I’m sure its just a matter of me experimenting.
This though is the problem you were running into with Sections, which is what you want to move away from. That style of site is not going to work with a site that is content heavy. The point of my suggestions was to move to something that would support a content heavy site. If you want fixed height sections that are the size of the browser window you might as well use Sections… but you will then have to reduce your content. Web design is often about compromises – especially when you’re not hand coding.
Mega Menu and Sections are different. They don’t have the same functionality. Again, if you want that functionality then use Sections – but you’re going to have to severely reduce your content as Sections is for a site light on content.
In other words – using sections with your amount of content is like putting 20 pounds of stuff in a 5 pound bag.
One Mega Menu per page. I don’t think I get what you’re trying to do with two navigation systems on one page.
I think you’re at a fork in the road –
content heavy: give up fixed height, fullscreen pages of content.
or
content light: cut down on your content to make it fits into Sections and work.
I’ll keep experimenting. The main navigation was for the wider website. The second was for the page itself given that its broken into sections - e.g. different aspects of carnaval. Or, on a city guide page: Overview, History, Sights & Tours, Accomodation, Getting There/Away etc. But there’s probably a better way of doing it.
Overall the toolset is really great. I just need to learn how to make best use of it.