Remove visibility depreciation and seprate utility section!

diff --git a/docs/pages/visibility.md b/docs/pages/visibility.md
index 938486d32c04d576bf33b2e48082b4ca2f07a230..381b89d1f0c6e2b50acbd61a9263f164ca02b48b 100644 (file)
--- a/docs/pages/visibility.md
+++ b/docs/pages/visibility.md
@@ -16,10 +16,6 @@ tags:
   <p>There are no classes to detect touchscreen devices, as both desktop and mobile browsers inconsistently report touch support. Learn more here: <a href="http://www.stucox.com/blog/you-cant-detect-a-touchscreen/">You Can't Detect a Touchscreen</a></p>
 </div>
 
-<div class="callout alert">
-  <p><strong>Depreciation Notice:</strong> From v6.5.x, we are moving visibility classes to <a href="prototyping-utilities.html">Prototype specific mode</a> and thus visibility classes will be disabled by default. You can re-enable it though, with a simple `@include`.</p>
-</div>
-
 ## Show by Screen Size
 
 In this example, we use the `.show` visibility classes to show certain strings of text based on the device on which users view a page. If their browser meets the class's conditions, the element will be shown. If not, it will be hidden.

diff --git a/docs/partials/component-list.html b/docs/partials/component-list.html
index ae0923bad0837825826b19a26d32764b63d7918b..fae9da3f427cbfa2c038606caf08a8a97f712be9 100644 (file)
--- a/docs/partials/component-list.html
+++ b/docs/partials/component-list.html
@@ -39,14 +39,22 @@
       </div>
     </li>
 
-    <li class="accordion-item {{#ifpage 'xy-grid' 'grid' 'flex-grid' 'forms' 'visibility' 'float-classes'}}is-active{{/ifpage}}" data-accordion-item>
+    <li class="accordion-item {{#ifpage 'xy-grid' 'grid' 'flex-grid' 'forms'}}is-active{{/ifpage}}" data-accordion-item>
       <a href="#" class="accordion-title">General</a>
-      <div class="accordion-content {{#ifpage 'xy-grid' 'grid' 'flex-grid' 'forms' 'visibility' 'float-classes'}}is-active{{/ifpage}}" data-tab-content>
+      <div class="accordion-content {{#ifpage 'xy-grid' 'grid' 'flex-grid' 'forms'}}is-active{{/ifpage}}" data-tab-content>
         <ul class="docs-nav-subcategory">
           <li{{#ifpage 'xy-grid'}} class="current"{{/ifpage}}><a href="xy-grid.html">XY Grid <span class="label">New</span></a></li>
           <li{{#ifpage 'grid'}} class="current"{{/ifpage}}><a href="grid.html">Float Grid<span class="label">Legacy</span></a></li>
           <li{{#ifpage 'flex-grid'}} class="current"{{/ifpage}}><a href="flex-grid.html">Flex Grid<span class="label">Legacy</span></a></li>
           <li{{#ifpage 'forms'}} class="current"{{/ifpage}}><a href="forms.html">Forms</a></li>
+        </ul>
+      </div>
+    </li>
+
+    <li class="accordion-item {{#ifpage 'prototyping-utilities' 'flexbox-utilities' 'visibility' 'float-classes'}}is-active{{/ifpage}}" data-accordion-item>
+      <a href="#" class="accordion-title">Utilities</a>
+      <div class="accordion-content {{#ifpage 'prototyping-utilities' 'flexbox-utilities' 'visibility' 'float-classes'}}is-active{{/ifpage}}" data-tab-content>
+        <ul class="docs-nav-subcategory">
           <li{{#ifpage 'prototyping-utilities'}} class="current"{{/ifpage}}><a href="prototyping-utilities.html">Prototyping Utilities</a></li>
           <li{{#ifpage 'flexbox-utilities'}} class="current"{{/ifpage}}><a href="flexbox-utilities.html">Flexbox Utilities</a></li>
           <li{{#ifpage 'visibility'}} class="current"{{/ifpage}}><a href="visibility.html">Visibility Classes</a></li>