minor improvements

ResponsiveDesign/src/main/webapp/index.xhtml

@@ -13,7 +13,7 @@
                 <div style="height: 10px" />
                 <ui:include src="large.xhtml" />
             </b:tab>
-            <b:tab title="medium">
+            <b:tab title="medium (default)">
                 <div style="height: 10px" />
                 <ui:include src="medium.xhtml" />
             </b:tab>
@@ -23,5 +23,28 @@
             </b:tab>
         </b:tabView>
     </b:container>
+ <!-- Piwik -->
+  <script type="text/javascript">
+      var _paq = _paq || [];
+      _paq.push([ 'trackPageView' ]);
+      _paq.push([ 'enableLinkTracking' ]);
+      (function() {
+        var u = "//www.atapuerca.de/piwik/";
+        _paq.push([ 'setTrackerUrl', u + 'piwik.php' ]);
+        _paq.push([ 'setSiteId', 4 ]);
+        var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
+        g.type = 'text/javascript';
+        g.async = true;
+        g.defer = true;
+        g.src = u + 'piwik.js';
+        s.parentNode.insertBefore(g, s);
+      })();
+    </script>
+  <noscript>
+    <p>
+      <img src="//www.atapuerca.de/piwik/piwik.php?idsite=4" style="border: 0;" alt="" />
+    </p>
+  </noscript>
+  <!-- End Piwik Code -->
 </h:body>
 </html>

ResponsiveDesign/src/main/webapp/large.xhtml

@@ -7,26 +7,26 @@
     <b:row>
         <b:column col-lg="8">
             <b:panel look="primary" title="b:column col-lg='8'">
-                Eight columns on large screens.<br /> Stacked on screens smaller than 1200 pixels width.
+                Eight columns on large desktop screens.<br /> Stacked on screens smaller than 1200 pixels width.
                 <br />
                 <br />
             </b:panel>
         </b:column>
         <b:column col-lg="4">
             <b:panel look="primary" title="b:column col-lg='4'">
-                Four columns on large screens. Stacked on screens smaller than 1200 pixels width.
+                Four columns on large desktop screens. Stacked on screens smaller than 1200 pixels width.
             </b:panel>
         </b:column>
     </b:row>
     <b:row>
         <b:column col-lg="4">
             <b:panel look="primary" title="b:column col-lg='4'">
-                Four columns on large screens. Stacked on screens smaller than 1200 pixels width.
+                Four columns on large desktop screens. Stacked on screens smaller than 1200 pixels width.
             </b:panel>
         </b:column>
         <b:column col-lg="8">
             <b:panel look="primary" title="b:column col-lg='8'">
-                Eight columns on large screens. Stacked on screens smaller than 1200 pixels width.
+                Eight columns on large desktop screens. Stacked on screens smaller than 1200 pixels width.
             </b:panel>
         </b:column>
     </b:row>

ResponsiveDesign/src/main/webapp/medium.xhtml

@@ -1,33 +1,30 @@
-<ui:fragment xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:h="http://java.sun.com/jsf/html"  
-      xmlns:ui="http://java.sun.com/jsf/facelets"
-      xmlns:b="http://bootsfaces.net/ui"
-      xmlns:f="http://java.sun.com/jsf/core">
+<ui:fragment xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"
+    xmlns:b="http://bootsfaces.net/ui" xmlns:f="http://java.sun.com/jsf/core">
 
     <b:row>
-        <b:column col-md="8">
-            <b:panel look="primary" title="b:column col-md='8'">
-                Eight columns on medium screens.<br /> Stacked on screens smaller than 992 pixels width.
-                <br />
+        <b:column span="8">
+            <b:panel look="primary" title="b:column span='8'">
+            Eight columns on medium screens (e.g. small desktop and notebook screens).<br /> Stacked on screens smaller than 992 pixels width.
+            <br />
                 <br />
             </b:panel>
         </b:column>
-        <b:column col-md="4">
-            <b:panel look="primary" title="b:column col-md='4'">
-                Four columns on medium screens. Stacked on screens smaller than 992 pixels width.
-            </b:panel>
+        <b:column span="4">
+            <b:panel look="primary" title="b:column span='4'">
+            Four columns on medium screens (e.g. small desktop and notebook screens). Stacked on screens smaller than 992 pixels width.
+        </b:panel>
         </b:column>
     </b:row>
     <b:row>
-        <b:column col-md="4">
-            <b:panel look="primary" title="b:column col-md='4'">
-                Four columns on medium screens. Stacked on screens smaller than 992 pixels width.
-            </b:panel>
+        <b:column span="4">
+            <b:panel look="primary" title="b:column span='4'">
+            Four columns on medium screens (e.g. small desktop and notebook screens). Stacked on screens smaller than 992 pixels width.
+        </b:panel>
         </b:column>
-        <b:column col-md="8">
-            <b:panel look="primary" title="b:column col-md='8'">
-                Eight columns on medium screens. Stacked on screens smaller than 992 pixels width.
-            </b:panel>
+        <b:column span="8">
+            <b:panel look="primary" title="b:column span='8'">
+            Eight columns on medium screens (e.g. small desktop and notebook screens). Stacked on screens smaller than 992 pixels width.
+        </b:panel>
         </b:column>
     </b:row>
 </ui:fragment>

ResponsiveDesign/src/main/webapp/small.xhtml

@@ -7,26 +7,26 @@
     <b:row>
         <b:column col-sm="8">
             <b:panel look="primary" title="b:column col-sm='8'">
-                Eight columns on small screens.<br /> Stacked on screens smaller than 768 pixels width.
+                Eight columns on small screens (e.g. tablets).<br /> Stacked on screens smaller than 768 pixels width.
                 <br />
                 <br />
             </b:panel>
         </b:column>
         <b:column col-sm="4">
             <b:panel look="primary" title="b:column col-sm='4'">
-                Four columns on small screens. Stacked on screens smaller than 768 pixels width.
+                Four columns on small screens (e.g. tablets). Stacked on screens smaller than 768 pixels width.
             </b:panel>
         </b:column>
     </b:row>
     <b:row>
         <b:column col-sm="4">
             <b:panel look="primary" title="b:column col-sm='4'">
-                Four columns on small screens. Stacked on screens smaller than 768 pixels width.
+                Four columns on small screens (e.g. tablets). Stacked on screens smaller than 768 pixels width.
             </b:panel>
         </b:column>
         <b:column col-sm="8">
             <b:panel look="primary" title="b:column col-sm='8'">
-                Eight columns on small screens. Stacked on screens smaller than 768 pixels width.
+                Eight columns on small screens (e.g. tablets). Stacked on screens smaller than 768 pixels width.
             </b:panel>
         </b:column>
     </b:row>