From 78937cbb39f349f0b85675b9b8f4e55ce874975a Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 5 Mar 2017 13:03:05 -0600
Subject: [PATCH] move visibility docs and add .visible mention
---
docs/_data/nav.yml | 2 +-
docs/utilities/invisible-content.md | 23 ---------------------
docs/utilities/visibility.md | 32 +++++++++++++++++++++++++++++
3 files changed, 33 insertions(+), 24 deletions(-)
delete mode 100644 docs/utilities/invisible-content.md
create mode 100644 docs/utilities/visibility.md
diff --git a/docs/_data/nav.yml b/docs/_data/nav.yml
index 0bb714b0fa..cf3bd929e3 100644
--- a/docs/_data/nav.yml
+++ b/docs/_data/nav.yml
@@ -59,7 +59,6 @@
- title: Display
- title: Flexbox
- title: Image replacement
- - title: Invisible content
- title: Position
- title: Responsive helpers
- title: Screenreaders
@@ -67,6 +66,7 @@
- title: Spacing
- title: Typography
- title: Vertical align
+ - title: Visibility
- title: Extend
pages:
diff --git a/docs/utilities/invisible-content.md b/docs/utilities/invisible-content.md
deleted file mode 100644
index 84da6ad012..0000000000
--- a/docs/utilities/invisible-content.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-layout: docs
-title: Invisible content
-group: utilities
----
-
-The `.invisible` class can be used to toggle only the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document.
-
-{% highlight html %}
-<div class="invisible">...</div>
-{% endhighlight %}
-
-{% highlight scss %}
-// Class
-.invisible {
- visibility: hidden;
-}
-
-// Usage as a mixin
-.element {
- @include invisible;
-}
-{% endhighlight %}
diff --git a/docs/utilities/visibility.md b/docs/utilities/visibility.md
new file mode 100644
index 0000000000..5b7d28664b
--- /dev/null
+++ b/docs/utilities/visibility.md
@@ -0,0 +1,32 @@
+---
+layout: docs
+title: Visibility
+group: utilities
+---
+
+Set the `visibility` of elements with our visibility utilities. These do not modify the `display` value at all and are helpful for hiding content from most users, but still keeping them for screen readers.
+
+Apply `.visible` or `.invisible` as needed.
+
+{% highlight html %}
+<div class="visible">...</div>
+<div class="invisible">...</div>
+{% endhighlight %}
+
+{% highlight scss %}
+// Class
+.visible {
+ visibility: visible;
+}
+.invisible {
+ visibility: hidden;
+}
+
+// Usage as a mixin
+.element {
+ @include invisible(visible);
+}
+.element {
+ @include invisible(hidden);
+}
+{% endhighlight %}
--
GitLab