Pylon – Declarative layout primitives for CSS and HTML (opens in new tab)

I enjoy seeing other people's solution, but since I really learned the power of grid, most of this is overdone with flex.

As an example, here's how you can make a vstack with grid.

  vstack {
    display:grid;
  }

It's ridiculously simple and clean, works with all the elements without extra wrappers, no margins, no cleaning up trailing spaces, etc... add spacing class using "grid-gap" and it's the near perfect solution.

The hstack example is more complicated, because you simply have to choose widths, there is no getting around this, even with flexbox. (unless you want to totally give up control of the layout to "auto".)

The spacing classes are clever, and I may adopt some of this method. (I use grid gap, I only have 2 sizes) With the "Spacers" example, a width of 1fr works using grid.

Flex beats grid with some natural overflow capabilities (row wrap), but other than that, flex is not great for this kind of thing.

Since there's only a few examples, I suspect this person will be adding more in the future.

Edit: For declarative things like this, I think there should be one assumption. I use vertical in web interfaces. This means one less option to remember. (ie, by default everything is vertical)

Edit2: With an unknown number of items, flex is probably preferable for horizontal items for simple columns. But that is only if you don't care about the widths of the columns too much as well.

I like this, but my 20 years in web dev can't help but chuckle. Remember when tables were declared evil for layout, so we had the shit show of trying to use CSS floats for everything, so then we added flexbox, and then grid, and here is a nice set of elements that is basically, well, somewhat less useful than tables for layout.

Don't mean to bash the poster, I just think it's interesting in the "everything old is new again" vain.

Wow. So many kill-joys in this thread.

I think the project is neat. It certainly is an opinionated way of doing a layout and it reads quite nicely. If CSS classes were provided as an alternative I think the project might have more adopters.

Good work :)

Reminds me very much of XUL, Mozilla's XML-based language for UI. https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL

In a prior life I developed a slew of XUL apps, including a full-suite medical record system and billing system. It had its quirks, but for a developer-heavy (and design-light) firm it was a great way to build standard, predictable, and accessible UIs.

Fun idea. The naming is weird as pylon used to be a python web framework but since it's not going to have any chance to become popular, overriding it seems alright.

The resulting HTML is not great, but the dev experience looks super nice.

Maybe we need to introduce HTML transpilers now :)

Very cool, but I'd like to point out that unless/until this gets very popular to where Google changes their practices, it wrecks certain SEO perks (though so do a lot of fancy practices). Google still really likes plain old HTML primitives like <OL> or <UL> for lists, <TABLE> for tables, <P> for paragraph. Their featured snippets appear to be capable of extracting info that isn't in that form and bumping it to the top of results, but to prefer not to. My $.02 from starting to learn that game.

Why have the alignment done relative to the direction of the stack? I’ve wondered the reason for this with Flexbox as well.

It’s very hard to remember and unintuitive. My guess is something to do with responsiveness?

To me, alignX and alignY (with an align shorthand) are always clear. And the amount of times I’m changing between the two is nearly 0 so far in a large app.

The intent is nice, in fact this is what React Native for Web does as well with the difference that accessibility and semantics are preserved because JS comes to the rescue.

That said for pure layout stuff I actually think that this library is cool. <view> is totally fine.

<py-view> (or a sexier prefix) would even be valid HTML

I think this seems pretty cool. I can see using it for all sorts of projects with minimalist needs, e.g. quick prototyping, interview coding assignments, admin consoles.

You must construct additional Pylons!

SwiftUI should go more the jsx/HTML way. Not the other way around!

This most likely breaks accessibility especially in lists.

But it does look nice :)

So basically you're abusing the fact that (modern) browsers treat unknown tags more or less as divs and built a small CSS framework with these names.

I understand how that it can feel familiar to Swift devs, and also realized by reading the source that the upside of using unknown tags means they don't have any base style that you'd have to override.

But really, you're breaking all HTML semantics and your markup is not accessible. It could work as a set of React/Vue/Whatever components or even Web components (probably the best way to achieve what you're trying to do), but as bare HTML it doesn't.

This looks great!

This has issues:

    <list>
        <hstack spacing=s>
            <div class="icon"></div>
            <text>Westminster</text>
            <spacer></spacer>
            <text>0.5 miles</text>
        </hstack>
        ....

It is more complex then it needs to be, it puts the styling into into the html, it kills all semantic meaning and pollutes the global namespace of element names.

It should be:

    <my-cities>
        <my-city>
            <city-name>Westminster</city-name>
            <city-distance>0.5 miles</city-distance>
        </my-city>
        ....

And then simply style the custom attributes to your liking via css. If these "primitives" would use classnames instead of element names, their styles could be added like this:

    <my-cities class=pylon-list>
        <my-city class=pylon-hstack>
            <city-name>Westminster</city-name>
            <city-distance>0.5 miles</city-distance>
        </my-city>
        ....