Fries

Fries is an awesome mobile UI development framework for Android apps using just HTML, CSS, and Javascript. Fries was inspired by Ratchet so Fries extending its huge thanks to the Ratchet team.

1. Create your pages

   Creating the markup for your pages is really easy. Just follow these docs on how to write them. You may also customize the styles to make the prototype your own.

2. Stitch them up with stack.js

   Stack.js allows you to create interactive pages by dynamically loading HTML on the fly and inserting it to your app. Read more about stack.js to understand how this works.

3. Deep-fry your Fries

   If you're testing on your browser, you can modify the screen resolution and emulate touches on your Chrome by going to the Developer Tools then Overrides. Change the device metrics from there and click "Emulate touch events".

   To test your Fries app on your device, serve it from your local web server and load it up on your Android browser.

   You can also do this by installing a web server on your Android device and serving the files from there. Or you can create a PhoneGap Android project then copy your files into its /assets/www/ directory.

Here's how to setup your pages so that they're fully functional.

1. Wrap everything in a div with .page class

   The .page class is required to get the page transitions working perfectly. All fixed bars and tabs (.action-bar, .tab-fixed) should always be the first thing inside the .page div. This is really important!

2. Everything else goes in .content

   Anything that's not an .action-bar or a .tab-fixed should be put in a div with the class "content". Put this div after the bars in the .page div. The .content div is what actually scrolls in a Fries app.

3. Don't forget your meta tags

   The meta tags are included in the template.html that comes with your Fries. Make sure they're in your HTML so Fries works.