-
-
Save alexyoung/b669a17486adda476d09 to your computer and use it in GitHub Desktop.
ChocolateChip-UI tutorial
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
<meta name="apple-mobile-web-app-capable" content="yes"> | |
<meta name="msapplication-tap-highlight" content="no"> | |
<meta charset="UTF-8"> | |
<title>Document</title> | |
<link rel="stylesheet" href="chui/chui.ios-3.0.4.min.css"> | |
<script src="chui/chocolatechip-3.0.4.min.js"></script> | |
<script src="chui/chui-3.0.4.min.js"></script> | |
</head> | |
<body> | |
<nav class="current"> | |
<h1>Fruits</h1> | |
</nav> | |
<article class="current" id="fruits"> | |
<section> | |
<ul class="list"> | |
<li class="nav"> | |
<h3>Apples</h3> | |
</li> | |
<li class="nav"> | |
<h3>Oranges</h3> | |
</li> | |
<li class="nav"> | |
<h3>Bananas</h3> | |
</li> | |
<li class="nav"> | |
<h3>Mangos</h3> | |
</li> | |
<li class="nav"> | |
<h3>Avocados</h3> | |
</li> | |
</ul> | |
</section> | |
</article> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
<meta name="apple-mobile-web-app-capable" content="yes"> | |
<meta name="msapplication-tap-highlight" content="no"> | |
<meta charset="UTF-8"> | |
<title>Document</title> | |
<link rel="stylesheet" href="chui/chui.ios-3.0.4.min.css"> | |
<script src="chui/chocolatechip-3.0.4.min.js"></script> | |
<script src="chui/chui-3.0.4.min.js"></script> | |
</head> | |
<body> | |
<nav class="current"> | |
<h1>Fruits</h1> | |
</nav> | |
<article class="current" id="fruits"> | |
<section> | |
<ul class="list"> | |
<li class="nav" data-goto="apples"> | |
<h3>Apples</h3> | |
</li> | |
<li class="nav" data-goto="oranges"> | |
<h3>Oranges</h3> | |
</li> | |
<li class="nav" data-goto="bananas"> | |
<h3>Bananas</h3> | |
</li> | |
<li class="nav" data-goto="mangos"> | |
<h3>Mangos</h3> | |
</li> | |
<li class="nav" data-goto="avocados"> | |
<h3>Avocados</h3> | |
</li> | |
</ul> | |
</section> | |
</article> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
<meta name="apple-mobile-web-app-capable" content="yes"> | |
<meta name="msapplication-tap-highlight" content="no"> | |
<meta charset="UTF-8"> | |
<title>Document</title> | |
<link rel="stylesheet" href="chui/chui.ios-3.0.4.min.css"> | |
<script src="chui/chocolatechip-3.0.4.min.js"></script> | |
<script src="chui/chui-3.0.4.min.js"></script> | |
</head> | |
<body> | |
<nav class="current"> | |
<h1>Fruits</h1> | |
</nav> | |
<article class="current" id="fruits"> | |
<section> | |
<ul class="list"> | |
<li class="nav" data-goto="apples"> | |
<h3>Apples</h3> | |
</li> | |
<li class="nav" data-goto="oranges"> | |
<h3>Oranges</h3> | |
</li> | |
<li class="nav" data-goto="bananas"> | |
<h3>Bananas</h3> | |
</li> | |
<li class="nav" data-goto="mangos"> | |
<h3>Mangos</h3> | |
</li> | |
<li class="nav" data-goto="avocados"> | |
<h3>Avocados</h3> | |
</li> | |
</ul> | |
</section> | |
</article> | |
<nav class="next"> | |
<h1>Apples</h1> | |
</nav> | |
<article id="apples" class="next"> | |
<section></section> | |
</article> | |
<nav class="next"> | |
<h1>Oranges</h1> | |
</nav> | |
<article id="oranges" class="next"> | |
<section></section> | |
</article> | |
<nav class="next"> | |
<h1>Bananas</h1> | |
</nav> | |
<article id="bananas" class="next"> | |
<section></section> | |
</article> | |
<nav class="next"> | |
<h1>Mangos</h1> | |
</nav> | |
<article id="mangos" class="next"> | |
<section></section> | |
</article> | |
<nav class="next"> | |
<h1>Avocados</h1> | |
</nav> | |
<article id="avocados" class="next"> | |
<section></section> | |
</article> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
<meta name="apple-mobile-web-app-capable" content="yes"> | |
<meta name="msapplication-tap-highlight" content="no"> | |
<meta charset="UTF-8"> | |
<title>Document</title> | |
<link rel="stylesheet" href="chui/chui.ios-3.0.4.min.css"> | |
<script src="chui/chocolatechip-3.0.4.min.js"></script> | |
<script src="chui/chui-3.0.4.min.js"></script> | |
</head> | |
<body> | |
<nav class="current"> | |
<h1>Fruits</h1> | |
</nav> | |
<article class="current" id="fruits"> | |
<section> | |
<ul class="list"> | |
<li class="nav" data-goto="apples"> | |
<h3>Apples</h3> | |
</li> | |
<li class="nav" data-goto="oranges"> | |
<h3>Oranges</h3> | |
</li> | |
<li class="nav" data-goto="bananas"> | |
<h3>Bananas</h3> | |
</li> | |
<li class="nav" data-goto="mangos"> | |
<h3>Mangos</h3> | |
</li> | |
<li class="nav" data-goto="avocados"> | |
<h3>Avocados</h3> | |
</li> | |
</ul> | |
</section> | |
</article> | |
<nav class="next"> | |
<a href="#" class="button back">Fruits</a> | |
<h1>Apples</h1> | |
</nav> | |
<article id="apples" class="next"> | |
<section></section> | |
</article> | |
<nav class="next"> | |
<a href="#" class="button back">Fruits</a> | |
<h1>Oranges</h1> | |
</nav> | |
<article id="oranges" class="next"> | |
<section></section> | |
</article> | |
<nav class="next"> | |
<a href="#" class="button back">Fruits</a> | |
<h1>Bananas</h1> | |
</nav> | |
<article id="bananas" class="next"> | |
<section></section> | |
</article> | |
<nav class="next"> | |
<a href="#" class="button back">Fruits</a> | |
<h1>Mangos</h1> | |
</nav> | |
<article id="mangos" class="next"> | |
<section></section> | |
</article> | |
<nav class="next"> | |
<a href="#" class="button back">Fruits</a> | |
<h1>Avocados</h1> | |
</nav> | |
<article id="avocados" class="next"> | |
<section></section> | |
</article> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
<meta name="apple-mobile-web-app-capable" content="yes"> | |
<meta name="msapplication-tap-highlight" content="no"> | |
<meta charset="UTF-8"> | |
<title>Document</title> | |
<link rel="stylesheet" href="chui/chui.ios-3.0.4.min.css"> | |
<script src="chui/chocolatechip-3.0.4.min.js"></script> | |
<script src="chui/chui-3.0.4.min.js"></script> | |
</head> | |
<body> | |
<nav class="current"> | |
<h1>Fruits</h1> | |
</nav> | |
<article class="current" id="fruits"> | |
<section> | |
<ul class="list"> | |
<li class="nav" data-goto="apples"> | |
<h3>Apples</h3> | |
</li> | |
<li class="nav" data-goto="oranges"> | |
<h3>Oranges</h3> | |
</li> | |
<li class="nav" data-goto="bananas"> | |
<h3>Bananas</h3> | |
</li> | |
<li class="nav" data-goto="mangos"> | |
<h3>Mangos</h3> | |
</li> | |
<li class="nav" data-goto="avocados"> | |
<h3>Avocados</h3> | |
</li> | |
</ul> | |
</section> | |
</article> | |
<nav class="next"> | |
<a href="#" class="button back">Fruits</a> | |
<h1>Apples</h1> | |
</nav> | |
<article id="apples" class="next"> | |
<section> | |
<h2>Uses</h2> | |
<ul class="list"> | |
<li> | |
<h3>Juice</h3> | |
</li> | |
<li> | |
<h3>Pastries</h3> | |
</li> | |
<li> | |
<h3>Cider</h3> | |
</li> | |
</ul> | |
</section> | |
</article> | |
<nav class="next"> | |
<a href="#" class="button back">Fruits</a> | |
<h1>Oranges</h1> | |
</nav> | |
<article id="oranges" class="next"> | |
<section> | |
<h2>Uses</h2> | |
<ul class="list"> | |
<li> | |
<h3>Juice</h3> | |
</li> | |
<li> | |
<h3>Smoothies</h3> | |
</li> | |
<li> | |
<h3>Fruit Salad</h3> | |
</li> | |
</ul> | |
</section> | |
</article> | |
<nav class="next"> | |
<a href="#" class="button back">Fruits</a> | |
<h1>Bananas</h1> | |
</nav> | |
<article id="bananas" class="next"> | |
<section> | |
<h2>Uses</h2> | |
<ul class="list"> | |
<li> | |
<h3>Smoothies</h3> | |
</li> | |
<li> | |
<h3>Fruit Salad</h3> | |
</li> | |
<li> | |
<h3>Pudding</h3> | |
</li> | |
</ul> | |
</section> | |
</article> | |
<nav class="next"> | |
<a href="#" class="button back">Fruits</a> | |
<h1>Mangos</h1> | |
</nav> | |
<article id="mangos" class="next"> | |
<section> | |
<h2>Uses</h2> | |
<ul class="list"> | |
<li> | |
<h3>Smoothies</h3> | |
</li> | |
<li> | |
<h3>Pastries</h3> | |
</li> | |
<li> | |
<h3>Fruit Salad</h3> | |
</li> | |
</ul> | |
</section> | |
</article> | |
<nav class="next"> | |
<a href="#" class="button back">Fruits</a> | |
<h1>Avocados</h1> | |
</nav> | |
<article id="avocados" class="next"> | |
<section> | |
<h2>Uses</h2> | |
<ul class="list"> | |
<li> | |
<h3>Smoothies</h3> | |
</li> | |
<li> | |
<h3>Salads</h3> | |
</li> | |
<li> | |
<h3>Fresh</h3> | |
</li> | |
</ul> | |
</section> | |
</article> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment