Skip to content

Instantly share code, notes, and snippets.

@avk

avk/example-index.html

Created October 30, 2011 21:54
Show Gist options
  • Save avk/1326501 to your computer and use it in GitHub Desktop.
Save avk/1326501 to your computer and use it in GitHub Desktop.
Download ZIP
SaaS book build process example skeleton
Raw
example-index.html
<html>
<head></head>
<body>
<!-- cover, copyright, dedication, TOC, Foreword page divs -->
<!--
The ONLY child tags under <body> should be page divs:
<div data-role="page" id="unique-name">...</div>
The ONLY child tags under each page div should be content and footer, in that order:
<div data-role="page" id="unique-name">
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
We don't yet have any markup requirements for what's inside the content div. That may change when I do visual design but likely on a small scale.
The footer doesn't have very much flexibility. We will only be adding navigation options to it like search and bookmarks.
-->
<div data-role="page" id="chapter1-0">
<div data-role="content">
<h1>1. This is Chapter 1</h1>
<div>
Intro stuff here
</div>
</div>
<div data-role="footer" data-id="global-nav" data-position="fixed" class="ui-bar">
<div class="contents-nav" data-role="controlgroup" data-type="horizontal">
<a href="#toc" data-role="button" data-inline="true" data-icon="grid">Contents</a>
<select class="chapter-contents" data-inline="true">
<optgroup label="Chapter 1">
<option value="#chapter1-0">1.0 This is Chapter 1</option>
<option value="#chapter1-1">1.1 Overview</option>
<option value="#chapter1-2">1.2 More stuff</option>
<option value="#chapter1-3">1.3 Exercises</option>
<option value="#chapter1-ref">References In This Chapter</option>
</optgroup>
</select>
</div>
<div class="page-nav" data-role="controlgroup" data-type="horizontal" data-inline="true">
<a class="prev-page" href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">Prev</a>
<a class="next-page" href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">Next</a>
</div>
</div>
</div>
<div data-role="page" id="chapter1-1">
<div data-role="content">
<h1>1.1 Overview</h1>
<div>
Text of section 1.1
</div>
</div>
<div data-role="footer" data-id="global-nav" data-position="fixed" class="ui-bar">
<div class="contents-nav" data-role="controlgroup" data-type="horizontal">
<a href="#toc" data-role="button" data-inline="true" data-icon="grid">Contents</a>
<select class="chapter-contents" data-inline="true">
<optgroup label="Chapter 1">
<option value="#chapter1-0">1.0 This is Chapter 1</option>
<option value="#chapter1-1">1.1 Overview</option>
<option value="#chapter1-2">1.2 More stuff</option>
<option value="#chapter1-3">1.3 Exercises</option>
<option value="#chapter1-ref">References In This Chapter</option>
</optgroup>
</select>
</div>
<div class="page-nav" data-role="controlgroup" data-type="horizontal" data-inline="true">
<a class="prev-page" href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">Prev</a>
<a class="next-page" href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">Next</a>
</div>
</div>
</div>
<div data-role="page" id="chapter1-2">
<div data-role="content">
<h1>1.2 More stuff</h1>
<div>
Text of section 1.2
</div>
</div>
<div data-role="footer" data-id="global-nav" data-position="fixed" class="ui-bar">
<div class="contents-nav" data-role="controlgroup" data-type="horizontal">
<a href="#toc" data-role="button" data-inline="true" data-icon="grid">Contents</a>
<select class="chapter-contents" data-inline="true">
<optgroup label="Chapter 1">
<option value="#chapter1-0">1.0 This is Chapter 1</option>
<option value="#chapter1-1">1.1 Overview</option>
<option value="#chapter1-2">1.2 More stuff</option>
<option value="#chapter1-3">1.3 Exercises</option>
<option value="#chapter1-ref">References In This Chapter</option>
</optgroup>
</select>
</div>
<div class="page-nav" data-role="controlgroup" data-type="horizontal" data-inline="true">
<a class="prev-page" href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">Prev</a>
<a class="next-page" href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">Next</a>
</div>
</div>
</div>
<div data-role="page" id="chapter1-3">
<div data-role="content">
<h1>1.3 Exercises</h1>
<div>
Exercises
</div>
</div>
<div data-role="footer" data-id="global-nav" data-position="fixed" class="ui-bar">
<div class="contents-nav" data-role="controlgroup" data-type="horizontal">
<a href="#toc" data-role="button" data-inline="true" data-icon="grid">Contents</a>
<select class="chapter-contents" data-inline="true">
<optgroup label="Chapter 1">
<option value="#chapter1-0">1.0 This is Chapter 1</option>
<option value="#chapter1-1">1.1 Overview</option>
<option value="#chapter1-2">1.2 More stuff</option>
<option value="#chapter1-3">1.3 Exercises</option>
<option value="#chapter1-ref">References In This Chapter</option>
</optgroup>
</select>
</div>
<div class="page-nav" data-role="controlgroup" data-type="horizontal" data-inline="true">
<a class="prev-page" href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">Prev</a>
<a class="next-page" href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">Next</a>
</div>
</div>
</div>
<div data-role="page" id="chapter1-ref">
<div data-role="content">
<h1>References In This Chapter</h1>
<div>
[1] Patterson, D. "CA: AQA".
[2] etc.
</div>
</div>
<div data-role="footer" data-id="global-nav" data-position="fixed" class="ui-bar">
<div class="contents-nav" data-role="controlgroup" data-type="horizontal">
<a href="#toc" data-role="button" data-inline="true" data-icon="grid">Contents</a>
<select class="chapter-contents" data-inline="true">
<optgroup label="Chapter 1">
<option value="#chapter1-0">1.0 This is Chapter 1</option>
<option value="#chapter1-1">1.1 Overview</option>
<option value="#chapter1-2">1.2 More stuff</option>
<option value="#chapter1-3">1.3 Exercises</option>
<option value="#chapter1-ref">References In This Chapter</option>
</optgroup>
</select>
</div>
<div class="page-nav" data-role="controlgroup" data-type="horizontal" data-inline="true">
<a class="prev-page" href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">Prev</a>
<a class="next-page" href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">Next</a>
</div>
</div>
</div>
<!-- Chapter 2, 2.1, 2.2, ... 3, 4, 5, ... Appendix B pave divs -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment