diff options
| author | Gabriel Albo <gabriel@albo.com.br> | 2014-08-17 18:17:43 -0300 |
|---|---|---|
| committer | Gabriel Albo <gabriel@albo.com.br> | 2014-08-18 11:18:37 -0300 |
| commit | 30cf5f32dd7efbeba77586dc28a6b4cac97ea838 (patch) | |
| tree | 6425775a040f3660607e15f85605a135377d9842 /web-ui | |
| parent | ff110f03e4bdf526e61d844e0c8296ad804d511f (diff) | |
Initial style guide structure
Diffstat (limited to 'web-ui')
| -rw-r--r-- | web-ui/app/scss/style-guide.scss | 29 | ||||
| -rw-r--r-- | web-ui/app/style-guide.html | 106 |
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> |