Configure HTML Inspector and analytics.js

Author: philipwalton

assets/javascript/analytics.js

@@ -5,11 +5,10 @@ var parseUrl = require('./parse-url');
 
 
 var breakpoints = {
-  xs: '(max-width: 419px)',
-  sm: '(min-width: 420px) and (max-width: 569px)',
-  md: '(min-width: 570px) and (max-width: 799px)',
-  lg: '(min-width: 800px) and (max-width: 999px)',
-  xl: '(min-width: 1000px)'
+  xs: '(max-width: 383px)',
+  sm: '(min-width: 384px) and (max-width: 575px)',
+  md: '(min-width: 576px) and (max-width: 767px)',
+  lg: '(min-width: 768px)'
 };
 
 

demos/sticky-footer.md

@@ -51,7 +51,7 @@ View the full [source](https://github.com/philipwalton/solved-by-flexbox/blob/ma
 
 </div>
 
-<script>
+<script class="js-allow-before-footer">
   (function() {
     var collapseTrigger = document.getElementById("collapse-trigger");
     var collapseableContent = document.getElementById("collapsable-content");

templates/footer.html

@@ -6,7 +6,7 @@
 <div class="Footer-credits">
   <span class="Footer-credit">Created and maintained by <a href="http://philipwalton.com">Philip Walton</a>.</span>
 
-  <span class="Footer-credit">Source code and examples released under the <a href="https://github.com/philipwalton/solved-by-flexbox/blob/master/LICENSE-MIT">MIT</a> license</span>
+  <span class="Footer-credit">Source code and examples released under the <a href="https://github.com/philipwalton/solved-by-flexbox/blob/master/LICENSE-MIT">MIT</a> license.</span>
 
   <span class="Footer-credit">Website and documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</span>
 </div>

templates/google-analytics.html

@@ -0,0 +1,5 @@
+{% if env == 'dev' %}
+  <script async src="//www.google-analytics.com/analytics_debug.js"></script>
+{% else %}
+  <script async src="//www.google-analytics.com/analytics.js"></script>
+{% endif %}

templates/head.html

@@ -12,28 +12,24 @@
   <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
   <link href="/main.css" rel="stylesheet" type="text/css">
 
-  <script class="js-allow-in-head" src="//use.typekit.net/txx2jfv.js"></script>
-  <script class="js-allow-in-head">try{Typekit.load();}catch(e){}</script>
+  <script class="js-allow-before-footer" src="//use.typekit.net/txx2jfv.js"></script>
+  <script class="js-allow-before-footer">try{Typekit.load();}catch(e){}</script>
 
-
-  <script id="ga-setup">
+  <script class="js-allow-before-footer">
     // Google Analytics async snippet:
     // http://goo.gl/3FPNDx
     window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
+    ga('create', 'UA-21292978-1', 'auto');
 
-    // In non-production mode, simply log GA hits to the console.
-    // Note, tasks must be set before sending the first hit
-    ga(function(tracker) {
-      tracker.set('sendHitTask', function() {
-        // Throw to stop subsequent tasks.
-        throw 'Abort tracking in non-production environments.'
+    {% if env == 'dev' %}
+      // In non-production mode, simply log GA hits to the console.
+      // Note, tasks must be set before sending the first hit
+      ga(function(tracker) {
+        tracker.set('sendHitTask', function() {
+          // Throw to stop subsequent tasks.
+          throw 'Abort tracking in non-production environments.'
+        });
       });
-    });
-
-    // Create the GA tracker before doing any logging.
-    ga('create', 'UA-21292978-1', 'auto');
+    {% endif %}
   </script>
-
-  <script async src="//www.google-analytics.com/analytics-debug.js"></script>
-
 </head>

templates/header.html

@@ -3,7 +3,16 @@ <h1 class="Header-title"><a href="/">Solved <i>by</i> Flexbox</a></h1>
   <h2 class="Header-subTitle">Cleaner, hack-free CSS</h2>
 </div>
 <div class="Header-actions">
-  <a href="https://github.com/philipwalton/solved-by-flexbox" class="Header-button Button Button--action Button--wide"><span class="icon-github icon-large"></span>&nbsp; View Project Source</a>
-
-  <a href="http://twitter.com/intent/tweet?text={{ 'A showcase of traditionally hard CSS problems, easily solved using flexbox.' | urlencode }}&url=http://philipwalton.github.com/solved-by-flexbox/&via=philwalton" class="Header-button Button Button--wide"><span class="icon-twitter icon-large twitter-color"></span>&nbsp; Spread the Word</a>
+  <a class="Header-button Button Button--action Button--wide"
+     data-social-network="Github"
+     data-social-action="view-source"
+     href="https://github.com/philipwalton/solved-by-flexbox">
+    <span class="icon-github icon-large"></span>&nbsp; View Project Source
+  </a>
+  <a class="Header-button Button Button--wide"
+     data-social-network="Twitter"
+     data-social-action="tweet"
+     href="http://twitter.com/intent/tweet?text={{ 'A showcase of traditionally hard CSS problems, easily solved using flexbox.' | urlencode }}&url=http://philipwalton.github.com/solved-by-flexbox/&via=philwalton">
+    <span class="icon-twitter icon-large twitter-color"></span>&nbsp; Spread the Word
+  </a>
 </div>

templates/html-inspector.html

@@ -1,28 +1,16 @@
 {% if env == 'dev' %}
-
   <script src="http://cdnjs.cloudflare.com/ajax/libs/html-inspector/0.8.1/html-inspector.js"></script>
-
   <script>
-
-    HTMLInspector.rules.extend("unused-classes", function(config) {
-      config.whitelist = config.whitelist.concat([
-        // "twitter-follow-button",
-        /^icon/,
-        /^wf-/
-      ])
-      return config
+    HTMLInspector.rules.extend('unused-classes', function(config) {
+      config.whitelist = config.whitelist.concat([/^icon/, /^wf-/, /^hljs-/]);
+      return config;
     })
 
-    HTMLInspector.rules.extend("script-placement", function(config) {
-      config.whitelist = config.whitelist.concat([".js-allow-in-head"])
-      return config
-    })
-
-    // start the inspection
-    // HTMLInspector.inspect({
-    //   excludeElements: ["svg", "iframe"]
-    // })
+    HTMLInspector.rules.extend('script-placement', function(config) {
+      config.whitelist = config.whitelist.concat(['.js-allow-before-footer']);
+      return config;
+    });
 
+    HTMLInspector.inspect({excludeElements: ['svg', 'iframe']});
   </script>
-
 {% endif %}

templates/scripts.html

@@ -1,3 +1,5 @@
+<script src="/main.js"></script>
+
 {% include 'twitter.html' %}
 {% include 'html-inspector.html' %}
-<script src="/main.js"></script>
+{% include 'google-analytics.html' %}