Skip to content

Commit

Permalink
reverted removed demo and markdown for tagging
Browse files Browse the repository at this point in the history
  • Loading branch information
@chuanxshi
chuanxshi committed Apr 5, 2011
1 parent 7ae6003 commit b0a65b8
Show file tree
Hide file tree
Showing 2 changed files with 213 additions and 0 deletions.
64 changes: 64 additions & 0 deletions README.markdown
View file
@@ -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)
149 changes: 149 additions & 0 deletions demo/index.html
View file
@@ -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 b0a65b8

Please sign in to comment.