What's the recommended way to create a native-looking UI on Firefox OS?

Question

I understand that in Firefox OS every app is a web app, but I'd like to create a "native" look & feel in my own application, meaning that I want it to "fit in" with the built-in application styles.

Mozilla even has a style guide for this:
http://www.mozilla.org/en-US/styleguide/products/firefox-os/

Is there a stylesheet and/or a JavaScript which I can include in my app in order to create controls and UI elements that look like the ones in the style guide?

(The only download I could find on that site was a PSD containing all the designs, but I'm looking for something ready-to-use.)

Perhaps this will interest you - https://github.com/mozilla-b2g/gaia/tree/master/apps — levi, Dec 11 '13 at 00:23
Ditto I have noticed apps with check-boxes that are too small to detect my fat fingers — Adrian Garner, Dec 12 '13 at 00:37

score 3 · Accepted Answer · answered Dec 11 '13 at 00:32

3

You have the good link for some UI guidelines, but you can check what we call the Building Blocks or even get those on GitHub. Another way is to see what we did in GAIA, but in any situations, it's not just about importing a CSS file.

answered Dec 11 '13 at 00:32

fharper

559
2
13

If you check the links I posted, you'll see a couple of things: on building blocks, you can copy/paste the HTML as the CSS to replicate some elements we used in Firefox OS applications. If you want to know more about how GAIA app (the HTML5 based Phone UI for Boot 2 Gecko - Firefox OS), since it's in HTML, you can see how we did the UI. – fharper Dec 11 '13 at 00:49
Thank you Fred, it seems that **building blocks** are what I need :) One comment though: the slider component doesn't work (at least in Firefox 25 I can't drag it) – Venemo Dec 11 '13 at 10:42

score 2 · Answer 2 · answered Aug 10 '14 at 03:28

2

Apart from Building Blocks, there is also Mozilla Brick based on X-Tags, included in Mozilla Appmaker.

answered Aug 10 '14 at 03:28

gasolin · Answer 3 · 2014-01-22T07:03:34.000

clone the BuildingBlocks from https://github.com/buildingfirefoxos/Building-Blocks.git

Or do bower install building-blocks if you prefer manager libraries by bower.

Include cross_browser.css if you want your webapp can run on other browsers.

Make sure to check the index.html for example. The Building Block components are writen by CSS only and located in style and style_unstable folders.

If you want more code examples, install UI Demos with Firefox Browser https://marketplace.firefox.com/app/ui-demos which comes with sample and source code.

The usage is updated in my blog post http://blog.gasolin.idv.tw/2013/09/reuse-gaia-ui-elements-with-building.html

This is the same thing as what Fred said in his answer. – Venemo Jan 03 '14 at 19:42 — Venemo, Jan 03 '14 at 19:42

What's the recommended way to create a native-looking UI on Firefox OS?

3 Answers3