Two new media queries related rules

lib/metadata/policies.js

@@ -464,7 +464,7 @@ var policies = {
     "cssColors": {
         "tool": "phantomas",
         "label": "Colors count",
-        "message": "<p>This is the number of different colors defined in CSS.</p><p>Your CSS project will be easier to maintain if you keep a small color set.</p>",
+        "message": "<p>This is the number of different colors defined in CSS.</p><p>Your CSS will be easier to maintain if you keep a small color set.</p>",
         "isOkThreshold": 30,
         "isBadThreshold": 150,
         "isAbnormalThreshold": 400,
@@ -522,6 +522,43 @@ var policies = {
             };
         }
     },
+    "cssBreakpoints": {
+        "tool": "mediaQueriesChecker",
+        "label": "Breakpoints count",
+        "message": "<p>This is the number of different breakpoints found in the stylesheets' media queries.</p><p>Please note this rule is based on <i>min-width</i>, <i>max-width</i>, <i>min-device-width</i> and <i>max-device-width</i> media queries only.</p><p>Your CSS will be easier to maintain if you keep a reasonable number of breakpoints. Try to make a fluid design - using percents - to avoid the creation of numerous breakpoints.</p>",
+        "isOkThreshold": 6,
+        "isBadThreshold": 40,
+        "isAbnormalThreshold": 60,
+        "hasOffenders": true,
+        "offendersTransformFn": function(offenders) {
+            var offendersTable = [];
+
+            for (var offender in offenders) {
+                offendersTable.push({
+                    breakpoint: offender,
+                    count: offenders[offender].count,
+                    pixels: offenders[offender].pixels
+                });
+            }
+
+            return offendersTable;
+        }
+    },
+    "cssMobileFirst": {
+        "tool": "mediaQueriesChecker",
+        "label": "Not mobile-first media queries",
+        "message": "<p>This is the number of media queries that address small screens.</p><p>The common good practice, when creating a responsive website, is to write it \"mobile-first\". More explanation in <a href=\"http://www.sitepoint.com/introduction-mobile-first-media-queries\" target=\"_blank\">this great article</a>.</p>",
+        "isOkThreshold": 25,
+        "isBadThreshold": 200,
+        "isAbnormalThreshold": 600,
+        "hasOffenders": true,
+        "offendersTransformFn": function(offenders) {
+            return {
+                count: offenders.length,
+                list: offenders
+            };
+        }
+    },
     "cssImports": {
         "tool": "phantomas",
         "label": "Uses of @import",

lib/metadata/scoreProfileGeneric.json

@@ -71,7 +71,9 @@
                 "cssComplexSelectors": 2,
                 "cssComplexSelectorsByAttribute": 1.5,
                 "cssColors": 0.5,
-                "similarColors": 0.5
+                "similarColors": 0.5,
+                "cssBreakpoints": 1,
+                "cssMobileFirst": 1
             }
         },
         "badCSS": {