Can you point out that particular article? Yet to see a large advantage of using separate divs for spacing
Sure. Here you go. Margin considered harmful
1 Like
no problem. also his blog in general is really great.
Also for my stack spacer components in webflow, I was originally using divs and adding margin-bottom to them but have move towards using height instead. This is so that the empty divs actually show the correct space in the designer without having to choose the āhide empty elementsā setting which isnāt persistent.
Interesting new point of view! Thanks for sharing! There is at least one problem that I thought of when reading: when I have a certain margin size applied to numerous elements I can easily change it in only one place. With multiple divs stacked approach this will require removing or adding one from/to the stack everywhere which is really bad sometimes.
edit: but I agree that margins are destructive to layout sometimes. When using grid structure where every grid column is encapsulating everything there is no fear of some module breaking out of the structure I think, and margins used on, say, headings and font blocks arenāt that bad.
1 Like
Agreed. This approach only works well with components (i.e symbols) that you can modify in one instance and reflect all iterations of the component throughout. Or if not using symbols, then smaller sites (less than 10 pages) that making changes isnāt as cumbersome.
I also typically donāt stack multiple divs. I have different size divs based on the spacing used in the original design. Iām a designer as well so this approach makes perfect sense to me since when I am designing Iām already using some kind of baseline grid based on a multiple (typically 8).
1 Like
Iāve been following this topic for some time and really grateful on all this insights around utility-first classes and spacing.
I wanted to share a new idea around global classes in the whishlist that you might want to vote. Please feel free to add any comments to improve it.
1 Like
Hi there, Iām building a spaces framework from what Iāve read here in this post. This framework aims to create spacing with empty boxes with different height values.
I would really appreaciate if you could take a look here and give some feedback
https://preview.webflow.com/preview/fast-layout?utm_medium=preview_link&utm_source=designer&utm_content=fast-layout&preview=ebee2f00273ed7ae31b26e87d8138a87&pageId=5e9695f79bac7cb631b351a8&mode=preview
The spaces elements are under Frameworks > FW - Spaces.
I already started using it a real client project to see its implications and constraints from a normal margin approach.
thank you very much
1 Like
Awesome that you have started implementing spacing elements into your process.
What feedback are you looking for?
You have a scale in place which is pretty much the gist of using spacer elements.
Iām pretty new to this spacing approach so wanted to know if you had any thought around what Iāve built. But as you state, is as simply as building a scale as I did. Thanks for having a look into the project.
I think the next step for you will be figuring out how you want to implement the spacing at different breakpoints if adjustment is required.
Iām still working through how I want to best handle it. My initial approach is to make sure I use really consistent spacing in the desktop breakpoint. With the least amount of spacing changes across similar elements. Basically thinking in reusable components first. Trying to find the sweet spot where the spacing looks good across as many of the breakpoints as possible.
For now when a particular spacer needs adjustment in only one place or few places, I am using a unique combo class to make the change. Iāve lately been thinking about using stacking at the desktop view and then hiding across other breakpoints. So for instance, if I have a spacer that needs to be 100px on desktop and I have a spacer at that value, instead of using the 100px spacer I may use a 80px spacer and a 20px spacer. This would let me hide the 20px spacer at smaller breakpoints to decrease the space between elements when there is less screen real estate.
I havenāt actually used this in practice yet but was actually thinking through these yesterday and that is what I came up with as a possible solution.
1 Like
Hi @dapitts08, thanks for sharing your insights.
I find the stacking approach a super interesting point of view. I might use it in my current spacing scale. Instead of creating a variant of each spacing value for each breakpoint (as Iām doing now), just create a set of relevant values in the base breakpoint and then use hide and show utility classes (I already have them set) to add or remove space across viewports.
Try my plugin called WindFlow!
Use utility-based classes without compounding rules.
WindFlow enables Tailwind classnames on your elements.
Install now WindFlow & Webflow Integration - Webflow Apps