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.)

Answer 1

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.

Answer 2

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

Answer 3

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