Merge pull request #291 from twbs/html-validation

add HTML5 validation Grunt task

.gitignore

@@ -32,3 +32,7 @@ nbproject
 .idea
 node_modules
 _site
+
+# grunt-html-validation
+validation-report.json
+validation-status.json

Gruntfile.js

@@ -118,6 +118,26 @@ module.exports = function(grunt) {
         ],
         tasks: ['sass']
       }
+    },
+
+    jekyll: {
+      docs: {}
+    },
+
+    validation: {
+      options: {
+        charset: 'utf-8',
+        doctype: 'HTML5',
+        failHard: true,
+        reset: true,
+        relaxerror: [
+          'Bad value apple-mobile-web-app-title for attribute name on element meta: Keyword apple-mobile-web-app-title is not registered.',
+          'Attribute ontouchstart not allowed on element body at this point.'
+        ]
+      },
+      files: {
+        src: '_site/**/*.html'
+      }
     }
   });
 
@@ -129,6 +149,7 @@ module.exports = function(grunt) {
   grunt.registerTask('dist-css', ['sass', 'cssmin']);
   grunt.registerTask('dist-js', ['concat', 'uglify']);
   grunt.registerTask('dist', ['dist-css', 'dist-js', 'banner', 'copy']);
+  grunt.registerTask('validate-html', ['jekyll', 'validation']);
   grunt.registerTask('default', ['dist']);
   grunt.registerTask('build', ['dist']);
 };

docs/_includes/footer.html

@@ -2,7 +2,7 @@
   <!-- Social links -->
   <ul class="social">
     <li>
-      <iframe src="http://ghbtns.com/github-btn.html?user=twbs&repo=ratchet&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
+      <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&amp;repo=ratchet&amp;type=watch&amp;count=true" width="100" height="20"></iframe>
     </li>
     <li>
       <a data-ignore="push" href="https://twitter.com/share" class="twitter-share-button" data-url="http://goratchet.com" data-text="Ratchet &#8211; Build mobile apps with simple HTML, CSS, and JS components." data-via="GoRatchet">Tweet</a>

docs/assets/css/docs.css

@@ -353,6 +353,11 @@ body {
   color: rgba(255, 255, 255, 0.8);
 }
 
+.github-btn {
+  border: 0;
+  overflow: hidden;
+}
+
 .docs-component-toolbar {
   padding-top: 8px;
   padding-bottom: 8px;

docs/components.html

@@ -508,7 +508,7 @@ title: Components · Ratchet
       <ul class="table-view">
         <li class="table-view-cell media">
           <a class="push-right">
-            <img class="media-object pull-left" src="http://placehold.it/42x42">
+            <img class="media-object pull-left" src="http://placehold.it/42x42" alt="Placeholder image">
             <div class="media-body">
               Item 1
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
@@ -517,7 +517,7 @@ title: Components &middot; Ratchet
         </li>
         <li class="table-view-cell media">
           <a class="push-right">
-            <img class="media-object pull-left" src="http://placehold.it/42x42">
+            <img class="media-object pull-left" src="http://placehold.it/42x42" alt="Placeholder image">
             <div class="media-body">
               Item 1
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
@@ -526,7 +526,7 @@ title: Components &middot; Ratchet
         </li>
         <li class="table-view-cell media">
           <a class="push-right">
-            <img class="media-object pull-left" src="http://placehold.it/42x42">
+            <img class="media-object pull-left" src="http://placehold.it/42x42" alt="Placeholder image">
             <div class="media-body">
               Item 1
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
@@ -772,7 +772,7 @@ title: Components &middot; Ratchet
   </article>
 
   <!-- Buttons -->
-  <article class="component" id="buttons">
+  <article class="component" id="buttonsWithIcons">
     <h3 class="component-title">Buttons with icons</h3>
     <p class="component-description">Ratchicons work inside buttons too.</p>
 
@@ -1149,17 +1149,17 @@ document
         <div class="slider" id="mySlider">
           <div class="slide-group">
             <div class="slide">
-              <img src="../assets/img/slide-1.png">
+              <img src="../assets/img/slide-1.png" alt="Mountain and sky">
               <span class="slide-text">
                 <span class="icon icon-left-nav"></span>
                 Slide me
               </span>
             </div>
             <div class="slide">
-              <img src="../assets/img/slide-2.png">
+              <img src="../assets/img/slide-2.png" alt="Giant mecha">
             </div>
             <div class="slide">
-              <img src="../assets/img/slide-3.png">
+              <img src="../assets/img/slide-3.png" alt="Big Ben">
             </div>
           </div>
         </div>

docs/examples.html

@@ -26,19 +26,19 @@ title: Examples · Ratchet
       <div class="docs-example-group">
         <div class="example-wrap">
           <a class="example" href="../examples/app-movies" data-ignore="push">
-            <img src="../assets/img/example.png">
+            <img src="../assets/img/example.png" alt="Movie finder app example">
           </a>
           <h5>Movie finder</h5>
         </div>
         <div class="example-wrap">
           <a class="example" href="../examples/app-ios-mail" data-ignore="push">
-            <img src="../assets/img/example-ios.png">
+            <img src="../assets/img/example-ios.png" alt="iOS mail app example">
           </a>
           <h5>iOS mail app</h5>
         </div>
         <div class="example-wrap">
           <a class="example" href="../examples/app-android-notes" data-ignore="push">
-            <img src="../assets/img/example-android.png">
+            <img src="../assets/img/example-android.png" alt="Android notes app example">
           </a>
           <h5>Android notes app</h5>
         </div>

docs/examples/app-movies/index.html

@@ -28,13 +28,13 @@
       <div class="slider">
         <div class="slide-group">
           <div class="slide">
-            <img src="img/argo.png">
+            <img src="img/argo.png" alt="Argo">
           </div>
           <div class="slide">
-             <img src="img/skyfall.png">
+             <img src="img/skyfall.png" alt="Skyfall">
           </div>
           <div class="slide">
-             <img src="img/ralph.png">
+             <img src="img/ralph.png" alt="Wreck-It Ralph">
           </div>
         </div>
       </div>
@@ -43,7 +43,7 @@
         <li class="table-view-cell table-view-divider">Recommended movies</li>
         <li class="table-view-cell media">
           <a class="push-right" href="choose-theater.html" data-transition="slide-in">
-            <img class="media-object pull-left" src="http://placehold.it/64x64">
+            <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Argo's poster">
             <div class="media-body">
               Argo
               <p>Lorem ipsum dolor sit amet, consectetur.</p>
@@ -52,7 +52,7 @@
         </li>
         <li class="table-view-cell media">
           <a class="push-right" href="choose-theater.html" data-transition="slide-in">
-            <img class="media-object pull-left" src="http://placehold.it/64x64">
+            <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Skyfall's poster">
             <div class="media-body">
               Skyfall: 007
               <p>Lorem ipsum dolor sit amet, consectetur.</p>
@@ -61,7 +61,7 @@
         </li>
         <li class="table-view-cell media">
           <a class="push-right" href="choose-theater.html" data-transition="slide-in">
-            <img class="media-object pull-left" src="http://placehold.it/64x64">
+            <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Wreck-it Ralph's poster">
             <div class="media-body">
               Wreck-it Ralph
               <p>Lorem ipsum dolor sit amet, consectetur.</p>
@@ -70,7 +70,7 @@
         </li>
         <li class="table-view-cell media">
           <a class="push-right" href="choose-theater.html" data-transition="slide-in">
-            <img class="media-object pull-left" src="http://placehold.it/64x64">
+            <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Argo's poster">
             <div class="media-body">
               Argo
               <p>Lorem ipsum dolor sit amet, consectetur.</p>
@@ -79,7 +79,7 @@
         </li>
         <li class="table-view-cell media">
           <a class="push-right" href="choose-theater.html" data-transition="slide-in">
-            <img class="media-object pull-left" src="http://placehold.it/64x64">
+            <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Skyfall's poster">
             <div class="media-body">
               Skyfall: 007
               <p>Lorem ipsum dolor sit amet, consectetur.</p>
@@ -88,7 +88,7 @@
         </li>
         <li class="table-view-cell media">
           <a class="push-right" href="choose-theater.html" data-transition="slide-in">
-            <img class="media-object pull-left" src="http://placehold.it/64x64">
+            <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Wreck-it Ralph's poster">
             <div class="media-body">
               Wreck-it Ralph
               <p>Lorem ipsum dolor sit amet, consectetur.</p>
@@ -97,7 +97,7 @@
         </li>
         <li class="table-view-cell media">
           <a class="push-right" href="choose-theater.html" data-transition="slide-in">
-            <img class="media-object pull-left" src="http://placehold.it/64x64">
+            <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Argo's poster">
             <div class="media-body">
               Argo
               <p>Lorem ipsum dolor sit amet, consectetur.</p>
@@ -106,7 +106,7 @@
         </li>
         <li class="table-view-cell media">
           <a class="push-right" href="choose-theater.html" data-transition="slide-in">
-            <img class="media-object pull-left" src="http://placehold.it/64x64">
+            <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Skyfall's poster">
             <div class="media-body">
               Skyfall: 007
               <p>Lorem ipsum dolor sit amet, consectetur.</p>
@@ -115,7 +115,7 @@
         </li>
         <li class="table-view-cell media">
           <a class="push-right" href="choose-theater.html" data-transition="slide-in">
-            <img class="media-object pull-left" src="http://placehold.it/64x64">
+            <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Wreck-it Ralph's poster">
             <div class="media-body">
               Wreck-it Ralph
               <p>Lorem ipsum dolor sit amet, consectetur.</p>

package.json

@@ -37,6 +37,7 @@
     "grunt-contrib-sass": "~0.7.1",
     "grunt-contrib-uglify": "~0.3.0",
     "grunt-contrib-watch": "~0.5.3",
+    "grunt-html-validation": "~0.1.13",
     "grunt-jekyll": "~0.4.1",
     "load-grunt-tasks": "~0.4.0"
   }

sass/docs.scss

@@ -336,6 +336,11 @@ body {
   }
 }
 
+// Style the GitHub buttons via CSS instead of inline attributes
+.github-btn {
+  border: 0;
+  overflow: hidden;
+}
 
 // Platform toggle
 // --------------------------------------------------