App HTML Layout

First thing we should do for our App is to create index.html file with app’s skeleton. Let’s look at basic app layout:

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <!-- Required meta tags-->
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <!-- Color theme for statusbar -->
  9.     <meta name="theme-color" content="#2196f3">
  10.     <!-- Your app title -->
  11.     <title>My App</title>
  12.     <!-- Path to Framework7 Library Bundle CSS -->
  13.     <link rel="stylesheet" href="path/to/framework7.bundle.min.css">
  14.     <!-- Path to your custom app styles-->
  15.     <link rel="stylesheet" href="path/to/my-app.css">
  16.   </head>
  17.   <body>
  18.     <!-- App root element -->
  19.     <div id="app">
  20.       <!-- Statusbar overlay -->
  21.       <div class="statusbar"></div>
  23.       <!-- Your main view, should have "view-main" class -->
  24.       <div class="view view-main">
  25.         <!-- Initial Page, "data-name" contains page name -->
  26.         <div data-name="home" class="page">
  28.           <!-- Top Navbar -->
  29.           <div class="navbar">
  30.             <div class="navbar-inner">
  31.               <div class="title">Awesome App</div>
  32.             </div>
  33.           </div>
  35.           <!-- Bottom Toolbar -->
  36.           <div class="toolbar toolbar-bottom">
  37.             <div class="toolbar-inner">
  38.               <!-- Toolbar links -->
  39.               <a href="#" class="link">Link 1</a>
  40.               <a href="#" class="link">Link 2</a>
  41.             </div>
  42.           </div>
  44.           <!-- Scrollable page content -->
  45.           <div class="page-content">
  46.             <p>Page content goes here</p>
  47.             <!-- Link to another page -->
  48.             <a href="/about/">About app</a>
  49.           </div>
  50.         </div>
  51.       </div>
  52.     </div>
  53.     <!-- Path to Framework7 Library Bundle JS-->
  54.     <script type="text/javascript" src="path/to/framework7.bundle.min.js"></script>
  55.     <!-- Path to your app js-->
  56.     <script type="text/javascript" src="path/to/my-app.js"></script>
  57.   </body>
  58. </html>

As you may see the layout is pretty simple. The main point is that you should link Framework7’s CSS in the <head> and JS files in the end of <body>.

You can read more about statusbar overlay, views, navbar, toolbar, pages, panels and other components in appropriate sections.

Initialize App

Now when we have basic template, we need to initialize our app in my-app.js.