Move towards grunt with asset relocation etc

jimniels · Apr 24, 2015 · 8d54676 · 8d54676
1 parent 0545fdd
commit 8d54676
Show file tree

Hide file tree

Showing 236 changed files with 1,286 additions and 2,408 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 *.DS_Store
 .DS_Store?
-.sass-cache
+.sass-cache
+node_modules
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -0,0 +1,68 @@
+module.exports = function(grunt) {
+
+    grunt.initConfig({
+        pkg: grunt.file.readJSON('package.json'),
+
+        compass: {
+            dist: { 
+                options: {
+                    basePath: 'assets/css',
+                    sassDir: 'src',
+                    cssDir: 'build',
+                    imagesDir: '../img/build',
+                    outputStyle: 'compressed',
+                    relativeAssets: true,
+                    force: true
+                }
+            },
+        },
+
+        'compile-handlebars': {
+            allStatic: {
+                template: 'assets/templates/*.hbs',
+                templateData: 'assets/data/nba.json',
+                output: '*.html',
+                helpers: 'assets/templates/helpers/*.js',
+                partials: 'assets/templates/partials/*.hbs'
+            }
+        },
+
+        jshint: {
+            all: ['assets/scripts/src/js.js']
+        },
+
+        watch: {
+            grunt: { 
+                files: ['Gruntfile.js'],
+                tasks: ['default']
+            },
+            handlebars: {
+                files: ['assets/templates/**/*', 'assets/data/*.json'],
+                tasks: ['compile-handlebars']
+            },
+            compass: {
+                files: ['assets/css/src/*'],
+                tasks: ['compass']
+            },
+            jshint: {
+                files: ['assets/scripts/src/js.js'],
+                tasks: ['jshint']
+            }
+        }
+    });
+
+    // Load the plugin that provides the "uglify" task.
+    grunt.loadNpmTasks('grunt-contrib-watch');
+    grunt.loadNpmTasks('grunt-contrib-compass');
+    grunt.loadNpmTasks('grunt-compile-handlebars');
+    grunt.loadNpmTasks('grunt-contrib-jshint');
+
+    // Default task(s).
+    grunt.registerTask('default', [
+        'compass', 
+        'compile-handlebars', 
+        'jshint', 
+        'watch'
+    ]);
+
+};
diff --git a/assets/css/build/styles.css b/assets/css/build/styles.css
diff --git a/assets/css/src/_colors.scss b/assets/css/src/_colors.scss
@@ -0,0 +1,107 @@
+//
+//
+//  Colors
+//  ==============================
+//  Displaying team colors and hex values
+//
+.colors {
+    @include respond-to(one-col) {
+        display: none;
+        margin-bottom: 2em;
+
+        .show & {
+            display: block;
+        }
+    }
+}
+
+.color {
+    margin: .25em 0;
+    border-radius: 3px;
+    padding: 1em .75em;
+    text-transform: uppercase;
+    border-radius: 3px;
+    font-family: $font-family-monospace;
+    color: #fff;
+    @include text-shadow(0 1px 1px rgba(0,0,0,.4));
+
+    &:hover {
+        cursor: pointer;
+    }
+
+    // 
+    //  RGB
+    //  ---
+    &.rgb {
+        &:before {
+            content: 'RGB(';
+        }
+        &:after {
+            content: ')';
+        }
+    }
+
+    // 
+    //  HEX
+    //  ---
+    &.hex {
+        &:before {
+            content: '#';
+        }
+    }
+
+    // 
+    //  CMYK
+    //  ---
+    &.cmyk {
+        &:before {
+            content: 'CMYK(';
+        }
+        &:after {
+            content: ')';
+        }
+    }
+
+    // 
+    //  Pantone
+    //  ---
+    &.pms {
+        &:before {
+            content: 'PMS ';
+        }
+    }
+}
+
+//
+//  Color Mode
+//  ---
+//  This is only for the starter HTML, hidden otherwise
+.color-mode {
+    display: none;
+}
+
+// li.team {
+//     display: none;
+// }
+// .color {
+//     display: none;
+// }
+
+
+// [data-active-league="all"] .team {
+//     display: inline-block;
+// }
+// @each $league in $leagues {
+//     [data-active-league="#{$league}"] .team[data-league="#{$league}"] {
+//         display: inline-block;
+//     }
+// }
+
+// @each $color in $colors {
+//     [data-active-color="#{$color}"] .#{$color} {
+//         display: block;
+//     }
+//     [data-active-color="#{$color}"] .team[data-colors~="#{$color}"] {
+//         display: inline-block;
+//     }  
+// }
diff --git a/css/src/_footer.scss → assets/css/src/_footer.scss b/css/src/_footer.scss → assets/css/src/_footer.scss
diff --git a/css/src/_general.scss → assets/css/src/_general.scss b/css/src/_general.scss → assets/css/src/_general.scss
diff --git a/css/src/_header.scss → assets/css/src/_header.scss b/css/src/_header.scss → assets/css/src/_header.scss
@@ -53,7 +53,6 @@
 
 .intro-authors {
     color: #aaa;
-    font-size: .825em;
 
     // De-emphasize Arc90, as it's no longer a company
     a + a {
@@ -62,14 +61,21 @@
 }
 
 .intro-description {
+    font-size: 1.25em;
+    margin-bottom: .25em;
 
     strong {
-        font-size: 2.65em;
+        font-size: 2em;
         font-weight: bold;
         display: block; 
     }
 
-    select {
-        font-size: 1em;
+    + p {
+        color: #777;
+
+        a {
+            color: inherit;
+            text-decoration: underline;
+        }
     }
 }
diff --git a/assets/css/src/_leagues.scss b/assets/css/src/_leagues.scss
@@ -0,0 +1,3 @@
+// .team {
+//     display: none;
+// }
diff --git a/css/src/_mixins.scss → assets/css/src/_mixins.scss b/css/src/_mixins.scss → assets/css/src/_mixins.scss
@@ -4,6 +4,7 @@
 //  ==============================
 //
 $leagues: nba, nfl, nhl, mlb, mls, epl;
+$colors: hex rgb cmyk pms;
 
 $font-size-base: 16;
 $font-family: 'Droid Sans', Helvetica, Arial, sans-serif;

diff --git a/css/src/_nav.scss → assets/css/src/_nav.scss b/css/src/_nav.scss → assets/css/src/_nav.scss
@@ -25,16 +25,19 @@
         }
     } 
 
-    select {
+    #select-league {
         margin-left: em(40);
-        margin-right: 1em;
 
         @include respond-to(one-col) {
             margin-top: 1em;
             margin-bottom: 1em;
             margin-left: em(30)
         }
     }
+    #select-color {
+        margin-left: 1em;
+        margin-right: 1em;
+    }
 
     input {
         width: 75%;
@@ -50,7 +53,7 @@
         }
 
         @include respond-to(two-col) {
-            width: 60%;
+            width: 55%;
         }
 
         @include respond-to(one-col) {

diff --git a/css/src/_print.scss → assets/css/src/_print.scss b/css/src/_print.scss → assets/css/src/_print.scss
diff --git a/css/src/_teams.scss → assets/css/src/_teams.scss b/css/src/_teams.scss → assets/css/src/_teams.scss
@@ -112,7 +112,7 @@
     }
 }
 
-.team__name { 
+.team-name { 
     text-transform: uppercase;
     letter-spacing: .0625em;
     font-size: .825em;
@@ -126,12 +126,13 @@
         background-position: center 0;
 
         @include respond-to(one-col) { 
-            padding: 2em 0;
+            letter-spacing: 0;
+            padding: 0 0;
             background-size: 75px;
             background-position: 0 5px;
 
             width: 75%;
-            padding-left: 25%;
+            //padding-left: 25%;
             text-align: left;
             overflow: hidden;
             text-overflow: ellipsis;

diff --git a/css/src/style.scss → assets/css/src/styles.scss b/css/src/style.scss → assets/css/src/styles.scss
@@ -10,6 +10,7 @@
 @import "mixins";
 @import "general";
 @import "colors";
+@import "leagues";
 @import "nav";
 @import "header";
 @import "teams";