⛔️ Unmaintained and deprecated! Don't use any more! Instead check official F7 templates: http://framework7.io/templates/
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
src Spring cleanup Apr 4, 2015
.gitignore Updated .gitignore Apr 4, 2015
README.md Update README.md Feb 8, 2018
gruntfile.js Initial commit Mar 31, 2015
package.json Spring cleanup Apr 4, 2015


Typework 7

A template for Framework7 based on TypeScript, AngularJS, SASS and Grunt

No Maintenance Intended

Important! Read this first

This is a template for Framework7 apps built on TypeScript, SASS, Grunt and AngularJS. From my experience so far I discovered that TypeScript is really complicated and not much fun to use with F7 and Angular. Also, some people seem to struggle with the grunt compile process. So, I created a new, easier template without any fancy stuff, just plain HTML, CSS and JavaScript which I can recommend to get started for beginners: https://github.com/valnub/Framework7-Pure-Angular-Template

Also, please keep in mind that this template is horribly outdated as it was originally designed for Framework7 V1 and Angular version 1.x!


  • Framework7 v1
  • Angular 1.x

The brave ones who want to dive into the funky TypeScript fun, read on:

How to build

  1. No complicated bower or yeoman stuff. Just get from Github.

  2. Then, do npm install and then grunt compile to compile and copy everything from /src to /build. Default task for grunt is “watch” which you can use for auto-compile and -reload in the browser when you do changes in /src.


To see the result just call grunt compile and then open index.html from build folder.

Or you can check this live demo in your browser that I built on top of this template: http://timo-ernst.net/blog/2015/04/02/experiment-an-iphone-app-built-with-framework7-typescript-and-angularjs/

Get started coding

Good start points to dive into the code are:

  • For HTML: src/index.dev.html
  • For Scripts: src/ts/Typework7/init.ts
  • For Styles: src/sass

To complicated?

There is a simpler version of this template available which only uses html, css and javascript. No npm, no grunt, no TypeScript, no SASS. If you like things simple, get it here: https://github.com/valnub/Framework7-Pure-Angular-Template

Credits & Links

Happy coding :-) Let me know if you have feature requests.