darkwing · April 16, 2013 19:36
diff --git a/gistfile1.html b/gistfile1.html
 <p>
  {{FXOSUXRepoDownloads(&quot;https://github.com/mozilla-b2g/gaia/raw/master/shared/style_unstable/drawer.css&quot;, &quot;https://github.com/mozilla-b2g/gaia/tree/master/shared/style_unstable/drawer&quot;)}}</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&#39; 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(&quot;@import&quot;)}} 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>
 <p>
 	One handy feature of the implementation of drawers is that the opening and closing of the drawers is all handled in CSS; you don&#39;t have to implement any code at all.</p>
 <h2 id="Example">
 	Example</h2>
 <h3 id="HTML_to_create_the_drawer">
 	HTML to create the drawer</h3>
 <p>
 	The drawer user interface consists of two primary components: the sidebar that slides in from the side of the screen, and the toolbar that triggers the drawer. Because of this, you need to import both the <code>headers.css</code> and <code>drawer.css</code> style sheets, like this:</p>
 <pre>
 @import url(resources/headers.css);
 @import url(resources/drawer.css);</pre>
 <p>
 	The sidebar contains a <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Toolbar" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Toolbar">toolbar</a> at the top that contains any control buttons the drawer menu requires (in this case, an add button) and the drawer&#39;s title. Below that is whatever content the drawer wishes to present; in this case a menu.</p>
 <pre class="brush: html">
 &lt;section data-type=&quot;sidebar&quot;&gt;
 &nbsp; &lt;header&gt;
 &nbsp;&nbsp;&nbsp; &lt;menu type=&quot;toolbar&quot;&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;icon icon-add&quot;&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=&quot;#&quot;&gt;label&lt;/a&gt;&lt;/li&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;label&lt;/a&gt;&lt;/li&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;label&lt;/a&gt;&lt;/li&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&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=&quot;#&quot;&gt;label&lt;/a&gt;&lt;/li&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;label&lt;/a&gt;&lt;/li&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;label larger label than the &lt;/a&gt;&lt;/li&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;label&lt;/a&gt;&lt;/li&gt;
 &nbsp;&nbsp;&nbsp; &lt;/ul&gt;
 &nbsp; &lt;/nav&gt;
 &lt;/section&gt;
 </pre>
 <p>
 	The drawer is activated using a button at the left end of the main screen&#39;s toolbar; this is implemented as follows.</p>
 <pre class="brush: html">
 &lt;section id=&quot;drawer&quot; role=&quot;region&quot;&gt;
 &nbsp; &lt;header&gt;
 &nbsp;&nbsp;&nbsp; &lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;icon icon-menu&quot;&gt;hide sidebar&lt;/span&gt;&lt;/a&gt;
 &nbsp;&nbsp;&nbsp; &lt;a href=&quot;#drawer&quot;&gt;&lt;span class=&quot;icon icon-menu&quot;&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=&quot;main&quot;&gt;Here is where our main screen&#39;s UX is.&lt;/div&gt;
 &lt;/section&gt;</pre>
 <h3 id="CSS">
 	CSS</h3>
 <p>
 	The CSS here defines the styling for our interface.</p>
 <p>
 	{{FXOSUXLiveSampleSetup(&quot;https://developer.mozilla.org/media/gaia/shared/style/headers.css&quot;, &quot;https://developer.mozilla.org/media/gaia/shared/style_unstable/drawer.css&quot;)}}</p>
 <pre class="brush: css">
 section[role=&quot;region&quot;] {
 &nbsp; height: 100%;
 &nbsp; font: 2.2rem/1em &quot;MozTT&quot;, Sans-serif;
 }

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

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

 /* Base icons */
 section[data-type=&quot;sidebar&quot;] &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 to demonstrate how to receive responses from the items in the drawer.</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(&#39;Example&#39;)}}</p>
 <h3 id="Multiple_animated_properties_example">
 	Multiple animated properties example</h3>
 <h4 id="HTML_Content">
 	HTML Content</h4>
 <pre class="brush: html; highlight:[3]">
 &lt;body&gt;
    &lt;p&gt;The box below combines transitions for: width, height, background-color, transform. Hover over the box to see these properties animated.&lt;/p&gt;
    &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
 &lt;/body&gt;</pre>
 <h4 id="CSS_Content">
 	CSS Content</h4>
 <pre class="brush: css; highlight:[8,9,10,11,17,18,19,20]">
 .box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -moz-transition:width 2s, height 2s, background-color 2s, -moz-transform 2s;
    -webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    -o-transition:width 2s, height 2s, background-color 2s, -o-transform 2s;
    transition:width 2s, height 2s, background-color 2s, transform 2s;
 }
 .box:hover {
    background-color: #FFCCCC;
    width:200px;
    height:200px;
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    transform:rotate(180deg);
 }

 </pre>
	<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>
	<p>
	One handy feature of the implementation of drawers is that the opening and closing of the drawers is all handled in CSS; you don't have to implement any code at all.</p>
	<h2 id="Example">
	Example</h2>
	<h3 id="HTML_to_create_the_drawer">
	HTML to create the drawer</h3>
	<p>
	The drawer user interface consists of two primary components: the sidebar that slides in from the side of the screen, and the toolbar that triggers the drawer. Because of this, you need to import both the <code>headers.css</code> and <code>drawer.css</code> style sheets, like this:</p>
	<pre>
	@import url(resources/headers.css);
	@import url(resources/drawer.css);</pre>
	<p>
	The sidebar contains a <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Toolbar" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Toolbar">toolbar</a> at the top that contains any control buttons the drawer menu requires (in this case, an add button) and the drawer's title. Below that is whatever content the drawer wishes to present; in this case a menu.</p>
	<pre class="brush: html">
	<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>
	</pre>
	<p>
	The drawer is activated using a button at the left end of the main screen's toolbar; this is implemented as follows.</p>
	<pre class="brush: html">
	<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">Here is where our main screen's UX is.</div>
	</section></pre>
	<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">
	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);
	}</pre>
	<h3 id="JavaScript_code">
	JavaScript code</h3>
	<p>
	We will soon add code here to demonstrate how to receive responses from the items in the drawer.</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>
	<h3 id="Multiple_animated_properties_example">
	Multiple animated properties example</h3>
	<h4 id="HTML_Content">
	HTML Content</h4>
	<pre class="brush: html; highlight:[3]">
	<body>
	<p>The box below combines transitions for: width, height, background-color, transform. Hover over the box to see these properties animated.</p>
	<div class="box"></div>
	</body></pre>
	<h4 id="CSS_Content">
	CSS Content</h4>
	<pre class="brush: css; highlight:[8,9,10,11,17,18,19,20]">
	.box {
	border-style: solid;
	border-width: 1px;
	display: block;
	width: 100px;
	height: 100px;
	background-color: #0000FF;
	-moz-transition:width 2s, height 2s, background-color 2s, -moz-transform 2s;
	-webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
	-o-transition:width 2s, height 2s, background-color 2s, -o-transform 2s;
	transition:width 2s, height 2s, background-color 2s, transform 2s;
	}
	.box:hover {
	background-color: #FFCCCC;
	width:200px;
	height:200px;
	-moz-transform:rotate(180deg);
	-webkit-transform:rotate(180deg);
	-o-transform:rotate(180deg);
	transform:rotate(180deg);
	}

	</pre>