Hello.
I could not find a tutorial beyond the basic installation, this gave me a lot of problems getting started, specially because I know very little about javascript and the entire apps development with this type of frameworks.
So, I would like to share my personal experience regarding the first steps building my app, I hope this can help others in their first steps and get some feedback regarding what I am doing too.
Warning: I know very little about javascript/html/css (I mentioned this already) and I do not like it at all. But I am currently in charge of the front end of a project and I have to do this part. So, if you see anything that seems ‘wrong’ it probably is, please feel free to correct me so I can correct this mini-guide and learn as well.
Also: If this is not the right place for this guide, also please let me know and I will look for a better place.
So, on with the guide.
This guide starts with a clean project without bundle (because I still do not understand it very well). But it could probably work as well.
Go to www/pages/about.html
It should look something like this.
<div class="page" data-name="about">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
</div>
<div class="title">About</div>
</div>
</div>
<div class="page-content">
<div class="block-title">About My App</div>
<div class="block block-strong">
<p>Fugiat perspiciatis excepturi, soluta quod non ullam deleniti. Nobis sint nemo consequuntur, fugiat. Eius perferendis animi autem incidunt vel quod tenetur nostrum, voluptate omnis quasi quidem illum consequuntur, a, quisquam.</p>
<p>Laudantium neque magnam vitae nemo quam commodi, in cum dolore obcaecati laborum, excepturi harum, optio qui, consequuntur? Obcaecati dolor sequi nesciunt culpa quia perspiciatis, reiciendis ex debitis, ut tenetur alias.</p>
</div>
<div class="block">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni molestiae laudantium dignissimos est nobis delectus nemo ea alias voluptatum architecto, amet similique, saepe iste consectetur in repellat ut minus quibusdam!</p>
<p>Molestias et distinctio porro nesciunt ratione similique, magni doloribus, rerum nobis, aliquam quae reiciendis quasi modi. Nam a recusandae, fugiat in ea voluptates fuga eius, velit corrupti reprehenderit dignissimos consequatur!</p>
<p>Blanditiis, cumque quo adipisci. Molestiae, dolores dolorum quos doloremque ipsa ullam eligendi commodi deserunt doloribus inventore magni? Ea mollitia veniam nostrum nihil, iusto doloribus a at! Ea molestiae ullam delectus!</p>
</div>
</div>
</div>
For now lets concentrate in the tag: <div class="page-content">
That is where the contents of your page are located, before that is the header which contains the top menu, a back button and a title, will see that in other guide.
So, go to the tag
And remove all the contents until the last 2 divs and end up with this:
<div class="page" data-name="about">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
</div>
<div class="title">About</div>
</div>
</div>
<div class="page-content">
...
</div>
</div>
Optional: You may save this file are reload your app just to see how now it is empty.
Now you can put there anything you want for your about page, but for now we’ll just replace the contents using the same structure.
<div class="page" data-name="about">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
</div>
<div class="title">About</div>
</div>
</div>
<div class="page-content">
<div class="block-title">About Test 1</div>
<div class="block block-strong">
<p>This is a test app to learn how to use Framework7!</p>
<div class="block">
<p>It is really easy to get started and build great apps.</p>
</div>
</div>
</div>
You can also use a different structure like a card: http://framework7.io/docs/cards.html
<div class="card">
<div class="card-header">About Test 1</div>
<div class="card-content">
<p>This is a test app to learn how to use Framework7!</p>
</div>
<div class="card-footer"><p>It is really easy to get started and build great apps.</p></div>
</div>
And that is it 
This is just a very simple guide to get you started with the current structure of the app.
I will continue to post more things like creating new routes and ajax requests.
