Ratchet is a great way of prototyping iPhone apps and has a whole host of functionality. It also takes advantage of Push.js which when connecting your pages allows you to create a prototype that feels like a real app when you save it to your phone. Push.js basically loads in the pages and animates between them much like the animation effects on native IOS apps. You’ll need to deploy the code on a server to get push working. You can download and check out Ratchet here.
1. All fixed bars (.bar-title, .bar-tab, .bar-header-secondary, .bar-footer) should always be the first thing in the of the page. This is really important!
2. Anything that’s not a .bar- should be put in a div with the class “content”. Put this div after the bars in the tag. The .content div is what actually scrolls in a Ratchet prototype.
3. They’re included in the template.html page included in the download, but make sure they stay in the page. They are important to Ratchet working just right.
The header is the container element for the title.
</pre> <header class="bar-title"> <h1 class="title">Papermashup</h1> </header> <pre>
Popovers are designed to only fire from the title bar. Set the value of the title href to the id of a popover as shown below:
<!-- The Header Title Bar --></pre> <header class="bar-title"><a href="#myPopover"> </a> <h1 class="title">Title</h1> <a href="#myPopover"> </a></header> <pre> <!-- The Popover --></pre> <div class="popover" id="myPopover"><header class="popover-header"><a class="button" href="#"> Left </a> <h3 class="title">Popover title</h3> <a class="button" href="#"> Right </a></header> <ul class="list"> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> </div> <pre>
The slider can be used for any type of content but it works great with images.
</pre> <div class="slider"> <ul> <li><img alt="" src="img/slide1.jpg" /> <span class="slide-text">← Slide me</span></li> <li><img alt="" src="img/slide2.jpg" /></li> <li><img alt="" src="img/slide3.jpg" /></li> </ul> </div> <pre>
<a href="page-one.html" data-transition="fade">One</a> <a href="page-two.html" data-transition="slide-in">Two</a>
Ratchet is an amazing tool to put together prototypes. It’s effortless to get started with and i’d recommend it to anyone wanting to build an iPhone app demo. We’ve just touched the surface of what Ratchet can bo but it’s truly awesome.
Designer and web developer, Co-founder and Technical Director at Harkable.com London. Previously I worked at InMobi, Spotify and MySpace. Interests include photography and making short videos. Also an avid F1 fan. I also run Mega Infographics for your daily dose of the best infographics.
Follow us on Twitter and get in-stream updates.
Subscribe to all the Papermashup tutorials and articles straight to your RSS reader.
Sign up and get all the Papermashup tutorials straight to your inbox.