Utility module quick reference

docs/quick_reference.html

@@ -1074,7 +1074,10 @@
               <div class="col-sm-12 col-md-6">
                 <h3>Notes</h3>
                 <ul>
-                  <li></li>
+                  <li>Use <code>.hidden</code> to hide elements</li>
+                  <li>Use <code>.visually-hidden</code> to show elements only in screen readers</li>
+                  <li>Both classes use <code><span class="fore-secondary">!important</span></code> declarations</li>
+                  <li>Do not use both classes together</li>
                 </ul>
               </div>
             </div>
@@ -1089,7 +1092,11 @@
               <div class="col-sm-12 col-md-6">
                 <h3>Notes</h3>
                 <ul>
-                  <li></li>
+                  <li>Use <code>.float-left</code> or <code>.float-right</code> for quick floats</li>
+                  <li>Use <code>.center-block</code> for centered blocks</li>
+                  <li>Use <code>.clearfix</code> to clear floats</li>
+                  <li>All classes use <code><span class="fore-secondary">!important</span></code> declarations</li>
+                  <li>Do not combine these classes with each other, except for <code>.clearfix</code></li>
                 </ul>
               </div>
             </div>
@@ -1107,7 +1114,12 @@
               <div class="col-sm-12 col-md-6">
                 <h3>Notes</h3>
                 <ul>
-                  <li></li>
+                  <li>Create generic borders using <code>.bordered</code></li>
+                  <li>Rounded and circular border radii available using <code>.rounded</code> and <code>.ciruclar</code> classes</li>
+                  <li>Generic shadows available using the <code>.shadow-small</code>, <code>.shadow-medium</code>, <code>.shadow-large</code> and <code>.shadow-none</code> classes</li>
+                  <li>Combine generic borders, border radii and generic shadows with each other but not with themselves</li>
+                  <li>All classes use <code><span class="fore-secondary">!important</span></code> declarations</li>
+                  <li>Generic borders work well with buttons</li>
                 </ul>
               </div>
             </div>
@@ -1120,7 +1132,9 @@
               <div class="col-sm-12 col-md-6">
                 <h3>Notes</h3>
                 <ul>
-                  <li></li>
+                  <li>Use the <code>.responsive-padding</code> and <code>.responsive-margin</code> classes to apply responsive padding or margin respectively to any element</li>
+                  <li>The two classes can be combined</li>
+                  <li>Both classes use <code><span class="fore-secondary">!important</span></code> declarations</li>
                 </ul>
               </div>
             </div>
@@ -1136,7 +1150,9 @@
               <div class="col-sm-12 col-md-6">
                 <h3>Notes</h3>
                 <ul>
-                  <li></li>
+                  <li>To create breadcrumbs, create a <code>&lt;ul</code> element implementing the <code>.breadcrumbs</code> class</li>
+                  <li>Do not use <code>&lt;ol&gt;</code> for breadcrumbs</li>
+                  <li>Do not nest lists inside the <code>.breadcrumbs</code></li>
                 </ul>
               </div>
             </div>
@@ -1148,7 +1164,9 @@
               <div class="col-sm-12 col-md-6">
                 <h3>Notes</h3>
                 <ul>
-                  <li></li>
+                  <li>Use the <code>.close</code> class to create a close icon</li>
+                  <li>Use a <code>&lt;span&gt;</code> or <code>&lt;div&gt;</code> element to create a close icon</li>
+                  <li>Use a button element implementing the <code>.close</code> class to stylize the close icon as a button</li>
                 </ul>
               </div>
             </div>

docs/utility.html

@@ -216,7 +216,7 @@
               <div class="row">
                 <div class="col-sm-12 col-md-6">
                   <pre>&lt;span class=&quot;bordered rounded shadow-small&quot;&gt;Stylized element&lt;/span&gt;</pre>
-                  <p class="do"><mark class="tertiary">Do:</mark>&nbsp;</p>
+                  <p class="do"><mark class="tertiary">Do:</mark>&nbsp;You can combine a generic border with any border radius or shadow or even both.</p>
                 </div>
                 <div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
                   <pre>&lt;span class=&quot;rounded circular&quot;&gt;Bad radius&lt;/span&gt;
@@ -247,6 +247,7 @@
             <h3>Notes</h3>
               <ul>
                 <li>If the default values of these classes are not suited to your needs, check out the <a href="customization.html">customization</a> page.</li>
+                <li>Both classes utilize <code><span class="fore-secondary">!important</span></code> declarations, so be careful when and how to use them.</li>
               </ul>
               <hr>
               <div class="row">

docs/v2/DEVLOG.md

@@ -688,3 +688,4 @@
 - Documented `tab` in `quick reference`.
 - Documented `contextual` in `quick reference`.
 - Documented `progress` in `quick reference`.
+- Documented `utility` in `quick reference`.