SugarCube HTML#
SugarCube uses a variety of HTML elements and attributes to organize its stories.
The following are snapshots of HTML element differences between major versions in SugarCube.
SugarCube 1.X#
<body>
<div id="init-screen">
<p id="init-loading">Initializing. Please wait…<br><progress></progress></p>
</div>
<div id="ui-bar">
<header id="title" role="banner">
<div id="story-banner"></div>
<h1 id="story-title">SugarCube HTML</h1>
<div id="story-subtitle"></div>
<div id="story-title-separator"></div>
<p id="story-author"></p>
</header>
<nav id="menu" role="navigation">
<ul id="menu-core">
<li id="menu-saves"><a>Saves</a></li>
<li id="menu-restart"><a>Restart</a></li>
</ul>
</nav>
</div>
<div id="passages" role="main">
<section id="passage-untitled-passage" class="passage" data-passage="Untitled Passage" style="visibility: visible;">
<header class="header"></header>
<div class="body content">Double-click this passage to edit it.</div>
<footer class="footer"></footer>
</section>
</div>
<div id="ui-overlay" class="ui-close"></div>
<div id="ui-body"></div>
<a id="ui-body-close" class="ui-close"></a>
...
</body>
SugarCube 2.X#
<body>
<div id="init-screen">
<div id="init-loading">
<div>Loading…</div>
</div>
</div>
...
<div id="ui-overlay" class="ui-close"></div>
<div id="ui-dialog" tabindex="0" role="dialog" aria-labelledby="ui-dialog-title">
<div id="ui-dialog-titlebar">
<h1 id="ui-dialog-title"></h1>
<button id="ui-dialog-close" class="ui-close" tabindex="0" aria-label="Close"></button>
</div>
<div id="ui-dialog-body"></div>
</div>
<div id="ui-bar">
<div id="ui-bar-tray">
<button id="ui-bar-toggle" tabindex="0" title="Toggle the UI bar" aria-label="Toggle the UI bar" type="button"></button>
<div id="ui-bar-history">
<button id="history-backward" tabindex="0" title="Go backward within the game history" aria-label="Go backward within the game history" disabled="" aria-disabled="true" type="button"></button>
<button id="history-forward" tabindex="0" title="Go forward within the game history" aria-label="Go forward within the game history" disabled="" aria-disabled="true" type="button"></button>
</div>
</div>
<div id="ui-bar-body">
<header id="title" role="banner">
<div id="story-banner"></div>
<h1 id="story-title">SugarCube HTML</h1>
<div id="story-subtitle"></div>
<div id="story-title-separator"></div>
<p id="story-author"></p>
</header>
<nav id="menu" role="navigation">
<ul id="menu-core">
<li id="menu-item-saves">
<a tabindex="0">Saves</a>
</li>
<li id="menu-item-restart">
<a tabindex="0">Restart</a>
</li>
</ul>
</nav>
</div>
</div>
<div id="story" role="main">
<div id="passages">
<div id="passage-untitled-passage" data-passage="Untitled Passage" class="passage">Double-click this passage to edit it.</div>
</div>
</div>
</div>
...
</body>