Hacker News new | ask | show | jobs
by armandososa 1626 days ago
> it's funny that the suggested solution (spacers) are basically back to the old 1px transparent gif trick

Not really. The Stack component he uses as an example is actually just a thin abstraction over some reusable css. In plain html, it could look like

    <section class="stack stack--space-3">
        <article class="item">...</article>
        <article class="item">...</article>
        <article class="item">...</article>
    </section>
There are no "spacer gifs" anywhere, it's only that you're lifting the margin responsibility to the parent. I may be wrong, but I think the whole stack concept is borrowed from SwiftUI.

That said, I've recently started using actual spacer divs that are more similar to the spacer gifs of yore, you mentioned. So I could do things like:

    <section>
        <div class="vertical-spacer-2"/>
        <article class="item">...</article>
        <div class="vertical-spacer-1"/>
        <article class="item">...</article>
        <div class="vertical-spacer-1"/>
        <article class="item">...</article>
        <div class="vertical-spacer-2"/>
    </section>
Having been alive during the whole semantic web era, that feels very wrong to me. But it works like a charm to keep your code consistent with a design system which seems like a more noble endeavor than to write html that makes more sense to machines (which was, if I remember correctly, the objective of the semantic web).
1 comments

Stacks started in UIKit (UIStackView) and before that were cribbed from Android, IIRC.
"Stacks" are an ancient concept, you'd struggle to find a UI framework (other than HTML) that's missing an analogous layout tool. Java's Swing had BoxLayout, JavaFX had VBox, Qt has QVBoxLayout, etc.