Rec Room - User Interface and Layout

User Interface

FirefoxOS leverages HTML and CSS for user interfaces. The website Building FirefoxOS, produced by Mozilla partner Telefonica, provides reusable UI widgets, as well as CSS for common app layouts, transitions, etc. The site contains numerous other resources, including a Photoshop stencil kit, fonts, icons and much more.

To use Building Blocks in your app, from the root of your project folder, run this command:

bower install building-blocks

Let's briefly look at an example of how to implement one of the Building Block UI Widgets, the Action Sheet, in your app.

1. Open <your app name>/app/index.html in your text editor
2. Look for the following HTML comment that denotes where in index.html we include CSS from 3rd party libraries in our app and insert an HTML link tag that points to the action menu CSS file.

   <!-- build:css(app) styles/vendor.css -->
     ... existing link tags to CSS files...
     <link rel="stylesheet" href="bower_components/building-blocks/style/action_menu.css">
   <!-- endbuild -->
   

3. From the templates directory, open a handlebars template for a specific page or component in your app where you want the action menu.  Insert the following:

   <form role="dialog" data-type="action">
     <header>Title</header>
     <menu>
       <button>Action 1</button>
       <button disabled>Action 2 (disabled)</button>
       <button>Action 3</button>
       <button>Action 4</button>
       <button disabled>Action 5 (disabled)</button>
       <button>Action 6</button>
       <button>Action 7</button>
       <button disabled>Action 8 (disabled)</button>
       <button>Action 9</button>
       <button>Cancel</button>
     </menu>
   </form>
       

4. Note: Use <button type="button"> in case you don't want your form to be submitted.

This will create an action menu that looks like this:

You can now wire up your touch or click listeners in Javascript to display the Action Menu, dismiss it when Cancel is clicked or perform a specific action when an Action item is tapped or clicked.

Layout

Building FirefoxOS includes examples of how to achieve common App layouts.

FirefoxOS "Look and Feel"

If you want the style of your app to mimic the look and feel of FirefoxOS itself, you'll be interested in Building FirefoxOS - CSS Transitions. Beyond just transitions, this section covers prompts, in-app navigation, task switching and other key FirefoxOS interactions.