Stacks4Stacks Spacer

Hi Will. @willwood
I’m a big fan of your stacks, and many fill a need that quite often has not been addressed by others.

One of my go-to stacks that I often plug-in is the Spacer Stack. The one thing I would love to see added is “Responsive hide/show” settings so that spacer could switch size for iphone vs. ipad or desktop.

So if you’re looking for something fill your time with, this would be a great update and i’m sure other Weavers would love it as well.

Thank You for what you do.

Andrew.

1 Like

Hi @RogueTrader,

If you have not tried them already, please give the viewport units of measurement a try, instead of using traditional fixed units like pixels.

Viewport units of measurement are very well supported by all the major web browsers and carry the additional benefit of ensuring the spacing you set is of the same proportion on all screen sizes.

It is hard for me to explain viewport units of measurement in a short post. I think these links might help you better:

This is what many of the pro’s are using now.

This is also the reason why (in some of my stacks) I omit ‘px’ off the number boxes and let people provide their own preferred units of measurement.

It is true that Spacer used to have the generic settings for hiding the stack on mobile, tablet and desktop a couple of years ago.

The trouble we were finding with this included…

  • People have different definitions of mobile, tablet a desktop. It was never possible to clearly define the width (breakpoint) of mobile, tablet or desktop devices. It was always locked to 568px, 768px, or whatever.

  • It often led to people needlessly creating increasingly complicated page layouts. Dozens more stacks and settings, than perhaps what were needed. To the extent that some people were having to return to the concept of building separate pages for mobile and tablet device types.

  • Code spaghetti - conflicts between different stacks and CSS rule sets. One stack saying “do this” and another saying “do that”. Sometimes with gaps in between where settings never took effect. Lots of bloated code and very messy situations to try and resolve.

  • Pixels lack flexibility. It looks odd (in my eyes) when you resize a webpage or change its orientation. You might see text and columns resize flexibly. However pixel blocks of vertical whitespace stay the same size. It can look a bit oddball.

Modern web design is typically focused on doing more with less. The same principle could be applied to Stacks and RapidWeaver too. Consider using fewer stacks and making all screen sizes / devices use the same Spacer stacks. It’ll be so much better in the longer term. And viewport units of measurement let you accomplish this perfectly.

I use RapidWeaver for lower-budget websites. Spacer is my go-to stack in quite a few of these projects. I find using viewport units of measurement always provides excellent, proportionate spacing across a wide spectrum of device sizes.

In most projects nowadays, I use viewport width and viewport height measurements for anything I want to scale proportionately on the screen - like padding, whitespacing, banners, grids, columns, scroll events etc. I use rem’s for pretty much everything else - like buttons, font sizing, paragraph breaks etc. I find it is increasingly unusual that I find myself in a position of needing to set the size of something in pixels.

Give it try :slight_smile:

2 Likes

Thanks for the explanation. Very informative, I know little about best practices, etc.
I will experiment with viewport and try to understand how it reacts.

Thank You for taking the time to explain it.

1 Like