2 files changed, 126 insertions, 0 deletions
diff --git a/modules/doc/application/views/scripts/style/font.phtml b/modules/doc/application/views/scripts/style/font.phtml
new file mode 100644
index 0000000..40a70ee
--- /dev/null
+++ b/modules/doc/application/views/scripts/style/font.phtml
@@ -0,0 +1,14 @@
+<div class="controls">
+<?= $this->tabs ?>
+<h1>Icinga Web 2 Icons</h1>
+</div>
+
+<div class="content">
+<?php foreach ($this->font->glyphs as $icon): ?>
+<div class="icon <?=
+    $this->font->css_prefix_text . $icon->css
+?>">
+<?= $this->escape($icon->css) ?> <span class="icon-code">(0x<?= dechex($icon->code) ?>)</span>
+</div>
+<?php endforeach ?>
+</div>
diff --git a/modules/doc/application/views/scripts/style/guide.phtml b/modules/doc/application/views/scripts/style/guide.phtml
new file mode 100644
index 0000000..f2f57d2
--- /dev/null
+++ b/modules/doc/application/views/scripts/style/guide.phtml
@@ -0,0 +1,112 @@
+<div class="controls">
+    <?= $this->tabs ?>
+</div>
+
+<div class="content styleguide">
+    <div class="section">
+        <h1>Icinga Web 2 Design Guidelines</h1>
+
+        <ul class="toc">
+            <li><a href="#headings">Headings</a></li>
+            <li><a href="#block-content">Block Content</a></li>
+            <li><a href="#tables">Tables</a></li>
+            <li><a href="#comment-list">Comment List</a></li>
+            <li><a href="#blockquote">Blockquote</a></li>
+        </ul>
+    </div>
+
+    <div class="section">
+        <h2 id="headings">Headings</h2>
+        <h1>Header h1</h1>
+        <h2>Header h2</h2>
+        <h3>Header h3</h3>
+        <h4>Header h4</h4>
+        <h5>Header h5</h5>
+        <h6>Header h6</h6>
+    </div>
+
+    <div class="section">
+        <h2 id="block-content">Block Content</h2>
+        <h3>Paragraph</h3>
+        <p>
+            This is a paragraph. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+            invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+            dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+            A <a href="#">link inside a paragraph</a>.
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+            dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+            Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+        </p>
+    </div>
+
+    <div class="section">
+        <h2 id="tables">Tables</h2>
+        <table class="common-table">
+        <thead>
+            <tr>
+                <th>Table Head - th in thead</th>
+                <td>td in thead<td>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <th>Tbody - th</th>
+                <td>Tbody - td</td>
+            </tr>
+            <tr>
+                <th>Tbody - th</th>
+                <td>Tbody - td</td>
+            </tr>
+            <tr>
+                <th>Tbody - th</th>
+                <td>Tbody - td</td>
+            </tr>
+        </tbody>
+        </table>
+    </div>
+
+    <div class="section">
+        <h2 id="comment-list"><?= $this->translate('Comment List') ?></h2>
+        <dl class="comment-list">
+            <dt>
+                John Doe
+                <span class="comment-time">
+                    <?= $this->translate('commented') ?>
+                    <span class="relative-time"><?= $this->translate('some time ago') ?></span>
+                </span>
+                <i class="remove-action icon-cancel"></i>
+            </dt>
+            <dd>
+                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
+                <br>
+                et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+            </dd>
+            <dt>
+                Richard Roe
+                <span class="comment-time">
+                    <?= $this->translate('commented') ?>
+                    <span class="relative-time"><?= $this->translate('some time ago') ?></span>
+                </span>
+                <i class="remove-action icon-cancel"></i>
+            </dt>
+            <dd>
+                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
+                <br>
+                et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+            </dd>
+        </dl>
+    </div>
+
+    <div class="section">
+        <h2 id="blockquote"><?= $this->translate('Blockquote') ?></h2>
+        <blockquote>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+            invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+            no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+            consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
+            magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+            Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+        </blockquote>
+    </div>
+</div>