Pylon – Declarative layout primitives for CSS and HTML(almonk.github.io) |
Pylon – Declarative layout primitives for CSS and HTML(almonk.github.io) |
As an example, here's how you can make a vstack with grid.
vstack {
display:grid;
}
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.
The benefit of an assumption like "everything by default is vertical", then the few people without grid support, but with flex, will have a "mostly" ok display.
Also, it's not hard to have a fallback to flex for horizontal items. (the only place it would really matter)
Don't mean to bash the poster, I just think it's interesting in the "everything old is new again" vain.
Edit: they also have a lot of intrinsic layout behavior that can be difficult to predict once you start getting into more complex layouts than header, sidebar, and footer.
If you use them for layout, you're not respecting the semantic meaning of tags.
> Why were tables declared evil? > Granted, we develop for a fixed screen width.
Personally, I was always more disturbed by the anti-semanticism of the layout use of tables. But I guess at some point the web developer community just really stopped caring about such issues. Or at least that's my takeaway of the common atrocity of style attributes on individual elements that css-in-js approaches frequently produce.
So I for one like this super-compact and simple language, it's good for making simple interfaces quickly. It's unlikely to break in subtle ways on mobile, or so I hope.
Internally a solution like this may use CSS grids, flexbox, or any new hotness that makes thing easier to implement.
Of course this is going to get ugly, or outright break, if used at a large enough scale. But very often you manifestly do not have a large scale, and never going to.
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 :)
I agree with you, I think this is clean and easy to use.
Personally, I've stuck with Bootstrap for quite awhile now. It's not perfect but it's pretty good, well documented, and I work to keep it simple. So I don't really use a lot of what Bootstrap does and that's why this project appeals to me.
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.
Maybe we need to introduce HTML transpilers now :)
The main advantage I see is the ability to extend HTML to have layout/templating functions, building up a simple DSL for frontend devs and editors. Since the target userbase is already familiar with HTML syntax, it's easy to learn and gives them "super powers" - for example, an <include> tag that imports another HTML file/partial.
Another use case I've used in a number of sites/applications: chaining a Markdown parser, an HTML transpiler, and a React renderer for the HTML "AST". Among other things, it renders internal links <a> as <Link> components of the router.
And the rabbit hole goes deep: the XML/HTML syntax is actually able to represent "programs" in a Lisp-like manner. If the angle brackets are too noisy, one can use Jade/Pug syntax to generate the same AST.
In the end, the traspiler should render the result in standards-compliant HTML. This Pylon project doesn't transpile anything, so the result contains undefined tags which the browser treats as HTMLUnknownElement [0]. The bottom line though, is that it works - and I've seen numerous projects in the wild taking advantage of this behavior.
I'd also like to mention the posthtml project [1]. I haven't used it myself, but a generic HTML transpiler has great potential in my opinion.
[0] https://developer.mozilla.org/en-US/docs/Web/API/HTMLUnknown...
XML was always a poor man's s-expression.
And for all the sins of SGML, tags lend themselves beautifully to templating because they can represent code as data just as Lisp does.
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.
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
But it does look nice :)
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.
The spec allows custom elements[0] and pretty much requires this behaviour.
> you're breaking all HTML semantics and your markup is not accessible.
Calling the markup non-accessible is defensible[1], but it doesn't break HTML semantics in any way.
[0] https://html.spec.whatwg.org/multipage/custom-elements.html#...
[1] though it wouldn't be more accessible as a stack of divs and the custom element can be aria-tagged[2], in the browsers supporting it it's also possible to use customised elements but here there's little of interest
[2] https://html.spec.whatwg.org/multipage/custom-elements.html#...
https://html.spec.whatwg.org/multipage/custom-elements.html#...
<list>
<hstack spacing=s>
<div class="icon"></div>
<text>Westminster</text>
<spacer></spacer>
<text>0.5 miles</text>
</hstack>
....
It should be:
<my-cities>
<my-city>
<city-name>Westminster</city-name>
<city-distance>0.5 miles</city-distance>
</my-city>
....
<my-cities class=pylon-list>
<my-city class=pylon-hstack>
<city-name>Westminster</city-name>
<city-distance>0.5 miles</city-distance>
</my-city>
....https://html.spec.whatwg.org/multipage/custom-elements.html#...
Browsers usually treat undefined nonstandard elements as span-like (flow elements), not div-like (block elements) by default.
I kind of think that at one point, everyone that works a lot with front end web development should make their own framework. It helps you learn to make long term decisions, deal with design iterations where you have lots of wide spread use of older systems and many other things that help you make wiser decisions in day to day interface design. But also it can help you see where things like Bootstrap are helpful and where it is not.
I guess the value proposition of "You can add a whole bunch of complexity to your webpage that won't affect what people see so robots can scrape your page easier" didn't really resonate with developers. Also, the proposals I saw were much too granular and focused on people writing scientific papers on the web. It wasn't a good mesh for the "garbage" web, which is like 99% of everything.
I’d say web developers care much mire about semantics now than they did ten years ago. At least now you can finally have meaningful conversations around accessibility and screen readers.
Any plan that depends on people caring won't survive contact with actual people.
Not only that: content of custom elements is treated as fallback content (taken when a particular custom element is not available). However, that content is still subject to HTML parsing and tag omission rules, and tag omission is contextually dependent on the parent element's content model (which a custom element doesn't have since there's no way to register such using the JavaScript API).
There was (?) even the sacked mechanism of "customized built-in elements" which would allow authors to define custom attributes and behaviours for standard HTML elements. Except it doesn't work like that with HTML's enumerated attributes such as `selected` which can have shortforms like `<div selected>` where `selected` is the attribute value not the attribute name, requiring the values of all enumerated attributes be unique among all attributes in a DTD (as in SGML) or at least on a given element.
Sometimes I wonder why the HTML spec authors just had to make every blunder imaginable when there's a very rich theory of formal language and markup languages (eg. SGML and others) dealing exactly with these kind of problems.
<foo>foo</foo>
<bar>bar</bar>
<div>div1</div>
<div>div2</div>
foo bar
div1
div2Perhaps what should have happened was the defining of a "table-layout" tag that behaves exactly the same as "table" except it's understood to be for visual presentation only. Flexbox almost achieves this, but for some reason isn't as popular.
Also, flexbox is very popular in my experience.
In other domains separating content from presentation works well. But in web development the incentives don't align with that idea.
It actually gets you pretty close to MVC or whatever MVVC is maybe? Is that still a thing?
If you’d instead left presentation to the display tool, you’d only need to change the content.
The HTML presentation/content argument is this scaled up.
But Emacs does that for me if I press M-q.
Your editor is also your presentation tool here, and it knows where all the line breaks should be, so it can do the edits for you. It works those around the content. If you hadn't included the line-breaks in the first place, it wouldn't even have needed to do that (well, ok, it would to "soft-wrap").
If you passed/copied the file to someone who prefers a 78 character line to your 100 character line (or uses a machine from the early 80s for retro-cyberpunk chic), when they render the file, several things could happen: - their viewer/wditor might add temporary line-breaks to soft-wrap, in which case they'll see some short and some long lines - their viewer/editor might add hard-wrap line-breaks at 78 chars. This would remove all your 100 char ones, and could potentially break your content because it might not see the difference between a "wrap" and a "new paragraph".
In the second case, when you get the file back later on, the content wont suit your preference for 100 character lines.
When the presentation is kept out of the content, none of this happens.
My point was that even in something as simple as a text file, adding presentation commands (line breaks), adds work, or hinders accessibility.
Scale that up to HTML and the wider range of possible presentation options. Say you used the old-school inline colouring options. Maybe you find green text on red backgrounds really fun to read. You encode that into the content (the markup). Pass this file on to someone with red-green colourblindness (c7% of XY-chromosome carrying humans[0]) and they wont be able to read your file at all.