Merge pull request #68 from rachelnicole/basic-styling

Basic styling

package.json

@@ -73,6 +73,7 @@
   },
   "devDependencies": {
     "ava": "^0.15.2",
+    "breakpoint-sass": "^2.7.0",
     "coveralls": "^2.11.9",
     "ghooks": "^1.2.4",
     "input-plugin-email": "0.1.0",
@@ -82,6 +83,7 @@
     "nyc": "^6.6.1",
     "punchcard-commit-msg": "^1.0.0",
     "punchcard-runner": "^2.1.2",
+    "sass-toolkit": "^2.10.0",
     "punchcard-semantic-release": "^2.0.1",
     "semantic-release": "^4.3.5",
     "supertest": "^1.2.0",

src/sass/_punchcard.scss

@@ -1,5 +1,32 @@
+////////////////////////
+// Compass Extensions
+@import 'toolkit/reset';
+@import 'toolkit';
+@import 'breakpoint';
 @import 'ibm-colors';
+////////////////////////
 
-body {
-  background: color('teal');
-}
+//////////////////////////////
+// GLOBALS
+@import 'partials/global/variables';
+@import 'partials/global/functions';
+@import 'partials/global/mixins';
+@import 'partials/global/extends';
+//////////////////////////////
+
+//////////////////////////////
+// BASE
+@import 'partials/base/content';
+//////////////////////////////
+
+//////////////////////////////
+// COMPONENTS
+@import 'partials/components/forms';
+//////////////////////////////
+
+//////////////////////////////
+// LAYOUTS
+@import 'partials/layouts/header';
+@import 'partials/layouts/footer';
+@import 'partials/layouts/login';
+//////////////////////////////

src/sass/partials/base/_content.scss

@@ -0,0 +1,46 @@
+@import 'content/variables';
+@import 'content/mixins';
+@import 'content/extends';
+
+body {
+  background-color: $white;
+  font-family: $font-stack;
+  margin: 0;
+}
+
+.wrapper {
+
+  margin: 0 auto;
+  margin-bottom: -50px;
+  margin-top: 50px;
+  min-height: 100%;
+  padding: 0 1em;
+
+  &:after {
+    content: '';
+    display: block;
+    height: 75px;
+  }
+
+  .punchcard-logomark {
+    display: block;
+    margin: 0 auto;
+    margin-top: 75px;
+    width: 250px;
+  }
+
+}
+
+.base--a {
+  color: color('teal', 60);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.base--STYLED {
+  list-style-type: none;
+  padding: 1em;
+}

src/sass/partials/components/_forms.scss

@@ -0,0 +1,26 @@
+
+// Content Forms
+.base--FORM {
+  padding: 1em 0;
+
+  .form--field {
+    display: grid;
+    grid-template-columns: auto;
+    grid-template-rows: auto;
+    padding: .5em 0;
+  }
+
+  .form--alert {
+    color: #ff0000;
+    font-size: .8em;
+  }
+
+  .form--description {
+    font-size: .8em;
+    padding: 5px 0;
+  }
+
+  fieldset {
+    margin: 1em 0;
+  }
+}

src/sass/partials/global/_variables.scss

@@ -0,0 +1,3 @@
+$font-stack:  'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
+
+$white: #fff;

src/sass/partials/layouts/_footer.scss

@@ -0,0 +1,12 @@
+.site-footer {
+  background: color('gray', 90);
+  color: $white;
+  height: 50px;
+}
+
+.footer-wrapper {
+  @include vertical-center(50%, false);
+
+  margin: 0 auto;
+  padding: 0 1em;
+}

src/sass/partials/layouts/_header.scss

@@ -0,0 +1,34 @@
+header {
+  background-color: color('gray', 90);
+  height: 75px;
+}
+
+.nav {
+
+  @include vertical-center(50%, false);
+
+  margin: 0 auto;
+
+  .punchcard-logo {
+    height: 18px;
+  }
+
+  .nav--list {
+    display: inline-flex;
+    list-style-type: none;
+  }
+
+  .nav--item {
+    flex-direction: row;
+  }
+
+  .nav--a {
+    color: $white;
+    padding: 1em;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

src/sass/partials/layouts/_login.scss

@@ -0,0 +1,18 @@
+.login--wrapper {
+  margin: 0 auto;
+  position: relative;
+  width: 300px;
+}
+
+.login--title {
+  padding: .5em 0;
+}
+
+.login--fields {
+  display: block;
+  padding: .5em 0;
+
+  > * {
+    width: 100%;
+  }
+}

views/_donut.html

@@ -11,9 +11,11 @@
     {% include "_header.html" %}
   {% endblock %}
 
-  {% block main %}
-  <div><h1>Original MAIN</h1></div>
-  {% endblock %}
+  <main class="wrapper">
+    {% block main %}
+    <div><h1>Original MAIN</h1></div>
+    {% endblock %}
+  </main>
 
   {% block footer %}
     {% include "_footer.html" %}

views/_footer.html

@@ -1,3 +1,7 @@
 {% block footer %}
-<footer>Sitewide HTML Footer</footer>
+<footer class="site-footer">
+  <div class="footer-wrapper">
+    <p>Footer Text Goes Here</p>
+  </div>
+</footer>
 {% endblock %}

views/_header.html

@@ -1,3 +1,3 @@
-<header>
+<header class="main-header">
   {% include "_nav.html" %}
 </header>

views/_nav.html

@@ -1,8 +1,9 @@
-<nav>
-  <ul>
+<nav class="nav">
+  <ul class="nav--list">
+    <li class="nav--item"><a href="/"><img src="/images/punchcard-type.svg" alt="punchcard-logo" class="punchcard-logo"></a></li>
     {% for item in nav %}
-    <li><a href="/{{item.path}}">{{item.label}}</a></li>
+    <li class="nav--item"><a href="/{{item.path}}" class="nav--a">{{item.label}}</a></li>
     {% endfor %}
-    <li><a href="/logout">logout</a></li>
+    <li class="nav--item"><a href="/logout" class="nav--a">Logout</a></li>
   </ul>
 </nav>

views/content/add.html

@@ -6,11 +6,11 @@
 
 {% block header %}
   {{ super() }}
-  <h1>{{type.name}}</h1>
-  <p>{{type.description}}</p>
 {% endblock %}
 
 {% block main %}
+  <h1>{{type.name}}</h1>
+  <p>{{type.description}}</p>
   {% include "content/form.html" %}
 {% endblock %}
 

views/content/form.html

@@ -1,4 +1,4 @@
-<form action="{{action}}" method="post" enctype="multipart/form-data" novalidate>
+<form action="{{action}}" method="post" enctype="multipart/form-data" class="base--FORM" novalidate>
 
   {{form.html | safe}}
 

views/content/home.html

@@ -7,13 +7,13 @@
 
 {% block header %}
   {{ super() }}
-  <h1>{{content.home.title}}</h1>
 {% endblock %}
 
 {% block main %}
-<ul>
+<h1 class="sub-title">{{content.home.title}}</h1>
+<ul class="base--STYLED">
   {% for type in content.types %}
-    <li><a href="/{{content.base}}/{{type.id}}">{{type.name}}</a></li>
+    <li><a href="/{{content.base}}/{{type.id}}" class="base--a">{{type.name}}</a></li>
   {% endfor %}
 </ul>
 {% endblock %}

views/content/landing.html

@@ -6,28 +6,28 @@
 
 {% block header %}
   {{ super() }}
-  <h1>{{title}}</h1>
 {% endblock %}
 
 {% block main %}
-<p><a href="/{{config.base}}/{{type.id}}/{{config.actions.add}}">{{config.base}} | {{config.actions.add}}</a></p>
+<h1>{{content.type.name}}</h1>
+<p><a href="/{{config.base}}/{{type.id}}/{{config.actions.add}}" class="base--a">{{config.base}} | {{config.actions.add}}</a></p>
 <h2>Content</h2>
 
 {% if content %}
-  <table>
+
+  <table class="base--STYLED">
     <tr><th>{{config.base}}</th><th>{{config.actions.edit}}</th><th>date</th></tr>
   {% for c in content %}
     {% if c.value %}
       <tr>
         <td>{{c.value[type.primary]}}</td>
-        <td><a href="/{{config.base}}/{{type.id}}/{{c.id}}/{{c.revision}}/{{config.actions.edit}}">{{config.actions.edit}}</a></td>
+        <td><a href="/{{config.base}}/{{type.id}}/{{c.id}}/{{c.revision}}/{{config.actions.edit}}" class="base--a">{{config.actions.edit}}</a></td>
         <td>{{c.created}}</td>
       </tr>
     {% endif %}
   {% endfor %}
   </table>
 {% endif %}
-
 {% endblock %}
 
 {% block footer %}

views/index.html

@@ -6,7 +6,7 @@
 
 {% block main %}
 <h1>{{siteName}}</h1>
-<img src="/images/bee.svg" alt="IBM Bee">
+<img src="/images/punchcard-image.svg" alt="punchcard-logomark" class="punchcard-logomark">
 {% endblock %}
 
 {% block footer %}

views/login.html

@@ -5,16 +5,31 @@
 {% endblock %}
 
 {% block header %}
-  <h1>{{title}}</h1>
+<header class="main-header">
+  <nav class="nav">
+  <ul class="nav--list">
+    <li class="nav-item"><a href="/"><img src="/images/punchcard-type.svg" alt="punchcard-logo" class="punchcard-logo"></a></li>
+  </ul>
+</nav>
+
+</header>
+
 {% endblock %}
 
 {% block main %}
-<form action="/login" method="post" novalidate>
-  {{message}}
-  <div><label for="email">Email:<input type="text" id="email" name="email"/></label></div>
-  <div><label for="password">Password:<input type="password" id="password" name="password"/></label></div>
-  <button type="submit">Submit</button>
-</form>
+<div class="login--wrapper">
+  <h1 class="login--title">{{title}}</h1>
+  <form action="/login" method="post" novalidate>
+    {{message}}
+    <div class="login--fields">
+      <label for="email">Email:<input type="text" id="email" name="email"/></label>
+    </div>
+    <div class="login--fields">
+      <label for="password">Password:<input type="password" id="password" name="password"/></label>
+    </div>
+    <button type="submit">Submit</button>
+  </form>
+</div>
 {% endblock %}
 
 {% block footer %}

views/users/_form.html

@@ -1,4 +1,4 @@
-<form action="{{action}}" method="post" enctype="multipart/form-data" novalidate>
+<form action="{{action}}" method="post" enctype="multipart/form-data" class="base--FORM" novalidate>
 
   {{form.html|safe}}
 

views/users/add.html

@@ -6,10 +6,10 @@
 
 {% block header %}
   {{ super() }}
-  <h1>{{title}}</h1>
 {% endblock %}
 
 {% block main %}
+<h1>{{title}}</h1>
   {% include "users/_form.html" %}
 {% endblock %}
 

views/users/delete.html

@@ -6,10 +6,10 @@
 
 {% block header %}
   {{ super() }}
-  <h1>{{title}}</h1>
 {% endblock %}
 
 {% block main %}
+<h1>{{title}}</h1>
 {% if message %}
 <p class="form--alert" role="alert" for="delete">{{ message }}</p>
 {% endif %}