Updated breadcrumbs and alerts for accesibility, documented tooltips

docs/contextual.html

@@ -43,7 +43,7 @@
     <!-- Insert your page content here-->
     <main><div class="container">
       <div class="row" style="padding-top: 40px;">
-        <div class="col-sm">
+        <div class="col-sm col-lg-10 col-lg-offset-1">
           <h1>Contextual</h1>
           <p>The <strong>contextual</strong> module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. The contextual alerts aim to replace the commonly used modal dialog design paradigm with a more modern one. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily.</p>
           <p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p>
@@ -51,7 +51,7 @@
         </div>
       </div>
       <div class="row">
-        <div class="col-sm">
+        <div class="col-sm col-lg-10 col-lg-offset-1">
           <div class="card fluid">
             <div class="section">
               <h2>Quick overview</h2>
@@ -66,7 +66,7 @@
         </div>
       </div>
       <div class="row">
-        <div class="col-sm">
+        <div class="col-sm col-lg-10 col-lg-offset-1">
           <div class="card fluid">
             <div class="section"><h2>Text highlighting</h2></div>
             <div class="section row">
@@ -125,7 +125,7 @@
         </div>
       </div>
       <div class="row">
-        <div class="col-sm">
+        <div class="col-sm col-lg-10 col-lg-offset-1">
           <div class="card fluid">
             <div class="section"><h2>Alerts</h2></div>
             <div class="section row">
@@ -157,6 +157,7 @@
             <h3>Notes</h3>
               <ul>
                 <li>Alert elements do not have any pre-defined behavior. You should use your own Javascript code and interactive HTML elements to deal with showing and hiding them as necessary.</li>
+				<li>If you want to make your alerts more accessible, we suggest you add either the <code><span class="fore-secondary">role</span>=<span class="fore-primary">&quot;<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role">alert</a>&quot;</span></code> attribute or the <code><span class="fore-secondary">role</span>=<span class="fore-primary">&quot;<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role">alertdialog</a>&quot;</span></code> attribute, depending on the behavior you are planning to implement for your alerts.</li>
               </ul><hr>
               <div class="row">
                 <div class="col-sm-12 col-md-6">
@@ -175,7 +176,7 @@
         </div>
       </div>
       <div class="row">
-        <div class="col-sm">
+        <div class="col-sm col-lg-10 col-lg-offset-1">
           <div class="card fluid">
             <div class="section"><h2>Animated alerts</h2></div>
             <div class="section row">
@@ -210,8 +211,37 @@
           </div>
         </div>
       </div>
+	  <div class="row">
+		<div class="col-sm col-lg-10 col-lg-offset-1">
+		  <div class="card fluid">
+			<div class="section"><h2>Tooltips</h2></div>
+			<div class="section row">
+			  <div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
+			  <div>
+				<br /><p class="tooltip" aria-label="This is a tooltip">Hover over this text to see a tooltip!</p><br />
+				<p class="tooltip bottom" aria-label="This is a tooltip">Hover over this text to see a reverse tooltip!</p><br />
+			  </div>
+			  </div>
+			  <div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
+				<p>Tooltips can be used to convey context-sensitive information when the user hovers over some text. To create a tooltip, simply wrap the text you want users to hover over in an element with the <code>.tooltip</code> class (our choice is usually a <code>&lt;span&gt;</code> element, but your needs may differ) and add an <code><span class="fore-secondary">aria-label</span></code> in that element, setting its value to the content of your tooltip. Tooltips display at the top of the hovered text by default, so if you want to show them below the text, add the <code>.bottom</code> class to them.</p>
+				<h3>Sample code</h3>
+				<pre>&lt;span class=&quot;tooltip&quot; aria-label=&quot;This is a tooltip&quot;&gt;Hover over this text to see a tooltip!&lt;/span&gt;
+&lt;span class=&quot;tooltip bottom&quot; aria-label=&quot;This is a tooltip&quot;&gt;Hover over this text to see a reverse tooltip!&lt;/span&gt;</pre>
+			  </div>
+			</div>
+			<div class="section">
+			<h3>Notes</h3>
+			  <ul>
+				<li>Tooltips are built to be accessible and should display properly on screenreaders.</li>
+				<li>If you are not satisfied with the default tooltip colors, please check out the <a href="customization.html">customization page</a> for instuctions on how to create your own tooltip variants.</li>
+				<li>Rembmer to always add the <code><span class="fore-secondary">aria-label</span></code> attribute, otherwise your tooltip will not have any text to show.</li>
+			  </ul>
+			</div>
+		  </div>
+		</div>
+	  </div>
       <div class="row" style="padding-bottom: 20px; padding-top:20px;">
-        <div class="col-sm">
+        <div class="col-sm col-lg-10 col-lg-offset-1">
           <p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
         </div>
       </div>

docs/utility.html

@@ -194,6 +194,7 @@
               <ul>
                 <li>The separators between breadcrumbs are added using some tricky CSS rules. Due to that, there might be a few browser versions or devices where you can see part of the seams between the element separators.</li>
                 <li>Breadcrumbs show a hierarchy, an ordered list. However, we do not use the <code>&lt;ol&gt;</code> element, as it might conflict with some custom styles we've seen people use.</li>
+				<li>If you want to add some accesibility to your breadcrumbs, you can add the <code><span class="fore-secondary">role</span>=<span class="fore-primary">&quot;<a href="https://www.w3.org/TR/wai-aria/roles#navigation">navigation</a>&quot;</span></code> attribute, although it is not required.</li>
               </ul><hr>
               <div class="row">
                 <div class="col-sm-12 col-md-6">

docs/v2/DEVLOG.md

@@ -852,3 +852,9 @@
 - Updated `progress.html` with an accessibility guideline and new layout.
 - Updated `card.html` with new layout.
 - Updated `table.html` with new layout.
+
+## 20170212
+
+- Added accessibility guidelines for `breadcrumbs`.
+- Added accessibility guidelines for `alert`s.
+- Documented `tooltip`. No *dos* and *don'ts* seem to be required, as the use cases are really really simple.