diff --git a/dist/framework-with-theme.css b/dist/framework-with-theme.css
index e6e3536282..8558babe0b 100644
--- a/dist/framework-with-theme.css
+++ b/dist/framework-with-theme.css
@@ -14,6 +14,33 @@ body {
a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
+.bar {
+ position: fixed;
+ right: 0;
+ left: 0;
+ z-index: 10;
+ display: -webkit-box;
+ display: box;
+ -webkit-box-orient: horizontal;
+ box-orient: horizontal;
+ box-sizing: border-box; }
+ .bar .title {
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: block;
+ width: 100%;
+ text-align: center;
+ white-space: nowrap; }
+ .bar .title a {
+ color: inherit; }
+
+.bar-header {
+ top: 0; }
+
+.bar-footer {
+ bottom: 0; }
+
.button {
position: relative;
display: inline-block;
@@ -22,6 +49,20 @@ a {
cursor: pointer;
margin: 0; }
+.bar {
+ background-color: white;
+ border-bottom: 1px solid #dddddd;
+ padding: 10px; }
+ @media screen and (orientation: landscape) {
+ .bar {
+ padding: 5px; } }
+ .bar.bar-default {
+ background-color: white;
+ border-bottom: 1px solid #dddddd; }
+ .bar.bar-secondary {
+ background-color: whitesmoke;
+ border-bottom: 1px solid #cccccc; }
+
.button {
color: #222222;
border-radius: 2px;
diff --git a/example/index.html b/example/index.html
index b4b96c4368..7b70f26e7d 100644
--- a/example/index.html
+++ b/example/index.html
@@ -22,7 +22,7 @@
-