Once Source to Rule Them All
-
Upload
david-yeiser -
Category
Design
-
view
108 -
download
2
description
Transcript of Once Source to Rule Them All
![Page 1: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/1.jpg)
REFRESH LOUISVILLEApril 20, 2010
One Source to Rule Them All.
![Page 2: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/2.jpg)
ORHow to use media queries to optimize the same markup for different devices and features.
![Page 3: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/3.jpg)
The League of Moveable Typehttp://www.theleagueofmoveabletype.com/
Reference
![Page 4: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/4.jpg)
![Page 5: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/5.jpg)
EVERY WEB DESIGNER’S QUESTION
How much should I charge per hour?
![Page 6: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/6.jpg)
EVERY WEB DESIGNER’S ANSWER
Let’s build an app.
![Page 7: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/7.jpg)
1Build for mobile first.
![Page 8: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/8.jpg)
SKETCH
![Page 9: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/9.jpg)
![Page 10: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/10.jpg)
Start building...
![Page 11: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/11.jpg)
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8" /> <title>Rate Calculator</title> <!-- iPhone specific details: http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/index.html --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" /> <!-- Base stylesheet for all devices --> <link rel="stylesheet" href="_css/base.css" media="handheld, all" /></head>
<body>
</body></html>
index.php
![Page 12: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/12.jpg)
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8" /> <title>Rate Calculator</title> <!-- iPhone specific details: http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/index.html --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" /> <!-- Base stylesheet for all devices --> <link rel="stylesheet" href="_css/base.css" media="handheld, all" /></head>
<body>
</body></html>
index.php
![Page 13: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/13.jpg)
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8" /> <title>Rate Calculator</title> <!-- iPhone specific details: http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/index.html --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" /> <!-- Base stylesheet for all devices --> <link rel="stylesheet" href="_css/base.css" media="handheld, all" /></head>
<body>
</body></html>
index.php
![Page 14: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/14.jpg)
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8" /> <title>Rate Calculator</title> <!-- iPhone specific details: http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/index.html --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" /> <!-- Base stylesheet for all devices --> <link rel="stylesheet" href="_css/base.css" media="handheld, all" /></head>
<body>
</body></html>
index.php
![Page 15: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/15.jpg)
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8" /> <title>Rate Calculator</title> <!-- iPhone specific details: http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/index.html --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" /> <!-- Base stylesheet for all devices --> <link rel="stylesheet" href="_css/base.css" media="handheld, all" /></head>
<body>
</body></html>
index.php
![Page 16: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/16.jpg)
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8" /> <title>Rate Calculator</title> <!-- iPhone specific details: http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/index.html --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" /> <!-- Base stylesheet for all devices --> <link rel="stylesheet" href="_css/base.css" media="handheld, all" /></head>
<body>
</body></html>
index.php
![Page 17: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/17.jpg)
![Page 18: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/18.jpg)
![Page 19: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/19.jpg)
![Page 20: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/20.jpg)
![Page 21: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/21.jpg)
![Page 22: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/22.jpg)
![Page 23: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/23.jpg)
Rate Calculatorhttp://designintellection.com/ratecalc/
Reference
![Page 24: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/24.jpg)
2Media queries = neat.
![Page 25: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/25.jpg)
Types & Features
Media:
![Page 26: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/26.jpg)
allscreenprinthandheldprojectionspeech3d-glasses
Types:
![Page 27: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/27.jpg)
allscreenprinthandheldprojectionspeech3d-glasses
Types:
![Page 28: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/28.jpg)
widthheightdevice-widthdevice-heightorientationaspect-ratiodevice-aspect-ratiocolorcolor-indexmonochromeresolutionscangrid
Features:
![Page 29: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/29.jpg)
max-widthmin-heightmin-device-widthmax-device-heightorientationaspect-ratiodevice-aspect-ratiocolorcolor-indexmonochromeresolutionscangrid
Features:
![Page 30: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/30.jpg)
Media Querieshttp://www.w3.org/TR/css3-mediaqueries/
Reference
![Page 31: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/31.jpg)
Detect mobile
![Page 32: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/32.jpg)
index.php<!DOCTYPE html>
<html>
<head> <meta charset="utf-8" /> <title>Rate Calculator</title> <!-- iPhone specific details: http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/index.html --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" /> <!-- Base stylesheet for all devices --> <link rel="stylesheet" href="_css/base.css" media="handheld, all" />
<!-- Conditional stylesheet for iPhone --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" /></head>
<body>
</body></html>
![Page 33: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/33.jpg)
index.php<!DOCTYPE html>
<html>
<head> <meta charset="utf-8" /> <title>Rate Calculator</title> <!-- iPhone specific details: http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/index.html --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" /> <!-- Base stylesheet for all devices --> <link rel="stylesheet" href="_css/base.css" media="handheld, all" />
<!-- Conditional stylesheet for iPhone --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" /></head>
<body>
</body></html>
![Page 34: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/34.jpg)
3HTML5 & CSS3
![Page 35: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/35.jpg)
HTML5 (briefly)
![Page 36: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/36.jpg)
index.php<div id="site" class="frame">
<section id="home-view" class="panel current nav-view"> <header id="home-title" class="identity"> <h1 class="app-name title-bar">Rate Calculator</h1> </header> <h1 id="the-hourly-rate-display" class="focus-value text-emboss layout"><span class="meta-label">$</span><strong id="the-rate"></strong><sup>.00</sup></h1> <nav id="main-nav" class="app-nav layout"> <ul> <li><a class="app-nav-item app-nav-item-current text-emboss tap-change" href="#bills">Bills</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#expenses">Expenses</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#work">Work</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#profits">Profits</a></li> </ul> </nav> <a id="read-terms-conditions" class="disclaimer-link tap-change" href="#terms-conditions">Terms <em class="amp">&</em> Conditions</a> </section>
</div>
![Page 37: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/37.jpg)
index.php<div id="site" class="frame">
<section id="home-view" class="panel current nav-view"> <header id="home-title" class="identity"> <h1 class="app-name title-bar">Rate Calculator</h1> </header> <h1 id="the-hourly-rate-display" class="focus-value text-emboss layout"><span class="meta-label">$</span><strong id="the-rate"></strong><sup>.00</sup></h1> <nav id="main-nav" class="app-nav layout"> <ul> <li><a class="app-nav-item app-nav-item-current text-emboss tap-change" href="#bills">Bills</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#expenses">Expenses</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#work">Work</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#profits">Profits</a></li> </ul> </nav> <a id="read-terms-conditions" class="disclaimer-link tap-change" href="#terms-conditions">Terms <em class="amp">&</em> Conditions</a> </section>
</div>
![Page 38: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/38.jpg)
index.php<div id="site" class="frame">
<section id="home-view" class="panel current nav-view"> <header id="home-title" class="identity"> <h1 class="app-name title-bar">Rate Calculator</h1> </header> <h1 id="the-hourly-rate-display" class="focus-value text-emboss layout"><span class="meta-label">$</span><strong id="the-rate"></strong><sup>.00</sup></h1> <nav id="main-nav" class="app-nav layout"> <ul> <li><a class="app-nav-item app-nav-item-current text-emboss tap-change" href="#bills">Bills</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#expenses">Expenses</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#work">Work</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#profits">Profits</a></li> </ul> </nav> <a id="read-terms-conditions" class="disclaimer-link tap-change" href="#terms-conditions">Terms <em class="amp">&</em> Conditions</a> </section>
</div>
![Page 39: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/39.jpg)
index.php<div id="site" class="frame">
<section id="home-view" class="panel current nav-view"> <header id="home-title" class="identity"> <h1 class="app-name title-bar">Rate Calculator</h1> </header> <h1 id="the-hourly-rate-display" class="focus-value text-emboss layout"><span class="meta-label">$</span><strong id="the-rate"></strong><sup>.00</sup></h1> <nav id="main-nav" class="app-nav layout"> <ul> <li><a class="app-nav-item app-nav-item-current text-emboss tap-change" href="#bills">Bills</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#expenses">Expenses</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#work">Work</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#profits">Profits</a></li> </ul> </nav> <a id="read-terms-conditions" class="disclaimer-link tap-change" href="#terms-conditions">Terms <em class="amp">&</em> Conditions</a> </section>
</div>
![Page 40: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/40.jpg)
Dive Into HTML5http://diveintohtml5.org/
Reference
HTML5 For Web Designershttp://books.alistapart.com/product/html5-for-web-designers
![Page 41: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/41.jpg)
CSS
![Page 42: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/42.jpg)
base.css
![Page 43: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/43.jpg)
* { margin:0; padding:0; }
body{ font-family:"Helvetica Neue", Helvetica-Neue, Helvetica, Arial, sans-serif; font-size:100%; background-color:#fff;}
.layout { display:block; }
.panel { display:block; }
header { display:block; position:relative; }ul { list-style:none; }sup { font-size:50%; }
base.css
![Page 44: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/44.jpg)
![Page 45: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/45.jpg)
mobile.css
![Page 46: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/46.jpg)
body{ overflow:hidden; background-color:#333; -webkit-text-size-adjust:none;}
.layout { width:90%; margin:0 auto; }
.focus-value{ padding:12px 0 28px 0; font-size:4em; font-weight:bold; line-height:1em; text-align:center; color:#fff;}
.meta-label { color:#555; }
mobile.css
![Page 47: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/47.jpg)
body{ overflow:hidden; background-color:#333; -webkit-text-size-adjust:none;}
.layout { width:90%; margin:0 auto; }
.focus-value{ padding:12px 0 28px 0; font-size:4em; font-weight:bold; line-height:1em; text-align:center; color:#fff;}
.meta-label { color:#555; }
mobile.css
![Page 48: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/48.jpg)
Safari Reference Libraryhttp://developer.apple.com/safari/library/navigation/index.html
Reference
![Page 49: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/49.jpg)
body{ overflow:hidden; background-color:#333; -webkit-text-size-adjust:none;}
.layout { width:90%; margin:0 auto; }
.focus-value{ padding:12px 0 28px 0; font-size:4em; font-weight:bold; line-height:1em; text-align:center; color:#fff;}
.meta-label { color:#555; }
mobile.css
![Page 50: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/50.jpg)
![Page 51: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/51.jpg)
![Page 52: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/52.jpg)
Title bar
![Page 53: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/53.jpg)
index.php
<section id="home-view" class="panel current nav-view"> <header id="home-title" class="identity"> <h1 class="app-name title-bar">Rate Calculator</h1> </header>
...
</section>
![Page 54: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/54.jpg)
index.php
<section id="home-view" class="panel current nav-view"> <header id="home-title" class="identity"> <h1 class="app-name title-bar">Rate Calculator</h1> </header>
...
</section>
![Page 55: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/55.jpg)
.title-bar{ display:block; width:90%; padding:12px 5% 16px 5%; font-size:1.125em; font-weight:bold; line-height:0.889em; text-align:center; text-shadow:-1px -1px 0 rgba(0,0,0,0.2), 1px 1px 0 rgba(255,255,255,0.2); color:#fff; border-top:1px solid #2e7d9b; border-bottom:1px solid #222; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#216c88), color-stop(0.5,#216c88), color-stop(0.5,#19627d), to(#19627d)); background-color:#19627d;}
mobile.css
![Page 56: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/56.jpg)
Before
![Page 57: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/57.jpg)
After
![Page 58: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/58.jpg)
.title-bar{ display:block; width:90%; padding:12px 5% 16px 5%; font-size:1.125em; font-weight:bold; line-height:0.889em; text-align:center; text-shadow:-1px -1px 0 rgba(0,0,0,0.2), 1px 1px 0 rgba(255,255,255,0.2); color:#fff; border-top:1px solid #2e7d9b; border-bottom:1px solid #222; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#216c88), color-stop(0.5,#216c88), color-stop(0.5,#19627d), to(#19627d)); background-color:#19627d;}
mobile.css
![Page 59: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/59.jpg)
.title-bar{ display:block; width:90%; padding:12px 5% 16px 5%; font-size:1.125em; font-weight:bold; line-height:0.889em; text-align:center; text-shadow:-1px -1px 0 rgba(0,0,0,0.2), 1px 1px 0 rgba(255,255,255,0.2); color:#fff; border-top:1px solid #2e7d9b; border-bottom:1px solid #222; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#216c88), color-stop(0.5,#216c88), color-stop(0.5,#19627d), to(#19627d)); background-color:#19627d;}
mobile.css
![Page 60: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/60.jpg)
![Page 61: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/61.jpg)
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#216c88), color-stop(0.5,#216c88), color-stop(0.5,#19627d), to(#19627d));
![Page 62: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/62.jpg)
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#216c88), color-stop(0.5,#216c88), color-stop(0.5,#19627d), to(#19627d));
![Page 63: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/63.jpg)
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#216c88), color-stop(0.5,#216c88), color-stop(0.5,#19627d), to(#19627d));
![Page 64: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/64.jpg)
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#216c88), color-stop(0.5,#216c88), color-stop(0.5,#19627d), to(#19627d));
![Page 65: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/65.jpg)
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#216c88), color-stop(0.5,#216c88), color-stop(0.5,#19627d), to(#19627d));
![Page 66: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/66.jpg)
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#216c88), color-stop(0.5,#216c88), color-stop(0.5,#19627d), to(#19627d));
![Page 67: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/67.jpg)
CSS3
Reference
![Page 68: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/68.jpg)
![Page 69: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/69.jpg)
Object Oriented CSS(Very briefly)
![Page 70: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/70.jpg)
.title-bar{ display:block; width:90%; padding:12px 5% 16px 5%; font-size:1.125em; font-weight:bold; line-height:0.889em; text-align:center; text-shadow:-1px -1px 0 rgba(0,0,0,0.2), 1px 1px 0 rgba(255,255,255,0.2); color:#fff; border-top:1px solid #2e7d9b; border-bottom:1px solid #222; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#216c88), color-stop(0.5,#216c88), color-stop(0.5,#19627d), to(#19627d)); background-color:#19627d;}
mobile.css
![Page 71: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/71.jpg)
.title-bar{ display:block; width:90%; padding:12px 5% 16px 5%; font-size:1.125em; font-weight:bold; line-height:0.889em; text-align:center; color:#fff; border-top:1px solid #2e7d9b; border-bottom:1px solid #222; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#216c88), color-stop(0.5,#216c88), color-stop(0.5,#19627d), to(#19627d)); background-color:#19627d;}
.text-emboss { text-shadow:-1px -1px 0 rgba(0,0,0,0.2), 1px 1px 0 rgba(255,255,255,0.2); }
mobile.css
![Page 72: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/72.jpg)
Object Oriented CSShttp://wiki.github.com/stubbornella/oocss/
Reference
![Page 73: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/73.jpg)
The Navigation
![Page 74: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/74.jpg)
index.php
<nav id="main-nav" class="app-nav layout"> <ul> <li><a class="app-nav-item app-nav-item-current text-emboss tap-change" href="#bills">Bills</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#expenses">Expenses</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#work">Work</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#profits">Profits</a></li> </ul> </nav>
![Page 75: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/75.jpg)
index.php
<nav id="main-nav" class="app-nav layout"> <ul> <li><a class="app-nav-item app-nav-item-current text-emboss tap-change" href="#bills">Bills</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#expenses">Expenses</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#work">Work</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#profits">Profits</a></li> </ul> </nav>
![Page 76: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/76.jpg)
.app-nav-item{ display:block; width:90%; padding:8px 5% 10px 5%; font-size:1.5em; font-weight:bold; text-decoration:none; color:#fff; border-bottom:1px solid #333; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#1c1c1c), color-stop(0.5,#1c1c1c), color-stop(0.5,#111), to(#111)); background-color:#111;}
mobile.css
![Page 77: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/77.jpg)
Before
![Page 78: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/78.jpg)
After
![Page 79: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/79.jpg)
After
![Page 80: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/80.jpg)
index.php
<a id="read-terms-conditions" class="disclaimer-link tap-change" href="#terms-conditions">Terms <em class="amp">&</em> Conditions</a>
![Page 81: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/81.jpg)
.disclaimer-link{
display:block; width:100%; padding:10px 0; position:absolute; left:0; bottom:0; font-size:0.75em; line-height:1em; text-align:center; text-decoration:none; color:#fff; background-color:rgba(0,0,0,0.2); z-index:15;
}
mobile.css
![Page 82: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/82.jpg)
![Page 83: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/83.jpg)
Select specifics...
![Page 84: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/84.jpg)
![Page 85: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/85.jpg)
![Page 86: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/86.jpg)
![Page 87: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/87.jpg)
![Page 88: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/88.jpg)
![Page 89: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/89.jpg)
index.php
<nav id="main-nav" class="app-nav layout"> <ul> <li><a class="app-nav-item app-nav-item-current text-emboss tap-change" href="#bills">Bills</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#expenses">Expenses</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#work">Work</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#profits">Profits</a></li> </ul> </nav>
![Page 90: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/90.jpg)
.app-nav li:first-child .app-nav-item{ -webkit-border-top-right-radius:10px; -webkit-border-top-left-radius:10px;}
.app-nav li:nth-child(4) .app-nav-item{ border-bottom:0; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px;}
mobile.css
![Page 91: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/91.jpg)
.app-nav li:first-child .app-nav-item{ -webkit-border-top-right-radius:10px; -webkit-border-top-left-radius:10px;}
.app-nav li:nth-child(4) .app-nav-item{ border-bottom:0; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px;}
mobile.css
![Page 92: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/92.jpg)
.app-nav li:first-child .app-nav-item{ -webkit-border-top-right-radius:10px; -webkit-border-top-left-radius:10px;}
.app-nav li:nth-child(4) .app-nav-item{ border-bottom:0; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px;}
mobile.css
![Page 93: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/93.jpg)
.app-nav li:first-child .app-nav-item{ -webkit-border-top-right-radius:10px; -webkit-border-top-left-radius:10px;}
.app-nav li:nth-child(4) .app-nav-item{ border-bottom:0; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px;}
mobile.css
![Page 94: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/94.jpg)
.app-nav li:first-child .app-nav-item{ -webkit-border-top-right-radius:10px; -webkit-border-top-left-radius:10px;}
.app-nav li:nth-child(4) .app-nav-item{ border-bottom:0; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px;}
mobile.css
![Page 95: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/95.jpg)
Before
![Page 96: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/96.jpg)
After
![Page 97: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/97.jpg)
Hover (or lack thereof)
![Page 98: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/98.jpg)
.tap-change:hover, .tap-change:active{ background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#568821), to(#568821));}
mobile.css
![Page 99: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/99.jpg)
![Page 100: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/100.jpg)
![Page 101: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/101.jpg)
![Page 102: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/102.jpg)
More markup
![Page 103: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/103.jpg)
<section id="bills" class="panel sub-view appear"> <header> <h1 class="title-bar text-emboss">Bills</h1> <a class="ui-link back-link reverse-action text-emboss tap-change" href="#home-view">Back</a> <p class="instructions copy layout">Enter monthly values, use the “misc.” value for any extra recurring monthly expenses not listed</p> <span class="clear"></span> </header> <div class="layout"> <p class="item"> <label class="amount-type text-emboss" for="rent-amount">Rent:</label> <input class="amount-value text-emboss" id="rent-amount" type="number" /> <span class="amount-choice" id="rent-slider"><span class="amount-choice-default">700</span></span> </p>
...
</div></section>
index.php
![Page 104: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/104.jpg)
<section id="bills" class="panel sub-view appear"> <header> <h1 class="title-bar text-emboss">Bills</h1> <a class="ui-link back-link reverse-action text-emboss tap-change" href="#home-view">Back</a> <p class="instructions copy layout">Enter monthly values, use the “misc.” value for any extra recurring monthly expenses not listed</p> <span class="clear"></span> </header> <div class="layout"> <p class="item"> <label class="amount-type text-emboss" for="rent-amount">Rent:</label> <input class="amount-value text-emboss" id="rent-amount" type="number" /> <span class="amount-choice" id="rent-slider"><span class="amount-choice-default">700</span></span> </p>
...
</div></section>
index.php
![Page 105: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/105.jpg)
<section id="bills" class="panel sub-view appear"> <header> <h1 class="title-bar text-emboss">Bills</h1> <a class="ui-link back-link reverse-action text-emboss tap-change" href="#home-view">Back</a> <p class="instructions copy layout">Enter monthly values, use the “misc.” value for any extra recurring monthly expenses not listed</p> <span class="clear"></span> </header> <div class="layout"> <p class="item"> <label class="amount-type text-emboss" for="rent-amount">Rent:</label> <input class="amount-value text-emboss" id="rent-amount" type="number" /> <span class="amount-choice" id="rent-slider"><span class="amount-choice-default">700</span></span> </p>
...
</div></section>
index.php
![Page 106: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/106.jpg)
<section id="bills" class="panel sub-view appear"> <header> <h1 class="title-bar text-emboss">Bills</h1> <a class="ui-link back-link reverse-action text-emboss tap-change" href="#home-view">Back</a> <p class="instructions copy layout">Enter monthly values, use the “misc.” value for any extra recurring monthly expenses not listed</p> <span class="clear"></span> </header> <div class="layout"> <p class="item"> <label class="amount-type text-emboss" for="rent-amount">Rent:</label> <input class="amount-value text-emboss" id="rent-amount" type="number" /> <span class="amount-choice" id="rent-slider"><span class="amount-choice-default">700</span></span> </p>
...
</div></section>
index.php
![Page 107: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/107.jpg)
<section id="bills" class="panel sub-view appear"> <header> <h1 class="title-bar text-emboss">Bills</h1> <a class="ui-link back-link reverse-action text-emboss tap-change" href="#home-view">Back</a> <p class="instructions copy layout">Enter monthly values, use the “misc.” value for any extra recurring monthly expenses not listed</p> <span class="clear"></span> </header> <div class="layout"> <p class="item"> <label class="amount-type text-emboss" for="rent-amount">Rent:</label> <input class="amount-value text-emboss" id="rent-amount" type="number" /> <span class="amount-choice" id="rent-slider"><span class="amount-choice-default">700</span></span> </p>
...
</div></section>
index.php
![Page 108: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/108.jpg)
<section id="bills" class="panel sub-view appear"> <header> <h1 class="title-bar text-emboss">Bills</h1> <a class="ui-link back-link reverse-action text-emboss tap-change" href="#home-view">Back</a> <p class="instructions copy layout">Enter monthly values, use the “misc.” value for any extra recurring monthly expenses not listed</p> <span class="clear"></span> </header> <div class="layout"> <p class="item"> <label class="amount-type text-emboss" for="rent-amount">Rent:</label> <input class="amount-value text-emboss" id="rent-amount" type="number" /> <span class="amount-choice" id="rent-slider"><span class="amount-choice-default">700</span></span> </p>
...
</div></section>
index.php
![Page 109: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/109.jpg)
.hidden { display:none; }
.panel { display:none; width:100%; min-height:460px; position:absolute; left:0; background-color:#333; z-index:1; }.current { display:block; z-index:7; }
.copy { padding:10px 0; font-weight:normal; color:#ccc; }
.item { display:block; padding:10px 0; clear:both; font-size:1em; line-height:1em; border-top:1px solid rgba(255,255,255,0.05); border-bottom:1px solid rgba(0,0,0,0.1); }.item:after { content:"."; display:block; height:0; overflow:hidden; visibility:hidden; clear:both; }.amount-type { display:block; width:40%; padding:3px 10% 0 0; float:left; font-size:1.125em; font-weight:bold; color:#fff; }.amount-value { display:block; width:45%; padding:5px 2.5%; float:left; font-family:"Helvetica Neue", Helvetica-Neue, Helvetica, Arial, sans-serif; font-size:2em; font-weight:bold; color:#fff; border:0; background-color:#222; -webkit-user-select:auto; -webkit-appearance:textarea; -webkit-border-radius:5px; }.amount-choice { display:none; }
mobile.css
![Page 110: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/110.jpg)
.hidden { display:none; }
.panel { display:none; width:100%; min-height:460px; position:absolute; left:0; background-color:#333; z-index:1; }.current { display:block; z-index:7; }
.copy { padding:10px 0; font-weight:normal; color:#ccc; }
.item { display:block; padding:10px 0; clear:both; font-size:1em; line-height:1em; border-top:1px solid rgba(255,255,255,0.05); border-bottom:1px solid rgba(0,0,0,0.1); }.item:after { content:"."; display:block; height:0; overflow:hidden; visibility:hidden; clear:both; }.amount-type { display:block; width:40%; padding:3px 10% 0 0; float:left; font-size:1.125em; font-weight:bold; color:#fff; }.amount-value { display:block; width:45%; padding:5px 2.5%; float:left; font-family:"Helvetica Neue", Helvetica-Neue, Helvetica, Arial, sans-serif; font-size:2em; font-weight:bold; color:#fff; border:0; background-color:#222; -webkit-user-select:auto; -webkit-appearance:textarea; -webkit-border-radius:5px; }.amount-choice { display:none; }
mobile.css
![Page 111: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/111.jpg)
Result
![Page 112: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/112.jpg)
Result
![Page 113: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/113.jpg)
<header> <h1 class="title-bar text-emboss">Bills</h1> <a class="ui-link back-link reverse-action text-emboss tap-change" href="#home-view">Back</a> <p class="instructions copy layout">Enter monthly values, use the “misc.” value for any extra recurring monthly expenses not listed</p> <span class="clear"></span> </header>
index.php
![Page 114: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/114.jpg)
<header> <h1 class="title-bar text-emboss">Bills</h1> <a class="ui-link back-link reverse-action text-emboss tap-change" href="#home-view">Back</a> <p class="instructions copy layout">Enter monthly values, use the “misc.” value for any extra recurring monthly expenses not listed</p> <span class="clear"></span> </header>
index.php
![Page 115: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/115.jpg)
mobile.css
.ui-link{ padding:5px 10px 8px 10px; font-size:0.75em; font-weight:bold; line-height:1em; text-decoration:none; color:#fff; border:1px solid #134d62; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#19627d), color-stop(0.5,#19627d), color-stop(0.5,#134d62), to(#134d62)); -webkit-border-radius:4px; -webkit-box-shadow:1px 1px 0 rgba(255,255,255,0.2);}
.reverse-action { position:absolute; top:9px; left:8px; }
.info-link { position:absolute; top:9px; right:8px; }
![Page 116: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/116.jpg)
mobile.css
.ui-link{ padding:5px 10px 8px 10px; font-size:0.75em; font-weight:bold; line-height:1em; text-decoration:none; color:#fff; border:1px solid #134d62; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#19627d), color-stop(0.5,#19627d), color-stop(0.5,#134d62), to(#134d62)); -webkit-border-radius:4px; -webkit-box-shadow:1px 1px 0 rgba(255,255,255,0.2);}
.reverse-action { position:absolute; top:9px; left:8px; }
.info-link { position:absolute; top:9px; right:8px; }
![Page 117: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/117.jpg)
Before
![Page 118: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/118.jpg)
After
![Page 119: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/119.jpg)
<input class="amount-value text-emboss" id="rent-amount" type="number" />
![Page 120: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/120.jpg)
![Page 121: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/121.jpg)
jQuery
![Page 122: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/122.jpg)
<!-- jQuery and jQuery UI --><script src="_js/jquery-1.4.2.min.js"></script><script src="_js/jquery-ui-1.8.custom.min.js"></script><script src="_js/rate-calculate.js"></script>
index.php
![Page 123: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/123.jpg)
Rudimentary...(A.K.A. I’m not a jQuery expert)
![Page 124: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/124.jpg)
index.php<script> $(document).ready(function() { $("#main-nav ul li a").click( function() { $(".app-nav-item").removeClass("app-nav-item-current"); $(this).addClass("app-nav-item-current"); var showPanel = $(this).attr("href"); $("#home-view").removeClass("reverse-in panel-appear current"); $("#home-view").addClass("slide-out"); $("section").removeClass("reverse-out panel-close appear"); $(showPanel).addClass("slide-in appear"); return false; } ); $("a.back-link").click( function() { var removePanel = '#'+$(this).parents("section").attr("id"); $(removePanel).removeClass("slide-in appear"); $(removePanel).addClass("reverse-out"); $("#home-view").removeClass("slide-out"); $("#home-view").addClass("reverse-in current"); return false; } );
});
...
</script>
![Page 125: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/125.jpg)
index.php<script> $(document).ready(function() {
...
$("#read-terms-conditions").click( function() { var showPanel = $(this).attr("href"); $("#home-view").removeClass("reverse-in panel-appear"); $(showPanel).removeClass("panel-close"); $("section").removeClass("reverse-out panel-close"); $(showPanel).addClass("slide-up panel-flip-inner"); return false; } ); $("a.close-link").click( function() { $("#terms-conditions").removeClass("slide-up"); $("#terms-conditions").addClass("panel-close"); $("#home-view").addClass("panel-appear"); return false; } ); });</script>
![Page 126: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/126.jpg)
CSS & z-index
![Page 127: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/127.jpg)
mobile.css
.slide-in { display:block; z-index:10; }
.slide-out { display:block; z-index:5; }
.reverse-in { display:block; z-index:10; }
.reverse-out { display:block; height:460px; overflow:hidden; z-index:5; }
.slide-up { display:block; z-index:10; }
.panel-close { display:block; z-index:5; }
.panel-appear { display:block; z-index:10; }
![Page 128: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/128.jpg)
mobile.css
.slide-in { display:block; z-index:10; }
.slide-out { display:block; z-index:5; }
.reverse-in { display:block; z-index:10; }
.reverse-out { display:block; height:460px; overflow:hidden; z-index:5; }
.slide-up { display:block; z-index:10; }
.panel-close { display:block; z-index:5; }
.panel-appear { display:block; z-index:10; }
![Page 129: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/129.jpg)
![Page 130: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/130.jpg)
.current{z-index:7;}
![Page 131: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/131.jpg)
.current{z-index:7;}
![Page 132: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/132.jpg)
.current{z-index:7;}
![Page 133: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/133.jpg)
.current{z-index:7;}
![Page 134: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/134.jpg)
.current{z-index:7;}
.panel(s){z-index:1;}
![Page 135: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/135.jpg)
.panel(s){z-index:1;}
![Page 136: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/136.jpg)
.panel(s){z-index:1;}
![Page 137: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/137.jpg)
.current{z-index:7;}
.panel(s){z-index:1;}
.current{z-index:7;}
.panel{z-index:1;}
.slide-in{z-index:10;}
![Page 138: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/138.jpg)
CSS transitions with no animationhttp://designintellection.com/iphone-css-transitions-with-no-animation/
Watch this video
![Page 139: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/139.jpg)
Last but not least...
![Page 140: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/140.jpg)
Animation
![Page 141: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/141.jpg)
![Page 142: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/142.jpg)
![Page 143: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/143.jpg)
.current{z-index:7;}
.current{z-index:7;}
![Page 144: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/144.jpg)
![Page 145: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/145.jpg)
![Page 146: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/146.jpg)
![Page 147: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/147.jpg)
mobile.css
.animate { -webkit-animation-timing-function:ease-in-out; -webkit-animation-duration:350ms; }.slide-in { display:block; -webkit-animation-name:slidein-fromright; z-index:10; }.slide-out { display:block; -webkit-animation-name:slideout-toleft; z-index:5; }.reverse-in { display:block; -webkit-animation-name:slidein-fromleft; z-index:10; }.reverse-out { display:block; height:460px; overflow:hidden; -webkit-animation-name:slideout-toright; z-index:5; }.slide-up { display:block; -webkit-animation-name:slideup-frombottom; z-index:10; }.panel-close { display:block; -webkit-animation-name:panel-close; z-index:5; }.panel-appear { display:block; -webkit-animation-name:panel-appear; z-index:10; }
![Page 148: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/148.jpg)
mobile.css
.animate { -webkit-animation-timing-function:ease-in-out; -webkit-animation-duration:350ms; }.slide-in { display:block; -webkit-animation-name:slidein-fromright; z-index:10; }.slide-out { display:block; -webkit-animation-name:slideout-toleft; z-index:5; }.reverse-in { display:block; -webkit-animation-name:slidein-fromleft; z-index:10; }.reverse-out { display:block; height:460px; overflow:hidden; -webkit-animation-name:slideout-toright; z-index:5; }.slide-up { display:block; -webkit-animation-name:slideup-frombottom; z-index:10; }.panel-close { display:block; -webkit-animation-name:panel-close; z-index:5; }.panel-appear { display:block; -webkit-animation-name:panel-appear; z-index:10; }
![Page 149: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/149.jpg)
mobile.css
.animate { -webkit-animation-timing-function:ease-in-out; -webkit-animation-duration:350ms; }.slide-in { display:block; -webkit-animation-name:slidein-fromright; z-index:10; }.slide-out { display:block; -webkit-animation-name:slideout-toleft; z-index:5; }.reverse-in { display:block; -webkit-animation-name:slidein-fromleft; z-index:10; }.reverse-out { display:block; height:460px; overflow:hidden; -webkit-animation-name:slideout-toright; z-index:5; }.slide-up { display:block; -webkit-animation-name:slideup-frombottom; z-index:10; }.panel-close { display:block; -webkit-animation-name:panel-close; z-index:5; }.panel-appear { display:block; -webkit-animation-name:panel-appear; z-index:10; }
![Page 150: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/150.jpg)
.current{z-index:7;}
.panel(s){z-index:1;}
.current{z-index:7;}
.panel{z-index:1;}
.slide-in{z-index:10;}
![Page 151: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/151.jpg)
mobile.css
.animate { -webkit-animation-timing-function:ease-in-out; -webkit-animation-duration:350ms; }.slide-in { display:block; -webkit-animation-name:slidein-fromright; z-index:10; }.slide-out { display:block; -webkit-animation-name:slideout-toleft; z-index:5; }.reverse-in { display:block; -webkit-animation-name:slidein-fromleft; z-index:10; }.reverse-out { display:block; height:460px; overflow:hidden; -webkit-animation-name:slideout-toright; z-index:5; }.slide-up { display:block; -webkit-animation-name:slideup-frombottom; z-index:10; }.panel-close { display:block; -webkit-animation-name:panel-close; z-index:5; }.panel-appear { display:block; -webkit-animation-name:panel-appear; z-index:10; }
![Page 152: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/152.jpg)
mobile.css
@-webkit-keyframes slidein-fromright{ from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); }}
![Page 153: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/153.jpg)
@-webkit-keyframes slidein-fromright{ from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); }}
![Page 154: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/154.jpg)
@-webkit-keyframes slidein-fromright{ from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); }}
![Page 155: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/155.jpg)
@-webkit-keyframes slidein-fromright{ from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); }}
0%
![Page 156: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/156.jpg)
@-webkit-keyframes slidein-fromright{ from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); }}
0% 100%
![Page 157: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/157.jpg)
@-webkit-keyframes slidein-fromright{ from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); }}
![Page 158: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/158.jpg)
@-webkit-keyframes slidein-fromright{ from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); }}
![Page 159: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/159.jpg)
@-webkit-keyframes slidein-fromright{ from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); }}
0% 100%
![Page 160: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/160.jpg)
@-webkit-keyframes slidein-fromright{ from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); }}
0% 100%
![Page 161: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/161.jpg)
@-webkit-keyframes slidein-fromright{ from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); }}
0% 100%
![Page 162: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/162.jpg)
mobile.css
@-webkit-keyframes slideout-toleft{ from { -webkit-transform:translateX(0%); } to { -webkit-transform:translateX(-100%); }}
![Page 163: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/163.jpg)
@-webkit-keyframes slideout-toleft{ from { -webkit-transform:translateX(0%); } to { -webkit-transform:translateX(-100%); }}
0% 100%
![Page 164: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/164.jpg)
@-webkit-keyframes slideout-toleft{ from { -webkit-transform:translateX(0%); } to { -webkit-transform:translateX(-100%); }}
0% 100%-100%
![Page 165: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/165.jpg)
@-webkit-keyframes slideout-toleft{ from { -webkit-transform:translateX(0%); } to { -webkit-transform:translateX(-100%); }}
0% 100%-100%
![Page 166: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/166.jpg)
@-webkit-keyframes slideout-toleft{ from { -webkit-transform:translateX(0%); } to { -webkit-transform:translateX(-100%); }}
0% 100%-100%
![Page 167: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/167.jpg)
@-webkit-keyframes slidein-fromright{ from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); }}
0% 100%
@-webkit-keyframes slideout-toleft{ from { -webkit-transform:translateX(0%); } to { -webkit-transform:translateX(-100%); }}
-100%
![Page 168: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/168.jpg)
@-webkit-keyframes slidein-fromright{ from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); }}
0% 100%
@-webkit-keyframes slideout-toleft{ from { -webkit-transform:translateX(0%); } to { -webkit-transform:translateX(-100%); }}
-100%
![Page 169: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/169.jpg)
CSS transitions with animationhttp://designintellection.com/iphone-css-transitions-with-animation/
Watch this video
![Page 171: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/171.jpg)
4DESKTOP VERSION
![Page 172: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/172.jpg)
Detect desktop
![Page 173: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/173.jpg)
index.php
<!-- Base stylesheet for all devices --><link rel="stylesheet" href="_css/base.css" media="handheld, all" />
<!-- Conditional stylesheet for iPhone --><link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" />
<!-- Conditional stylesheets for desktop --><link rel="stylesheet" href="_css/desktop.css" media="screen and (min-device-width:769px)" />
![Page 174: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/174.jpg)
index.php
<!-- Base stylesheet for all devices --><link rel="stylesheet" href="_css/base.css" media="handheld, all" />
<!-- Conditional stylesheet for iPhone --><link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" />
<!-- Conditional stylesheets for desktop --><link rel="stylesheet" href="_css/desktop.css" media="screen and (min-device-width:769px)" />
![Page 175: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/175.jpg)
![Page 176: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/176.jpg)
index.php
<!-- Base stylesheet for all devices --><link rel="stylesheet" href="_css/base.css" media="handheld, all" />
<!-- Conditional stylesheet for iPhone --><link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" />
<!-- Conditional stylesheets for desktop --><link rel="stylesheet" href="_css/desktop.css" media="screen and (min-device-width:769px)" />
![Page 177: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/177.jpg)
desktop.css
/* LOTS O’ STUFF */
![Page 178: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/178.jpg)
![Page 179: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/179.jpg)
5TYPOGRAPHY
![Page 180: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/180.jpg)
![Page 181: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/181.jpg)
![Page 182: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/182.jpg)
@font-face
![Page 183: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/183.jpg)
desktop.css
@font-face { font-family:'LeagueGothicRegular'; src: url('League_Gothic.eot'); src: local('League Gothic'), local('LeagueGothic'), url('League_Gothic.woff') format('woff'), url('League_Gothic.ttf') format('truetype'), url('League_Gothic.svg#LeagueGothic') format('svg');}
![Page 184: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/184.jpg)
desktop.css
@font-face { font-family:'LeagueGothicRegular'; src: url('League_Gothic.eot'); src: local('League Gothic'), local('LeagueGothic'), url('League_Gothic.woff') format('woff'), url('League_Gothic.ttf') format('truetype'), url('League_Gothic.svg#LeagueGothic') format('svg');}
![Page 185: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/185.jpg)
desktop.css
@font-face { font-family:'LeagueGothicRegular'; src: url('League_Gothic.eot'); src: local('League Gothic'), local('LeagueGothic'), url('League_Gothic.woff') format('woff'), url('League_Gothic.ttf') format('truetype'), url('League_Gothic.svg#LeagueGothic') format('svg');}
![Page 186: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/186.jpg)
desktop.css
@font-face { font-family:'LeagueGothicRegular'; src: url('League_Gothic.eot'); src: local('League Gothic'), local('LeagueGothic'), url('League_Gothic.woff') format('woff'), url('League_Gothic.ttf') format('truetype'), url('League_Gothic.svg#LeagueGothic') format('svg');}
![Page 187: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/187.jpg)
desktop.css
@font-face { font-family:'LeagueGothicRegular'; src: url('League_Gothic.eot'); src: local('League Gothic'), local('LeagueGothic'), url('League_Gothic.woff') format('woff'), url('League_Gothic.ttf') format('truetype'), url('League_Gothic.svg#LeagueGothic') format('svg');}
.title-bar { font-family:LeagueGothicRegular, "Helvetica Neue", Helvetica-Neue, Helvetica, Arial, sans-serif; }
.focus-value { font-family:LeagueGothicRegular, "Helvetica Neue", Helvetica-Neue, Helvetica, Arial, sans-serif; }
![Page 188: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/188.jpg)
![Page 189: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/189.jpg)
![Page 190: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/190.jpg)
Font Squirrelhttp://www.fontsquirrel.com/
Reference
![Page 191: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/191.jpg)
6iPad VERSION
![Page 192: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/192.jpg)
Detect iPad
![Page 193: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/193.jpg)
index.php
<!-- Base stylesheet for all devices --><link rel="stylesheet" href="_css/base.css" media="handheld, all" />
<!-- Conditional stylesheet for iPhone --><link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" />
<!-- Conditional stylesheets for desktop --><link rel="stylesheet" href="_css/desktop.css" media="screen and (min-device-width:769px)" />
<!-- Conditional stylesheets for iPad --><link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:768px)" />
![Page 194: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/194.jpg)
index.php
<!-- Base stylesheet for all devices --><link rel="stylesheet" href="_css/base.css" media="handheld, all" />
<!-- Conditional stylesheet for iPhone --><link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" />
<!-- Conditional stylesheets for desktop --><link rel="stylesheet" href="_css/desktop.css" media="screen and (min-device-width:769px)" />
<!-- Conditional stylesheets for iPad --><link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:768px)" />
![Page 195: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/195.jpg)
![Page 196: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/196.jpg)
![Page 197: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/197.jpg)
index.php
<!-- Base stylesheet for all devices --><link rel="stylesheet" href="_css/base.css" media="handheld, all" />
<!-- Conditional stylesheet for iPhone --><link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" />
<!-- Conditional stylesheets for desktop --><link rel="stylesheet" href="_css/desktop.css" media="screen and (min-device-width:769px)" />
<!-- Conditional stylesheets for iPad --><link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:768px)" /><link rel="stylesheet" href="_css/ipad-portrait.css" media="screen and (device-width:768px) and (orientation:portrait)" /><link rel="stylesheet" href="_css/ipad-landscape.css" media="screen and (device-width:768px) and (orientation:landscape)" />
![Page 198: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/198.jpg)
index.php
<!-- Base stylesheet for all devices --><link rel="stylesheet" href="_css/base.css" media="handheld, all" />
<!-- Conditional stylesheet for iPhone --><link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" />
<!-- Conditional stylesheets for desktop --><link rel="stylesheet" href="_css/desktop.css" media="screen and (min-device-width:769px)" />
<!-- Conditional stylesheets for iPad --><link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:768px)" /><link rel="stylesheet" href="_css/ipad-portrait.css" media="screen and (device-width:768px) and (orientation:portrait)" /><link rel="stylesheet" href="_css/ipad-landscape.css" media="screen and (device-width:768px) and (orientation:landscape)" />
![Page 199: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/199.jpg)
index.php
<!-- Base stylesheet for all devices --><link rel="stylesheet" href="_css/base.css" media="handheld, all" />
<!-- Conditional stylesheet for iPhone --><link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" />
<!-- Conditional stylesheets for desktop --><link rel="stylesheet" href="_css/desktop.css" media="screen and (min-device-width:769px)" />
<!-- Conditional stylesheets for iPad --><link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:768px)" /><link rel="stylesheet" href="_css/ipad-portrait.css" media="screen and (device-width:768px) and (orientation:portrait)" /><link rel="stylesheet" href="_css/ipad-landscape.css" media="screen and (device-width:768px) and (orientation:landscape)" />
![Page 200: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/200.jpg)
ipad-portait.css
![Page 201: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/201.jpg)
ipad-portait.css
.panel { min-height:946px; background:url("../_images/typewriter-dark-bg.png") center 260px no-repeat #333; }.copy { padding:20px 0; font-size:1em; line-height:1.25em; font-weight:normal; color:#ccc; }
![Page 202: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/202.jpg)
ipad-portait.css
.panel { min-height:946px; background:url("../_images/typewriter-dark-bg.png") center 260px no-repeat #333; }.copy { padding:20px 0; font-size:1em; line-height:1.25em; font-weight:normal; color:#ccc; }
![Page 203: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/203.jpg)
ipad-portait.css
.panel { min-height:946px; background:url("../_images/typewriter-dark-bg.png") center 260px no-repeat #333; }.copy { padding:20px 0; font-size:1em; line-height:1.25em; font-weight:normal; color:#ccc; }
![Page 204: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/204.jpg)
Bef
ore
![Page 205: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/205.jpg)
Aft
er
![Page 206: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/206.jpg)
ipad-landscape.css
![Page 207: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/207.jpg)
ipad-landscape.cssbody { font-size:62.5%; }
.frame { position:relative; background-color:#333; z-index:7; }
.panel { background-color:transparent; }
.slide-in { -webkit-animation-name:none; }
.slide-out { -webkit-animation-name:none; }
.reverse-in { -webkit-animation-name:none; }
.reverse-out { -webkit-animation-name:none; }
.panel { display:none; width:568px; position:absolute; left:0; background-color:#333; z-index:1; }.sub-view { display:none; margin-left:200px; }.appear { display:block; }.disappear { display:none; }.nav-view { display:block; width:200px; margin-left:0; position:absolute; left:0; top:0; }.back-link { display:none; }
.disclaimer-link { display:none; }
![Page 208: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/208.jpg)
Bef
ore
![Page 209: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/209.jpg)
Aft
er
![Page 210: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/210.jpg)
7EMOTIONAL DESIGN
![Page 211: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/211.jpg)
http://designintellection.com/ratecalc/
![Page 212: Once Source to Rule Them All](https://reader033.fdocuments.net/reader033/viewer/2022051515/54c82caa4a7959584c8b4578/html5/thumbnails/212.jpg)
THANK YOU!
David Yeiser
http://designintellection.com/
@davidyeiser