[Showroom] Mac UI for Xojo webapps (download)

Hi,

I don’t really like the default look of xojo webapps. So I mostly design my apps using css.

Now I made a full style package which turns your ugly webapp :wink: in a nice OSX looking one.

the only thing you need, is to copy the css from the download below into your App.HTMLHeader property. Then copy the styles from the example project to your webapp project. After this you can apply the styles to your elements - done!

This free to use for everyone. Hope you use it, eventually.

Here’s a screenshot of the example app:
https://www.dropbox.com/s/szqrgpkv9kmdn4g/screenshot.png?dl=0

Here’s the download-link:
https://www.dropbox.com/sh/0eaqe5x0acyrluo/AAAIhT8EWr-GvGCdRXUGWEJKa?dl=0

I’ll work on it in the next days to support listboxes, and other default UI-elements. Also I want to implement menus.

Give me some feedback, if you want.

Greetings, Lars.

Hint: It is retina ready :smiley:

Looks brilliant, Lars! The only thing I would change is the size and positioning of the icons. They look a bit small to me, and maybe they could be aligned a bit better on the same optical axis – a light icon like the folder clip does often need a bit more height than a solid one. But that’s all personal preference. Tabs, palette and the rest I wouldn’t know what to enhance – looks very clean and Mac-like. Maybe a little retro OS X with the gradients, but I like the style a lot.

I have added some new things:

  • Pop overs: create popovers with container controls and display them above your UI
  • Inputs controls: textfield, textarea and popupmenu are now restyled
  • Listbox is supported

Here’s the preview.

download in the first post.

Yea, I didn’t only want copy the new OSX-style. the gradients are the same, but I added some light shadows to make the UI more organic.

Hi Lars,
it seems that the dropbox project is not updated (there are two projects, but inside are equal)

sorry, solved!

This looks great, but perhaps there’s a better way of sharing the screenshots - Dropbox seemed to have hired some Google engineers who think that scrolling actually means zooming.

Just found out you can scroll by dragging the image.

And, btw, looks really neat!

There’s a new version :wink: Its full compatible with the old one.

Just in case someone uses it.

hi,
link ?

I believe the link is in the original post with the installation instructions. :wink:

great work Lars.

I love it! Some remarks: on a Mac Retina screen the icon size and positions and fontsizes are somewhat distorted.

[quote=349541:@Alexander van der Linden]I love it! Some remarks: on a Mac Retina screen the icon size and positions and fontsizes are somewhat distorted.

[/quote]

i notice the text in the button got cut off too…