<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title > Ratchet template page< / title >
<!-- Sets initial viewport load and disables zooming -->
< meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" >
<!-- Makes your prototype chrome - less once bookmarked to your phone's home screen -->
< meta name = "apple-mobile-web-app-capable" content = "yes" >
< meta name = "apple-mobile-web-app-status-bar-style" content = "black" >
<!-- Set a shorter title for iOS6 devices when saved to home screen -->
< meta name = "apple-mobile-web-app-title" content = "Ratchet" >
<!-- Set Apple icons for when prototype is saved to home screen -->
< link rel = "apple-touch-icon-precomposed" sizes = "114x114" href = "touch-icons/apple-touch-icon-114x114.png" >
< link rel = "apple-touch-icon-precomposed" sizes = "72x72" href = "touch-icons/apple-touch-icon-72x72.png" >
< link rel = "apple-touch-icon-precomposed" sizes = "57x57" href = "touch-icons/apple-touch-icon-57x57.png" >
<!-- Include the compiled Ratchet CSS -->
< link rel = "stylesheet" href = "ratchet.css" >
<!-- Include the compiled Ratchet JS -->
< script src = "ratchet.js" > < / script >
<!-- Intro paragraph styles. Delete once you start using this page -->
< style type = "text/css" >
.welcome {
line-height: 1.5;
color: #555;
}
< / style >
< / head >
< body >
<!-- Make sure all your bars are the first things in your <body> -->
< header class = "bar bar-nav" >
< h1 class = "title" > Ratchet< / h1 >
< / header >
<!-- Wrap all non - bar HTML in the .content div (this is actually what scrolls) -->
< div class = "content" >
< p class = "welcome" > Thanks for downloading Ratchet. This is an example HTML page that's linked up to compiled Ratchet CSS and JS, has the proper meta tags and the HTML structure. Need some more help before you start filling this with your own content? Check out some Ratchet resources:< / p >
< div class = "card" >
< ul class = "table-view" >
< li class = "table-view-cell" >
< a class = "push-right" href = "http://goratchet.com" >
< strong > Ratchet documentation< / strong >
< / a >
< / li >
< li class = "table-view-cell" >
< a class = "push-right" href = "https://goratchet.com" >
< strong > Ratchet on Github< / strong >
< / a >
< / li >
< li class = "table-view-cell" >
< a class = "push-right" href = "https://groups.google.com/forum/#!forum/goratchet" >
< strong > Ratchet Google group< / strong >
< / a >
< / li >
< li class = "table-view-cell" >
< a class = "push-right" href = "http://www.twitter.com/GoRatchet" >
< strong > Ratchet on Twitter< / strong >
< / a >
< / li >
< / ul >
< / div >
< / div >
< / body >
< / html >
