filebrowser-durandal-widget/app/shell.html

<div class="row-fluid">
	<aside class="col-sm-2 col-md-2">
		<div data-bind="widget: {kind:'filebrowser'}"></div>
	</aside>
	
	<main class="col-sm-10 col-md-6" id="main">
		<pre data-bind="visible: content">
			<code data-bind="attr: {css: type}, text: content" id="editor"></code>
		</pre>
		<span class="text-center" data-bind="visible: !content()">Open file to view it.</span>
	</main> 
	
	<aside class="col-sd-12 col-md-4" id="helpPane">
		<h2>Welcome to the filebrowser Durandal widget demo</h2>
		<p>
			This <a href="http://durandaljs.com/" target="_blank">Durandal</a> widget allows to display a folder tree and add some actions to manipulate this items.
			<ul>
				<li>A clic on a file or folder selects it.
				<li>A double-clic opens / closes a folder</li>
				<li>A double-clic displays the file content in the editor</li>
				<li>
					A right-clic opens a context menu with different options :
					<ul>
						<li>Rename the item</li>
						<li>Copy the selected item(s)</li>
						<li>Paste the selected item(s)</li>
						<li>Create an item (in a folder)</li>
						<li>Delete an item (and its components)</li>
					</ul>
				</li>
			</ul>
		</p>
	</aside>
</div>