[TASK] Styling with panels. Just en idea.

Resources/Private/Templates/Tsref/IndexVersionWithPanels.html

+<f:layout name="Default" />
+<f:section name="Javascripts"></f:section>
+
+<f:section name="Title">TypoScript reference</f:section>
+
+<f:section name="Content">
+	<link href="{f:uri.resource(package: 'SGalinski.TypoScriptReferenceFrontend', path: 'css/bootstrap.min.css')}" rel="stylesheet" />
+	<link href="{f:uri.resource(package: 'SGalinski.TypoScriptReferenceFrontend', path: 'css/dashboard.css')}" rel="stylesheet" />
+
+	<div class="container-fluid">
+		<div class="row">
+			<div class="col-sm-3 col-md-2 sidebar">
+				<ul class="nav nav-sidebar">
+					<f:for each="{types}" as="type">
+						<li class="{f:if(condition: '{selectedType.id} == {type.id}', then: 'active')}">
+							<f:link.action package="SGalinski.TypoScriptReferenceFrontend" controller="tsref" action="index"
+								arguments="{typeId: type.id}">
+								{type.id} {type.name}
+								<f:if condition="{selectedType.id} == {type.id}">
+									<span class="sr-only">(current)</span>
+								</f:if>
+							</f:link.action>
+						</li>
+					</f:for>
+				</ul>
+			</div>
+
+			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
+				<h1 class="page-header">{selectedType.name}</h1>
+
+				<p>
+					{selectedType.description}
+				</p>
+
+				<div class="row">
+					<div class="col-sm-4">
+						<div class="panel panel-success">
+							<div class="panel-heading">
+								<h3 class="panel-title">TYPO3 version range</h3>
+							</div>
+							<div class="panel-body">
+								{selectedType.minVersion} - {selectedType.maxVersion}
+							</div>
+						</div>
+					</div>
+
+					<div class="col-sm-4">
+						<div class="panel panel-success">
+							<div class="panel-heading">
+								<h3 class="panel-title">Extends</h3>
+							</div>
+							<div class="panel-body">
+								<f:link.action package="SGalinski.TypoScriptReferenceFrontend" controller="tsref" action="index"
+									arguments="{typeId: selectedType.parent_id}">
+									{superType.name}
+								</f:link.action>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<f:if condition="{properties}">
+					<h2 class="sub-header">Properties</h2>
+					<f:for each="{properties}" as="propertyIterator">
+						<div class="panel panel-info">
+							<div class="panel-heading">
+								<h3 class="panel-title">{propertyIterator.property.name}</h3>
+							</div>
+							<div class="panel-body">
+								<f:link.action package="SGalinski.TypoScriptReferenceFrontend" controller="tsref" action="index"
+									arguments="{typeId: propertyIterator.property.type_id}">
+									Type: {propertyIterator.type_name}
+								</f:link.action>
+							</div>
+						</div>
+					</f:for>
+				</f:if>
+			</div>
+		</div>
+	</div>
+</f:section>
\ No newline at end of file