Add section to responsive navigation docs explaining how to prevent FOUC, closes...

diff --git a/docs/pages/responsive-navigation.md b/docs/pages/responsive-navigation.md
index 8023b0cb031654f58e9af52fa1871d10767f4642..8de17b1668d4c231b9ea39c35c4b876ef7b0dcde 100644 (file)
--- a/docs/pages/responsive-navigation.md
+++ b/docs/pages/responsive-navigation.md
@@ -102,3 +102,45 @@ By default, the title bar will be visible on small screens, and the Menu hides.
   </div>
 </div>
 ```
+
+---
+
+### Preventing FOUC
+
+Before the JavaScript on your page loads, you'll be able to see both the mobile and desktop element at once for a brief second. This is known as a [flash of unstyled content](https://en.wikipedia.org/wiki/Flash_of_unstyled_content). There's not an easy way for the framework to handle this for you, but you can add some extra CSS to account for it.
+
+If we reference the above example, `.title-bar` is our mobile element and `.top-bar` is our desktop element. So before the JavaScript loads, we want only the right element for that screen size to be visible.
+
+```css
+.no-js .top-bar {
+  display: none;
+}
+
+@media screen and (min-width: 40em) {
+  .no-js .top-bar {
+    display: block;
+  }
+
+  .no-js .title-bar {
+    display: none;
+  }
+}
+```
+
+If you're using Sass, you can write it like this:
+
+```scss
+.no-js {
+  @include breakpoint(small only) {
+    .top-bar {
+      display: none;
+    }
+  }
+
+  @include breakpoint(medium) {
+    .title-bar {
+      display: none;
+    }
+  }
+}
+```