Permalink
Browse files

reverted removed markdown and demo for tagging

  • Loading branch information...
shichuan committed Mar 27, 2011
1 parent c4a24bb commit 9df8fb7f8ba206196a96fb218ec8b55441bf47a7
Showing with 213 additions and 0 deletions.
  1. +64 −0 README.markdown
  2. +149 −0 demo/index.html
View
@@ -0,0 +1,64 @@
+#Mobile Boilerplate http://html5boilerplate.com
+v1.0 (code named Secret Diary)
+
+##Summary:
+
+This is a set of features made specifically for mobile development, with following included:
+
+###Markup:
+Home screen icon (Android, iOS, Symbian)
+CSS class target IE Mobile 7
+Cross browser viewport optimization (Android, iOS, Mobile IE, Blackberry)
+Optimized viewport scaling (Android, iOS, Mobile IE, Blackberry)
+IE Mobile better Font rendering
+Prevent scaling
+iPhone full screen mode
+
+###CSS:
+Mobile helper class
+Prevent text resize in ie/webkit browser
+Prevent callout
+HTML5 contenteditable attribute on mobile
+S60 3.x and 5.0 devices which animated gif fix
+Text overflow with ellipsis
+Mobile optimized default CSS
+
+###JavaScript:
+Cross browser CSS media queries
+Textarea autogrow
+Hide webkit chrome
+Insant button
+Firebug lite debugger
+Media queries for low end smartphone
+
+###Server:
+Added Blackberry MIME type
+Added Nokia MIME type
+Prevent Transcoding
+Mobile site redirection
+
+###General:
+HTML5 offline caching for smartphone
+Mobile sitemap
+Mobile bookmark bubble
+Browser Database Wrapper API
+User Agent Detection
+GA for low end mobile devices
+Mobile build tool
+
+
+
+##License:
+
+###Major components:
+css3-mediaqueries.js: Public Domain<br />
+Bookmark bubble library: Apache License, Version 2.0<br />
+Web Storage Portability Layer: Apache License, Version 2.0<br />
+Modernizr: MIT/BSD license<br />
+jQuery: MIT/GPL license<br />
+HTML5Doctor CSS reset: Creative Commons 3.0 <br />
+CSS Reset Reloaded: Public Domain
+
+###Everything else:
+
+The Unlicense (aka: public domain)
View
@@ -0,0 +1,149 @@
+<!doctype html>
+<!-- Conditional comment for mobile ie7 http://blogs.msdn.com/b/iemobile/ -->
+<!-- Appcache Facts http://appcachefacts.info/ -->
+<!--[if IEMobile 7 ]> <html class="no-js iem7"> <![endif]-->
+<!--[if (gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js"> <!--<![endif]-->
+
+<head>
+ <meta charset="utf-8">
+
+ <title></title>
+ <meta name="description" content="">
+ <meta name="author" content="">
+
+ <!-- Mobile viewport optimization http://goo.gl/b9SaQ -->
+ <meta name="HandheldFriendly" content="True">
+ <meta name="MobileOptimized" content="320"/>
+ <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+ <!-- Home screen icon Mathias Bynens http://goo.gl/6nVq0 -->
+ <!-- For iPhone 4 with high-resolution Retina display: -->
+ <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../img/h/apple-touch-icon.png">
+ <!-- For first-generation iPad: -->
+ <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../img/m/apple-touch-icon.png">
+ <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+ <link rel="apple-touch-icon-precomposed" href="../img/l/apple-touch-icon-precomposed.png">
+ <!-- For nokia devices: -->
+ <link rel="shortcut icon" href="../img/l/apple-touch-icon.png">
+
+ <!-- Mobile IE allows us to activate ClearType technology for smoothing fonts for easy reading -->
+ <meta http-equiv="cleartype" content="on">
+
+ <!-- Uncomment if you are specifically targeting less enabled mobile browsers
+ <link rel="stylesheet" media="handheld" href="css/handheld.css?v=1"> -->
+
+ <!-- Main Stylesheet -->
+ <link rel="stylesheet" href="../css/style.css?v=1">
+
+
+
+ <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
+ <script src="../js/libs/modernizr-1.7.min.js"></script>
+ <style>
+ button { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; text-align: left; }
+ div.wrapper { width: 940px; margin: 0 auto; padding: 0 30px 36px; position: relative; }
+ div#header { background: #f5f5f5; height: 72px; border-bottom: 1px solid #eee; margin: 0; }
+ div#header h4 { float: left; position: absolute; top: 24px; left: 145px; border-left: 1px solid #ddd; padding-left: 14px; }
+ div#header h4 small { font-size: 14px; font-weight: normal; }
+ div#header h4 a, div#header h4 a:visited { font-weight: normal; }
+ div.page-header { padding: 0 0 8px; margin: 18px 0; border-bottom: 1px solid #ddd; }
+ div.page-header h1 { padding: 0; margin: 0; font-size: 24px; line-height: 27px; letter-spacing: 0; }
+ .awesome, .awesome:visited {
+ background: #222 url(/images/alert-overlay.png) repeat-x;
+ display: inline-block;
+ padding: 5px 10px 6px;
+ color: #fff;
+ text-decoration: none;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
+ -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
+ text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
+ border-bottom: 1px solid rgba(0,0,0,0.25);
+ position: relative;
+ cursor: pointer;
+ }
+
+ .awesome:hover { background-color: #111; color: #fff; }
+ .awesome:active { top: 1px; }
+ .small.awesome, .small.awesome:visited { font-size: 11px; padding: ; }
+ .awesome, .awesome:visited,
+ .medium.awesome, .medium.awesome:visited { font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
+ .large.awesome, .large.awesome:visited { font-size: 14px; padding: 8px 14px 9px; }
+
+ .green.awesome, .green.awesome:visited { background-color: #91bd09; }
+ .green.awesome:hover { background-color: #749a02; }
+ .blue.awesome, .blue.awesome:visited { background-color: #2daebf; }
+ .blue.awesome:hover { background-color: #007d9a; }
+ .red.awesome, .red.awesome:visited { background-color: #e33100; }
+ .red.awesome:hover { background-color: #872300; }
+ .magenta.awesome, .magenta.awesome:visited { background-color: #a9014b; }
+ .magenta.awesome:hover { background-color: #630030; }
+ .orange.awesome, .orange.awesome:visited { background-color: #ff5c00; }
+ .orange.awesome:hover { background-color: #d45500; }
+ .yellow.awesome, .yellow.awesome:visited { background-color: #ffb515; }
+ .yellow.awesome:hover { background-color: #fc9200; }
+ #contact {width:220px; height:40px;}
+ </style>
+</head>
+
+<body>
+
+ <div id="container">
+ <header>
+
+ </header>
+ <div id="main" role="main">
+
+ <button id="btn" class="large awesome magenta">INSTANT button!!!</button><br />
+
+ <div id="contactus">
+ <p>Type the message to see it autogrow</p>
+ <textarea id="contact">
+ </textarea>
+ <div>
+
+ </div>
+
+ <footer>
+
+ </footer>
+ </div> <!--! end of #container -->
+
+
+ <!-- JavaScript at the bottom for fast page loading -->
+
+ <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
+ <script>window.jQuery || document.write("<script src='../js/libs/jquery-1.5.1.min.js'>\x3C/script>")</script>
+
+ <script src="../js/mylibs/helper.js"></script>
+
+ <!-- scripts concatenated and minified via ant build script-->
+
+ <!--[if IEMobile 7 ]>
+ <script src="./js/libs/css3-mediaqueries.js"></script>
+ <![endif]-->
+
+ <script>
+ function showForm() {
+ $("#contactus").show();
+ }
+
+ $("#contactus").hide();
+
+ var btn = document.getElementById("btn");
+ new MBP.fastButton(btn,showForm);
+
+ var contact = document.getElementById("contact");
+ MBP.autogrow(contact);
+
+ </script>
+ <!-- end concatenated and minified scripts-->
+
+ <!-- Debugger - remove for production -->
+ <!--<script src="https://getfirebug.com/firebug-lite.js"></script>-->
+
+
+</body>
+</html>

0 comments on commit 9df8fb7

Please sign in to comment.