# Ui-library for the app settings page in Homey v2

**URL:** <https://community.homey.app/t/ui-library-for-the-app-settings-page-in-homey-v2/5475>\
**Category:** Developers\
**Created:** [December 15, 2018, 8:36am UTC](https://community.homey.app/t/ui-library-for-the-app-settings-page-in-homey-v2/5475 "2018-12-15T08:36:24Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![ChrisG](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/chrisg/32/8825_2.png) [@ChrisG](https://community.homey.app/u/ChrisG)\
**Post date:** [December 15, 2018, 8:36am UTC](https://community.homey.app/t/ui-library-for-the-app-settings-page-in-homey-v2/5475/1 "2018-12-15T08:36:24Z")

</div>

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

Chris

---

<div class="post-metadata">

**Author:** ![robertklep](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/robertklep/32/160628_2.png) [@robertklep](https://community.homey.app/u/robertklep)\
**Post date:** [December 15, 2018, 10:05am UTC](https://community.homey.app/t/ui-library-for-the-app-settings-page-in-homey-v2/5475/2 "2018-12-15T10:05:48Z")

</div>

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](https://www.muicss.com/).

---

<div class="post-metadata">

**Author:** ![ChrisG](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/chrisg/32/8825_2.png) [@ChrisG](https://community.homey.app/u/ChrisG)\
**Post date:** [December 15, 2018, 10:22am UTC](https://community.homey.app/t/ui-library-for-the-app-settings-page-in-homey-v2/5475/3 "2018-12-15T10:22:51Z")

</div>

I had a similar thought and ended up at [Material Design Light](https://getmdl.io/templates/index.html). But in my opinion this belonged in the guidelines of athom

---

<div class="post-metadata">

**Author:** ![robertklep](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/robertklep/32/160628_2.png) [@robertklep](https://community.homey.app/u/robertklep)\
**Post date:** [December 15, 2018, 10:58am UTC](https://community.homey.app/t/ui-library-for-the-app-settings-page-in-homey-v2/5475/4 "2018-12-15T10:58:07Z")

</div>

MDL looks very nice, I’ll take a look at it too 👍🏻

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

---

<div class="post-metadata">

**Author:** ![Jamie](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jamie/32/5274_2.png) [@Jamie](https://community.homey.app/u/Jamie)\
**Post date:** [December 16, 2018, 1:57am UTC](https://community.homey.app/t/ui-library-for-the-app-settings-page-in-homey-v2/5475/5 "2018-12-16T01:57:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ChrisG](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/chrisg/32/8825_2.png) [@ChrisG](https://community.homey.app/u/ChrisG)\
**Post date:** [December 16, 2018, 4:53am UTC](https://community.homey.app/t/ui-library-for-the-app-settings-page-in-homey-v2/5475/6 "2018-12-16T04:53:25Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Jamie](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jamie/32/5274_2.png) [@Jamie](https://community.homey.app/u/Jamie)\
**Post date:** [December 16, 2018, 10:21am UTC](https://community.homey.app/t/ui-library-for-the-app-settings-page-in-homey-v2/5475/7 "2018-12-16T10:21:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ChrisG](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/chrisg/32/8825_2.png) [@ChrisG](https://community.homey.app/u/ChrisG)\
**Post date:** [December 16, 2018, 10:42am UTC](https://community.homey.app/t/ui-library-for-the-app-settings-page-in-homey-v2/5475/8 "2018-12-16T10:42:02Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Jamie](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jamie/32/5274_2.png) [@Jamie](https://community.homey.app/u/Jamie)\
**Post date:** [December 16, 2018, 10:47am UTC](https://community.homey.app/t/ui-library-for-the-app-settings-page-in-homey-v2/5475/9 "2018-12-16T10:47:40Z")

</div>

```
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. 🤪

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.

---

<div class="post-metadata">

**Author:** ![Jeroen\_Somhorst](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jeroen_somhorst/32/184_2.png) [@Jeroen\_Somhorst](https://community.homey.app/u/Jeroen_Somhorst)\
**Post date:** [December 16, 2018, 11:36am UTC](https://community.homey.app/t/ui-library-for-the-app-settings-page-in-homey-v2/5475/10 "2018-12-16T11:36:41Z")

</div>

> [@Jamie](#):
>
> 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

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…

---

<div class="post-metadata">

**Author:** ![Jamie](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jamie/32/5274_2.png) [@Jamie](https://community.homey.app/u/Jamie)\
**Post date:** [December 16, 2018, 11:40am UTC](https://community.homey.app/t/ui-library-for-the-app-settings-page-in-homey-v2/5475/11 "2018-12-16T11:40:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ChrisG](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/chrisg/32/8825_2.png) [@ChrisG](https://community.homey.app/u/ChrisG)\
**Post date:** [December 16, 2018, 12:42pm UTC](https://community.homey.app/t/ui-library-for-the-app-settings-page-in-homey-v2/5475/12 "2018-12-16T12:42:26Z")

</div>

Also in Homey-App v2 ?

---

<div class="post-metadata">

**Author:** ![Jamie](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jamie/32/5274_2.png) [@Jamie](https://community.homey.app/u/Jamie)\
**Post date:** [December 16, 2018, 1:08pm UTC](https://community.homey.app/t/ui-library-for-the-app-settings-page-in-homey-v2/5475/13 "2018-12-16T13:08:10Z")

</div>

No, It might be some sort of[javascript abstraction layer over css](https://cssinjs.org), or not.

---

<div class="post-metadata">

**Author:** ![robertklep](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/robertklep/32/160628_2.png) [@robertklep](https://community.homey.app/u/robertklep)\
**Post date:** [December 16, 2018, 6:51pm UTC](https://community.homey.app/t/ui-library-for-the-app-settings-page-in-homey-v2/5475/14 "2018-12-16T18:51:35Z")

</div>

Doesn’t the new app use React Native?

Or, if we’re talking about the developer site: it uses [Material-UI](https://material-ui.com/).

---

<div class="post-metadata">

**Author:** ![Jamie](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jamie/32/5274_2.png) [@Jamie](https://community.homey.app/u/Jamie)\
**Post date:** [December 17, 2018, 8:37am UTC](https://community.homey.app/t/ui-library-for-the-app-settings-page-in-homey-v2/5475/15 "2018-12-17T08:37:29Z")

</div>

> **[Basics - Material-UI](https://material-ui.com/css-in-js/basics/)**
>
> You can leverage our styling solution, even if you are not using our components.

Looks like a JS abstraction layer over CSS to me 😛

---

<div class="post-metadata">

**Author:** ![ChrisG](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/chrisg/32/8825_2.png) [@ChrisG](https://community.homey.app/u/ChrisG)\
**Post date:** [December 17, 2018, 9:03am UTC](https://community.homey.app/t/ui-library-for-the-app-settings-page-in-homey-v2/5475/16 "2018-12-17T09:03:28Z")

</div>

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… 🤨

---

<div class="post-metadata">

**Author:** ![robertklep](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/robertklep/32/160628_2.png) [@robertklep](https://community.homey.app/u/robertklep)\
**Post date:** [December 17, 2018, 11:01am UTC](https://community.homey.app/t/ui-library-for-the-app-settings-page-in-homey-v2/5475/17 "2018-12-17T11:01:34Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Jamie](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jamie/32/5274_2.png) [@Jamie](https://community.homey.app/u/Jamie)\
**Post date:** [December 17, 2018, 11:14am UTC](https://community.homey.app/t/ui-library-for-the-app-settings-page-in-homey-v2/5475/18 "2018-12-17T11:14:27Z")

</div>

Flexbox works, been using them for a little while.

---

<div class="post-metadata">

**Author:** ![robertklep](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/robertklep/32/160628_2.png) [@robertklep](https://community.homey.app/u/robertklep)\
**Post date:** [December 17, 2018, 11:18am UTC](https://community.homey.app/t/ui-library-for-the-app-settings-page-in-homey-v2/5475/19 "2018-12-17T11:18:11Z")

</div>

> [@Jamie](#):
>
> Flexbox works, been using them for a little while.

Oh, cool 👍🏻 I remember having lots of issues with the webview, but perhaps that was for an even older version of Android 😅

---

<div class="post-metadata">

**Author:** ![SailingDuck](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/sailingduck/32/2988_2.png) [@SailingDuck](https://community.homey.app/u/SailingDuck)\
**Post date:** [December 18, 2018, 11:59pm UTC](https://community.homey.app/t/ui-library-for-the-app-settings-page-in-homey-v2/5475/20 "2018-12-18T23:59:59Z")

</div>

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:

 ![numslide_pair](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/c/c1b3bcacdffba55f1893b0b715745a09a1172915.jpeg)

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

 ![numslide_pair_bootstrap](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/e/e7538f48dd54bbcb824ececa3d2b1f33c36f2348.jpeg)

Bootstrap might be too big, but way nicer 😉

[Next page](https://community.homey.app/t/ui-library-for-the-app-settings-page-in-homey-v2/5475.md?page=2)
