summaryrefslogtreecommitdiff
path: root/web-ui/app
diff options
context:
space:
mode:
authorGabriel Albo <gabriel@albo.com.br>2014-08-17 18:17:43 -0300
committerGabriel Albo <gabriel@albo.com.br>2014-08-18 11:18:37 -0300
commit30cf5f32dd7efbeba77586dc28a6b4cac97ea838 (patch)
tree6425775a040f3660607e15f85605a135377d9842 /web-ui/app
parentff110f03e4bdf526e61d844e0c8296ad804d511f (diff)
Initial style guide structure
Diffstat (limited to 'web-ui/app')
-rw-r--r--web-ui/app/scss/style-guide.scss29
-rw-r--r--web-ui/app/style-guide.html106
2 files changed, 135 insertions, 0 deletions
diff --git a/web-ui/app/scss/style-guide.scss b/web-ui/app/scss/style-guide.scss
new file mode 100644
index 00000000..95f6f789
--- /dev/null
+++ b/web-ui/app/scss/style-guide.scss
@@ -0,0 +1,29 @@
+@import "compass/css3";
+
+body {
+ display: block;
+ overflow: scroll !important;
+}
+
+nav {
+ height: 50px;
+ background-color: #3e3a37;
+ color: white;
+}
+
+ul li {
+ display: inline;
+}
+
+section.guide-section {
+ display: block;
+ height: 300px;
+
+ &:nth-child(even) {
+ background: white
+ }
+
+ &:nth-child(odd) {
+ background: #E5E5E3
+ }
+}
diff --git a/web-ui/app/style-guide.html b/web-ui/app/style-guide.html
new file mode 100644
index 00000000..05faeff5
--- /dev/null
+++ b/web-ui/app/style-guide.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+<title>Pixelated Style Guide</title>
+<meta name="description" content="">
+<meta name="viewport" content="width=device-width">
+<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
+<link href="css/opensans.css" rel="stylesheet" type="text/css">
+<link href="css/news-cycle.css" rel="stylesheet" type="text/css"/>
+<link href="css/style-guide.css" rel="stylesheet" type="text/css"/>
+<link rel="stylesheet" href="../css/main.css">
+</head>
+
+<body>
+ <div id="style-guide-wrap" data-offcanvas>
+ <nav class="top-bar" data-topbar>
+
+ <ul class="left">
+ <li><span>Pixelated Style Guide</span></li>
+ </ul>
+
+ <ul class="right">
+ <li><a href="#guidelines">Guidelines</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">
+ Basic Guidelines section.
+
+ 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>
+ <section id="colors" class="guide-section">
+ Color palette.
+ </br>
+ Color palette. Primary and secondary colors.
+ </br>
+ Color palette. Primary and secondary colors.
+ </br>
+ Color palette. Primary and secondary colors.
+ </br>
+ Color palette. Primary and secondary colors.
+ </br>
+ Color palette. Primary and secondary colors.
+ </br>
+ </section>
+ <section id="typography" class="guide-section">
+ Typography. Basic references to typefaces and sizes.
+ </br>
+ Typography.
+ </br>
+ Typography.
+ </br>
+ Typography.
+ </br>
+ Typography.
+ </br>
+ Typography.
+ </br>
+ </section>
+ <section id="components" class="guide-section" name="components">
+ Example of components, such as warnings, modals, buttons, etc..
+ </br>
+ Components.
+ </br>
+ Components.
+ </br>
+ Components.
+ </br>
+ Components.
+ </br>
+ Components.
+ </br>
+ </section>
+ <section id="icons" class="guide-section" name="icons">
+ Icons - style and usage.
+ </br>
+ Icons.
+ </br>
+ Icons.
+ </br>
+ Icons.
+ </br>
+ Icons.
+ </br>
+ Icons.
+ </br>
+ </section>
+ </div>
+</body>
+</html>