forked from h5bp/mobile-boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
reverted removed markdown and demo for tagging
- Loading branch information
Showing
2 changed files
with
213 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |