Coding guide: Drawers

  • Revision slug: Mozilla/Firefox_OS/UX/Patterns/Drawer/Coding
  • Revision title: Coding guide: Drawers
  • Revision id: 363507
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment

Revision Content

{{FXOSUXRepoDownloads("https://github.com/mozilla-b2g/gaia/raw/master/shared/style_unstable/drawer.css", "https://github.com/mozilla-b2g/gaia/tree/master/shared/style_unstable/drawer")}}

{{Draft()}}

Here you can find examples of how to create a drawer on Firefox OS, as well as downloads for the CSS and image resources used by the built-in apps on Firefox OS. You can copy these resources into your app and make use of them to build apps that match these apps' appearances.

Implementing a drawer

To implement a tab bar using the style shown here, place the CSS and media files into your app and then import the CSS using the {{cssxref("@import")}} at-rule:

@import url(resources/drawer.css);

Make sure the media files are in the location expected by the CSS (either by placing them in a corresponding location or by revising the CSS).

Example

HTML to create the drawer

??

<section data-type="sidebar">
  <header>
    <menu type="toolbar">
      <a href="#"><span class="icon icon-add">add</span></a>
    </menu>
    <h1>Title <em>(9)</em></h1>
  </header>
  <nav>
    <ul>
      <li><a href="#">label</a></li>
      <li><a href="#">label</a></li>
      <li><a href="#">label</a></li>
      <li><a href="#">label</a></li>
    </ul>
    <h2>Subtitle</h2>
    <ul>
      <li><a href="#">label</a></li>
      <li><a href="#">label</a></li>
      <li><a href="#">label larger label than the </a></li>
      <li><a href="#">label</a></li>
    </ul>
  </nav>
</section>

<section id="drawer" role="region">
  <header>
    <a href="#"><span class="icon icon-menu">hide sidebar</span></a>
    <a href="#drawer"><span class="icon icon-menu">show sidebar</span></a>
    <h1>Inbox</h1>
  </header>
  <div role="main"></div>
</section>

More discussion here

CSS

The CSS here defines the styling for our interface.

{{FXOSUXLiveSampleSetup("https://developer.mozilla.org/media/gaia/shared/style/headers.css", "https://developer.mozilla.org/media/gaia/shared/style_unstable/drawer.css")}}

h2.bb-docs {
  font-size: 1.8rem;
  font-family: "MozTT", Sans-serif;
  font-weight: lighter;
  color: #666;
  margin: -0.1rem 0 0;
  background-color: #f5f5f5;
  padding: 0.4rem 0.4rem 0.4rem 3rem;
  border: solid 0.1rem #e8e8e8;
}

section[role="region"] {
  height: 100%;
  font: 2.2rem/1em "MozTT", Sans-serif;
}

div[role="main"] {
  background: #fff;
  height: calc(100% - 5rem);
  overflow: hidden;
}

div[role="main"] p {
  margin: 2rem 2.5rem;
}

/* Base icons */
section[data-type="sidebar"] > header .icon.icon-add {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4RTlFMTExOTIwMjA2ODExODIyQUJFQTc4MUU4NEEyOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpENjM1MzgyMUJGNzAxMUUxQkNDOEUwRkExQ0U5N0Q0QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpENjM1MzgyMEJGNzAxMUUxQkNDOEUwRkExQ0U5N0Q0QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Mzk0RjYxOUMzMTIwNjgxMTgyMkFBRjgxQ0IyNTAxM0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OEU5RTExMTkyMDIwNjgxMTgyMkFCRUE3ODFFODRBMjkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz45ZU6fAAAAiklEQVR42mL8//8/w0AAJoYBAqMW0w2wkKmPH4hVoOw7QPyRVAMYyUzVD4FYDsq+DMR6o3E8avGoxbiykxAQ78KjTxeI2aDs70B8DY9aZ2z5HJfFIIMvUclzGkB8c9AXmU+B+CyVgvrFaJE5avGoxQNSZBICzEBsAGVfAOK/9LJ4NI5HLSYIAAIMAKfZJ7+0GO5HAAAAAElFTkSuQmCC);
}

JavaScript code

We will soon add code here.

// none yet

Working demo

You can try out the drawer in this live demonstration.

{{FXOSUXLiveSampleEmbed('Example')}}

Revision Source

<p>{{FXOSUXRepoDownloads("https://github.com/mozilla-b2g/gaia/raw/master/shared/style_unstable/drawer.css", "https://github.com/mozilla-b2g/gaia/tree/master/shared/style_unstable/drawer")}}</p>
<p>{{Draft()}}</p>
<p>Here you can find examples of how to create a drawer on Firefox OS, as well as downloads for the CSS and image resources used by the built-in apps on Firefox OS. You can copy these resources into your app and make use of them to build apps that match these apps' appearances.</p>
<h2 id="Implementing_a_drawer">Implementing a drawer</h2>
<p>To implement a tab bar using the style shown here, place the CSS and media files into your app and then import the CSS using the {{cssxref("@import")}} at-rule:</p>
<pre class="brush: css">
@import url(resources/drawer.css);</pre>
<p>Make sure the media files are in the location expected by the CSS (either by placing them in a corresponding location or by revising the CSS).</p>
<h2 id="Example">Example</h2>
<h3 id="HTML_to_create_the_drawer">HTML to create the drawer</h3>
<p>??</p>
<pre class="brush: html">
&lt;section data-type="sidebar"&gt;
&nbsp; &lt;header&gt;
&nbsp;&nbsp;&nbsp; &lt;menu type="toolbar"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="#"&gt;&lt;span class="icon icon-add"&gt;add&lt;/span&gt;&lt;/a&gt;
&nbsp;&nbsp;&nbsp; &lt;/menu&gt;
&nbsp;&nbsp;&nbsp; &lt;h1&gt;Title &lt;em&gt;(9)&lt;/em&gt;&lt;/h1&gt;
&nbsp; &lt;/header&gt;
&nbsp; &lt;nav&gt;
&nbsp;&nbsp;&nbsp; &lt;ul&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;label&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;label&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;label&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;label&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp; &lt;/ul&gt;
&nbsp;&nbsp;&nbsp; &lt;h2&gt;Subtitle&lt;/h2&gt;
&nbsp;&nbsp;&nbsp; &lt;ul&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;label&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;label&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;label larger label than the &lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;label&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp; &lt;/ul&gt;
&nbsp; &lt;/nav&gt;
&lt;/section&gt;

&lt;section id="drawer" role="region"&gt;
&nbsp; &lt;header&gt;
&nbsp;&nbsp;&nbsp; &lt;a href="#"&gt;&lt;span class="icon icon-menu"&gt;hide sidebar&lt;/span&gt;&lt;/a&gt;
&nbsp;&nbsp;&nbsp; &lt;a href="#drawer"&gt;&lt;span class="icon icon-menu"&gt;show sidebar&lt;/span&gt;&lt;/a&gt;
&nbsp;&nbsp;&nbsp; &lt;h1&gt;Inbox&lt;/h1&gt;
&nbsp; &lt;/header&gt;
&nbsp; &lt;div role="main"&gt;&lt;/div&gt;
&lt;/section&gt;
</pre>
<p>More discussion here</p>
<h3 id="CSS">CSS</h3>
<p>The CSS here defines the styling for our interface.</p>
<p>{{FXOSUXLiveSampleSetup("https://developer.mozilla.org/media/gaia/shared/style/headers.css", "https://developer.mozilla.org/media/gaia/shared/style_unstable/drawer.css")}}</p>
<pre class="brush: css">
h2.bb-docs {
&nbsp; font-size: 1.8rem;
&nbsp; font-family: "MozTT", Sans-serif;
&nbsp; font-weight: lighter;
&nbsp; color: #666;
&nbsp; margin: -0.1rem 0 0;
&nbsp; background-color: #f5f5f5;
&nbsp; padding: 0.4rem 0.4rem 0.4rem 3rem;
&nbsp; border: solid 0.1rem #e8e8e8;
}

section[role="region"] {
&nbsp; height: 100%;
&nbsp; font: 2.2rem/1em "MozTT", Sans-serif;
}

div[role="main"] {
&nbsp; background: #fff;
&nbsp; height: calc(100% - 5rem);
&nbsp; overflow: hidden;
}

div[role="main"] p {
&nbsp; margin: 2rem 2.5rem;
}

/* Base icons */
section[data-type="sidebar"] &gt; header .icon.icon-add {
&nbsp; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4RTlFMTExOTIwMjA2ODExODIyQUJFQTc4MUU4NEEyOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpENjM1MzgyMUJGNzAxMUUxQkNDOEUwRkExQ0U5N0Q0QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpENjM1MzgyMEJGNzAxMUUxQkNDOEUwRkExQ0U5N0Q0QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Mzk0RjYxOUMzMTIwNjgxMTgyMkFBRjgxQ0IyNTAxM0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OEU5RTExMTkyMDIwNjgxMTgyMkFCRUE3ODFFODRBMjkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz45ZU6fAAAAiklEQVR42mL8//8/w0AAJoYBAqMW0w2wkKmPH4hVoOw7QPyRVAMYyUzVD4FYDsq+DMR6o3E8avGoxbiykxAQ78KjTxeI2aDs70B8DY9aZ2z5HJfFIIMvUclzGkB8c9AXmU+B+CyVgvrFaJE5avGoxQNSZBICzEBsAGVfAOK/9LJ4NI5HLSYIAAIMAKfZJ7+0GO5HAAAAAElFTkSuQmCC);
}</pre>
<h3 id="JavaScript_code">JavaScript code</h3>
<p>We will soon add code here.</p>
<pre class="brush: js">
// none yet
</pre>
<h4 id="Working_demo">Working demo</h4>
<p>You can try out the drawer in this live demonstration.</p>
<p>{{FXOSUXLiveSampleEmbed('Example')}}</p>
Revert to this revision