html5boilerplate mobile 2
This commit is contained in:
Thomas Reynolds
parent
21cb23ff0c
commit
3c0cddc936
|
|
@ -11,7 +11,6 @@
|
|||
::-moz-selection{ background:#FF5E99; color:#fff; }
|
||||
::selection { background:#FF5E99; color:#fff; }
|
||||
article {display:block; text-align: left; width: 500px; margin: 0 auto; }
|
||||
|
||||
a { color: rgb(36, 109, 56); text-decoration:none; }
|
||||
a:hover { color: rgb(96, 73, 141) ; text-shadow: 2px 2px 2px rgba(36, 109, 56, 0.5); }
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,57 +1,14 @@
|
|||
#Mobile Boilerplate http://html5boilerplate.com
|
||||
v1.0 (code named Secret Diary)
|
||||
v1.1
|
||||
|
||||
##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
|
||||
|
||||
|
||||
A baseline for 'mobile first' web development. Read more at the wiki here: https://github.com/shichuan/mobile-html5-boilerplate/wiki
|
||||
|
||||
##License:
|
||||
|
||||
###Major components:
|
||||
css3-mediaqueries.js: Public Domain<br />
|
||||
respond.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 />
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@
|
|||
<allow-http-request-headers-from domain="*" headers="*" secure="false"/>
|
||||
-->
|
||||
<!--
|
||||
If you host a crossdomain.xml file with allow-access-from domain=“*”
|
||||
and don’t understand all of the points described here, you probably
|
||||
If you host a crossdomain.xml file with allow-access-from domain="*"
|
||||
and don’t understand all of the points described here, you probably
|
||||
have a nasty security vulnerability. ~ simon willison
|
||||
-->
|
||||
|
||||
|
|
|
|||
|
|
@ -1,217 +1,230 @@
|
|||
/**
|
||||
/*
|
||||
* HTML5 ✰ Boilerplate
|
||||
*
|
||||
* style.css contains a reset, font normalization and some base styles.
|
||||
* What follows is the result of much research on cross-browser styling.
|
||||
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
|
||||
* Kroc Camen, and the H5BP dev community and team.
|
||||
*
|
||||
* Credit is left where credit is due.
|
||||
* Much inspiration was taken from these projects:
|
||||
* - yui.yahooapis.com/2.8.1/build/base/base.css
|
||||
* - camendesign.com/design/
|
||||
* - praegnanz.de/weblog/htmlcssjs-kickstart
|
||||
* Detailed information about this CSS: h5bp.com/css
|
||||
*
|
||||
* ==|== normalize ==========================================================
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
|
||||
* v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark
|
||||
* html5doctor.com/html-5-reset-stylesheet/
|
||||
/* =============================================================================
|
||||
HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
|
||||
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
|
||||
audio:not([controls]) { display: none; }
|
||||
[hidden] { display: none; }
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Base
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
|
||||
* 2. Force vertical scrollbar in non-IE
|
||||
* 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
|
||||
*/
|
||||
|
||||
html, body, div, span, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
|
||||
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
|
||||
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body { margin: 0; font-size: 13px; line-height: 1.231; }
|
||||
|
||||
blockquote, q { quotes: none; }
|
||||
body, button, input, select, textarea { font-family: sans-serif; color: #222; }
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after { content: ""; content: none; }
|
||||
/*
|
||||
* Remove text-shadow in selection highlight: h5bp.com/i
|
||||
* These selection declarations have to be separate
|
||||
* Also: hot pink! (or customize the background color to match your design)
|
||||
*/
|
||||
|
||||
ins { background-color: #ff9; color: #000; text-decoration: none; }
|
||||
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
|
||||
::selection { background: #fe57a1; color: #fff; text-shadow: none; }
|
||||
|
||||
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
|
||||
|
||||
del { text-decoration: line-through; }
|
||||
/* =============================================================================
|
||||
Links
|
||||
========================================================================== */
|
||||
|
||||
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
|
||||
a { color: #00e; }
|
||||
a:visited { color: #551a8b; }
|
||||
a:hover { color: #06e; }
|
||||
a:focus { outline: thin dotted; }
|
||||
|
||||
table { border-collapse: collapse; border-spacing: 0; }
|
||||
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
|
||||
a:hover, a:active { outline: 0; }
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
abbr[title] { border-bottom: 1px dotted; }
|
||||
|
||||
b, strong { font-weight: bold; }
|
||||
|
||||
blockquote { margin: 1em 40px; }
|
||||
|
||||
dfn { font-style: italic; }
|
||||
|
||||
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
|
||||
|
||||
input, select { vertical-align: middle; }
|
||||
ins { background: #ff9; color: #000; text-decoration: none; }
|
||||
|
||||
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
|
||||
|
||||
/* Redeclare monospace font family: h5bp.com/j */
|
||||
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
|
||||
|
||||
/**
|
||||
* Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/
|
||||
*/
|
||||
/* Improve readability of pre-formatted text in all browsers */
|
||||
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
|
||||
|
||||
|
||||
body { font:13px/1.231 sans-serif; *font-size:small; } /* Hack retained to preserve specificity */
|
||||
select, input, textarea, button { font:99% sans-serif; }
|
||||
|
||||
/* Normalize monospace sizing:
|
||||
en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
|
||||
pre, code, kbd, samp { font-family: monospace, sans-serif; }
|
||||
|
||||
|
||||
/**
|
||||
* Minimal base styles.
|
||||
*/
|
||||
|
||||
/* Prevent mobile zooming while remain desktop zooming: github.com/shichuan/mobile-html5-boilerplate/issues/closed#issue/14 */
|
||||
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
|
||||
|
||||
/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
|
||||
a:hover, a:active { outline: none; }
|
||||
|
||||
ul, ol { margin-left: 2em; }
|
||||
ol { list-style-type: decimal; }
|
||||
|
||||
/* Remove margins for navigation lists */
|
||||
nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
|
||||
q { quotes: none; }
|
||||
q:before, q:after { content: ""; content: none; }
|
||||
|
||||
small { font-size: 85%; }
|
||||
strong, th { font-weight: bold; }
|
||||
|
||||
td { vertical-align: top; }
|
||||
|
||||
/* Set sub, sup without affecting line-height: gist.github.com/413930 */
|
||||
sub, sup { font-size: 75%; line-height: 0; position: relative; }
|
||||
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
|
||||
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
|
||||
sup { top: -0.5em; }
|
||||
sub { bottom: -0.25em; }
|
||||
|
||||
pre {
|
||||
/* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
|
||||
white-space: pre; white-space: pre-wrap; word-wrap: break-word;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */
|
||||
/* =============================================================================
|
||||
Lists
|
||||
========================================================================== */
|
||||
|
||||
.iem7 legend { margin-left: -7px; }
|
||||
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
|
||||
dd { margin: 0 0 0 40px; }
|
||||
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
|
||||
|
||||
/* Align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */
|
||||
input[type="radio"] { vertical-align: text-bottom; }
|
||||
input[type="checkbox"] { vertical-align: bottom; }
|
||||
.iem7 input[type="checkbox"] { vertical-align: baseline; }
|
||||
|
||||
/* Hand cursor on clickable input elements */
|
||||
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
|
||||
/* =============================================================================
|
||||
Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/* Webkit browsers add a 2px margin outside the chrome of form elements */
|
||||
button, input, select, textarea { margin: 0; }
|
||||
/*
|
||||
* 1. Improve image quality when scaled in IE7: h5bp.com/d
|
||||
* 2. Remove the gap between images and borders on image containers: h5bp.com/e
|
||||
*/
|
||||
|
||||
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
|
||||
|
||||
/*
|
||||
* Correct overflow not hidden in IE9
|
||||
*/
|
||||
|
||||
svg:not(:root) { overflow: hidden; }
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Figures
|
||||
========================================================================== */
|
||||
|
||||
figure { margin: 0; }
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Forms
|
||||
========================================================================== */
|
||||
|
||||
form { margin: 0; }
|
||||
fieldset { border: 0; margin: 0; padding: 0; }
|
||||
|
||||
/* Indicate that 'label' will shift focus to the associated form element */
|
||||
label { cursor: pointer; }
|
||||
|
||||
/*
|
||||
* 1. Correct color not inheriting in IE6/7/8/9
|
||||
* 2. Correct alignment displayed oddly in IE6/7
|
||||
*/
|
||||
|
||||
legend { border: 0; *margin-left: -7px; padding: 0; }
|
||||
|
||||
/*
|
||||
* 1. Correct font-size not inheriting in all browsers
|
||||
* 2. Remove margins in FF3/4 S5 Chrome
|
||||
* 3. Define consistent vertical alignment display in all browsers
|
||||
*/
|
||||
|
||||
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
|
||||
|
||||
/*
|
||||
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
|
||||
* 2. Correct inner spacing displayed oddly in IE6/7
|
||||
*/
|
||||
|
||||
button, input { line-height: normal; *overflow: visible; }
|
||||
|
||||
/*
|
||||
* Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
|
||||
*/
|
||||
|
||||
table button, table input { *overflow: auto; }
|
||||
|
||||
/*
|
||||
* 1. Display hand cursor for clickable form elements
|
||||
* 2. Allow styling of clickable form elements in iOS
|
||||
*/
|
||||
|
||||
button, input[type="button"], input[type="reset"], input[type="submit"], [role="button"] { cursor: pointer; -webkit-appearance: button; }
|
||||
|
||||
/*
|
||||
* Consistent box sizing and appearance
|
||||
*/
|
||||
|
||||
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
|
||||
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
|
||||
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
|
||||
|
||||
/*
|
||||
* Remove inner padding and border in FF3/4: h5bp.com/l
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
|
||||
|
||||
/*
|
||||
* 1. Remove default vertical scrollbar in IE6/7/8/9
|
||||
* 2. Allow only vertical resizing
|
||||
*/
|
||||
|
||||
textarea { overflow: auto; vertical-align: top; resize: vertical; }
|
||||
|
||||
/* Colors for form validity */
|
||||
input:valid, textarea:valid { }
|
||||
input:invalid, textarea:invalid {
|
||||
border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red;
|
||||
}
|
||||
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }
|
||||
input:invalid, textarea:invalid { background-color: #f0dddd; }
|
||||
|
||||
|
||||
/* These selection declarations have to be separate
|
||||
No text-shadow: twitter.com/miketaylr/status/12228805301
|
||||
Also: hot pink! */
|
||||
::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
|
||||
::selection { background:#FF5E99; color:#fff; text-shadow: none; }
|
||||
/* =============================================================================
|
||||
Tables
|
||||
========================================================================== */
|
||||
|
||||
/* j.mp/webkit-tap-highlight-color */
|
||||
a:link { -webkit-tap-highlight-color: #FF5E99; }
|
||||
|
||||
/* Make buttons play nice in IE:
|
||||
www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
|
||||
button { width: auto; overflow: visible; }
|
||||
|
||||
/* Bicubic resizing for non-native sized IMG:
|
||||
code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
|
||||
.iem7 img { -ms-interpolation-mode: bicubic; }
|
||||
table { border-collapse: collapse; border-spacing: 0; }
|
||||
td { vertical-align: top; }
|
||||
|
||||
|
||||
/**
|
||||
* You might tweak these..
|
||||
*/
|
||||
|
||||
body, select, input, textarea {
|
||||
/* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */
|
||||
color: #444;
|
||||
/* Set your base font here, to apply evenly */
|
||||
/* font-family: Georgia, serif; */
|
||||
}
|
||||
|
||||
/* Headers (h1, h2, etc) have no default font-size or margin; define those yourself */
|
||||
h1, h2, h3, h4, h5, h6 { font-weight: bold; }
|
||||
|
||||
a, a:active, a:visited { color: #607890; }
|
||||
a:hover { color: #036; }
|
||||
|
||||
|
||||
/*
|
||||
* Helper classes
|
||||
*/
|
||||
|
||||
/* prevent callout */
|
||||
.nocallout {-webkit-touch-callout: none;}
|
||||
|
||||
/* Text overflow with ellipsis */
|
||||
.ellipsis {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* A hack for HTML5 contenteditable attribute on mobile */
|
||||
textarea.contenteditable {-webkit-appearance: none;}
|
||||
|
||||
/* A workaround for S60 3.x and 5.0 devices which do not animated gif images if they have been set as display: none */
|
||||
.gifhidden {position: absolute; left: -100%;}
|
||||
|
||||
/* For image replacement */
|
||||
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
|
||||
|
||||
/* Hide for both screenreaders and browsers:
|
||||
css-discuss.incutio.com/wiki/Screenreader_Visibility */
|
||||
.hidden { display: none; visibility: hidden; }
|
||||
|
||||
/* Hide only visually, but have it available for screenreaders: by Jon Neal.
|
||||
www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */
|
||||
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
|
||||
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
|
||||
.visuallyhidden.focusable:active,
|
||||
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
|
||||
|
||||
/* Hide visually and from screenreaders, but maintain layout */
|
||||
.invisible { visibility: hidden; }
|
||||
|
||||
/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
|
||||
j.mp/bestclearfix */
|
||||
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
|
||||
.clearfix:after { clear: both; }
|
||||
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
|
||||
.clearfix { zoom: 1; }
|
||||
|
||||
|
||||
/* Primary Styles for mobile
|
||||
/* ==|== primary styles =====================================================
|
||||
Author:
|
||||
*/
|
||||
========================================================================== */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
|
|
@ -231,6 +244,72 @@ textarea.contenteditable {-webkit-appearance: none;}
|
|||
@media
|
||||
only screen and (-webkit-min-device-pixel-ratio: 1.5),
|
||||
only screen and (-o-min-device-pixel-ratio: 3/2),
|
||||
only screen and (min--moz-device-pixel-ratio: 1.5),
|
||||
only screen and (min-device-pixel-ratio: 1.5) {
|
||||
/* Styles */
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ==|== non-semantic helper classes ========================================
|
||||
Please define your styles before this section.
|
||||
========================================================================== */
|
||||
|
||||
/* prevent callout */
|
||||
.nocallout {-webkit-touch-callout: none;}
|
||||
|
||||
/* Text overflow with ellipsis */
|
||||
.ellipsis {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* A hack for HTML5 contenteditable attribute on mobile */
|
||||
textarea[contenteditable] {-webkit-appearance: none;}
|
||||
|
||||
/* A workaround for S60 3.x and 5.0 devices which do not animated gif images if they have been set as display: none */
|
||||
.gifhidden {position: absolute; left: -100%;}
|
||||
|
||||
/* For image replacement */
|
||||
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
|
||||
.ir br { display: none; }
|
||||
|
||||
/* Hide from both screenreaders and browsers: h5bp.com/u */
|
||||
.hidden { display: none !important; visibility: hidden; }
|
||||
|
||||
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
|
||||
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
|
||||
|
||||
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
|
||||
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
|
||||
|
||||
/* Hide visually and from screenreaders, but maintain layout */
|
||||
.invisible { visibility: hidden; }
|
||||
|
||||
/* Contain floats: h5bp.com/q */
|
||||
.clearfix:before, .clearfix:after { content: ""; display: table; }
|
||||
.clearfix:after { clear: both; }
|
||||
.clearfix { *zoom: 1; }
|
||||
|
||||
|
||||
|
||||
/* ==|== print styles =======================================================
|
||||
Print styles.
|
||||
Inlined to avoid required HTTP connection: h5bp.com/r
|
||||
========================================================================== */
|
||||
|
||||
@media print {
|
||||
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
|
||||
a, a:visited { text-decoration: underline; }
|
||||
a[href]:after { content: " (" attr(href) ")"; }
|
||||
abbr[title]:after { content: " (" attr(title) ")"; }
|
||||
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
|
||||
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
|
||||
thead { display: table-header-group; } /* h5bp.com/t */
|
||||
tr, img { page-break-inside: avoid; }
|
||||
img { max-width: 100% !important; }
|
||||
@page { margin: 0.5cm; }
|
||||
p, h2, h3 { orphans: 3; widows: 3; }
|
||||
h2, h3 { page-break-after: avoid; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
CACHE MANIFEST
|
||||
# version 1
|
||||
img/l/apple-touch-icon.png
|
||||
img/l/apple-touch-icon-precomposed.png
|
||||
img/l/splash.png
|
||||
img/m/apple-touch-icon.png
|
||||
img/h/apple-touch-icon.png
|
||||
img/h/splash.png
|
||||
css/style.css
|
||||
js/libs/jquery-1.5.1.min.js
|
||||
js/libs/modernizr-custom.js
|
||||
js/libs/respond.min.js
|
||||
|
||||
NETWORK:
|
||||
#http://example.com/api/
|
||||
|
||||
FALLBACK:
|
||||
|
|
@ -1,8 +1,7 @@
|
|||
<!doctype html>
|
||||
<!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" manifest="default.appcache?v=1"> <![endif]-->
|
||||
<!--[if (gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js" manifest="default.appcache?v=1"> <!--<![endif]-->
|
||||
<!--[if IEMobile 7 ]> <html class="no-js iem7"> <![endif]-->
|
||||
<!--[if (gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js"> <!--<![endif]-->
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
|
@ -13,7 +12,7 @@
|
|||
|
||||
<!-- Mobile viewport optimization http://goo.gl/b9SaQ -->
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
<meta name="MobileOptimized" content="320"/>
|
||||
<meta name="MobileOptimized" content="320">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<!-- Home screen icon Mathias Bynens http://goo.gl/6nVq0 -->
|
||||
|
|
@ -27,8 +26,10 @@
|
|||
<link rel="shortcut icon" href="img/l/apple-touch-icon.png">
|
||||
|
||||
<!--iOS web app, deletable if not needed -->
|
||||
<!--<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<!--the script prevents links from opening in mobile safari. https://gist.github.com/1042026
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>
|
||||
<link rel="apple-touch-startup-image" href="img/l/splash.png">-->
|
||||
|
||||
<!-- Mobile IE allows us to activate ClearType technology for smoothing fonts for easy reading -->
|
||||
|
|
@ -41,6 +42,8 @@
|
|||
|
||||
<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
|
||||
<script src="js/libs/modernizr-custom.js"></script>
|
||||
<!-- Media Queries Polyfill https://github.com/shichuan/mobile-html5-boilerplate/wiki/Media-Queries-Polyfill -->
|
||||
<script>Modernizr.mq('(min-width:0)') || document.write('<script src="js/libs/respond.min.js">\x3C/script>')</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -62,8 +65,8 @@
|
|||
<!-- 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="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>
|
||||
|
||||
<!-- scripts concatenated and minified via ant build script -->
|
||||
<script src="js/mylibs/helper.js"></script>
|
||||
|
|
@ -72,12 +75,6 @@
|
|||
<script>
|
||||
// iPhone Scale Bug Fix, read this when using http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/
|
||||
MBP.scaleFix();
|
||||
|
||||
// Media Queries Polyfill https://github.com/shichuan/mobile-html5-boilerplate/wiki/Media-Queries-Polyfill
|
||||
yepnope({
|
||||
test : Modernizr.mq('(min-width)'),
|
||||
nope : ['js/libs/respond.min.js']
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Debugger - remove for production -->
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -4,4 +4,4 @@
|
|||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* Usage: Check out the readme file or github.com/scottjehl/respond
|
||||
*/
|
||||
(function(d,g){d.respond={};respond.update=function(){};respond.mediaQueriesSupported=g;if(g){return}var s=d.document,q=s.documentElement,h=[],j=[],o=[],n={},f=30,e=s.getElementsByTagName("head")[0]||q,b=e.getElementsByTagName("link"),a=function(){var y=s.styleSheets,u=y.length;for(var x=0;x<u;x++){var w=y[x],v=w.href;if(!!v&&!n[v]){if(!/^([a-zA-Z]+?:(\/\/)?(www\.)?)/.test(v)||v.replace(RegExp.$1,"").split("/")[0]===d.location.host){var t=v;m(v,function(z){l(z,t);n[t]=true})}else{n[v]=true}}}},l=function(B,t){var z=B.match(/@media ([^\{]+)\{([\S\s]+?)(?=\}\/\*\/mediaquery\*\/)/gmi),C=z&&z.length||0,t=t.substring(0,t.lastIndexOf("/"));if(t.length){t+="/"}for(var w=0;w<C;w++){var x=z[w].match(/@media ([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1,u=x.split(","),A=u.length;j.push(RegExp.$2&&RegExp.$2.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+t+"$2$3"));for(var v=0;v<A;v++){var y=u[v];h.push({media:y.match(/(only\s+)?([a-zA-Z]+)(\sand)?/)&&RegExp.$2,rules:j.length-1,minw:y.match(/\(min\-width:\s?(\s?[0-9]+)px\s?\)/)&&parseFloat(RegExp.$1),maxw:y.match(/\(max\-width:\s?(\s?[0-9]+)px\s?\)/)&&parseFloat(RegExp.$1)})}}i()},k,p,i=function(C){var t="clientWidth",v=q[t],B=s.compatMode==="CSS1Compat"&&v||s.body[t]||v,x={},A=s.createDocumentFragment(),z=b[b.length-1],u=(new Date()).getTime();if(C&&k&&u-k<f){clearTimeout(p);p=setTimeout(i,f);return}else{k=u}for(var w in h){var D=h[w];if(!D.minw&&!D.maxw||(!D.minw||D.minw&&B>=D.minw)&&(!D.maxw||D.maxw&&B<=D.maxw)){if(!x[D.media]){x[D.media]=[]}x[D.media].push(j[D.rules])}}for(var w in o){if(o[w]&&o[w].parentNode===e){e.removeChild(o[w])}}for(var w in x){var E=s.createElement("style"),y=x[w].join("\n");E.type="text/css";E.media=w;if(E.styleSheet){E.styleSheet.cssText=y}else{E.appendChild(s.createTextNode(y))}A.appendChild(E);o.push(E)}e.insertBefore(A,z.nextSibling)},m=function(t,v){var u=c();if(!u){return}u.open("GET",t,true);u.onreadystatechange=function(){if(u.readyState!=4||u.status!=200&&u.status!=304){return}v(u.responseText)};if(u.readyState==4){return}u.send()},c=(function(){var t=false,u=[function(){return new ActiveXObject("Microsoft.XMLHTTP")},function(){return new ActiveXObject("Msxml3.XMLHTTP")},function(){return new ActiveXObject("Msxml2.XMLHTTP")},function(){return new XMLHttpRequest()}],w=u.length;while(w--){try{t=u[w]()}catch(v){continue}break}return function(){return t}})();a();respond.update=a;function r(){i(true)}if(d.addEventListener){d.addEventListener("resize",r,false)}else{if(d.attachEvent){d.attachEvent("onresize",r)}}})(this,(function(f){var g=(function(k){var i=3,l=document.createElement("div"),j=l.getElementsByTagName("i");while(l.innerHTML="<!--[if gt IE "+(++i)+"]><i></i><![endif]-->",j[0]){}return i>4?i:k}());if(f.matchMedia||g&&g>=9){return true}if(g&&g<=8){return false}var e=f.document,a=e.documentElement,b=e.createElement("body"),h=e.createElement("div"),d=e.createElement("style"),c="@media only all { #qtest { position: absolute; } }";h.setAttribute("id","qtest");d.type="text/css";b.appendChild(h);if(d.styleSheet){d.styleSheet.cssText=c}else{d.appendChild(e.createTextNode(c))}a.insertBefore(b,a.firstChild);a.insertBefore(d,b);support=(f.getComputedStyle?f.getComputedStyle(h,null):h.currentStyle)["position"]=="absolute";a.removeChild(b);a.removeChild(d);return support})(this));
|
||||
(function(e,h){e.respond={};respond.update=function(){};respond.mediaQueriesSupported=h;if(h){return}var u=e.document,r=u.documentElement,i=[],k=[],p=[],o={},g=30,f=u.getElementsByTagName("head")[0]||r,b=f.getElementsByTagName("link"),d=[],a=function(){var B=b,w=B.length;for(var z=0;z<w;z++){var y=B[z],x=y.href,A=y.media,v=y.rel&&y.rel.toLowerCase()==="stylesheet";if(!!x&&v&&!o[x]){if(!/^([a-zA-Z]+?:(\/\/)?(www\.)?)/.test(x)||x.replace(RegExp.$1,"").split("/")[0]===e.location.host){d.push({href:x,media:A})}else{o[x]=true}}}t()},t=function(){if(d.length){var v=d.shift();n(v.href,function(w){m(w,v.href,v.media);o[v.href]=true;t()})}},m=function(G,v,x){var E=G.match(/@media ([^\{]+)\{([\S\s]+?)(?=\}[\s]*\/\*\/mediaquery\*\/)/gmi),H=E&&E.length||0,v=v.substring(0,v.lastIndexOf("/")),w=function(I){return I.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+v+"$2$3")},y=!H&&x;if(v.length){v+="/"}if(y){H=1}for(var B=0;B<H;B++){var C;if(y){C=x;k.push(w(G))}else{C=E[B].match(/@media ([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1;k.push(RegExp.$2&&w(RegExp.$2))}var z=C.split(","),F=z.length;for(var A=0;A<F;A++){var D=z[A];i.push({media:D.match(/(only\s+)?([a-zA-Z]+)(\sand)?/)&&RegExp.$2,rules:k.length-1,minw:D.match(/\(min\-width:[\s]*([\s]*[0-9]+)px[\s]*\)/)&&parseFloat(RegExp.$1),maxw:D.match(/\(max\-width:[\s]*([\s]*[0-9]+)px[\s]*\)/)&&parseFloat(RegExp.$1)})}}j()},l,q,j=function(E){var v="clientWidth",x=r[v],D=u.compatMode==="CSS1Compat"&&x||u.body[v]||x,z={},C=u.createDocumentFragment(),B=b[b.length-1],w=(new Date()).getTime();if(E&&l&&w-l<g){clearTimeout(q);q=setTimeout(j,g);return}else{l=w}for(var y in i){var F=i[y];if(!F.minw&&!F.maxw||(!F.minw||F.minw&&D>=F.minw)&&(!F.maxw||F.maxw&&D<=F.maxw)){if(!z[F.media]){z[F.media]=[]}z[F.media].push(k[F.rules])}}for(var y in p){if(p[y]&&p[y].parentNode===f){f.removeChild(p[y])}}for(var y in z){var G=u.createElement("style"),A=z[y].join("\n");G.type="text/css";G.media=y;if(G.styleSheet){G.styleSheet.cssText=A}else{G.appendChild(u.createTextNode(A))}C.appendChild(G);p.push(G)}f.insertBefore(C,B.nextSibling)},n=function(v,x){var w=c();if(!w){return}w.open("GET",v,true);w.onreadystatechange=function(){if(w.readyState!=4||w.status!=200&&w.status!=304){return}x(w.responseText)};if(w.readyState==4){return}w.send()},c=(function(){var v=false,w=[function(){return new ActiveXObject("Microsoft.XMLHTTP")},function(){return new ActiveXObject("Msxml3.XMLHTTP")},function(){return new ActiveXObject("Msxml2.XMLHTTP")},function(){return new XMLHttpRequest()}],y=w.length;while(y--){try{v=w[y]()}catch(x){continue}break}return function(){return v}})();a();respond.update=a;function s(){j(true)}if(e.addEventListener){e.addEventListener("resize",s,false)}else{if(e.attachEvent){e.attachEvent("onresize",s)}}})(this,(function(f){if(f.matchMedia){return true}var e,i=document,c=i.documentElement,g=c.firstElementChild||c.firstChild,h=!i.body,d=i.body||i.createElement("body"),b=i.createElement("div"),a="only all";b.id="mq-test-1";b.style.cssText="position:absolute;top:-99em";d.appendChild(b);b.innerHTML='_<style media="'+a+'"> #mq-test-1 { width: 9px; }</style>';if(h){c.insertBefore(d,g)}b.removeChild(b.firstChild);e=b.offsetWidth==9;if(h){c.removeChild(d)}else{d.removeChild(b)}return e})(this));
|
||||
|
|
@ -22,13 +22,36 @@ MBP.gestureStart = function () {
|
|||
};
|
||||
|
||||
|
||||
// Hide URL Bar for iOS
|
||||
// http://remysharp.com/2010/08/05/doing-it-right-skipping-the-iphone-url-bar/
|
||||
// Hide URL Bar for iOS and Android by Scott Jehl
|
||||
// https://gist.github.com/1183357
|
||||
|
||||
MBP.hideUrlBar = function () {
|
||||
/iPhone/.test(MBP.ua) && !pageYOffset && !location.hash && setTimeout(function () {
|
||||
var win = window,
|
||||
doc = win.document;
|
||||
|
||||
// If there's a hash, or addEventListener is undefined, stop here
|
||||
if( !location.hash || !win.addEventListener ){
|
||||
|
||||
//scroll to 1
|
||||
window.scrollTo( 0, 1 );
|
||||
}, 1000);
|
||||
var scrollTop = 1,
|
||||
|
||||
//reset to 0 on bodyready, if needed
|
||||
bodycheck = setInterval(function(){
|
||||
if( doc.body ){
|
||||
clearInterval( bodycheck );
|
||||
scrollTop = "scrollTop" in doc.body ? doc.body.scrollTop : 1;
|
||||
win.scrollTo( 0, scrollTop === 1 ? 0 : 1 );
|
||||
}
|
||||
}, 15 );
|
||||
|
||||
win.addEventListener( "load", function(){
|
||||
setTimeout(function(){
|
||||
//reset to hide addr bar at onload
|
||||
win.scrollTo( 0, scrollTop === 1 ? 0 : 1 );
|
||||
}, 0);
|
||||
}, false );
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -63,7 +86,8 @@ MBP.fastButton.prototype.onTouchStart = function(event) {
|
|||
};
|
||||
|
||||
MBP.fastButton.prototype.onTouchMove = function(event) {
|
||||
if(Math.abs(event.touches[0].clientX - this.startX) > 10 || Math.abs(event.touches[0].clientY - this.startY) > 10) {
|
||||
if(Math.abs(event.touches[0].clientX - this.startX) > 10 ||
|
||||
Math.abs(event.touches[0].clientY - this.startY) > 10 ) {
|
||||
this.reset();
|
||||
}
|
||||
};
|
||||
|
|
|
|||
20
lib/middleman/templates/mobile/source/js/plugins.js
Executable file
20
lib/middleman/templates/mobile/source/js/plugins.js
Executable file
|
|
@ -0,0 +1,20 @@
|
|||
|
||||
// usage: log('inside coolFunc', this, arguments);
|
||||
// paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
|
||||
window.log = function(){
|
||||
log.history = log.history || []; // store logs to an array for reference
|
||||
log.history.push(arguments);
|
||||
if(this.console) {
|
||||
arguments.callee = arguments.callee.caller;
|
||||
var newarr = [].slice.call(arguments);
|
||||
(typeof console.log === 'object' ? log.apply.call(console.log, console, newarr) : console.log.apply(console, newarr));
|
||||
}
|
||||
};
|
||||
|
||||
// make it safe to use console.log always
|
||||
(function(b){function c(){}for(var d="assert,clear,count,debug,dir,dirxml,error,exception,firebug,group,groupCollapsed,groupEnd,info,log,memoryProfile,memoryProfileEnd,profile,profileEnd,table,time,timeEnd,timeStamp,trace,warn".split(","),a;a=d.pop();){b[a]=b[a]||c}})((function(){try
|
||||
{console.log();return window.console;}catch(err){return window.console={};}})());
|
||||
|
||||
|
||||
// place any jQuery/helper plugins in here, instead of separate, slower script files.
|
||||
|
||||
|
|
@ -2,4 +2,3 @@
|
|||
# www.google.com/support/webmasters/bin/answer.py?hl=en&answer=156449
|
||||
|
||||
User-agent: *
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<!-- http://www.google.com/support/webmasters/bin/answer.py?answer=34648 -->
|
||||
<url>
|
||||
<!--<loc>http://mobile.example.com/index.html</loc>-->
|
||||
|
||||
<mobile:mobile/>
|
||||
</url>
|
||||
</urlset>
|
||||
|
|
@ -6,10 +6,10 @@
|
|||
|
||||
<!-- reference your own javascript files here -->
|
||||
|
||||
<script src="../js/modernizr-1.5.min.js"></script>
|
||||
<script src="../js/modernizr-custom.js"></script>
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
|
||||
<script src="../js/plugins.js"></script>
|
||||
<script src="../js/libs/jquery-1.6.2.min.js"></script>
|
||||
<script src="../js/mylibs/helper.js"></script>
|
||||
<script src="../js/script.js"></script>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -8,19 +8,14 @@ test('HTML5 Boilerplate is sweet',function(){
|
|||
expect(1);
|
||||
equals('boilerplate'.replace('boilerplate','sweet'),'sweet','Yes. HTML5 Boilerplate is, in fact, sweet');
|
||||
|
||||
})
|
||||
});
|
||||
|
||||
// these test things from plugins.js
|
||||
// these test things from helper.js
|
||||
test('Environment is good',function(){
|
||||
expect(3);
|
||||
ok( !!window.log, 'log function present');
|
||||
|
||||
var history = log.history && log.history.length || 0;
|
||||
log('logging from the test suite.')
|
||||
equals( log.history.length - history, 1, 'log history keeps track' )
|
||||
|
||||
ok( !!window.Modernizr, 'Modernizr global is present')
|
||||
})
|
||||
expect(2);
|
||||
ok( !!window.MBP, 'Mobile Boilder Plate helper is present');
|
||||
notEqual( window.MBP.ua, null, "we have a user agent. winning, duh.");
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue