Homey Community Forum

Ui-library for the app settings page in Homey v2

Which ui-library should be used for the app settings page in Homey v2, I can’t find any hint in the documentation ?



I don’t think there is one.

It would be nice to come up with some sort of consensus on what UI library should be used by convention, so settings pages look similar in appearance. Something lean, mobile-first, preferable CSS-only (no JS, or particular JS requirements), that looks good.

For one of my apps, I’m looking at MUI.

1 Like

I had a similar thought and ended up at Material Design Light. But in my opinion this belonged in the guidelines of athom

1 Like

MDL looks very nice, I’ll take a look at it too :+1:t2:

As for guidelines: I agree, a common UI library for settings makes a lot of sense, to bring a more streamlined experience to users.

1 Like

I know it’s not sexy, or cool but An industry standard like bootstrap, which has great documentation, a massive community, extensive stack overflow and the largest selection of plugins / extensions might be less of a hurdle for existing people.

Athom can throw a theme over the top of it if they want

Not Bootstrap, that’s an overkill, (too big and too fat). In my opinion, a small slim lib with a modern design fits much better. And it also fits better to the new homey-app.

And that’s likey why this thread will go no where, people are too opinionated about what they want to use.

Ie. I refuse to learn yet another technology that I will not use outside of my homey. And you want something with a small footprint and is modern, Both are valid opinions.

You might as well start a thread about spaces vs tabs or vim vs emacs, or does the ends justify the means. Least then there are only two options.

It was just a question of which UI framework to use.

( IMHO) At the end athom has to decide if and which framework (incl. css) to include in the style guide. For the “look & feel” it would be better, if all settings pages were the same.

decide if and which

To Completely disable the use of external CSS libraries would ensure a light weight standardised experience. Tables were the original responsive elements after all. :crazy_face:

The reason I seem to have strong views on this is because recently I picked up an app to do an update upon, and it used Semantic UI, learning and and using it almost broke me. And added a lot more time and effort to the task.

You seem to have decided, and at the moment Athom are very flexible, so have fun.

1 Like

because of this it would be nice if Athom gave a ‘best practice’ for the ui framework they would like to see. Currently there is a bootstrap version buildin as far as I recall. So no reason to not start using that…

Yes, I have used the internal bootstrap, I believe it was v3 :slight_smile:

Also in Homey-App v2 ?

No, It might be some sort ofjavascript abstraction layer over css, or not.

Doesn’t the new app use React Native?

Or, if we’re talking about the developer site: it uses Material-UI.

Looks like a JS abstraction layer over CSS to me :stuck_out_tongue:

The big question is: Is there an official statement from athom regarding the design of the app-settings pages at Homey v2.0? I don’t invest time for a new app just to find out afterwards that I can throw it all in the trash… :face_with_raised_eyebrow:

No, there isn’t.

From what I remember about a conversation on Slack, the minimum requirement for the Homey app, and therefore also any settings pages, is Android 4.4.

I’m pretty sure that webviews (in which the settings pages are rendered) on that version of Android are quite limited, so I doubt that things like flexbox will work. Which automatically rules out a lot of relatively recent UI libraries, which base their grid system on flexbox.

Flexbox works, been using them for a little while.

Oh, cool :+1:t2: I remember having lots of issues with the webview, but perhaps that was for an even older version of Android :sweat_smile:

Following this with interest. Totally agree a uniform look would be a big plus.
But at the moment even basic css seems to fail, so a basic set of controls for a form would be a great start.

Looking at a simple pairing view:

As the bootstrap css file was already in the settings, I applied the default controls and ended with this:

Bootstrap might be too big, but way nicer :wink: