dev

_app/about.html

@@ -0,0 +1,23 @@
+
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
+    <div class="center sliding">About Framework7</div>
+    <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
+  </div>
+</div>
+<div class="pages navbar-through">
+  <div data-page="about" class="page">
+    <div class="page-content">
+      <div class="content-block-title">Welcome to Framework7</div>
+      <div class="content-block">
+        <div class="content-block-inner">
+          <p>Framework7 - is a free and open source HTML mobile framework to develop hybrid mobile apps or web apps with iOS or Android (Material) native look and feel. It is also an indispensable prototyping apps tool to show working app prototype as soon as possible in case you need to. Framework7 is created by Vladimir Kharlampidi (iDangero.us).</p>
+          <p>The main approach of the Framework7 is to give you an opportunity to create iOS and Android (Material) apps with HTML, CSS and JavaScript easily and clear. Framework7 is full of freedom. It doesn't limit your imagination or offer ways of any solutions somehow. Framework7 gives you freedom!</p>
+          <p>Framework7 is not compatible with all platforms. It is focused only on iOS and Android (Material) to bring the best experience and simplicity.</p>
+          <p>Framework7 is definitely for you if you decide to build iOS and Android hybrid app (PhoneGap) or web app that looks like and feels as great native iOS or Android (Material) apps.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

_app/accordion.html

@@ -0,0 +1,171 @@
+
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
+    <div class="center sliding">Accordion</div>
+    <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
+  </div>
+</div>
+<div class="pages navbar-through">
+  <div data-page="accordion" class="page">
+    <div class="page-content">
+      <div class="content-block-title">List View Accordion</div>
+      <div class="list-block accordion-list">
+        <ul>
+          <li class="accordion-item"><a href="#" class="item-link item-content">
+              <div class="item-inner"> 
+                <div class="item-title">Lorem Ipsum</div>
+              </div></a>
+            <div class="accordion-item-content">
+              <div class="content-block">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.</p>
+              </div>
+            </div>
+          </li>
+          <li class="accordion-item"><a href="#" class="item-link item-content">
+              <div class="item-inner"> 
+                <div class="item-title">Nested List</div>
+              </div></a>
+            <div class="accordion-item-content">
+              <div class="list-block">
+                <ul>
+                  <li>
+                    <div class="item-content">
+                      <div class="item-media"><i class="icon icon-f7"></i></div>
+                      <div class="item-inner"> 
+                        <div class="item-title">Item 1</div>
+                      </div>
+                    </div>
+                  </li>
+                  <li>
+                    <div class="item-content">
+                      <div class="item-media"><i class="icon icon-f7"></i></div>
+                      <div class="item-inner"> 
+                        <div class="item-title">Item 2</div>
+                      </div>
+                    </div>
+                  </li>
+                  <li>
+                    <div class="item-content">
+                      <div class="item-media"><i class="icon icon-f7"></i></div>
+                      <div class="item-inner"> 
+                        <div class="item-title">Item 3</div>
+                      </div>
+                    </div>
+                  </li>
+                  <li>
+                    <div class="item-content">
+                      <div class="item-media"><i class="icon icon-f7"></i></div>
+                      <div class="item-inner"> 
+                        <div class="item-title">Item 4</div>
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </li>
+          <li class="accordion-item"><a href="#" class="item-link item-content">
+              <div class="item-inner"> 
+                <div class="item-title">Integer semper</div>
+              </div></a>
+            <div class="accordion-item-content">
+              <div class="content-block">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.</p>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="content-block-title">Inset Accordion</div>
+      <div class="list-block accordion-list inset">
+        <ul>
+          <li class="accordion-item"><a href="#" class="item-link item-content">
+              <div class="item-inner"> 
+                <div class="item-title">Lorem Ipsum</div>
+              </div></a>
+            <div class="accordion-item-content">
+              <div class="content-block">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.</p>
+              </div>
+            </div>
+          </li>
+          <li class="accordion-item"><a href="#" class="item-link item-content">
+              <div class="item-inner"> 
+                <div class="item-title">Nested List</div>
+              </div></a>
+            <div class="accordion-item-content">
+              <div class="list-block">
+                <ul>
+                  <li>
+                    <div class="item-content">
+                      <div class="item-media"><i class="icon icon-f7"></i></div>
+                      <div class="item-inner"> 
+                        <div class="item-title">Item 1</div>
+                      </div>
+                    </div>
+                  </li>
+                  <li>
+                    <div class="item-content">
+                      <div class="item-media"><i class="icon icon-f7"></i></div>
+                      <div class="item-inner"> 
+                        <div class="item-title">Item 2</div>
+                      </div>
+                    </div>
+                  </li>
+                  <li>
+                    <div class="item-content">
+                      <div class="item-media"><i class="icon icon-f7"></i></div>
+                      <div class="item-inner"> 
+                        <div class="item-title">Item 3</div>
+                      </div>
+                    </div>
+                  </li>
+                  <li>
+                    <div class="item-content">
+                      <div class="item-media"><i class="icon icon-f7"></i></div>
+                      <div class="item-inner"> 
+                        <div class="item-title">Item 4</div>
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </li>
+          <li class="accordion-item"><a href="#" class="item-link item-content">
+              <div class="item-inner"> 
+                <div class="item-title">Integer semper</div>
+              </div></a>
+            <div class="accordion-item-content">
+              <div class="content-block">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.</p>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="content-block-title">Custom Styled Accordion</div>
+      <div class="content-block accordion-list custom-accordion">
+        <div class="accordion-item">
+          <div class="accordion-item-toggle"><i class="icon icon-ks-plus">+</i><i class="icon icon-ks-minus">-</i><span>Item 1</span></div>
+          <div class="accordion-item-content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.</p>
+          </div>
+        </div>
+        <div class="accordion-item">
+          <div class="accordion-item-toggle"><i class="icon icon-ks-plus">+</i><i class="icon icon-ks-minus">-</i><span>Item 2</span></div>
+          <div class="accordion-item-content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.</p>
+          </div>
+        </div>
+        <div class="accordion-item">
+          <div class="accordion-item-toggle"><i class="icon icon-ks-plus">+</i><i class="icon icon-ks-minus">-</i><span>Item 3</span></div>
+          <div class="accordion-item-content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

_app/autocomplete.html

@@ -0,0 +1,121 @@
+
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
+    <div class="center sliding">Autocomplete</div>
+    <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
+  </div>
+</div>
+<div class="pages navbar-through">
+  <div data-page="autocomplete" class="page">
+    <div class="page-content">
+      <div class="content-block-title">Dropdown Autocomplete</div>
+      <div class="content-block">
+        <p>Dropdown autocomplete is good to use as a quick and simple solution to provide more options in addition to free-type value.</p>
+      </div>
+      <div class="content-block-title">Simple Dropdown Autocomplete</div>
+      <div class="list-block">
+        <ul>
+          <li class="item-content">
+            <div class="item-title label">Fruit</div>
+            <div class="item-input">
+              <input type="text" placeholder="Fruit" id="autocomplete-dropdown"/>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="content-block-title">Dropdown With Input Expand</div>
+      <div class="list-block">
+        <ul>
+          <li class="item-content">
+            <div class="item-title label">Fruit</div>
+            <div class="item-input">
+              <input type="text" placeholder="Fruit" id="autocomplete-dropdown-expand"/>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="content-block-title">Dropdown With All Values</div>
+      <div class="list-block">
+        <ul>
+          <li class="item-content">
+            <div class="item-title label">Fruit</div>
+            <div class="item-input">
+              <input type="text" placeholder="Fruit" id="autocomplete-dropdown-all"/>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="content-block-title">Dropdown With Placeholder</div>
+      <div class="list-block">
+        <ul>
+          <li class="item-content">
+            <div class="item-title label">Fruit</div>
+            <div class="item-input">
+              <input type="text" placeholder="Fruit" id="autocomplete-dropdown-placeholder"/>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="content-block-title">Dropdown With Ajax-Data</div>
+      <div class="list-block">
+        <ul>
+          <li class="item-content">
+            <div class="item-title label">Language</div>
+            <div class="item-input">
+              <input type="text" placeholder="Language" id="autocomplete-dropdown-ajax"/>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="content-block-title">Standalone Autocomplete</div>
+      <div class="content-block">
+        <p>Standalone autocomplete provides better mobile UX by opening it in a new page or popup. Good to use when you need to get strict values without allowing free-type values.</p>
+      </div>
+      <div class="content-block-title">Simple Standalone Autocomplete</div>
+      <div class="list-block">
+        <ul>
+          <li><a href="#" id="autocomplete-standalone" class="item-link item-content autocomplete-opener">
+              <input type="hidden"/>
+              <div class="item-inner">
+                <div class="item-title">Favorite Fruite</div>
+                <div class="item-after"></div>
+              </div></a></li>
+        </ul>
+      </div>
+      <div class="content-block-title">Popup Standalone Autocomplete</div>
+      <div class="list-block">
+        <ul>
+          <li><a href="#" id="autocomplete-standalone-popup" class="item-link item-content autocomplete-opener">
+              <input type="hidden"/>
+              <div class="item-inner">
+                <div class="item-title">Favorite Fruite</div>
+                <div class="item-after"></div>
+              </div></a></li>
+        </ul>
+      </div>
+      <div class="content-block-title">Multiple Values Standalone Autocomplete</div>
+      <div class="list-block">
+        <ul>
+          <li><a href="#" id="autocomplete-standalone-multiple" class="item-link item-content autocomplete-opener">
+              <input type="hidden"/>
+              <div class="item-inner">
+                <div class="item-title">Favorite Fruite</div>
+                <div class="item-after"></div>
+              </div></a></li>
+        </ul>
+      </div>
+      <div class="content-block-title">Standalone With Ajax-Data</div>
+      <div class="list-block">
+        <ul>
+          <li><a href="#" id="autocomplete-standalone-ajax" class="item-link item-content autocomplete-opener">
+              <input type="hidden"/>
+              <div class="item-inner">
+                <div class="item-title">Language</div>
+                <div class="item-after"></div>
+              </div></a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>

_app/bars-deep-navbar-2.html

@@ -0,0 +1,19 @@
+
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left sliding"><a href="index.html" class="back link">Deep Navbar</a></div>
+    <div class="center sliding">Deep 2</div>
+    <div class="right sliding"><a href="deep-navbar-3.html" class="link">Deep 3</a></div>
+  </div>
+</div>
+<div class="pages navbar-through">
+  <div data-page="deep-navbar-2" class="page">
+    <div class="page-content">
+      <div class="content-block">
+        <p><a href="bars-deep-navbar-3.html" class="button">Go to page 3</a></p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet rhoncus odio. Suspendisse vel lectus neque. Mauris tincidunt dolor a felis vulputate, at accumsan risus convallis. Sed pulvinar malesuada enim, a consequat felis lobortis a. Morbi faucibus felis in libero lacinia blandit. Pellentesque vitae volutpat metus. In venenatis mauris massa, sed hendrerit augue pulvinar nec. Sed justo magna, lacinia vel tincidunt sed, tristique sit amet est. Nam iaculis dictum laoreet. Donec sed risus sed mauris ultricies aliquam sit amet in enim. Nullam tellus est, imperdiet et adipiscing consequat, consectetur vel nibh. Cras massa nibh, volutpat sit amet velit vel, suscipit tincidunt enim. Curabitur luctus elit id pharetra bibendum. Nulla ut dui eget nulla hendrerit commodo. Pellentesque placerat mi eget dolor rutrum, consectetur mattis mi tincidunt.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet rhoncus odio. Suspendisse vel lectus neque. Mauris tincidunt dolor a felis vulputate, at accumsan risus convallis. Sed pulvinar malesuada enim, a consequat felis lobortis a. Morbi faucibus felis in libero lacinia blandit. Pellentesque vitae volutpat metus. In venenatis mauris massa, sed hendrerit augue pulvinar nec. Sed justo magna, lacinia vel tincidunt sed, tristique sit amet est. Nam iaculis dictum laoreet. Donec sed risus sed mauris ultricies aliquam sit amet in enim. Nullam tellus est, imperdiet et adipiscing consequat, consectetur vel nibh. Cras massa nibh, volutpat sit amet velit vel, suscipit tincidunt enim. Curabitur luctus elit id pharetra bibendum. Nulla ut dui eget nulla hendrerit commodo. Pellentesque placerat mi eget dolor rutrum, consectetur mattis mi tincidunt.</p>
+      </div>
+    </div>
+  </div>
+</div>