Instalar Framework7

Publicado en Mar 5, 2016

Framework7 es un framework que nos permite desarrollar aplicaciones moviles hibridas con HTML, CSS y JavaScript. Es un framework muy completo y además tiene dos «modos» modo material design para Android y modo «IOS» para aplicaciones para móviles y tables de Apple. Si eres desarrollador web te será facil hacer aplicaciones con Framework7.

Veamos como instalar Framework7.

En primer lugar tenemos que tener instalado node.js, lo descargamos desde su web oficial y lanzamos el instalador hasta que acabe de instalarse.

Después instalaremos bower en nuestro node. Para ello ejecutamos el siguiente comando:

`1`	`npm` `install` `-g bower`

Puedes saber más sobre bower en este post.

Ahora entramos en el directorio en el que queramos tener framework7 y lanzamos el comando

`1`	`bower` `install` `framework7`

Ahora se bajará framework7 y ya podremos empezar a trabajar con él. Solamente tendriamos que hacer un fichero html con una estructura básica y le incluiremos los ficheros js y css de framework7 y ya podriamos empezar a hacer cosas. Ejemplo:

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">
7    <meta name="apple-mobile-web-app-capable" content="yes">
8    <meta name="apple-mobile-web-app-status-bar-style" content="black">
9    <!-- Your app title -->
10    <title>My App</title>
11    <!-- Path to Framework7 Library CSS, iOS Theme -->
12    <link rel="stylesheet" href="bower_components/Framework7/dist/css/framework7.material.min.css">
13    <!-- Path to Framework7 color related styles, iOS Theme -->
14    <link rel="stylesheet" href="bower_components/Framework7/dist/css/framework7.material.colors.min.css">
15    <!-- Path to your custom app styles-->
16    <link rel="stylesheet" href="css/my-app.css">
17  </head>
18  <body>
19    <!-- Status bar overlay for full screen mode (PhoneGap) -->
20    <div class="statusbar-overlay"></div>
21    <!-- Views -->
22    <div class="views">
23      <!-- Your main view, should have "view-main" class -->
24      <div class="view view-main">
25        <!-- Top Navbar-->
26        <div class="navbar">
27          <div class="navbar-inner">
28            <!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
29            <div class="center sliding">Awesome App</div>
30          </div>
31        </div>
32        <!-- Pages container, because we use fixed-through navbar and toolbar, it has additional appropriate classes-->
33        <div class="pages navbar-through toolbar-through">
34          <!-- Page, "data-page" contains page name -->
35          <div data-page="index" class="page">
36            <!-- Scrollable page content -->
37            <div class="page-content">
38              <p>Page content goes here</p>
39              <!-- Link to another page -->
40              <a href="about.html">About app</a>
41            </div>
42          </div>
43        </div>
44        <!-- Bottom Toolbar-->
45        <div class="toolbar">
46          <div class="toolbar-inner">
47            <!-- Toolbar links -->
48            <a href="about.html" class="link">Acerca de</a>
49            <a  href="form.html" class="link">Formulario</a>
50          </div>
51        </div>
52      </div>
53    </div>
54    <!-- Path to Framework7 Library JS-->
55    <script type="text/javascript" src="bower_components/Framework7/dist/js/framework7.min.js"></script>
56    <!-- Path to your app js-->
57    <script type="text/javascript" src="js/my-app.js"></script>
58  </body>
59</html> 