Joe Saperstein coding lab

README.md

@@ -36,6 +36,28 @@ Submit a pull request when you are finished and satisfied with your work.
 
 Use this area to communicate any thought processes, ideas, or challenges you encountered.
 
-*
-*
-*
+* I am using SASS and Grunt.
+
+* The meta viewport tag was incorrect and causing the desktop site to render on my iOS simulator. I changed it and now the webpage renders as intended.
+
+* I changed the normalize.css file to normalize.scss and I'm importing it into the main.scss file so it can be minified via Grunt.
+
+* I changed the fonts as specified in the PSD, although I don't have the exact ones.
+
+* I changed the elements with IDs to classes. No need to use IDs when classes will suffice.
+
+* I chose to overwrite styles at the bottom of the stylesheet so you could see the changes more easily.
+
+* I am writing CSS for mobile screens then when the screen size is 800 or greater, that renders the desktop styles.
+
+* I set the breakpoint at 800px (50em) rather than 768px to support the new Samsung Galaxy Tabs.
+
+* I'm writing inline media queries. I've found that this method makes it easier to find where your styles are coming from for later editing.
+
+* On the PSD in the invitation section, the paragraph copy is 12px, and I made it 12px in the CSS. I feel it's too small on the screen and I'd talk with the designer about this.
+
+* HTML improvements: changed ' to ’. Changed class names to ones with more meaning, changed the second div to a section because it's a specific grouping of content.
+
+* Added JS-specific IDs to the buttons. IDs prefixed with JS- are to be used for javascript purposes, not styled. This helps with the separation of concerns.
+
+* Modal design: keep it simple, offer what's necessary for the usage: essentially, a confirmation that we've received your response. I added the orange accent color which is the hover state of the buttons for continuity.

www/.gitignore

@@ -0,0 +1 @@
+node_modules

www/Gruntfile.js

@@ -0,0 +1,81 @@
+module.exports = function(grunt) {
+
+    // 1. All configuration goes here 
+    grunt.initConfig({
+        pkg: grunt.file.readJSON('package.json'),
+
+        // concatenate JS
+        concat: {   
+            dist: {
+
+                // files to concatenate
+                src: [
+                    'js/vendor/*.js',
+                    'js/main.js',
+                    'js/plugins.js'
+                ],
+
+                // location of output file
+                dest: 'js/build/production.js',
+            }
+        },
+
+        // minify JS
+        uglify: {
+            build: {
+                src: 'js/build/production.js',
+                dest: 'js/build/production.min.js'
+            }
+        },
+
+
+        // SASS is great. minifying here too
+        sass: {
+            dist: {
+                options: {
+                    style: 'compressed'
+                },
+                files: {
+                    'css/build/main.css': 'css/main.scss'
+                }
+            } 
+        },
+
+        // if anything changes, re-generate files
+        watch: {
+            scripts: {
+                files: ['js/*.js'],
+                tasks: ['concat', 'uglify'],
+                options: {
+                    spawn: false,
+                },
+            },
+            css: {
+                files: '**/*.scss',
+                tasks: ['sass']
+            } 
+        },
+
+        // make a local server
+        connect: {
+            server: {
+                options: {
+                    port: 9999,
+                    base: '.'
+                }
+            }
+        }
+
+    });
+
+    grunt.loadNpmTasks('grunt-contrib-concat');
+    grunt.loadNpmTasks('grunt-contrib-uglify');
+    grunt.loadNpmTasks('grunt-contrib-sass');
+    grunt.loadNpmTasks('grunt-contrib-watch');
+    grunt.loadNpmTasks('grunt-contrib-connect');
+
+
+    grunt.registerTask('server', "Serve your app", [
+                           'connect:server', 'watch' ]);
+
+};