-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
127 lines (121 loc) · 8.31 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0, user-scalable=yes">
<meta name="viewport" content="width=device-height">
<meta name="apple-mobile-web-app-capable" button-content="yes">
<title>ChocolateChip-UI</title>
<link rel="stylesheet" href="css/main.css" />
<style type="text/css">
.attention {
width: 920px;
margin: 20px auto;
background-color: #fffccd;
padding: 10px 20px;
border: solid 3px #b50a00;
color: #b50a00;
}
#announcement {
width: 920px;
margin: 20px auto 0px auto;
background-color: #77c4ff;
background-color: rgba(119,196,255,0.25);
border: dashed 2px rgb(155,134,96);
padding: 10px 20px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
#announcement h2 {
background: transparent url("images/ccCookie.png") no-repeat left top;
margin: 0;
padding: 2px 0 6px 30px;
border-bottom: solid 6px #a18e80;
font-weight: normal;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
<script src="scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="scripts/emile.js" type="text/javascript"></script>
</head>
<body id="main">
<div id="header">
<div id="header-content">
<h1>ChocolateChip-UI</h1>
<h2>The Web app development framework</h2>
<h3>It's tiny, but delicious</h3>
<img id="itbd" src="images/itbd.png" alt="It's tiny, but delicious" width="247" height="79">
</div>
</div>
<div id="nav">
<ul class="menu">
<li class="selected">Home</li>
<li><a href="downloads.html" title="Click here to download ChocolateChip-UI">Downloads</a></li>
<li><a href="tutorials.html" title="Learn how to quickly and effeciently create Web apps with ChococlateChip-UI">Tutorials</a></li>
<li><a href="documentation.html" title="The lowdown on how all of this works">Documentation</a></li>
<li><a href="snippets.html" title="Use these in your IDE to speed up app building.">Snippets</a></li>
<li><a href="android.html" title="A special theme for Android devices.">Android</a></li>
<li id="chuiAbout" title='The "Why", "When" and "Who done it".'><a href="about.html">About</a></li>
</ul>
</div>
<!--[if lt IE 9]>
<div class="attention">
<h2>Attention, Your Browser is Outdated!</h2>
<p>This site is about how to build mobile Web apps for the latest mobile devices running iOS, Android, Blackberry OS and WebOS. It therefore expects browsers to support a minimum for current Web standards. Your browser is below that minimum. As such the site's functionality may be crippeled by the limitations of your browser. We recommend you come back using a more modern browser of your choice. Since your current browser is IE, you might want to upgrade to IE9 or greater.</p>
</div>
<![endif]-->
<div id="announcement">
<h2>Version 2.1</h2>
<p>ChocolateChip-UI has been completely rewritten to abstract out the differences between ChocolateChip.js, jQuery and Zepto. There is now only one version of ChocolateChip-UI. It is exactly the same for all three libraries. This means you get the exact same feature set, functionality and behavior, regardless of the library you use. ChocolateChip-UI has been updated to work with iOS versions 5 and 6, and Android versions Icecream Sandwich and Jelly Bean.</p>
<h3>Custom Builds</h3>
<p>ChocolateChip-UI now includes a build script, <strong>build.py</strong>, that allows you to create customized projects with just the assets you need. You can define a path, a project name, an OS to support, a JavaScript library, as well as whether to include an images folder and an icons folder. With icons, you can configure it to include all icons, or just the ones you want. Open the config.py file in the source folder to see what your configuration options are. You can run the build script by dragging build.py onto the terminal app and then hitting Return. The script is written in Python.</p>
</div>
<div id="content">
<div class="primary-section">
<h2>ChocolateChip-UI is ChUI (pronounced 'Chewy')</h2>
<p>ChocolateChip-UI is a framework that provides layouts and widgets with built-in functionality to enable you to quickly and easily create mobile Web apps. In some cases these require no scripting at all. You create the correct markup and ChocolateChip-UI takes care of adding the functionality, such as navigations lists, back navigation, etc. In other cases you can sometimes initialize a widget with a single line of JavaScript. This leaves you more time to find the best way to provide the data that your app will consume. Because one of our goals is to keep things as small as possible, ChocolateChip-UI uses no images to create its widgets and controls, everything is created from WAML and CSS. Where icons are used for buttons, ChocolateChip-UI uses vector-based SVG images. This means that your Web app will always be resolution independent, always crisp and clean. Enjoy the new, ChUI ChocolateChip.</p>
<p>ChocolateChip-UI can work with ChocolateChip.js, or jQuery or Zepto. Just decide which library you want to use, that's all. There is only one version of ChocolateChip-UI. It has an abstraction layer that allows it to work transparently with all three libraries. Of course, on the client side you'll need to write JavaScript appropriate for the library you've choosen. This does offer you some flexibility. Say you stated out using jQuery, and then decided you want to switch to Zepto. Piece of cake. Just switch out the jQuery for Zepto. Because the APIs are similar, you may not even need to make any changes to your client code. However, sometimes there are subtle difference so you will need to test every feature to make sure your app is working as you expect.</p>
<h3>Older Versions</h3>
<p>If you need to support iOS 4 or an Android version before 4.0, you can still get the older versions of ChocolateChip-UI from the <a href="/downloads.html">downloads page</a>.</p>
<div>
<br><br>
<h2>Some of the Possible Layouts and Controls</h2>
<img alt="" src="screenshots/buttons.png">
<img alt="" src="screenshots/activity_indicator-1.png">
<img alt="" src="screenshots/advanced_tableview-2.png">
<img alt="" src="screenshots/advanced_tableview-4.png">
<img alt="" src="screenshots/advanced_tableview-8.png">
<img alt="" src="screenshots/advanced_tableview-9.png">
<img alt="" src="screenshots/deletion_list-3.png">
<img alt="" src="screenshots/paging_control-2.png">
<img alt="" src="screenshots/SelectList.png">
<img alt="" src="screenshots/actionsheet-2.png">
<img alt="" src="screenshots/popup-2.png">
<img alt="" src="screenshots/switchcontrol.png">
<img alt="" src="screenshots/tabbar-2.png">
<img alt="" src="screenshots/tableview-simple-grouped-3.png">
<img alt="" src="screenshots/tableview-simple-grouped-4.png">
<img alt="" src="screenshots/splitview-2.png">
<img alt="" src="screenshots/splitview-4.png">
</div>
</div>
<div class="secondary-section">
<h2>Android Support</h2>
<p>You can use the Android version of ChocolateChip-UI to create apps sporting the look and feel of Android 4.0. This provides the dark Holo theme. Click the Android link in the top menu bar to learn how to use and customize it.</p>
<img alt="" src="screenshots/android/buttonss.png">
<img alt="" src="screenshots/android/layouts.png">
<img alt="" src="screenshots/android/perfumes-1s.png">
<img alt="" src="screenshots/android/perfumes-2s.png">
<p> </p>
<h2>Localization Efforts</h2>
<p>If you speak German, French, Spanish, Italian, Japanese, Chinese or any other language and would like to help translate this site with it's documentation and tutorials into to your language, please <a href="mailto:chocolatechipui@gmail.com">contact me</a>. I will supply you with the material to translate and will make your language available here as an option. Thanks for visiting.</p>
<p> </p>
<h2>Just the basics</h2>
<p>ChocolateChip is designed for mobile devices using Webkit-based browsers. Because of this, you can use any Webkit-based browser on the desktop during development. This includes Google Chrome and Apple Safari. ChocolateChip-UI provides a certain level of desktop compatiblity for testing purposes. You can also use emulators. Ultimately you'll want to test on actual devices as there are subtle differences in how desktop browsers and emulators render or react.</p>
</div>
</div>
</body>
</html>