Style and design systems

[MantasSidabras]

Hello, I'm a fan of your library, I've read the hypermedia systems book and I'm really fascinated by the hyperview approach on mobile. I'm still learning the ropes and one thing that annoys me at the moment is that all components comes un-styled by default. So if I add select-single element, I have to style it from scratch or copy paste your provided styling to make anything usable. I find it a bit cumbersome, especially with no inline styling capabilities.

My question would be if there is any good practice on how to build custom style library?

I feel that something like tailwind css would shine here, because we can easily add style classes to elements and tailwind essentially are a bunch of style classes.

Also, I wonder if there is any roadmap for hyperview library? What it's future? Since the release of the book hypermedia and REST is gaining a lot of traction, but this library is still surprisingly unpopular. I feel like the barrier of entry is still a bit too high and the development is stale.

[adamstep]

Hi @MantasSidabras, thanks for your question. Yes, I think that a tailwind-like style kit works very well with Hyperview. In fact, we used something like this at Instawork for a while. We created it using Django templates, which allowed us to store all of the tokens (colors, spacing, sizes) as variables, and loops to create multiple versions of padding styles (eg px-0, px-1, etc).

Our goal with the core Hyperview library is to keep it small but extensible, since each mobile app may need very different styling or custom components. That's why we didn't introduce any default styles. I agree that this does make adoption harder, since a new developer has to build everything from scratch. A "Bootstrap" or "Tailwind" for Hyperview would make an excellent community library to use when getting started. If something like that existed, we would be happy to point to it in our docs and encourage usage as part of a getting-started guide.

In terms of the future and roadmap, we do regular releases with bug fixes and new features to the core. Our recent big focus has been porting to Typescript and letting developers completely define the navigation hierarchy from the XML itself, instead of baking that into the app. We think this opens up a lot of possibilities for more dynamic UIs built with Hyperview. At Instawork, a lot of the innovation in Hyperview comes in the form of custom behaviors and custom elements, which are not published as part of this core open-source library. It is a shame because it's not obvious what types of UIs people can build with Hyperview. I think it would be great to have a gallery or "Awesome Hyperview"-type of repo where everyone can open-source and share their extensions to Hyperview, which would help the library gain more traction.

Regarding popularity, the concept of server-rendered UI for mobile is still very new, and it does not immediately appeal to typical mobile app developers. (We have better success in htmx developers or full-stack developers that need to build mobile apps). We expect the growth in popularity to be slow and steady, and we are intentionally focusing on the foundations and taking a long-term view. Consider yourself an early adopter and evangelist, and we'd appreciate anything you can do to help promote us or build out the community :)

[flochtililoch]

We've started some work exposing a tailwind/bootstrap like stylesheet in our community examples, that's available under this branch for now, we'll look into integrating this in the main trunk soon. I'll move this issue as a discussion in case others want to react/contribute to this.