├── .gitignore ├── README.md ├── htdocs-desktop-boilerplate └── .gitignore ├── htdocs-desktop-demoSite └── .gitignore ├── htdocs-mobile-boilerplate ├── _data │ └── .gitignore ├── _mock │ └── .gitignore ├── _moresnipets.html ├── _template │ └── .gitignore ├── _test │ ├── index.html │ ├── qunit │ │ ├── qunit.css │ │ └── qunit.js │ └── tests.js ├── common │ ├── css │ │ └── style.css │ ├── img │ │ ├── _dummy │ │ │ ├── 1.png │ │ │ └── grid.png │ │ ├── arrows │ │ │ └── .gitignore │ │ ├── buttons │ │ │ └── .gitignore │ │ ├── icons │ │ │ └── .gitignore │ │ └── misc │ │ │ └── .gitignore │ └── js │ │ ├── common.js │ │ ├── libs │ │ ├── jquery-1.5.2.js │ │ ├── jquery-1.5.2.min.js │ │ ├── mbp.js │ │ └── modernizr-custom.js │ │ └── mylibs │ │ ├── example1.js │ │ ├── example2.js │ │ └── example3.js ├── crossdomain.xml ├── favicon.ico ├── img │ ├── h │ │ ├── apple-touch-icon.png │ │ └── splash.png │ ├── l │ │ ├── apple-touch-icon-precomposed.png │ │ ├── apple-touch-icon.png │ │ └── splash.png │ └── m │ │ └── apple-touch-icon.png ├── index.html └── robots.txt └── htdocs-mobile-demoSite ├── .gitignore ├── _template ├── .gitignore └── modules.html ├── _test ├── index.html ├── qunit │ ├── qunit.css │ └── qunit.js └── tests.js ├── common ├── css │ └── style.css ├── img │ ├── _dummy │ │ ├── 1.png │ │ └── grid.png │ ├── arrows │ │ └── .gitignore │ ├── buttons │ │ └── .gitignore │ ├── icons │ │ └── .gitignore │ ├── misc │ │ └── .gitignore │ └── mod-mainvisual │ │ └── peco.jpg └── js │ ├── common.js │ ├── libs │ ├── jquery-1.5.2.js │ ├── jquery-1.5.2.min.js │ ├── mbp.js │ └── modernizr-custom.js │ └── mylibs │ └── jquery.tinyscroller.js ├── favicon.ico ├── img ├── h │ ├── apple-touch-icon.png │ └── splash.png ├── l │ ├── apple-touch-icon-precomposed.png │ ├── apple-touch-icon.png │ └── splash.png └── m │ └── apple-touch-icon.png ├── index.html └── robots.txt /.gitignore: -------------------------------------------------------------------------------- 1 | # Numerous always-ignore extensions 2 | *.diff 3 | *.err 4 | *.orig 5 | *.log 6 | *.rej 7 | *.swo 8 | *.swp 9 | *.vi 10 | *~ 11 | 12 | # OS or Editor folders 13 | .DS_Store 14 | .cache 15 | .project 16 | .settings 17 | nbproject 18 | thumbs.db 19 | 20 | # Dreamweaver added files 21 | _notes 22 | dwsync.xml 23 | 24 | # Komodo 25 | *.komodoproject 26 | .komodotools 27 | 28 | # Folders to ignore 29 | .hg 30 | .svn 31 | publish 32 | .idea 33 | 34 | # build script local files 35 | build/buildinfo.properties 36 | build/config/buildinfo.properties 37 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # pxg html boilerplate 2 | 3 | htmlテンプレート&ガイドライン。 4 | もうチョイ突っ込んだboilerplateを目指す。 5 | 後よく使うライブラリ等まとめたりなど、実務で使うことを想定。 6 | http://html5boilerplate.com/ 7 | http://html5boilerplate.com/mobile/ 8 | 9 | ## デモ 10 | 11 | モバイル版デモサイト (/htdocs-mobile-demoSite) 12 | http://bp-mobile.pxgrid.net/ 13 | http://bp-mobile.pxgrid.net/_template/modules.html 14 | 15 | デスクトップ版デモサイト (/htdocs-mobile-demoSite) 16 | 未 17 | 18 | ## ライセンス: 19 | 20 | ### コンポーネント: 21 | 22 | respond.js: Public Domain 23 | Bookmark bubble library: Apache License, Version 2.0 24 | Web Storage Portability Layer: Apache License, Version 2.0 25 | Modernizr: MIT/BSD license 26 | jQuery: MIT/GPL license 27 | HTML5Doctor CSS reset: Creative Commons 3.0 28 | CSS Reset Reloaded: Public Domain 29 | 30 | ### その他全部: 31 | 32 | The Unlicense (aka: public domain) 33 | -------------------------------------------------------------------------------- /htdocs-desktop-boilerplate/.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pxgrid/pxg-html-boilerplate/c73636d794c6a87e5bcb1a886781122c53fc8106/htdocs-desktop-boilerplate/.gitignore -------------------------------------------------------------------------------- /htdocs-desktop-demoSite/.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pxgrid/pxg-html-boilerplate/c73636d794c6a87e5bcb1a886781122c53fc8106/htdocs-desktop-demoSite/.gitignore -------------------------------------------------------------------------------- /htdocs-mobile-boilerplate/_data/.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pxgrid/pxg-html-boilerplate/c73636d794c6a87e5bcb1a886781122c53fc8106/htdocs-mobile-boilerplate/_data/.gitignore -------------------------------------------------------------------------------- /htdocs-mobile-boilerplate/_mock/.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pxgrid/pxg-html-boilerplate/c73636d794c6a87e5bcb1a886781122c53fc8106/htdocs-mobile-boilerplate/_mock/.gitignore -------------------------------------------------------------------------------- /htdocs-mobile-boilerplate/_moresnipets.html: -------------------------------------------------------------------------------- 1 | 2 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /htdocs-mobile-boilerplate/_template/.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pxgrid/pxg-html-boilerplate/c73636d794c6a87e5bcb1a886781122c53fc8106/htdocs-mobile-boilerplate/_template/.gitignore -------------------------------------------------------------------------------- /htdocs-mobile-boilerplate/_test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |example1.js loaded!
' : '', 48 | w.example2Loaded ? 'example2.js loaded!
' : '', 49 | w.example3Loaded ? 'example3.js loaded!
' : '' 50 | ); 51 | }); 52 | 53 | } // end of commonDOMContentLoaded 54 | 55 | })(); // end encapsulation 56 | -------------------------------------------------------------------------------- /htdocs-mobile-boilerplate/common/js/libs/mbp.js: -------------------------------------------------------------------------------- 1 | /* 2 | * MBP - Mobile boilerplate helper functions 3 | */ 4 | (function(document){ 5 | 6 | window.MBP = window.MBP || {}; 7 | 8 | // Fix for iPhone viewport scale bug 9 | // http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/ 10 | 11 | MBP.viewportmeta = document.querySelector && document.querySelector('meta[name="viewport"]'); 12 | MBP.ua = navigator.userAgent; 13 | 14 | MBP.scaleFix = function () { 15 | if (MBP.viewportmeta && /iPhone|iPad/.test(MBP.ua) && !/Opera Mini/.test(MBP.ua)) { 16 | MBP.viewportmeta.content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0"; 17 | document.addEventListener("gesturestart", MBP.gestureStart, false); 18 | } 19 | }; 20 | MBP.gestureStart = function () { 21 | MBP.viewportmeta.content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6"; 22 | }; 23 | 24 | 25 | // Hide URL Bar for iOS 26 | // http://remysharp.com/2010/08/05/doing-it-right-skipping-the-iphone-url-bar/ 27 | 28 | MBP.hideUrlBar = function () { 29 | /iPhone/.test(MBP.ua) && !pageYOffset && !location.hash && setTimeout(function () { 30 | window.scrollTo(0, 1); 31 | }, 1000); 32 | }; 33 | 34 | 35 | // Fast Buttons - read wiki below before using 36 | // https://github.com/shichuan/mobile-html5-boilerplate/wiki/JavaScript-Helper 37 | 38 | MBP.fastButton = function (element, handler) { 39 | this.element = element; 40 | this.handler = handler; 41 | if (element.addEventListener) { 42 | element.addEventListener('touchstart', this, false); 43 | element.addEventListener('click', this, false); 44 | } 45 | }; 46 | 47 | MBP.fastButton.prototype.handleEvent = function(event) { 48 | switch (event.type) { 49 | case 'touchstart': this.onTouchStart(event); break; 50 | case 'touchmove': this.onTouchMove(event); break; 51 | case 'touchend': this.onClick(event); break; 52 | case 'click': this.onClick(event); break; 53 | } 54 | }; 55 | 56 | MBP.fastButton.prototype.onTouchStart = function(event) { 57 | event.stopPropagation(); 58 | this.element.addEventListener('touchend', this, false); 59 | document.body.addEventListener('touchmove', this, false); 60 | this.startX = event.touches[0].clientX; 61 | this.startY = event.touches[0].clientY; 62 | this.element.style.backgroundColor = "rgba(0,0,0,.7)"; 63 | }; 64 | 65 | MBP.fastButton.prototype.onTouchMove = function(event) { 66 | if(Math.abs(event.touches[0].clientX - this.startX) > 10 || Math.abs(event.touches[0].clientY - this.startY) > 10) { 67 | this.reset(); 68 | } 69 | }; 70 | 71 | MBP.fastButton.prototype.onClick = function(event) { 72 | event.stopPropagation(); 73 | this.reset(); 74 | this.handler(event); 75 | if(event.type == 'touchend') { 76 | MBP.preventGhostClick(this.startX, this.startY); 77 | } 78 | this.element.style.backgroundColor = ""; 79 | }; 80 | 81 | MBP.fastButton.prototype.reset = function() { 82 | this.element.removeEventListener('touchend', this, false); 83 | document.body.removeEventListener('touchmove', this, false); 84 | this.element.style.backgroundColor = ""; 85 | }; 86 | 87 | MBP.preventGhostClick = function (x, y) { 88 | MBP.coords.push(x, y); 89 | window.setTimeout(function (){ 90 | MBP.coords.splice(0, 2); 91 | }, 2500); 92 | }; 93 | 94 | MBP.ghostClickHandler = function (event) { 95 | for(var i = 0, len = MBP.coords.length; i < len; i += 2) { 96 | var x = MBP.coords[i]; 97 | var y = MBP.coords[i + 1]; 98 | if(Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) { 99 | event.stopPropagation(); 100 | event.preventDefault(); 101 | } 102 | } 103 | }; 104 | 105 | if (document.addEventListener) { 106 | document.addEventListener('click', MBP.ghostClickHandler, true); 107 | } 108 | 109 | MBP.coords = []; 110 | 111 | 112 | // iOS Startup Image 113 | // https://github.com/shichuan/mobile-html5-boilerplate/issues#issue/2 114 | 115 | MBP.splash = function () { 116 | var filename = navigator.platform === 'iPad' ? 'h/' : 'l/'; 117 | document.write('' ); 118 | }; 119 | 120 | 121 | // Autogrow 122 | // http://googlecode.blogspot.com/2009/07/gmail-for-mobile-html5-series.html 123 | 124 | MBP.autogrow = function (element, lh) { 125 | 126 | function handler(e){ 127 | var newHeight = this.scrollHeight, 128 | currentHeight = this.clientHeight; 129 | if (newHeight > currentHeight) { 130 | this.style.height = newHeight + 3 * textLineHeight + "px"; 131 | } 132 | } 133 | 134 | var setLineHeight = (lh) ? lh : 12, 135 | textLineHeight = element.currentStyle ? element.currentStyle.lineHeight : 136 | getComputedStyle(element, null).lineHeight; 137 | 138 | textLineHeight = (textLineHeight.indexOf("px") == -1) ? setLineHeight : 139 | parseInt(textLineHeight, 10); 140 | 141 | element.style.overflow = "hidden"; 142 | element.addEventListener ? element.addEventListener('keyup', handler, false) : 143 | element.attachEvent('onkeyup', handler); 144 | }; 145 | 146 | })(document); 147 | 148 | -------------------------------------------------------------------------------- /htdocs-mobile-boilerplate/common/js/libs/modernizr-custom.js: -------------------------------------------------------------------------------- 1 | /* Modernizr custom build of 1.7: backgroundsize | csstransforms | csstransforms3d | csstransitions | iepp */ 2 | /* Modernizr.load enabled */ 3 | window.Modernizr=function(a,b,c){function G(){}function F(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1),d=(a+" "+p.join(c+" ")+c).split(" ");return!!E(d,b)}function E(a,b){for(var d in a)if(k[a[d]]!==c&&(!b||b(a[d],j)))return!0}function D(a,b){return(""+a).indexOf(b)!==-1}function C(a,b){return typeof a===b}function B(a,b){return A(o.join(a+";")+(b||""))}function A(a){k.cssText=a}var d="1.7",e={},f=!0,g=b.documentElement,h=b.head||b.getElementsByTagName("head")[0],i="modernizr",j=b.createElement(i),k=j.style,l=b.createElement("input"),m=":)",n=Object.prototype.toString,o=" -webkit- -moz- -o- -ms- -khtml- ".split(" "),p="Webkit Moz O ms Khtml".split(" "),q={svg:"http://www.w3.org/2000/svg"},r={},s={},t={},u=[],v,w=function(a){var c=b.createElement("style"),d=b.createElement("div"),e;c.textContent=a+"{#modernizr{height:3px}}",h.appendChild(c),d.id="modernizr",g.appendChild(d),e=d.offsetHeight===3,c.parentNode.removeChild(c),d.parentNode.removeChild(d);return!!e},x=function(){function d(d,e){e=e||b.createElement(a[d]||"div");var f=(d="on"+d)in e;f||(e.setAttribute||(e=b.createElement("div")),e.setAttribute&&e.removeAttribute&&(e.setAttribute(d,""),f=C(e[d],"function"),C(e[d],c)||(e[d]=c),e.removeAttribute(d))),e=null;return f}var a={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return d}(),y=({}).hasOwnProperty,z;C(y,c)||C(y.call,c)?z=function(a,b){return b in a&&C(a.constructor.prototype[b],c)}:z=function(a,b){return y.call(a,b)},r.backgroundsize=function(){return F("backgroundSize")},r.csstransforms=function(){return!!E(["transformProperty","WebkitTransform","MozTransform","OTransform","msTransform"])},r.csstransforms3d=function(){var a=!!E(["perspectiveProperty","WebkitPerspective","MozPerspective","OPerspective","msPerspective"]);a&&"webkitPerspective"in g.style&&(a=w("@media ("+o.join("transform-3d),(")+"modernizr)"));return a},r.csstransitions=function(){return F("transitionProperty")};for(var H in r)z(r,H)&&(v=H.toLowerCase(),e[v]=r[H](),u.push((e[v]?"":"no-")+v));e.input||G(),e.crosswindowmessaging=e.postmessage,e.historymanagement=e.history,e.addTest=function(a,b){a=a.toLowerCase();if(!e[a]){b=!!b(),g.className+=" "+(b?"":"no-")+a,e[a]=b;return e}},A(""),j=l=null,f&&a.attachEvent&&function(){var a=b.createElement("div");a.innerHTML="hogehogehoge
36 | 37 |29 | home > pagetitle 30 |
31 | 32 |彼は背後にひそかな足音を聞いた。それはあまり良い意味を示すものではない。誰がこんな夜更けに、しかもこんな街灯のお粗末な港街の狭い小道で彼をつけて来るというのだ。人生の航路を捻じ曲げ、その獲物と共に立ち去ろうとしている、その丁度今。
47 | 48 |Webサイト開発のフロントエンドを担当します。Webサイト開発のフロントエンドを担当します。Webサイト開発のフロントエンドを担当します。
70 | 71 |27 | home > pagetitle 28 |
29 | 30 |彼は背後にひそかな足音を聞いた。それはあまり良い意味を示すものではない。誰がこんな夜更けに、しかもこんな街灯のお粗末な港街の狭い小道で彼をつけて来るというのだ。人生の航路を捻じ曲げ、その獲物と共に立ち去ろうとしている、その丁度今。
34 | 39 | 40 | 41 |彼は背後にひそかな足音を聞いた。それはあまり良い意味を示すものではない。誰がこんな夜更けに、しかもこんな街灯のお粗末な港街の狭い小道で彼をつけて来るというのだ。人生の航路を捻じ曲げ、その獲物と共に立ち去ろうとしている、その丁度今。
43 |彼は背後にひそかな足音を聞いた。それはあまり良い意味を示すものではない。誰がこんな夜更けに、しかもこんな街灯のお粗末な港街の狭い小道で彼をつけて来るというのだ。人生の航路を捻じ曲げ、その獲物と共に立ち去ろうとしている、その丁度今。
45 | 46 | 47 |彼は背後にひそかな足音を聞いた。それはあまり良い意味を示すものではない。誰がこんな夜更けに、しかもこんな街灯のお粗末な港街の狭い小道で彼をつけて来るというのだ。人生の航路を捻じ曲げ、その獲物と共に立ち去ろうとしている、その丁度今。
49 |彼は背後にひそかな足音を聞いた。それはあまり良い意味を示すものではない。誰がこんな夜更けに、しかもこんな街灯のお粗末な港街の狭い小道で彼をつけて来るというのだ。人生の航路を捻じ曲げ、その獲物と共に立ち去ろうとしている、その丁度今。
50 | 51 | 52 |彼は背後にひそかな足音を聞いた。それはあまり良い意味を示すものではない。誰がこんな夜更けに、しかもこんな街灯のお粗末な港街の狭い小道で彼をつけて来るというのだ。人生の航路を捻じ曲げ、その獲物と共に立ち去ろうとしている、その丁度今。
54 |彼は背後にひそかな足音を聞いた。それはあまり良い意味を示すものではない。誰がこんな夜更けに、しかもこんな街灯のお粗末な港街の狭い小道で彼をつけて来るというのだ。人生の航路を捻じ曲げ、その獲物と共に立ち去ろうとしている、その丁度今。
55 | 56 | 57 | 58 |Webサイト開発のフロントエンドを担当します。Webサイト開発のフロントエンドを担当します。Webサイト開発のフロントエンドを担当します。
62 | 63 |