summaryrefslogtreecommitdiff
path: root/web-ui/app/style-guide.html
diff options
context:
space:
mode:
authorGabriel Albo <gabriel@albo.com.br>2014-09-02 20:08:39 -0300
committerGabriel Albo <gabriel@albo.com.br>2014-09-02 20:08:53 -0300
commitb5760a9313e2007ab6785344c8b7f6aab79c6ff0 (patch)
tree094936117c83d97d26bb1dd13d22e91eca0e076d /web-ui/app/style-guide.html
parent071cfc25114952da74ac22f13036202d17d4e05d (diff)
Adding screenshot, modifying welcome session and cleaning up color grid on style guide.
Diffstat (limited to 'web-ui/app/style-guide.html')
-rw-r--r--web-ui/app/style-guide.html28
1 files changed, 11 insertions, 17 deletions
diff --git a/web-ui/app/style-guide.html b/web-ui/app/style-guide.html
index c145bd9a..4e038822 100644
--- a/web-ui/app/style-guide.html
+++ b/web-ui/app/style-guide.html
@@ -16,32 +16,26 @@
<div id="style-guide-wrap" data-offcanvas>
<nav class="top-bar" data-topbar>
<ul class="left">
- <li><a class="logo-anchor" href="#guidelines">Pixelated Style Guide</a></li>
+ <li><a class="logo-anchor" href="#welcome">Pixelated Style Guide</a></li>
</ul>
<ul class="right">
- <li><a href="#guidelines">Guidelines</a></li>
+ <li><a href="#welcome">Welcome</a></li>
<li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#components">Components</a></li>
<li><a href="#icons">Icons</a></li>
</ul>
</nav>
- <section id="guidelines" class="guide-section" name="guidelines">
- <h2>Basic Guidelines</h2>
-
- Guidelines, guidelines, guidelines.
- </br>
- Guidelines, guidelines, guidelines.
- </br>
- Guidelines, guidelines, guidelines.
- </br>
- Guidelines, guidelines, guidelines.
- </br>
- Guidelines, guidelines, guidelines.
- </br>
- Guidelines, guidelines, guidelines.
- </br>
+ <section id="welcome" class="guide-section" name="welcome">
+ <h2>Welcome to the Pixelated Style Guide</h2>
+ <p>
+ Here you'll find information about visual design and UI guidelines for Pixelated, such as colors, typography and components.
+ </p>
+ <p>
+ This is a live style guide - that means it's reflecting the actual application cascading stylesheets, but also that it will be continuously and automatically updated as our design evolves.
+ </p>
+ <img class="screenshot" src="/images/pixelated-screenshot.png" alt="Pixelated Screenshot" />
</section>
<section id="colors" class="guide-section">
<h2>Color Palette</h2>