• Skip to main content
  • Select language
  • Skip to search
MDN Web Docs
  • Technologies
    • HTML
    • CSS
    • JavaScript
    • Graphics
    • HTTP
    • APIs / DOM
    • WebExtensions
    • MathML
  • References & Guides
    • Learn web development
    • Tutorials
    • References
    • Developer Guides
    • Accessibility
    • Game development
    • ...more docs
B2G OS
  1. MDN
  2. Archive of obsolete content
  3. B2G OS
  4. Firefox OS apps
  5. Firefox OS Building Blocks
  6. Drawer
  7. Drawer 2.0 implementation

Drawer 2.0 implementation

In This Article
    1. Live sample
    2. Code
      1. CSS
      2. HTML

This section gives you all you need to implement a v2.0 Gaia-style Drawer in your own app.

Live sample

The following gives you an idea of what the rendered drawer would look like, and how it would operate.

Code

Here is the code you'll need.

CSS

<link href="(your styles folder)/style/headers.css" rel="stylesheet" type="text/css">
<link href="(your styles folder)/style/drawer.css" rel="stylesheet" type="text/css">

The CSS can be found in the Gaia project 2.0 branch under shared/style/drawer.css and shared/style/headers.css. Copy these into your own project, along with the associated resources for drawer and headers.

HTML

Note: The CSS inside the <style> element isn't needed for the implementation: it is just for the purposes of this example.

<!doctype html>
<html>
<head>
  <link href="https://mdn.github.io/gaia-2.0-bb/headers.css" rel="stylesheet" type="text/css">
  <link href="https://mdn.github.io/gaia-2.0-bb/drawer.css" rel="stylesheet" type="text/css">
  <link href="https://gaia-components.github.io/gaia-icons/gaia-icons-embedded.css" rel="stylesheet" type="text/css">
  <style>
    html, body {
      margin: 0;
      padding: 0;
      font-size: 10px;
      font-family: sans-serif;
      background-color: #fff;
      height: 100%;
      overflow-x: hidden;
    }
    h2.bb-docs {
      font-size: 1.8rem;
      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%;
      line-height: 1em;
      font-size: 2.2rem;
    }
    div[role="main"] {
      background: #eee;
      height: 590px;
      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);
    }
  </style>
</head>
<body>
<div>
<section data-type="sidebar">
  <header>
    <menu type="toolbar">
      <a href="#content"><span class="icon icon-add">add</span></a>
    </menu>
    <h1>Title <em>(9)</em></h1>
  </header>
  <nav>
    <ul>
      <li><a href="#content">label</a></li>
      <li><a href="#content">label</a></li>
      <li><a href="#content">label</a></li>
      <li><a href="#content">label</a></li>
    </ul>
    <h2>Subtitle</h2>
    <ul>
      <li><a href="#content">label</a></li>
      <li><a href="#content">label</a></li>
      <li><a href="#content">label larger label than the </a></li>
      <li><a href="#content">label</a></li>
    </ul>
  </nav>
</section>
<section id="drawer" role="region">
  <header>
    <a href="#content"><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>
</div>
</body>
</html>

Document Tags and Contributors

Tags: 
  • 2.0
  • B2G
  • building blocks
  • Drawer
  • Firefox OS
  • Gaia
  • implementation
 Contributors to this page: chrisdavidmills, chrisdavidmills-github
 Last updated by: chrisdavidmills, Feb 27, 2017, 2:57:28 AM