Template
<!doctype html>
<html>
<head>
<base href="../"></base>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="icon" type="image/x-icon" href="favicon.ico"/>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<link rel="stylesheet" href="path/to/orange.min.css">
</head>
<body ontouchstart="">
<!-- header -->
<div class="or-bar or-bar-nav">
</div>
<!-- content -->
<div class="or-content">
</div>
<!-- footer -->
<footer class="or-bar or-bar-footer">
</footer>
<script type="text/javascript" src="..."></script>
</body>
</html>
Types
Title 1
Title 2
Title 3
Title 4
Paragraph...
Buttons
Bars
top and bottom bars
Header
Content
bar items
Header
tab bars
tab bars with icons
List
card view
-
A Clockwork Orange A Clockwork Orange A Clockwork Orange
-
A Clockwork Orange A Clockwork Orange A Clockwork Orange A Clockwork Orange
card list view
- Section1
- A Clockwork Orange
- A Clockwork Orange
- Section2
- A Clockwork Orange
- A Clockwork Orange
Form
Inline Form
-
-
-
Stack forms
-
-
-
Grid
colcolcolcol-50col-50col-33col-33col-33col-25col-25col-25colcolcol
Image Box
1:116:9
Segement Control
- List1
- List2
- List3
- List1
- List2
- List3
Carousel (Only Touchs)
123
$('#carouselWrapper').carousel()
Spinner
$('#showSpinner').on('tap', function() {
$('#spinnerWrapper').spinner();
});
$('#hideSpinner').on('tap', function() {
$('#spinnerWrapper').spinner('hide');
});
Dialog
todo...