Created style guide for common elements [Closes #15]

bin/www

@@ -4,7 +4,7 @@
  * Module dependencies.
  */
 
-var app = require('../server/index');
+var app = require('../server/app');
 var debug = require('debug')('src:server');
 var http = require('http');
 

front_end/public/stylesheets/styleguide.css

@@ -0,0 +1,149 @@
+.heading, .header {
+  font-family: "Didact Gothic", sans-serif;
+  text-transform: uppercase;
+  color: #466446;
+}
+
+html {
+  text-align: center;
+  padding: 20px;
+}
+
+.color, .title, .body-text, .button, .link {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border-top: 1px #BABABA solid;
+  padding-top: 10px;
+  margin-top: -15px;
+  align-items: center;
+}
+
+.title--xlarge, .title--large, .title--medium, .title--small, .title--xsmall {
+  font-family: "Didact Gothic", sans-serif;
+  text-transform: uppercase;
+}
+
+.color {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  border-top: 1px #BABABA solid;
+  padding-top: 10px;
+  margin-top: -15px;
+}
+.color__circle {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  text-align: center;
+}
+.gunmetal {
+  background-color: #3d4351;
+}
+
+.darkgreen {
+  background-color: #72a230;
+}
+
+.grey {
+  background-color: #272b34;
+}
+
+.green {
+  background-color: #8dc63f;
+}
+
+.lightgrey {
+  background-color: #6b6f78;
+}
+
+p.circle-text {
+  color: white;
+  font: 12px "Didact Gothic", sans-serif;
+  text-transform: uppercase;
+  padding: 2px;
+}
+
+.code-example {
+  background-color: #E8DEDE;
+  width: 100%;
+  border: 1px solid #BABABA;
+  color: #CB6F34;
+  font: 20px monospace;
+  padding: 5px 0px 5px 5px;
+  border-radius: 5px;
+}
+
+.code-example:hover {
+  background-color: #A08585;
+  color: white;
+}
+
+.body-text--normal {
+  color: #6B6F78;
+  font-family: "Prociono", serif;
+  letter-spacing: 1px;
+}
+
+.body-text--italic {
+  color: #6B6F78;
+  font-family: "Prociono", serif;
+  font-style: italic;
+  letter-spacing: 1px;
+}
+
+.button--success {
+  background-color: #8DC63F;
+  color: white;
+  width: 175px;
+  height: 32px;
+  border-radius: 5px;
+  text-decoration: none;
+  font-family: "Didact Gothic", sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  text-align: center;
+  padding-top: 12px;
+}
+
+.button--success:hover {
+  background-color: #72A230;
+}
+
+.button--normal {
+  background-color: #3D4351;
+  color: white;
+  width: 175px;
+  height: 32px;
+  border-radius: 5px;
+  text-decoration: none;
+  font-family: "Didact Gothic", sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  text-align: center;
+  padding-top: 12px;
+}
+
+.button--normal:hover {
+  background-color: #272B34;
+}
+
+.link--normal {
+  color: #6B6F78;
+  text-decoration: none;
+  font-family: "Didact Gothic", sans-serif;
+  text-transform: uppercase;
+}
+
+.link--normal:hover {
+  color: white;
+}
+
+.link--disabled {
+  color: #898C93;
+  text-decoration: none;
+  font-family: "Didact Gothic", sans-serif;
+  text-transform: uppercase;
+}

package.json

@@ -28,10 +28,10 @@
     "pug": "^2.0.0-beta6",
     "react": "^15.3.2",
     "react-dom": "^15.3.2",
-    "react-router": "^2.6.1"
+    "react-router": "^2.6.1",
+    "sass": "^0.5.0"
   },
   "devDependencies": {
-    "mocha": "^3.1.2",
     "babel-cli": "^6.11.4",
     "babel-core": "^6.13.2",
     "babel-preset-es2015": "^6.13.2",

routes/index.js

@@ -6,4 +6,8 @@ router.get('/', (request, response, next) => {
   response.render('index', { title: 'Lizardboard' });
 });
 
+router.get('/styleguide', ( request, response, next ) => {
+  response.render('styleguide/styleguide', { title: 'Style Guide'});
+});
+
 module.exports = router;

views/layout.pug

@@ -7,4 +7,3 @@ html
   body
     block content
   script(src="/javascripts/index.js")
-

views/styleguide/body-text.pug

@@ -0,0 +1,7 @@
+body-text
+  h2.heading Body Text
+  .body-text
+    p.body-text--normal Content text: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    .code-example p.body-text--normal
+    p.body-text--italic Quotation text: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    .code-example p.body-text--italic

views/styleguide/button.pug

@@ -0,0 +1,10 @@
+buttons
+  h2.heading Buttons
+  .button
+    a.button--success(href='#') Success button
+    br
+    .code-example a.button--success
+    br
+    a.button--normal(href='#') Normal Button
+    br
+    .code-example a.button--normal

views/styleguide/color.pug

@@ -0,0 +1,18 @@
+colors
+  h2.heading Colors
+  .color
+    .color__circle.gunmetal
+      p.circle-text Gunmetal
+      p.circle-text #3d4351
+    .color__circle.darkgreen
+      p.circle-text Dark Green
+      p.circle-text #72a230
+    .color__circle.grey
+      p.circle-text Dark Grey
+      p.circle-text #272b34
+    .color__circle.green
+      p.circle-text Green
+      p.circle-text #8dc63f
+    .color__circle.lightgrey
+      p.circle-text Grey
+      p.circle-text #6b6f78

views/styleguide/link.pug

@@ -0,0 +1,8 @@
+links
+  h2.heading Links
+  .link
+    a.link--normal(href='#') Normal Link
+    .code-example a.link--normal
+    br
+    a.link--disabled(href='#') Disabled Link
+    .code-example a.link--disabled

views/styleguide/styleguide.pug

@@ -0,0 +1,13 @@
+html
+  head
+    title= title
+    link(href='https://fonts.googleapis.com/css?family=Didact+Gothic|Prociono' rel='stylesheet' type='text/css')
+    link(rel='stylesheet', href='/stylesheets/styleguide.css')
+  block content
+    h1.header=title
+
+    include color
+    include title
+    include body-text
+    include button
+    include link

views/styleguide/title.pug

@@ -0,0 +1,13 @@
+titles
+  h2.heading Titles
+  .title
+    h1.title--xlarge Xtra Large Heading
+    .code-example h1.title--xlarge
+    h2.title--large Large Heading
+    .code-example h2.title--large
+    h3.title--medium Medium Heading
+    .code-example h3.title--medium
+    h4.title--small Small Heading
+    .code-example h4.title--small
+    h5.title--xsmall XSmall Heading
+    .code-example h5.title--xsmall

yarn.lock

@@ -2384,6 +2384,10 @@ rimraf@~2.5.1, rimraf@~2.5.4, rimraf@2:
   dependencies:
     glob "^7.0.5"
 
+sass:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-0.5.0.tgz#9dee1183a0f400361f2c5d3453bf2e54705e03f9"
+
 semver-diff@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-2.1.0.tgz#4bbb8437c8d37e4b0cf1a68fd726ec6d645d6d36"