Building responsive pages in Stacks just got a whole lot easier
While building sample pages for Tesla Pro over the past few months I found myself in need of some specific tools for building responsive pages. While there are a lot of stacks out there that help with responsive layouts I felt they weren't exactly what I wanted.
So I started putting together some tools for myself, and somewhere along the way realized that others might be able to make use of these tools, too. So I built them out and added some features that I think people will find useful and assembled the Structure suite of stacks.
I started with a simple responsive columns layout stack that personally met my needs better than other solutions I’d used in the past. It incorporated the Foundation CSS to help provide a solid framework for responsive Columns in any theme. It also allowed me to create some pretty unique layouts, and have them differ at each of the three breakpoints.
As I built out the Tesla Pro theme, and used the responsive columns stack some I realized it would be great to have a nice responsive Grid system. Foundation once again provided a great base for this stack. It provided a nice way to create flexible grids, and I added on lots of options for both stacks in the Stacks palette.
One day though I got a bit of inspiration as I was cobbling together a few pages — I kept building page elements with a bit of margin, or padding, above or below them. When I’d size down the new RapidWeaver 6 preview to see the page in iPad or iPhone mode I noticed that my margins and padding seemed to be too much for these smaller displays. What if the margins and padding could adjust at each breakpoint? So I put together what I think is the best stack in the whole suite — the Margins stack.
While Margins seems super simple at first glance, it really is a big deal. You can adjust any margin, or padding, on an element and do so at each breakpoint, whether it be the same on all sides, or just on a particular side using the Detailed settings.
Visibility, Float & Image
To round out the suite I then designed the Visibility, Float and Image stacks. Visibility takes a different approach to allowing you to hide or show an element at each breakpoint, while the Image stack let’s you make you images responsive in themes or situations where they might not already be responsive. It also allows you to upscale your images. And the Float stack let’s you build floated images or pull-quotes into your page, but allow them to be flexible and responsive.
Please be sure to have a look at the product page for Structure. It contains details about each stack as well as a walk-thru video talking about, and demonstrating each of the 6 stacks.
I’ve been using the heck out of the Structure stacks for myself, and hope you too will find them as useful as I have.