further improving readme, adding generated styles to repo as gh-pages…

… will not run the grunt script

.gitignore

@@ -32,7 +32,9 @@ dwsync.xml
 publish
 .idea
 .sass-cache
-css/generated
+_site
+.jekyll
+node_modules
 
 # build script local files
 build/buildinfo.properties

Gemfile

@@ -0,0 +1,9 @@
+source 'https://rubygems.org'
+
+gem 'jekyll',     '=1.1.2'
+gem 'liquid',     '=2.5.1'
+gem 'redcarpet',  '=2.2.2'
+gem 'maruku',     '=0.6.1'
+gem 'rdiscount',  '=1.6.8'
+gem 'RedCloth',   '=4.2.9'
+gem 'kramdown',   '=1.0.2'

Gemfile.lock

@@ -0,0 +1,48 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    RedCloth (4.2.9)
+    classifier (1.3.3)
+      fast-stemmer (>= 1.0.0)
+    colorator (0.1)
+    commander (4.1.4)
+      highline (~> 1.6.11)
+    directory_watcher (1.4.1)
+    fast-stemmer (1.0.2)
+    highline (1.6.19)
+    jekyll (1.1.2)
+      classifier (~> 1.3)
+      colorator (~> 0.1)
+      commander (~> 4.1.3)
+      directory_watcher (~> 1.4.1)
+      kramdown (~> 1.0.2)
+      liquid (~> 2.5.1)
+      maruku (~> 0.5)
+      pygments.rb (~> 0.5.0)
+      redcarpet (~> 2.2.2)
+      safe_yaml (~> 0.7.0)
+    kramdown (1.0.2)
+    liquid (2.5.1)
+    maruku (0.6.1)
+      syntax (>= 1.0.0)
+    posix-spawn (0.3.6)
+    pygments.rb (0.5.2)
+      posix-spawn (~> 0.3.6)
+      yajl-ruby (~> 1.1.0)
+    rdiscount (1.6.8)
+    redcarpet (2.2.2)
+    safe_yaml (0.7.1)
+    syntax (1.0.0)
+    yajl-ruby (1.1.0)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  RedCloth (= 4.2.9)
+  jekyll (= 1.1.2)
+  kramdown (= 1.0.2)
+  liquid (= 2.5.1)
+  maruku (= 0.6.1)
+  rdiscount (= 1.6.8)
+  redcarpet (= 2.2.2)

Gruntfile.js

@@ -0,0 +1,85 @@
+/*global module:false*/
+module.exports = function(grunt) {
+    var metas = {
+        en: {
+            path: 'sections/en/',
+            files: ['_front_matter.txt', 'general.html', 'markup.html', 'css.html', 'javascript.html', 'performance.html', 'browsers.html', 'seo.html', 'codeReviews.html', 'appendices.html', 'revisionHistory.html']
+        }
+    }
+
+    function addBasePaths(basePath, fileArray){
+        var output = [];
+
+            fileArray.forEach(function(i){
+                output.push(basePath + i);
+                grunt.log.write("Including base path: " + basePath + i + '\n');//logging for debugging
+            });
+
+        return output;
+    };
+  // Project configuration.
+  grunt.initConfig({
+    // Metadata.
+    pkg: grunt.file.readJSON('package.json'),
+    // Task configuration.
+    concat: {
+      dist: {
+            src: ((function(){
+                var files = [];
+
+                files = addBasePaths(metas.en.path, metas.en.files);
+
+                return files;
+
+            })()),
+           dest: 'index.html'
+      }
+    },
+    watch: {
+      options: {
+        livereload: true,
+      },
+      css: {
+        files: ['scss/*.scss'],
+        tasks: ['compass']
+      },
+      html: {
+        files: ['sections/en/*.html'],
+        tasks: ['concat']
+      },
+      jekyll: {
+        files: ['index.html', '_layouts/*.html'],
+        tasks: ['jekyll']
+      }
+    },
+    compass: {
+      dist: {
+        options: {
+          config: 'config.rb'
+        }
+      }
+    },
+    /*todo: setup jekyll build to serve index.html*/
+    jekyll: {                             // Task
+      options: {                          // Universal options
+          bundleExec: true,
+          config: '_config.yml'
+      },
+      build: {                            
+        options: {
+          drafts: false
+        }
+      }
+    }
+  });
+
+  // These plugins provide necessary tasks.
+  grunt.loadNpmTasks('grunt-contrib-concat');
+  grunt.loadNpmTasks('grunt-contrib-compass');
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-jekyll');
+
+  // Default task.
+  grunt.registerTask('default', ['concat', 'compass', 'jekyll']);
+
+};

README.md

@@ -36,8 +36,28 @@ We hope to encourage other developers to think about how to best standardize the
 
 ## Structure of Page Content
 
-The index.php file is used to include each of the .html files contained within the /sections/[lang] directory. We have separated the different sections that make up the page into individual files so that it is easier to edit, basically making the content of the page more modular. This is also part of what we consider a best practice when dealing with large projects, as if it were an application involving lots of code, that several people work on.
+The index.html file is generated via grunt, including each of the .html files contained within the /sections/[lang] directory. We have separated the different sections that make up the page into individual files so that it is easier to edit, basically making the content of the page more modular. This is also part of what we consider a best practice when dealing with large projects, as if it were an application involving lots of code, that several people work on. index.html is then served via jekyll using the layout located in _layouts/main.html.
 
 Each of these files include content wrapped within sections. This should be self-explanatory I think. In each section, we make use of all h1-h6 heading tags multiple times since HTML5 lets you use as many as you like. Of course, we try to always use them and all other HTML5 tags appropriately, and making use of semantic tags where they are best suited.
 
+To edit the main layout, edit the file in _layouts/main.html, to edit the content edit the relevant section in the sections folder. Do not edit index.html.
+
+## Structure of CSS
+
+The CSS files are generated via compass from the scss files located in the scss folder, which is run as part of the grunt task. Because github pages only serve static content, you must push your generated files to the gh-pages branch for updates to appear. 
+
+## Getting Started with the Build process
+
+Prior to running these commands, make sure you have ruby 1.9.3 installed, ideally using RVM.
+
+Run 'npm install' from the command line of the project directory to install all the node dependencies. You may need to occasionally re-run this command as new dependencies are added.
+
+Run 'bundle install' from the command line of the project directory to install ruby's dependencies. This will allow you to build the jekyll site similiar to what we are hosting on github pages, and to run the server locally. If you get a 'command not found' error, run 'gem install bundler' then try again.
+
+Run 'grunt' from the command line of the project directory to run the build process.
+
+To run the jekyll server locally run 'jekyll serve --watch' from the command line. You can then view the site at localhost:4000. Don't forget the '--watch' option as this enables auto-regeneration of the code.
+
+We currently use the default jekyll configuration, so there is no configuration file.
+
 

_config.yml

@@ -0,0 +1 @@
+- # Jekyll configuration file. Currently we are using the defaults so this is empty. -sforst

_layouts/main.html

@@ -12,7 +12,7 @@
     <meta name=viewport content="width=device-width, initial-scale=1.0">
     <link rel="shortcut icon" href="favicon.ico"/>
     <link rel="apple-touch-icon-precomposed" href="ios-icon.png"/>
-    <link rel=stylesheet href='css/style.css'>
+    <link rel=stylesheet href='css/generated/style.css'>
     <script src="js/libs/modernizr-1.7.min.js"></script>
 </head>
     <body>
@@ -50,8 +50,8 @@ <h3 class="toc-title">Table of Contents</h3>
             </p>
         </footer>
 
-        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
-        <script>window.jQuery||document.write("<script src='js/libs/jquery-1.6.3.min.js'>\x3C/script>");</script>
+        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+        <script>window.jQuery||document.write("<script src='js/jquery-1.7.2.min.js'>\x3C/script>");</script>
         <script src='js/plugins.min.js'></script>
         <script defer src='js/script.js'></script>
 

css/generated/print.css

@@ -0,0 +1,51 @@
+/* line 1, ../../scss/print.scss */
+body {
+  width: 80%;
+  font-family: Calibri,Arial,Helvetica,sans-serif;
+}
+
+/* line 2, ../../scss/print.scss */
+header {
+  width: 100%;
+}
+
+/* line 3, ../../scss/print.scss */
+header #logo {
+  background: url("../img/isobar.png") no-repeat 0 0;
+}
+
+/* line 4, ../../scss/print.scss */
+h1, h2, h3 {
+  color: #f30;
+  position: relative;
+  margin-top: 20px;
+  font-weight: 200;
+}
+
+/* line 5, ../../scss/print.scss */
+h1 {
+  padding: 0;
+  margin: 0;
+  color: #00050a;
+}
+
+/* line 6, ../../scss/print.scss */
+header h1 a {
+  font-size: 48px;
+}
+
+/* line 6, ../../scss/print.scss */
+a, a:visited {
+  text-decoration: none;
+  color: #f30;
+}
+
+/* line 7, ../../scss/print.scss */
+body .fork, #side, header #social, canvas, .anchor_link, .backAnchor {
+  visibility: hidden;
+}
+
+/* line 8, ../../scss/print.scss */
+.syntaxhighlighter {
+  background: #ccc;
+}