From: Geoff Kimball <geoff@zurb.com>
Date: Mon, 15 Feb 2016 18:42:04 +0000 (-0800)
Subject: Add section to responsive navigation docs explaining how to prevent FOUC, closes... 
X-Git-Tag: v6.2.0-rc.1~2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=fc77712b95a507e81ac04403053aca8ea968861a;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Add section to responsive navigation docs explaining how to prevent FOUC, closes #7083
---

diff --git a/docs/pages/responsive-navigation.md b/docs/pages/responsive-navigation.md
index 8023b0cb0..8de17b166 100644
--- 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;
+    }
+  }
+}
+```