Penthouse and inline critical CSS

.gitignore

@@ -2,3 +2,4 @@
 /css/*
 /css/*
 /bower_components/*
 /bower_components/*
 /node_modules/*
 /node_modules/*
+tmp-*.css

Gruntfile.js

@@ -90,19 +90,37 @@ module.exports = function(grunt) {
       }
       }
     },
     },
 
 
-    criticalcss: {
-        custom_options: {
+    php2html: {
+      default: {
         options: {
         options: {
-                url: "http://kevin.demo/cssoptim/index.php",
-                width: 800,
-                height: 600,
-                outputfile: "css/critical.css",
-                filename: "css/style.min.css",
-                buffer: 800*1024
-            }
+          // relative links should be renamed from .php to .html
+          processLinks: true,
+          htmlhint: false,
+        },
+        files: [
+          {expand: false, cwd: './', src: ['*.php'], dest: './', ext: '.html' }
+        ]
       }
       }
     },
     },
 
 
+    penthouse: {
+        extract : {
+            outfile : './css/critical.css',
+            css : './css/style.css',
+            url : 'http://kevin.demo/cssoptim/index.html',
+            width : 1024,
+            height : 980
+        },
+      },
+
+      inline: {
+        dist: {
+            options:{
+                cssmin: true
+            },
+            src: ['index.html'],
+        }
+    },
 /**
 /**
  * X :: Watch files for changes and act on them (recompile etc...).
  * X :: Watch files for changes and act on them (recompile etc...).
  */
  */
@@ -136,6 +154,6 @@ module.exports = function(grunt) {
   // Load necessairy grunt tasks based on npm modules.
   // Load necessairy grunt tasks based on npm modules.
   require("load-grunt-tasks")(grunt);
   require("load-grunt-tasks")(grunt);
 
 
-  grunt.registerTask('build', ['uglify', 'sass', 'concat_css', 'autoprefixer', 'cssmin', 'svgstore', 'criticalcss']);
+  grunt.registerTask('build', ['uglify', 'svgstore', 'sass', 'concat_css', 'autoprefixer', 'php2html', 'cssmin']);
   grunt.registerTask('default', ['build','watch']);
   grunt.registerTask('default', ['build','watch']);
 }
 }

index.php

@@ -4,6 +4,9 @@
     <meta charset="utf-8" />
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Demo site.</title>
     <title>Demo site.</title>
+    <link href="css/critical.css?__inline=true" rel="stylesheet" />
+
+
     <link rel="stylesheet" href="css/style.min.css" />
     <link rel="stylesheet" href="css/style.min.css" />
   </head>
   </head>
 
 
@@ -77,7 +80,7 @@ require_once ('assets/svg-defs.svg');
     <div class="row">
     <div class="row">
       <div class="large-12 columns">
       <div class="large-12 columns">
         <div class="countdown">
         <div class="countdown">
-          <h3>Countdown to DrupalCamp Ghent 2014</h3>
+          <h3>Countdown to DrupalCamp Ghent <span class="strikethrough">2014</span> 2015</h3>
           <div id="clock"></div>
           <div id="clock"></div>
           <blockquote>
           <blockquote>
 <p>Join us for a new Drupalcamp in Ghent on November 7 & 8, 2014. Our camp will be at the Campus Schoonmeersen of the Hogeschool Gent this year, walking distance from the Gent Sint-Pieters train station. We will be having multiple session tracks, codesprints and informal meetings (BoFs), which will add up to become the best Drupal event in Ghent ever!</p>
 <p>Join us for a new Drupalcamp in Ghent on November 7 & 8, 2014. Our camp will be at the Campus Schoonmeersen of the Hogeschool Gent this year, walking distance from the Gent Sint-Pieters train station. We will be having multiple session tracks, codesprints and informal meetings (BoFs), which will add up to become the best Drupal event in Ghent ever!</p>

js/app.js

@@ -8,7 +8,7 @@ $(document).ready(function() {
   });
   });
 
 
 var ringer = {
 var ringer = {
-  countdown_to: "11/07/2014",
+  countdown_to: "11/07/2015",
   rings: {
   rings: {
     'DAYS': {
     'DAYS': {
       s: 86400000, // mseconds in a day,
       s: 86400000, // mseconds in a day,

package.json

@@ -2,13 +2,18 @@
   "name": "example-grunt-css-project",
   "name": "example-grunt-css-project",
   "version": "0.0.1",
   "version": "0.0.1",
   "devDependencies": {
   "devDependencies": {
+    "criticalcss": "^0.4.5",
     "grunt": "~0.4.1",
     "grunt": "~0.4.1",
     "grunt-autoprefixer": "^1.0.1",
     "grunt-autoprefixer": "^1.0.1",
     "grunt-concat-css": "^0.3.1",
     "grunt-concat-css": "^0.3.1",
     "grunt-contrib-cssmin": "^0.10.0",
     "grunt-contrib-cssmin": "^0.10.0",
     "grunt-contrib-uglify": "^0.6.0",
     "grunt-contrib-uglify": "^0.6.0",
     "grunt-contrib-watch": "~0.5.3",
     "grunt-contrib-watch": "~0.5.3",
+    "grunt-critical": "0.0.4",
     "grunt-criticalcss": "^0.4.1",
     "grunt-criticalcss": "^0.4.1",
+    "grunt-inline": "^0.3.2",
+    "grunt-penthouse": "^0.1.2",
+    "grunt-php2html": "^0.1.17",
     "grunt-sass": "~0.8.1",
     "grunt-sass": "~0.8.1",
     "grunt-svgstore": "^0.3.5",
     "grunt-svgstore": "^0.3.5",
     "load-grunt-tasks": "^0.6.0",
     "load-grunt-tasks": "^0.6.0",

scss/_typography.scss

 h1, h2, h3 {
 h1, h2, h3 {
   text-align: center;
   text-align: center;
 }
 }
+
+.strikethrough {
+  text-decoration: line-through;
+}