Add refactor of pattern library

matthewblewitt · Apr 29, 2014 · cb4ac44 · cb4ac44
1 parent 9ab177a
commit cb4ac44
Show file tree

Hide file tree

Showing 15 changed files with 1,815 additions and 1,609 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -101,7 +101,14 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-contrib-connect');
 
   // Default task(s).
-  grunt.registerTask('default', ['imagemin','jshint','sass','autoprefixer','watch','connect']);
+  grunt.registerTask('default', [
+    'imagemin',
+    //'jshint',
+    'sass',
+    'autoprefixer',
+    'watch',
+    'connect'
+  ]);
   // grunt.registerTask('dev', []); Look into DEV register task
 
 };
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -21,7 +21,7 @@ <h1 class="title"><a href="/">{{ site.name }}</a></h1>
 
           {{ content }}
 
-          <div class="footer">
+          <div class="site-footer">
             <div class="contact">
              <p>Footer</p>
             </div>

diff --git a/_layouts/home.html b/_layouts/home.html
@@ -15,9 +15,9 @@
 
         <div class="wrapper">
 
-            <header>
+            <header class="site-header" role="banner">
 
-                <h1>Pattern Library</h1>
+                <h1 class="logo">Pattern Library</h1>
 
                 <div id="searchForm">
                   <input type="text" placeholder="keyword search" name="keyword" id="searchLinks"/><br /><br />
@@ -31,11 +31,11 @@ <h1>Pattern Library</h1>
 
             </header>
 
-            <div class="main_content">
+            <main class="main" role="main">
 
                 {{ content }}
 
-            </div>
+            </main>
 
         </div>
 

diff --git a/css/_vars.scss b/css/_vars.scss
@@ -60,22 +60,33 @@ $use-greybox:       false;
  */
 
 /**
- * Brand stuff
+ * Base stuff
  */
-
-//$brand-face:        Verdana, sans-serif;
-$brand-round:        2px;
+$base-font-size:    14px;
+$base-line-height:  20px;
 
 /**
- * Breakpoints start.
+ * Base font-family.
  */
-$lap-start:         675px;
-$desk-start:        960px;
-$desk-wide-start:   1279px;
+$base-font-family:  Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
+
 
 /**
- * Typography
+ * Font-sizes (in pixels). Refer to relevant sections for their implementations.
  */
+$giga-size:         96px!default;
+$mega-size:         72px!default;
+$kilo-size:         48px!default;
+
+$h1-size:           36px!default; // .alpha
+$h2-size:           30px!default; // .beta
+$h3-size:           24px!default; // .gamma
+$h4-size:           20px!default; // .delta
+$h5-size:           16px!default; // .epsilon
+$h6-size:           14px!default; // .zeta
+
+$milli-size:        12px!default;
+$micro-size:        10px!default;
 
 $h0-size:			48px;
 $h1-size:           36px;
@@ -85,12 +96,28 @@ $h4-size:           16px;
 $h5-size:           15px; 
 $h6-size:           14px;
 
-body{
 
-}
+/**
+ * Brand stuff
+ */
+$brand-color:       #39c!default;
+$brand-face:        Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+ // font-weight: 300;
 
 
+/**
+ * How big would you like round corners to be by default?
+ */
+$brand-round:        4px!default;
+
 
+/**
+ * Breakpoints start.
+ */
+$lap-start:         481px;
+$desk-start:        720px;
+$desk-wide-start:   960px;
 
 
 /*------------------------------------*\
@@ -100,3 +127,35 @@ body{
  * Place any of your own variables that sit on top of inuit.css here.
  */
 
+$base-margin: $base-line-height;
+$base-padding: $base-line-height;
+
+/**
+ * Custom Colors
+ */
+$base-ui-color:     #c0c0c0;
+$ui-color:          $base-ui-color; 
+$ui-color-light:    #f8f8f8; 
+$ui-color-lighter:  #fefefe; 
+
+$ui-color-dark:     #bbb; 
+
+$font-color:        #777;
+$font-color-dark:   #222;
+
+/**
+ * Custom Breakpoints
+ */
+
+@mixin breakpoint($point) {
+	@if $point == alpha {
+		@media (max-width: 960px) { @content; }
+	}
+	@else if $point == beta {
+		@media (max-width: 720px) { @content; }
+	}
+	@else if $point == gamma {
+		@media (max-width: 480px)  { @content; }
+	}
+}
+