This article gives you all you need to implement a v2.0 Gaia-style Header in your own app.
Live sample
The following gives you an idea of what rendered headers would look like, and how they would operate.
Code
Here is the code you'll need.
CSS
<link href="(your styles folder)/style/headers.css" rel="stylesheet" type="text/css">
The CSS can be found in the Gaia project 2.0 branch under shared/style/headers.css. Copy this into your own project, along with the associated resources.
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://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; } body { background: none; } 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; margin: 3rem 0 1rem; } section[role="region"] { margin-bottom: 1.5rem; position: relative; } </style> </head> <body> <section role="region"> <header> <menu type="toolbar"> <a href="#"><span class="icon icon-edit">edit</span></a> <a href="#"><span class="icon icon-add">add</span></a> </menu> <h1>Messages</h1> </header> </section> <section role="region"> <header> <button><span class="icon icon-menu">menu</span></button> <menu type="toolbar"> <button><span class="icon icon-add">add</span></button> </menu> <h1>Inbox <em>(2)</em></h1> </header> </section> <section role="region"> <header> <button><span class="icon icon-close">close</span></button> <menu type="toolbar"><button>done</button></menu> <h1>Title</h1> </header> <header> <h2>Subheader text</h2> </header> </section> </body> </html>
Document Tags and Contributors
Tags:
Contributors to this page:
chrisdavidmills,
chrisdavidmills-github
Last updated by:
chrisdavidmills,