Skip to main content

UI Demos and reuse Gaia UI elements with Building Blocks

· 2 min read

 

List of UI elements

Though what FirefoxOS encourage developers to develop for the (general) Web, but not for FirefoxOS only. There's still a portion of developers would prefer to start their very first mobile web app with FirefoxOS native look and feel.

From Feb 2013, I've made my first Firefox/OS marketplace webapp: UI Demos , which demonstrate FirefoxOS (gaia) UI Building-Blocks elements and provide correspondent code blocks for reference.  (The wrapper version of UI Demos is also available in Android Play Store)

Basically those FirefoxOS(gaia) UI Building-Blocks are a set of UI elements defined purely in CSS. So you can include correspondent styles and see your web changed to a 'mobile' looking.

 

Custom headers

Since these UI are intended to serve the need of FirefoxOS(gaia) presence, they looks not well in other browser. (update: Include cross_browser.css if you want your webapp can run on other browsers.)

Recently FirefoxOS UI related developers starting a project called "Building-Blocks" to make developers outside of FirefoxOS (gaia) can reuse the same UI more easily.

https://github.com/buildingfirefoxos/Building-Blocks/

  1. Currently you can git clone the code from git https://github.com/buildingfirefoxos/Building-Blocks.git

2. I also register 'building-blocks' to bower list so my webapplate project or yeoman generators can reuse it with bower. Use bower (need ran 'npm install -g bower' first) to install 'building-blocks' into your project is easy $ bower install building-blocks

Or you can predefined required libraries in 'bower.json' file. then run 'bower install' directly.

For code and demos, please install UI Demos by your Desktop Firefox browser or FirefoxOS devices.

 

Reusable code samples